@e-burgos/tucu-ui 1.1.1 → 2.0.0

package/LayoutTypesSection-D4eq7w9u.mjs

@@ -0,0 +1,239 @@
+import { jsx as e, jsxs as a, Fragment as d } from "react/jsx-runtime";
+import { ai as r, T as t, C as m, D as p } from "./index-Hq6IUBmn.mjs";
+import { Layout as h, Menu as g, Minimize2 as u, Zap as x, CheckCircle as v, Star as b, Check as f, Code as N } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const L = () => {
+  const o = [
+    {
+      name: "Admin Layout",
+      description: "Traditional admin layout with expandable sidebar and fixed header. Designed for complex applications with hierarchical navigation and multiple sections.",
+      icon: /* @__PURE__ */ e(h, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-blue-500 via-cyan-500 to-teal-500",
+      value: r.ADMIN,
+      useCases: [
+        "Dashboard applications",
+        "Admin panels and management systems",
+        "Complex applications with many navigation items",
+        "Applications requiring hierarchical menu structure",
+        "Enterprise software and internal tools",
+        "Applications with multiple sections and subsections"
+      ],
+      features: [
+        "Expandable sidebar navigation (visible on xl screens)",
+        "Fixed header with logo and action buttons",
+        "Responsive drawer menu for mobile devices",
+        "RTL/LTR direction support",
+        "Full-width content option available",
+        "Sidebar padding: 96px (xl) / 112px (2xl)",
+        "Content padding: 16px (mobile) / 24px (sm) / 32px (lg) / 40px (3xl)"
+      ],
+      technical: {
+        sidebar: "ExpandableSidebar component (hidden on mobile, visible xl+)",
+        header: "AdminHeader component with menu toggle",
+        drawer: "Drawer component for mobile navigation",
+        breakpoint: "Sidebar visible from xl breakpoint (1024px)"
+      }
+    },
+    {
+      name: "Horizontal Layout",
+      description: "Modern horizontal navigation layout with top menu bar. Ideal for content-focused sites, marketing pages, and applications with simple navigation.",
+      icon: /* @__PURE__ */ e(g, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-purple-500 via-violet-500 to-indigo-500",
+      value: r.HORIZONTAL,
+      useCases: [
+        "Content-focused websites",
+        "Marketing and landing pages",
+        "Simple applications with few navigation items",
+        "Portfolio and showcase sites",
+        "Blog and content management systems",
+        "Public-facing applications"
+      ],
+      features: [
+        "Horizontal top navigation menu",
+        "Sticky header with logo and action buttons",
+        "Mobile hamburger menu with drawer",
+        "Backdrop blur effects on header",
+        "Full-width content option available",
+        "Content padding: 8px (mobile) / 24px (sm) / 32px (lg) / 40px (3xl)",
+        "Minimal vertical space usage"
+      ],
+      technical: {
+        header: "HorizontalHeader component with horizontal menu",
+        menu: "HorizontalNavMenu component",
+        drawer: "Drawer component for mobile navigation",
+        breakpoint: "Horizontal menu visible on all screen sizes"
+      }
+    },
+    {
+      name: "Clean Layout",
+      description: "Minimal layout without navigation elements. Perfect for authentication pages, standalone content, and full-screen experiences.",
+      icon: /* @__PURE__ */ e(u, { className: "w-8 h-8 text-white filter drop-shadow-sm" }),
+      color: "from-emerald-500 via-green-500 to-teal-500",
+      value: r.CLEAN,
+      useCases: [
+        "Authentication pages (login, signup, password reset)",
+        "Landing pages and marketing sites",
+        "Standalone content pages",
+        "Full-screen applications",
+        "Modal and overlay content",
+        "Embedded widgets and components"
+      ],
+      features: [
+        "No navigation elements or headers",
+        "Full viewport height (100vh)",
+        "Flex column layout",
+        "Perfect for centered content",
+        "Minimal overhead and dependencies",
+        "No menu items required",
+        "Customizable via className prop"
+      ],
+      technical: {
+        structure: "Simple flex container with full height",
+        dependencies: "No header, sidebar, or menu components",
+        customization: "Full control via className prop",
+        useWhen: "No navigation needed, standalone content"
+      }
+    }
+  ];
+  return /* @__PURE__ */ a(d, { children: [
+    /* @__PURE__ */ a("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(t, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Layout Types" }),
+      /* @__PURE__ */ e(
+        t,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Three distinct layout patterns for various application types. Choose the right layout based on your application's navigation needs and structure."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "space-y-8", children: o.map((i, l) => /* @__PURE__ */ e(
+      m,
+      {
+        className: "group hover:shadow-large transition-all duration-300 overflow-hidden",
+        children: /* @__PURE__ */ a("div", { className: "w-full space-y-6 p-4 sm:p-6", children: [
+          /* @__PURE__ */ a("div", { className: "flex items-start gap-4", children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: `p-3 rounded-xl bg-gradient-to-br ${i.color} group-hover:scale-110 transition-all duration-300 shadow-lg shrink-0`,
+                children: i.icon
+              }
+            ),
+            /* @__PURE__ */ a("div", { className: "flex-1", children: [
+              /* @__PURE__ */ a("div", { className: "flex items-center gap-3 mb-2", children: [
+                /* @__PURE__ */ e(
+                  t,
+                  {
+                    tag: "h3",
+                    className: "font-semibold text-xl group-hover:text-primary transition-colors duration-300",
+                    children: i.name
+                  }
+                ),
+                /* @__PURE__ */ e(p, { variant: "outline", className: "text-xs", children: i.value })
+              ] }),
+              /* @__PURE__ */ e(
+                t,
+                {
+                  tag: "p",
+                  className: "text-gray-600 dark:text-gray-400 leading-relaxed",
+                  children: i.description
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(x, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "When to Use" })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-2", children: i.useCases.map((n, s) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: "flex items-start gap-2 p-2 bg-gray-100 dark:bg-gray-800 rounded-lg",
+                children: [
+                  /* @__PURE__ */ e(v, { className: "w-3 h-3 text-primary mt-1 shrink-0" }),
+                  /* @__PURE__ */ e(
+                    t,
+                    {
+                      tag: "span",
+                      className: "text-sm text-gray-700 dark:text-gray-300",
+                      children: n
+                    }
+                  )
+                ]
+              },
+              s
+            )) })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(b, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "Features" })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: i.features.map((n, s) => /* @__PURE__ */ a(
+              "div",
+              {
+                className: "flex items-start gap-2",
+                children: [
+                  /* @__PURE__ */ e(f, { className: "w-4 h-4 text-green-500 shrink-0 mt-0.5" }),
+                  /* @__PURE__ */ e(
+                    t,
+                    {
+                      tag: "span",
+                      className: "text-sm text-gray-600 dark:text-gray-400",
+                      children: n
+                    }
+                  )
+                ]
+              },
+              s
+            )) })
+          ] }),
+          /* @__PURE__ */ a("div", { className: "space-y-3 pt-3 border-t border-gray-200 dark:border-gray-700", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(N, { className: "w-5 h-5 text-primary" }),
+              /* @__PURE__ */ e(t, { tag: "h4", className: "font-semibold text-base", children: "Technical Details" })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "space-y-2", children: Object.entries(i.technical).map(
+              ([n, s], c) => /* @__PURE__ */ a(
+                "div",
+                {
+                  className: "flex items-start gap-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ a(
+                      t,
+                      {
+                        tag: "span",
+                        className: "font-medium text-gray-700 dark:text-gray-300 capitalize min-w-[100px]",
+                        children: [
+                          n.replace(/([A-Z])/g, " $1").trim(),
+                          ":"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      t,
+                      {
+                        tag: "span",
+                        className: "text-gray-600 dark:text-gray-400",
+                        children: s
+                      }
+                    )
+                  ]
+                },
+                c
+              )
+            ) })
+          ] })
+        ] })
+      },
+      l
+    )) })
+  ] });
+};
+export {
+  L as default
+};

package/ListContainerSection-CMukx5sM.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),t=require("./index-CjRk4ezu.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[n,a]=d.useState(!1),i=[{id:"1",label:"Edit",icon:e.jsx(r.Edit,{className:"w-4 h-4"}),onClick:()=>console.log("Edit clicked")},{id:"2",label:"Delete",icon:e.jsx(r.Trash,{className:"w-4 h-4"}),onClick:()=>console.log("Delete clicked")},{id:"3",label:"Share",icon:e.jsx(r.Share,{className:"w-4 h-4"}),onClick:()=>console.log("Share clicked")}],l=[{key:"prop",label:"Prop",render:s=>e.jsx("code",{className:"text-xs text-brand",children:String(s)})},{key:"type",label:"Type",render:s=>e.jsx("code",{className:"text-xs",children:String(s)})},{key:"default",label:"Default",render:s=>{const o=String(s);return o==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:o})}},{key:"description",label:"Description"}],c=[{prop:"items",type:"ListItemProps[]",default:"required",description:"Array of list items to display"},{prop:"label",type:"string",default:"-",description:"Label for the trigger button"},{prop:"triggerIcon",type:"React.ReactNode",default:"-",description:"Custom icon for the trigger"},{prop:"position",type:"'left' | 'right' | 'top' | 'bottom'",default:"'bottom'",description:"Position of the dropdown"},{prop:"align",type:"'start' | 'end' | 'center'",default:"'end'",description:"Alignment of the dropdown"},{prop:"trigger",type:"'hover' | 'click'",default:"'hover'",description:"Trigger type for opening the dropdown"},{prop:"keepOpen",type:"boolean",default:"false",description:"Whether to keep dropdown open after item click"}];return e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"text-center space-y-4",children:[e.jsx(t.Typography,{tag:"h2",className:"text-3xl md:text-4xl font-bold",children:"ListContainer"}),e.jsx(t.Typography,{tag:"p",className:"text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",children:"A dropdown container component for displaying lists of items with customizable trigger and positioning."})]}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.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(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Hover Trigger"}),e.jsx(t.ListContainer,{items:i,trigger:"hover"})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Click Trigger"}),e.jsx(t.ListContainer,{items:i,trigger:"click",isOpen:n,onOpenChange:a})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Custom Icon"}),e.jsx(t.ListContainer,{items:i,triggerIcon:e.jsx(r.Activity,{className:"w-4! h-4!"})})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Different Positions"}),e.jsxs("div",{className:"flex gap-4",children:[e.jsx(t.ListContainer,{items:i,position:"top"}),e.jsx(t.ListContainer,{items:i,position:"right"}),e.jsx(t.ListContainer,{items:i,position:"left"})]})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Props",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:l,data:c})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.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=p;

package/ListContainerSection-Lq00hl5g.mjs

@@ -0,0 +1,191 @@
+import { jsxs as t, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { useState as m } from "react";
+import { T as o, C as i, a as l, Y as r, B as h, c as g } from "./index-Hq6IUBmn.mjs";
+import { Activity as f, Edit as u, Trash as N, Share as b } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const T = () => {
+  const [c, d] = m(!1), s = [
+    {
+      id: "1",
+      label: "Edit",
+      icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" }),
+      onClick: () => console.log("Edit clicked")
+    },
+    {
+      id: "2",
+      label: "Delete",
+      icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
+      onClick: () => console.log("Delete clicked")
+    },
+    {
+      id: "3",
+      label: "Share",
+      icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" }),
+      onClick: () => console.log("Share clicked")
+    }
+  ];
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+      /* @__PURE__ */ e(o, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ListContainer" }),
+      /* @__PURE__ */ e(
+        o,
+        {
+          tag: "p",
+          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "A dropdown container component for displaying lists of items with customizable trigger and positioning."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ t(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Hover Trigger" }),
+        /* @__PURE__ */ e(r, { items: s, trigger: "hover" })
+      ] }),
+      /* @__PURE__ */ t(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Click Trigger" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            items: s,
+            trigger: "click",
+            isOpen: c,
+            onOpenChange: d
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "With Custom Icon" }),
+        /* @__PURE__ */ e(
+          r,
+          {
+            items: s,
+            triggerIcon: /* @__PURE__ */ e(f, { className: "w-4! h-4!" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t(i, { className: "p-4", children: [
+        /* @__PURE__ */ e(o, { tag: "h5", className: "mb-3", children: "Different Positions" }),
+        /* @__PURE__ */ t("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ e(r, { items: s, position: "top" }),
+          /* @__PURE__ */ e(r, { items: s, position: "right" }),
+          /* @__PURE__ */ e(r, { items: s, position: "left" })
+        ] })
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(h, { columns: [
+      {
+        key: "prop",
+        label: "Prop",
+        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(a) })
+      },
+      {
+        key: "type",
+        label: "Type",
+        render: (a) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(a) })
+      },
+      {
+        key: "default",
+        label: "Default",
+        render: (a) => {
+          const n = String(a);
+          return n === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: n });
+        }
+      },
+      {
+        key: "description",
+        label: "Description"
+      }
+    ], data: [
+      {
+        prop: "items",
+        type: "ListItemProps[]",
+        default: "required",
+        description: "Array of list items to display"
+      },
+      {
+        prop: "label",
+        type: "string",
+        default: "-",
+        description: "Label for the trigger button"
+      },
+      {
+        prop: "triggerIcon",
+        type: "React.ReactNode",
+        default: "-",
+        description: "Custom icon for the trigger"
+      },
+      {
+        prop: "position",
+        type: "'left' | 'right' | 'top' | 'bottom'",
+        default: "'bottom'",
+        description: "Position of the dropdown"
+      },
+      {
+        prop: "align",
+        type: "'start' | 'end' | 'center'",
+        default: "'end'",
+        description: "Alignment of the dropdown"
+      },
+      {
+        prop: "trigger",
+        type: "'hover' | 'click'",
+        default: "'hover'",
+        description: "Trigger type for opening the dropdown"
+      },
+      {
+        prop: "keepOpen",
+        type: "boolean",
+        default: "false",
+        description: "Whether to keep dropdown open after item click"
+      }
+    ] }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      g,
+      {
+        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" />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as default
+};

package/ListItemSection-CEpCtoxu.mjs

@@ -0,0 +1,191 @@
+import { jsxs as t, Fragment as n, jsx as e } from "react/jsx-runtime";
+import { T as s, C as l, a as c, Z as a, B as r, c as o } from "./index-Hq6IUBmn.mjs";
+import { Home as m, Settings as p, User as h, Star as u } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const v = () => /* @__PURE__ */ t(n, { children: [
+  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
+    /* @__PURE__ */ e(s, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "ListItem" }),
+    /* @__PURE__ */ e(
+      s,
+      {
+        tag: "p",
+        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
+        children: "A list item component for displaying items in dropdowns and menus with support for icons, labels, and custom content."
+      }
+    )
+  ] }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "Basic List Items" }),
+      /* @__PURE__ */ t("ul", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(a, { id: "1", label: "Item 1" }),
+        /* @__PURE__ */ e(a, { id: "2", label: "Item 2" }),
+        /* @__PURE__ */ e(a, { id: "3", label: "Item 3" })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Icons" }),
+      /* @__PURE__ */ t("ul", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(
+          a,
+          {
+            id: "1",
+            label: "Home",
+            icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            id: "2",
+            label: "Settings",
+            icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ e(
+          a,
+          {
+            id: "3",
+            label: "Profile",
+            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "States" }),
+      /* @__PURE__ */ t("ul", { className: "space-y-1", children: [
+        /* @__PURE__ */ e(a, { id: "1", label: "Active Item", active: !0 }),
+        /* @__PURE__ */ e(a, { id: "2", label: "Normal Item" }),
+        /* @__PURE__ */ e(a, { id: "3", label: "Disabled Item", disabled: !0 })
+      ] })
+    ] }),
+    /* @__PURE__ */ t(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(s, { tag: "h5", className: "mb-3", children: "With Custom Content" }),
+      /* @__PURE__ */ e("ul", { className: "space-y-1", children: /* @__PURE__ */ e(
+        a,
+        {
+          id: "1",
+          content: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(u, { className: "w-4 h-4" }),
+            /* @__PURE__ */ e("span", { children: "Custom Content" })
+          ] })
+        }
+      ) })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Props", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(r, { columns: [
+    {
+      key: "prop",
+      label: "Prop",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(i) })
+    },
+    {
+      key: "type",
+      label: "Type",
+      render: (i) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(i) })
+    },
+    {
+      key: "default",
+      label: "Default",
+      render: (i) => {
+        const d = String(i);
+        return d === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: d });
+      }
+    },
+    {
+      key: "description",
+      label: "Description"
+    }
+  ], data: [
+    {
+      prop: "id",
+      type: "string | number",
+      default: "required",
+      description: "Unique identifier for the item"
+    },
+    {
+      prop: "label",
+      type: "string",
+      default: "-",
+      description: "Text label for the item"
+    },
+    {
+      prop: "icon",
+      type: "React.ReactNode",
+      default: "-",
+      description: "Icon to display before the label"
+    },
+    {
+      prop: "content",
+      type: "React.ReactNode",
+      default: "-",
+      description: "Custom content to display instead of label"
+    },
+    {
+      prop: "onClick",
+      type: "() => void",
+      default: "-",
+      description: "Click handler function"
+    },
+    {
+      prop: "disabled",
+      type: "boolean",
+      default: "false",
+      description: "Whether the item is disabled"
+    },
+    {
+      prop: "active",
+      type: "boolean",
+      default: "false",
+      description: "Whether the item is active"
+    }
+  ] }) }) }) }),
+  /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    o,
+    {
+      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()}
+/>`
+    }
+  ) }) }) })
+] });
+export {
+  v as default
+};