@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/ImplementationStatusSection-C59DZ2XS.js

@@ -0,0 +1,62 @@
+import { jsxs as t, Fragment as s, jsx as e } from "react/jsx-runtime";
+import { H as i, T as a, aj as o, ax as l } from "../index-lfg6LZ1p.js";
+import { Activity as n, Info as c, CheckCircle as m, Keyboard as d, Volume2 as p, AlertTriangle as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const N = () => /* @__PURE__ */ t(s, { children: [
+  /* @__PURE__ */ e(
+    i,
+    {
+      title: "Implementation Status",
+      description: "Current state of accessibility compliance across the tucu-ui component library. We follow WCAG 2.1 AA guidelines and are transparent about our progress.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ t("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ t("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(a, { tag: "h2", className: "mb-2", children: "Current State" }),
+      /* @__PURE__ */ e(
+        a,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Overview of accessibility features across core components"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(o, { variant: "info", dismissible: !1, children: /* @__PURE__ */ t("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e(c, { className: "h-5 w-5 shrink-0" }),
+      /* @__PURE__ */ e(a, { tag: "p", className: "text-sm", children: "This library is actively working towards full accessibility compliance. Most interactive components include proper ARIA attributes, keyboard navigation, and screen reader support." })
+    ] }) }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Fully Accessible",
+        description: "Input, Checkbox, Modal, Alert, Button, Tabs, Drawer, Select — all with ARIA attributes and keyboard support.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Keyboard Navigation",
+        description: "Tab, Escape, Enter/Space, Arrow keys — all interactive components are fully operable without a mouse.",
+        iconBgClassName: "from-blue-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Screen Reader Ready",
+        description: "Semantic HTML, ARIA labels, live regions, role attributes, and aria-describedby connections throughout.",
+        iconBgClassName: "from-purple-500 to-violet-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Known Limitation",
+        description: "Modal component lacks focus trapping (Tab can escape). Drawer has full focus trap — Modal improvement planned.",
+        iconBgClassName: "from-amber-500 to-orange-500"
+      }
+    ].map((r) => /* @__PURE__ */ e(l, { layout: "horizontal", ...r }, r.title)) })
+  ] })
+] });
+export {
+  N as default
+};

package/documentation/ImplementationStatusSection-gIxBd7m5.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const r=[{icon:e.jsx(a.CheckCircle,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Fully Accessible",description:"Input, Checkbox, Modal, Alert, Button, Tabs, Drawer, Select — all with ARIA attributes and keyboard support.",iconBgClassName:"from-green-500 to-emerald-500"},{icon:e.jsx(a.Keyboard,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Keyboard Navigation",description:"Tab, Escape, Enter/Space, Arrow keys — all interactive components are fully operable without a mouse.",iconBgClassName:"from-blue-500 to-cyan-500"},{icon:e.jsx(a.Volume2,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Screen Reader Ready",description:"Semantic HTML, ARIA labels, live regions, role attributes, and aria-describedby connections throughout.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(a.AlertTriangle,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Known Limitation",description:"Modal component lacks focus trapping (Tab can escape). Drawer has full focus trap — Modal improvement planned.",iconBgClassName:"from-amber-500 to-orange-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"Implementation Status",description:"Current state of accessibility compliance across the tucu-ui component library. We follow WCAG 2.1 AA guidelines and are transparent about our progress.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.Activity,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(t.Typography,{tag:"h2",className:"mb-2",children:"Current State"}),e.jsx(t.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Overview of accessibility features across core components"})]}),e.jsx(t.Alert,{variant:"info",dismissible:!1,children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(a.Info,{className:"h-5 w-5 shrink-0"}),e.jsx(t.Typography,{tag:"p",className:"text-sm",children:"This library is actively working towards full accessibility compliance. Most interactive components include proper ARIA attributes, keyboard navigation, and screen reader support."})]})}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6",children:r.map(s=>e.jsx(t.FeatureCard,{layout:"horizontal",...s},s.title))})]})]})};exports.default=i;

package/documentation/ImplementedFeaturesSection-1l8t4Nij.js

@@ -0,0 +1,70 @@
+import { jsxs as a, Fragment as r, jsx as e } from "react/jsx-runtime";
+import { H as i, T as s, ax as o } from "../index-lfg6LZ1p.js";
+import { CheckCircle as l, Target as c, Keyboard as n, Volume2 as d, Palette as m, Lock as p, FormInput as h } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const x = () => /* @__PURE__ */ a(r, { children: [
+  /* @__PURE__ */ e(
+    i,
+    {
+      title: "Implemented Features",
+      description: "Accessibility features currently available across the component library. Each feature has been verified against the source code.",
+      icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(l, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ a("section", { className: "space-y-8", children: [
+    /* @__PURE__ */ a("div", { className: "text-center", children: [
+      /* @__PURE__ */ e(s, { tag: "h2", className: "mb-2", children: "What's Available Today" }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
+          children: "Core accessibility features implemented across components"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
+      {
+        icon: /* @__PURE__ */ e(c, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Focus Management",
+        description: "Visible focus indicators, focus restoration on close (Modal, Drawer), auto-focus on open, and skip-navigation support.",
+        iconBgClassName: "from-red-500 to-orange-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(n, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Keyboard Navigation",
+        description: "Tab/Shift+Tab traversal, Enter/Space activation, Escape to close, Arrow keys in Tabs and Select, Home/End support.",
+        iconBgClassName: "from-blue-500 to-indigo-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Screen Reader Support",
+        description: "Semantic HTML, ARIA labels, aria-describedby connections, live regions (Alert), and proper role attributes.",
+        iconBgClassName: "from-purple-500 to-violet-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Visual Accessibility",
+        description: "High contrast modes, color-independent error indicators (aria-invalid), loading state announcements (aria-busy).",
+        iconBgClassName: "from-teal-500 to-cyan-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(p, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Focus Trapping",
+        description: "Drawer implements full focus trap (Tab cycles within). Modal has Escape close and focus restoration but Tab can escape.",
+        iconBgClassName: "from-amber-500 to-yellow-500"
+      },
+      {
+        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
+        title: "Form Accessibility",
+        description: "Auto-generated IDs (useId), label association (htmlFor), aria-required, aria-invalid, and aria-describedby for helpers/errors.",
+        iconBgClassName: "from-green-500 to-emerald-500"
+      }
+    ].map((t) => /* @__PURE__ */ e(o, { layout: "vertical", ...t }, t.title)) })
+  ] })
+] });
+export {
+  x as default
+};

package/documentation/ImplementedFeaturesSection-BwktoGqA.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>{const r=[{icon:e.jsx(a.Target,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Focus Management",description:"Visible focus indicators, focus restoration on close (Modal, Drawer), auto-focus on open, and skip-navigation support.",iconBgClassName:"from-red-500 to-orange-500"},{icon:e.jsx(a.Keyboard,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Keyboard Navigation",description:"Tab/Shift+Tab traversal, Enter/Space activation, Escape to close, Arrow keys in Tabs and Select, Home/End support.",iconBgClassName:"from-blue-500 to-indigo-500"},{icon:e.jsx(a.Volume2,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Screen Reader Support",description:"Semantic HTML, ARIA labels, aria-describedby connections, live regions (Alert), and proper role attributes.",iconBgClassName:"from-purple-500 to-violet-500"},{icon:e.jsx(a.Palette,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Visual Accessibility",description:"High contrast modes, color-independent error indicators (aria-invalid), loading state announcements (aria-busy).",iconBgClassName:"from-teal-500 to-cyan-500"},{icon:e.jsx(a.Lock,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Focus Trapping",description:"Drawer implements full focus trap (Tab cycles within). Modal has Escape close and focus restoration but Tab can escape.",iconBgClassName:"from-amber-500 to-yellow-500"},{icon:e.jsx(a.FormInput,{className:"w-6 h-6 text-white filter drop-shadow-sm"}),title:"Form Accessibility",description:"Auto-generated IDs (useId), label association (htmlFor), aria-required, aria-invalid, and aria-describedby for helpers/errors.",iconBgClassName:"from-green-500 to-emerald-500"}];return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Implemented Features",description:"Accessibility features currently available across the component library. Each feature has been verified against the source code.",icon:e.jsx("div",{className:"w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(a.CheckCircle,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsxs("section",{className:"space-y-8",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(s.Typography,{tag:"h2",className:"mb-2",children:"What's Available Today"}),e.jsx(s.Typography,{tag:"p",className:"text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",children:"Core accessibility features implemented across components"})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6",children:r.map(t=>e.jsx(s.FeatureCard,{layout:"vertical",...t},t.title))})]})]})};exports.default=i;

package/documentation/InfoCardSection-BcXFWEjI.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-BaGqriuz.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const r=()=>e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"InfoCard",description:`A structured card for displaying key-value data in columns, with
+          optional header, footer tags, and tooltips.`,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-violet-600 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(l.Info,{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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Examples",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-6",children:[e.jsx(a.InfoCard,{title:"Revenue Summary",subtitle:"Q4 2025 Financial Report",icon:e.jsx(l.DollarSign,{className:"h-4 w-4 text-brand"}),headerRight:e.jsx(a.Badge,{color:"success",size:"small",children:"+12%"}),columns:[{key:"revenue",label:"Revenue",icon:e.jsx(l.DollarSign,{className:"h-3 w-3"}),items:[{label:"Total",value:"$1,234,567"},{label:"Growth",value:"+12.3%",color:"text-green-500"},{label:"Target",value:"$1,500,000"}]},{key:"metrics",label:"Metrics",accent:"bg-blue-500",accentText:"text-blue-500",icon:e.jsx(l.TrendingUp,{className:"h-3 w-3"}),items:[{label:"Customers",value:"8,432"},{label:"Conversion",value:"3.2%"},{label:"Avg. Order",value:"$146"}]},{key:"performance",label:"Performance",accent:"bg-orange-500",accentText:"text-orange-500",icon:e.jsx(l.Activity,{className:"h-3 w-3"}),items:[{label:"Uptime",value:"99.9%",color:"text-green-500"},{label:"Latency",value:"45ms"},{label:"Errors",value:"0.01%"}]}],gridCols:3,footerLabel:"Tags",footerTags:[{label:"Quarterly",tooltip:"Q4 2025 data"},{label:"Verified",className:"bg-green-200 dark:bg-green-900/30 border border-green-300/50 dark:border-green-700/50 text-green-700 dark:text-green-400"},{label:"Updated 2h ago",icon:e.jsx(l.Clock,{className:"h-3 w-3"})}]}),e.jsx(a.InfoCard,{title:"Simple Card",columns:[{key:"info",label:"Basic Info",items:[{label:"Name",value:"John Doe"},{label:"Email",value:"john@example.com"},{label:"Role",value:"Admin"}]},{key:"stats",label:"Statistics",items:[{label:"Projects",value:"12"},{label:"Tasks",value:"48"},{label:"Completed",value:"89%",color:"text-green-500"}]}],gridCols:2}),e.jsx(a.InfoCard,{title:"Custom Content",subtitle:"Without columns — just children",icon:e.jsx(l.Activity,{className:"h-4 w-4 text-brand"}),headerRight:e.jsx(a.Badge,{color:"info",size:"small",children:"Live"}),footer:e.jsxs("div",{className:"px-5 py-3 border-t border-gray-200/40 dark:border-gray-700/40 flex items-center justify-between",children:[e.jsx(a.Typography,{tag:"span",className:"text-[11px] text-gray-500",children:"Last synced 5 min ago"}),e.jsx(a.Typography,{tag:"span",className:"text-[11px] text-brand font-medium cursor-pointer hover:underline",children:"Refresh"})]}),children:e.jsxs("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-4",children:[e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"p",className:"text-2xl font-bold text-gray-900 dark:text-gray-100",children:"2.4k"}),e.jsx(a.Typography,{tag:"p",className:"text-[11px] text-gray-500 mt-1",children:"Active Users"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"p",className:"text-2xl font-bold text-green-500",children:"98.2%"}),e.jsx(a.Typography,{tag:"p",className:"text-[11px] text-gray-500 mt-1",children:"Uptime"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"p",className:"text-2xl font-bold text-gray-900 dark:text-gray-100",children:"12ms"}),e.jsx(a.Typography,{tag:"p",className:"text-[11px] text-gray-500 mt-1",children:"Avg Latency"})]}),e.jsxs("div",{className:"text-center",children:[e.jsx(a.Typography,{tag:"p",className:"text-2xl font-bold text-orange-500",children:"3"}),e.jsx(a.Typography,{tag:"p",className:"text-[11px] text-gray-500 mt-1",children:"Warnings"})]})]})})]})})}),e.jsx(a.PropPlayground,{componentName:"InfoCard",title:"InfoCard Playground",defaultValues:{title:"Info Card Title",subtitle:"Subtitle text here",gridCols:2},excludeProps:["columns","children","footer","footerLabel","footerTags","headerRight","icon","className"],children:t=>e.jsx(a.InfoCard,{...t,columns:[{label:"Status",value:"Active"},{label:"Type",value:"Premium"},{label:"Created",value:"2024-01-01"},{label:"Updated",value:"2024-06-15"}]})}),e.jsx(a.AutoPropsTable,{componentName:"InfoCard"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { InfoCard, Badge } from '@e-burgos/tucu-ui';
+import { DollarSign, TrendingUp } from 'lucide-react';
+
+<InfoCard
+  title="Revenue"
+  subtitle="Q4 Report"
+  icon={<DollarSign className="h-4 w-4 text-brand" />}
+  headerRight={<Badge color="success">+12%</Badge>}
+  columns={[
+    {
+      key: 'revenue',
+      label: 'Revenue',
+      icon: <DollarSign className="h-3 w-3" />,
+      items: [
+        { label: 'Total', value: '$1,234,567' },
+        { label: 'Growth', value: '+12%', color: 'text-green-500' },
+      ],
+    },
+    {
+      key: 'metrics',
+      label: 'Metrics',
+      accent: 'bg-blue-500',
+      accentText: 'text-blue-500',
+      icon: <TrendingUp className="h-3 w-3" />,
+      items: [
+        { label: 'Users', value: '8,432' },
+        { label: 'Conversion', value: '3.2%' },
+      ],
+    },
+  ]}
+  gridCols={2}
+  footerLabel="Tags"
+  footerTags={[
+    { label: 'Quarterly', tooltip: 'Q4 2025' },
+    { label: 'Verified', className: 'bg-green-200 dark:bg-green-900/30 border border-green-300/50 dark:border-green-700/50 text-green-700 dark:text-green-400' },
+  ]}
+/>`})})})})]});exports.default=r;

package/documentation/{InfoCardSection-DVeC3my3.js → InfoCardSection-DtgYtueH.js}

@@ -1,24 +1,22 @@
-import { jsxs as t, Fragment as i, jsx as e } from "react/jsx-runtime";
-import { T as a, C as r, a as s, K as l, J as o, A as d, c as m } from "../index-B919yoKU.js";
-import { Clock as g, DollarSign as n, TrendingUp as x, Activity as c } from "lucide-react";
+import { jsxs as l, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { H as m, C as r, a as s, M as t, K as o, T as a, P as g, A as u, c as b } from "../index-lfg6LZ1p.js";
+import { Info as h, Clock as p, DollarSign as n, TrendingUp as x, Activity as i } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const N = () => /* @__PURE__ */ t(i, { children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(a, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "InfoCard" }),
-    /* @__PURE__ */ e(
-      a,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "A structured card for displaying key-value data in columns, with optional header, footer tags, and tooltips."
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ t("div", { className: "w-full p-4 sm:p-6 space-y-6", children: [
+const k = () => /* @__PURE__ */ l(d, { children: [
+  /* @__PURE__ */ e(
+    m,
+    {
+      title: "InfoCard",
+      description: `A structured card for displaying key-value data in columns, with
+          optional header, footer tags, and tooltips.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-violet-600 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6 space-y-6", children: [
     /* @__PURE__ */ e(
-      l,
+      t,
       {
         title: "Revenue Summary",
         subtitle: "Q4 2025 Financial Report",
@@ -56,7 +54,7 @@ const N = () => /* @__PURE__ */ t(i, { children: [
             label: "Performance",
             accent: "bg-orange-500",
             accentText: "text-orange-500",
-            icon: /* @__PURE__ */ e(c, { className: "h-3 w-3" }),
+            icon: /* @__PURE__ */ e(i, { className: "h-3 w-3" }),
             items: [
               {
                 label: "Uptime",
@@ -78,13 +76,13 @@ const N = () => /* @__PURE__ */ t(i, { children: [
           },
           {
             label: "Updated 2h ago",
-            icon: /* @__PURE__ */ e(g, { className: "h-3 w-3" })
+            icon: /* @__PURE__ */ e(p, { className: "h-3 w-3" })
           }
         ]
       }
     ),
     /* @__PURE__ */ e(
-      l,
+      t,
       {
         title: "Simple Card",
         columns: [
@@ -115,13 +113,13 @@ const N = () => /* @__PURE__ */ t(i, { children: [
       }
     ),
     /* @__PURE__ */ e(
-      l,
+      t,
       {
         title: "Custom Content",
         subtitle: "Without columns — just children",
-        icon: /* @__PURE__ */ e(c, { className: "h-4 w-4 text-brand" }),
+        icon: /* @__PURE__ */ e(i, { className: "h-4 w-4 text-brand" }),
         headerRight: /* @__PURE__ */ e(o, { color: "info", size: "small", children: "Live" }),
-        footer: /* @__PURE__ */ t("div", { className: "px-5 py-3 border-t border-gray-200/40 dark:border-gray-700/40 flex items-center justify-between", children: [
+        footer: /* @__PURE__ */ l("div", { className: "px-5 py-3 border-t border-gray-200/40 dark:border-gray-700/40 flex items-center justify-between", children: [
           /* @__PURE__ */ e(
             a,
             {
@@ -139,8 +137,8 @@ const N = () => /* @__PURE__ */ t(i, { children: [
             }
           )
         ] }),
-        children: /* @__PURE__ */ t("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: [
-          /* @__PURE__ */ t("div", { className: "text-center", children: [
+        children: /* @__PURE__ */ l("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ l("div", { className: "text-center", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -158,7 +156,7 @@ const N = () => /* @__PURE__ */ t(i, { children: [
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "text-center", children: [
+          /* @__PURE__ */ l("div", { className: "text-center", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -176,7 +174,7 @@ const N = () => /* @__PURE__ */ t(i, { children: [
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "text-center", children: [
+          /* @__PURE__ */ l("div", { className: "text-center", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -194,7 +192,7 @@ const N = () => /* @__PURE__ */ t(i, { children: [
               }
             )
           ] }),
-          /* @__PURE__ */ t("div", { className: "text-center", children: [
+          /* @__PURE__ */ l("div", { className: "text-center", children: [
             /* @__PURE__ */ e(
               a,
               {
@@ -216,9 +214,34 @@ const N = () => /* @__PURE__ */ t(i, { children: [
       }
     )
   ] }) }) }),
-  /* @__PURE__ */ e(d, { componentName: "InfoCard" }),
+  /* @__PURE__ */ e(
+    g,
+    {
+      componentName: "InfoCard",
+      title: "InfoCard Playground",
+      defaultValues: {
+        title: "Info Card Title",
+        subtitle: "Subtitle text here",
+        gridCols: 2
+      },
+      excludeProps: ["columns", "children", "footer", "footerLabel", "footerTags", "headerRight", "icon", "className"],
+      children: (c) => /* @__PURE__ */ e(
+        t,
+        {
+          ...c,
+          columns: [
+            { label: "Status", value: "Active" },
+            { label: "Type", value: "Premium" },
+            { label: "Created", value: "2024-01-01" },
+            { label: "Updated", value: "2024-06-15" }
+          ]
+        }
+      )
+    }
+  ),
+  /* @__PURE__ */ e(u, { componentName: "InfoCard" }),
   /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-    m,
+    b,
     {
       language: "tsx",
       code: `import { InfoCard, Badge } from '@e-burgos/tucu-ui';
@@ -262,5 +285,5 @@ import { DollarSign, TrendingUp } from 'lucide-react';
   ) }) }) })
 ] });
 export {
-  N as default
+  k as default
 };

package/documentation/InputSearcherSection-DD2KwzOG.js

@@ -0,0 +1,267 @@
+import { jsxs as o, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { useState as u } from "react";
+import { H as S, C as l, a as t, T as n, q as s, P as g, A as b, c as N } from "../index-lfg6LZ1p.js";
+import { Search as v } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const M = () => {
+  const [i, d] = u(void 0), p = [
+    { label: "Primary", color: "primary" },
+    { label: "Secondary", color: "secondary" },
+    { label: "Danger", color: "danger" },
+    { label: "Info", color: "info" },
+    { label: "Success", color: "success" },
+    { label: "Warning", color: "warning" }
+  ], h = [
+    { label: "Small", size: "sm" },
+    { label: "Medium", size: "md" },
+    { label: "Large", size: "lg" }
+  ], r = [
+    { name: "React", value: "react" },
+    { name: "Vue", value: "vue" },
+    { name: "Angular", value: "angular" },
+    { name: "Svelte", value: "svelte" },
+    { name: "Next.js", value: "nextjs" }
+  ];
+  return /* @__PURE__ */ o(m, { children: [
+    /* @__PURE__ */ e(
+      S,
+      {
+        title: "InputSearcher",
+        description: "A search input component with dropdown suggestions and filtering capabilities.",
+        icon: /* @__PURE__ */ e("div", { className: "w-20 h-20 sm:w-24 sm:h-24 md:w-32 md:h-32 bg-linear-to-br from-cyan-500 via-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50", children: /* @__PURE__ */ e(v, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Basic InputSearcher" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Search Framework",
+            placeholder: "Search frameworks",
+            options: r,
+            initialValue: i?.value,
+            onOptionSelect: (a) => {
+              Array.isArray(a) || d(a);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Multiple Selection" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Select Frameworks",
+            placeholder: "Select frameworks",
+            options: r,
+            multiple: !0,
+            onOptionSelect: (a) => {
+              console.log("Selected:", a);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Custom No Matches Message" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Search",
+            placeholder: "Search...",
+            options: r,
+            noMatchesMessage: "No results found",
+            onOptionSelect: (a) => {
+              console.log("Selected:", a);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Disabled" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Search",
+            disabled: !0,
+            placeholder: "Disabled",
+            options: r,
+            noMatchesMessage: "No results found",
+            onOptionSelect: (a) => {
+              console.log("Selected:", a);
+            }
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ o("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Ghost (default)" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Ghost Variant",
+            placeholder: "Search...",
+            variant: "ghost",
+            options: r,
+            onOptionSelect: (a) => {
+              console.log("Selected:", a);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Solid" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Solid Variant",
+            placeholder: "Search...",
+            variant: "solid",
+            options: r,
+            onOptionSelect: (a) => {
+              console.log("Selected:", a);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o(l, { className: "p-4", children: [
+        /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Transparent" }),
+        /* @__PURE__ */ e(
+          s,
+          {
+            label: "Transparent Variant",
+            placeholder: "Search...",
+            variant: "transparent",
+            options: r,
+            onOptionSelect: (a) => {
+              console.log("Selected:", a);
+            }
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3", children: p.map(({ label: a, color: c }) => /* @__PURE__ */ o(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: a }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          label: `${a} Search`,
+          placeholder: "Search...",
+          color: c,
+          options: r
+        }
+      )
+    ] }, c)) }) }) }) }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-3", children: h.map(({ label: a, size: c }) => /* @__PURE__ */ o(l, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: a }),
+      /* @__PURE__ */ e(
+        s,
+        {
+          label: `${a} Search`,
+          placeholder: "Search frameworks",
+          size: c,
+          options: r
+        }
+      )
+    ] }, c)) }) }) }) }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        componentName: "InputSearcher",
+        defaultValues: {
+          label: "Preview Search",
+          placeholder: "Search frameworks",
+          variant: "ghost",
+          color: "primary",
+          size: "md",
+          multiple: !1,
+          noMatchesMessage: "No results found",
+          disabled: !1
+        },
+        controlOverrides: [
+          {
+            name: "placeholder",
+            type: "text",
+            description: "Placeholder text rendered inside the search input"
+          }
+        ],
+        includeProps: [
+          "label",
+          "placeholder",
+          "variant",
+          "color",
+          "size",
+          "multiple",
+          "noMatchesMessage",
+          "disabled"
+        ],
+        excludeProps: ["options", "initialValue", "onOptionSelect"],
+        children: (a) => /* @__PURE__ */ e("div", { className: "w-full max-w-lg", children: /* @__PURE__ */ e(
+          s,
+          {
+            ...a,
+            placeholder: a.placeholder || "Search frameworks",
+            options: r
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ e(b, { componentName: "InputSearcher" }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      N,
+      {
+        language: "tsx",
+        code: `import { InputSearcher } from '@e-burgos/tucu-ui';
+
+const options = [
+  { name: 'React', value: 'react' },
+  { name: 'Vue', value: 'vue' },
+  { name: 'Angular', value: 'angular' },
+];
+
+<InputSearcher
+  label="Search Framework"
+  options={options}
+  initialValue={selectedOption?.value}
+  onOptionSelect={(option) => {
+    if (!Array.isArray(option)) {
+      setSelectedOption(option);
+    }
+  }}
+/>
+
+<InputSearcher
+  label="Select Frameworks"
+  options={options}
+  multiple
+  onOptionSelect={(option) => {
+    console.log('Selected:', option);
+  }}
+/>
+
+// Variants
+<InputSearcher label="Ghost" variant="ghost" options={options} />
+<InputSearcher label="Solid" variant="solid" options={options} />
+<InputSearcher label="Transparent" variant="transparent" options={options} />
+
+// Colors
+<InputSearcher label="Primary" color="primary" options={options} />
+<InputSearcher label="Secondary" color="secondary" options={options} />
+<InputSearcher label="Danger" color="danger" options={options} />
+<InputSearcher label="Info" color="info" options={options} />
+<InputSearcher label="Success" color="success" options={options} />
+<InputSearcher label="Warning" color="warning" options={options} />
+
+// Sizes
+<InputSearcher label="Small" size="sm" options={options} />
+<InputSearcher label="Medium" size="md" options={options} />
+<InputSearcher label="Large" size="lg" options={options} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  M as default
+};