"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-DEZRGktf.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>{const[n,o]=r.useState(!1),s=[{id:"1",label:"Edit",icon:e.jsx(t.Edit,{className:"w-4 h-4"}),onClick:()=>console.log("Edit clicked")},{id:"2",label:"Delete",icon:e.jsx(t.Trash,{className:"w-4 h-4"}),onClick:()=>console.log("Delete clicked")},{id:"3",label:"Share",icon:e.jsx(t.Share,{className:"w-4 h-4"}),onClick:()=>console.log("Share clicked")}];return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"ListContainer",description:`A dropdown container component for displaying lists of items with
          customizable trigger and positioning.`,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-green-500 to-emerald-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(t.List,{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(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.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:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"Hover Trigger"}),e.jsx(i.ListContainer,{items:s,trigger:"hover"})]}),e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"Click Trigger"}),e.jsx(i.ListContainer,{items:s,trigger:"click",isOpen:n,onOpenChange:o})]}),e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"With Custom Icon"}),e.jsx(i.ListContainer,{items:s,triggerIcon:e.jsx(t.Activity,{className:"w-4! h-4!"})})]}),e.jsxs(i.CardContainer,{className:"p-4",children:[e.jsx(i.Typography,{tag:"h5",className:"mb-3",children:"Different Positions"}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(i.ListContainer,{items:s,position:"top"}),e.jsx(i.ListContainer,{items:s,position:"right"}),e.jsx(i.ListContainer,{items:s,position:"left"})]})]})]})})})}),e.jsx(i.PropPlayground,{componentName:"ListContainer",title:"ListContainer Playground",defaultValues:{label:"Select an option",position:"bottom",align:"start",trigger:"click",isOpen:!0,keepOpen:!1},excludeProps:["items","onOpenChange","triggerIcon","className","dropdownClassName"],children:a=>e.jsx(i.ListContainer,{...a,items:[{label:"Option 1",onClick:()=>{}},{label:"Option 2",onClick:()=>{}},{label:"Option 3",onClick:()=>{}}]})}),e.jsx(i.AutoPropsTable,{componentName:"ListContainer"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { ListContainer, ListItem, LucideIcons } from '@e-burgos/tucu-ui';

const items = [
  {
    id: '1',
    label: 'Edit',
    icon: <LucideIcons.Edit className="w-4 h-4" />,
    onClick: () => handleEdit(),
  },
  {
    id: '2',
    label: 'Delete',
    icon: <LucideIcons.Trash className="w-4 h-4" />,
    onClick: () => handleDelete(),
  },
];

// Hover trigger
<ListContainer items={items} trigger="hover" />

// Click trigger
<ListContainer
  items={items}
  trigger="click"
  isOpen={isOpen}
  onOpenChange={setIsOpen}
/>

// With custom icon
<ListContainer
  items={items}
  triggerIcon={<LucideIcons.MoreVertical className="w-5 h-5" />}
/>

// Different positions
<ListContainer items={items} position="top" />
<ListContainer items={items} position="right" />
<ListContainer items={items} position="bottom" />`})})})})]})};exports.default=l;
