@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/ImplementedFeaturesSection-C-hPiVlX.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-19KsCnyX.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-KvlP_7ja.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.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-BBd3_OzF.js

@@ -0,0 +1,38 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.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-border 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-BhJTN7zz.js → InfoCardSection-DHQuZzE7.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-D3gBsvbO.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-19KsCnyX.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 T = () => /* @__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,21 +113,14 @@ 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: [
-          /* @__PURE__ */ e(
-            a,
-            {
-              tag: "span",
-              className: "text-[11px] text-gray-500",
-              children: "Last synced 5 min ago"
-            }
-          ),
+        footer: /* @__PURE__ */ l("div", { className: "px-5 py-3 border-t border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ e(a, { tag: "span", className: "text-[11px] text-gray-500", children: "Last synced 5 min ago" }),
           /* @__PURE__ */ e(
             a,
             {
@@ -139,8 +130,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 +149,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 +167,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 +185,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 +207,43 @@ 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 +287,5 @@ import { DollarSign, TrendingUp } from 'lucide-react';
   ) }) }) })
 ] });
 export {
-  N as default
+  T as default
 };

package/documentation/InputSearcherSection-BQ4cUC16.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-19KsCnyX.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
+};

package/documentation/InputSearcherSection-DFk3eBSo.js

@@ -0,0 +1,45 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("react"),a=require("../index-DMs_SmPq.js"),d=require("lucide-react");require("react-router-dom");require("react-dom");const p=()=>{const[o,n]=c.useState(void 0),t=[{label:"Primary",color:"primary"},{label:"Secondary",color:"secondary"},{label:"Danger",color:"danger"},{label:"Info",color:"info"},{label:"Success",color:"success"},{label:"Warning",color:"warning"}],i=[{label:"Small",size:"sm"},{label:"Medium",size:"md"},{label:"Large",size:"lg"}],l=[{name:"React",value:"react"},{name:"Vue",value:"vue"},{name:"Angular",value:"angular"},{name:"Svelte",value:"svelte"},{name:"Next.js",value:"nextjs"}];return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"InputSearcher",description:"A search input component with dropdown suggestions and filtering capabilities.",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-cyan-500 via-sky-500 to-blue-500 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(d.Search,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 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.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(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Basic InputSearcher"}),e.jsx(a.InputSearcher,{label:"Search Framework",placeholder:"Search frameworks",options:l,initialValue:o?.value,onOptionSelect:r=>{Array.isArray(r)||n(r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Multiple Selection"}),e.jsx(a.InputSearcher,{label:"Select Frameworks",placeholder:"Select frameworks",options:l,multiple:!0,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Custom No Matches Message"}),e.jsx(a.InputSearcher,{label:"Search",placeholder:"Search...",options:l,noMatchesMessage:"No results found",onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Disabled"}),e.jsx(a.InputSearcher,{label:"Search",disabled:!0,placeholder:"Disabled",options:l,noMatchesMessage:"No results found",onOptionSelect:r=>{console.log("Selected:",r)}})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Variants",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-3 gap-4",children:[e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Ghost (default)"}),e.jsx(a.InputSearcher,{label:"Ghost Variant",placeholder:"Search...",variant:"ghost",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Solid"}),e.jsx(a.InputSearcher,{label:"Solid Variant",placeholder:"Search...",variant:"solid",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]}),e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:"Transparent"}),e.jsx(a.InputSearcher,{label:"Transparent Variant",placeholder:"Search...",variant:"transparent",options:l,onOptionSelect:r=>{console.log("Selected:",r)}})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Colors",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3",children:t.map(({label:r,color:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.InputSearcher,{label:`${r} Search`,placeholder:"Search...",color:s,options:l})]},s))})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 gap-4 md:grid-cols-3",children:i.map(({label:r,size:s})=>e.jsxs(a.CardContainer,{className:"p-4",children:[e.jsx(a.Typography,{tag:"h5",className:"mb-3",children:r}),e.jsx(a.InputSearcher,{label:`${r} Search`,placeholder:"Search frameworks",size:s,options:l})]},s))})})})}),e.jsx(a.PropPlayground,{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:r=>e.jsx("div",{className:"w-full max-w-lg",children:e.jsx(a.InputSearcher,{...r,placeholder:r.placeholder||"Search frameworks",options:l})})}),e.jsx(a.AutoPropsTable,{componentName:"InputSearcher"}),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 { 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} />`})})})})]})};exports.default=p;