"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DEZRGktf.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const a=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"ListItem",description:`A list item component for displaying items in dropdowns and menus with
          support for icons, labels, and custom content.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.ListMinus,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"Basic List Items"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Item 1"}),e.jsx(s.ListItem,{id:"2",label:"Item 2"}),e.jsx(s.ListItem,{id:"3",label:"Item 3"})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Home",icon:e.jsx(t.Home,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"2",label:"Settings",icon:e.jsx(t.Settings,{className:"w-4 h-4"})}),e.jsx(s.ListItem,{id:"3",label:"Profile",icon:e.jsx(t.User,{className:"w-4 h-4"})})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"States"}),e.jsxs("ul",{className:"space-y-1",children:[e.jsx(s.ListItem,{id:"1",label:"Active Item",active:!0}),e.jsx(s.ListItem,{id:"2",label:"Normal Item"}),e.jsx(s.ListItem,{id:"3",label:"Disabled Item",disabled:!0})]})]}),e.jsxs(s.CardContainer,{className:"p-4",children:[e.jsx(s.Typography,{tag:"h5",className:"mb-3",children:"With Custom Content"}),e.jsx("ul",{className:"space-y-1",children:e.jsx(s.ListItem,{id:"1",content:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(t.Star,{className:"w-4 h-4"}),e.jsx("span",{children:"Custom Content"})]})})})]})]})})})}),e.jsx(s.PropPlayground,{componentName:"ListItem",defaultValues:{label:"List Item",active:!1,disabled:!1},excludeProps:["onClick","content","icon","id"],children:i=>e.jsx(s.ListItem,{...i})}),e.jsx(s.AutoPropsTable,{componentName:"ListItem"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { ListItem, LucideIcons } from '@e-burgos/tucu-ui';

// Basic usage
<ul>
  <ListItem id="1" label="Item 1" />
  <ListItem id="2" label="Item 2" />
</ul>

// With icons
<ListItem
  id="1"
  label="Home"
  icon={<LucideIcons.Home className="w-4 h-4" />}
/>

// With states
<ListItem id="1" label="Active" active />
<ListItem id="2" label="Disabled" disabled />

// With custom content
<ListItem
  id="1"
  content={
    <div className="flex items-center gap-2">
      <LucideIcons.Star className="w-4 h-4" />
      <span>Custom</span>
    </div>
  }
/>

// With onClick
<ListItem
  id="1"
  label="Clickable"
  onClick={() => handleClick()}
/>`})})})})]});exports.default=a;
