export declare const BasicUsageExampleCode = "import {\n  Button,\n  CardContainer,\n  Avatar,\n  ThemeProvider,\n  Typography,\n  Badge,\n  LucideIcons,\n} from '@e-burgos/tucu-ui';\nimport '@e-burgos/tucu-ui/styles';\n\nfunction App() {\n  return (\n    <ThemeProvider\n      showSettings\n      logo={{\n        name: 'My',\n        secondName: 'App',\n      }}\n      rightButton={\n        <Button variant=\"ghost\" size=\"small\">\n          Documentation\n        </Button>\n      }\n      menuItems={[\n        {\n          name: 'Home',\n          path: '/',\n          icon: <LucideIcons.Home />,\n          component: <Home />,\n        },\n        {\n          name: 'About',\n          path: '/about',\n          icon: <LucideIcons.Info />,\n          component: <About />,\n        },\n      ]}\n    />\n  );\n}\n\nexport default App;\n\nexport const Home = (): JSX.Element => {\n  const avatarImg =\n    'https://e7.pngegg.com/pngimages/799/987/png-clipart-computer-icons-avatar-icon-design-avatar-heroes-computer-wallpaper-thumbnail.png';\n\n  return (\n    <CardContainer className=\"flex flex-col items-center justify-center p-6 gap-4\">\n      <Avatar image={avatarImg} alt=\"Demo User\" size=\"md\" />\n      <div className=\"flex flex-col\">\n        <Typography tag=\"h3\" className=\"font-semibold mb-2 text-center\">\n          Welcome to Tucu UI\n        </Typography>\n        <div className=\"flex flex-wrap gap-2 justify-center sm:justify-start\">\n          <Badge status=\"active\">Production Ready</Badge>\n          <Badge variant=\"outline\" color=\"info\">\n            TypeScript\n          </Badge>\n          <Badge variant=\"outline\" color=\"success\">\n            React Hook Form\n          </Badge>\n          <Badge variant=\"outline\" color=\"warning\">\n            Tailwind CSS\n          </Badge>\n        </div>\n      </div>\n      <Button size=\"large\" shape=\"rounded\" variant=\"solid\" color=\"primary\">\n        <div className=\"flex justify-center items-center\">\n          <LucideIcons.Zap className=\"w-4 h-4 mr-2\" />\n          Get Started\n        </div>\n      </Button>\n    </CardContainer>\n  );\n};\n\nexport const About = (): JSX.Element => {\n  return (\n    <CardContainer className=\"flex flex-col items-center justify-center p-6 gap-4\">\n      <div className=\"flex flex-col w-full px-4\">\n        <Typography tag=\"h3\" className=\"font-semibold mb-2 text-center\">\n          About My App\n        </Typography>\n        <div className=\"flex flex-wrap gap-2 justify-center sm:justify-start\">\n          <ul className=\"list-disc list-inside\">\n            <li className=\"mb-2\">\n              This is a demo app built with Tucu UI, React, and Tailwind CSS.\n            </li>\n            <li className=\"mb-2\">\n              It is a simple app that allows you to manage your tasks and\n              projects.\n            </li>\n            <li className=\"mb-2\">\n              All the components are built with Tucu UI and are fully\n              responsive.\n            </li>\n            <li className=\"mb-2\">\n              The app is fully responsive and works on all devices.\n            </li>\n            <li className=\"mb-2\">Routes are handled with React Router.</li>\n            <li className=\"mb-2\">\n              Theme is handled with ThemeProvider and Zustand.\n            </li>\n            <li className=\"mb-2\">Icons are handled with Lucide React.</li>\n          </ul>\n        </div>\n      </div>\n    </CardContainer>\n  );\n};\n";
