@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/{TabSelectSection-or6HVCzs.js → TabSelectSection-B4rEgVlu.js}

@@ -1,11 +1,11 @@
 import { jsxs as t, Fragment as N, jsx as e } from "react/jsx-runtime";
-import { useState as c } from "react";
-import { T as a, C as s, a as n, ap as d, A as f, c as y } from "../index-D3gBsvbO.js";
-import { Home as v, User as S, Settings as T } from "lucide-react";
+import { useState as d } from "react";
+import { H as f, C as l, a as n, T as a, as as i, y, P as S, A as w, c as v } from "../index-19KsCnyX.js";
+import { ChevronDown as T, Home as I, User as k, Settings as M } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
-const z = () => {
-  const [o, b] = c(0), [m, g] = c(0), [i, x] = c(0), p = [
+const H = () => {
+  const [o, b] = d(0), [m, g] = d(0), [r, x] = d(0), p = [
     { title: "Dashboard", path: "dashboard" },
     { title: "Analytics", path: "analytics" },
     { title: "Reports", path: "reports" },
@@ -13,26 +13,26 @@ const z = () => {
   ], h = [
     {
       title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(v, { size: 16 }),
+        /* @__PURE__ */ e(I, { size: 16 }),
         "Home"
       ] }),
       path: "home"
     },
     {
       title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(S, { size: 16 }),
+        /* @__PURE__ */ e(k, { size: 16 }),
         "Profile"
       ] }),
       path: "profile"
     },
     {
       title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ e(T, { size: 16 }),
+        /* @__PURE__ */ e(M, { size: 16 }),
         "Settings"
       ] }),
       path: "settings"
     }
-  ], r = [
+  ], c = [
     { title: "Orders", path: "orders" },
     { title: "Products", path: "products" },
     { title: "Customers", path: "customers" },
@@ -56,18 +56,17 @@ const z = () => {
     }
   ];
   return /* @__PURE__ */ t(N, { 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: "TabSelect" }),
-      /* @__PURE__ */ e(
-        a,
-        {
-          tag: "p",
-          className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-          children: "A mobile-friendly dropdown tab selector with smooth animations and transitions, designed for responsive tab navigation in constrained spaces."
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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-8", children: [
+    /* @__PURE__ */ e(
+      f,
+      {
+        title: "TabSelect",
+        description: `A mobile-friendly dropdown tab selector with smooth animations and
+          transitions, designed for responsive tab navigation in constrained
+          spaces.`,
+        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-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(T, { 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(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { 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-8", children: [
       /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Basic TabSelect" }),
         /* @__PURE__ */ e(
@@ -79,7 +78,7 @@ const z = () => {
           }
         ),
         /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
-          d,
+          i,
           {
             tabMenu: p,
             selectedTabIndex: o,
@@ -103,7 +102,7 @@ const z = () => {
           }
         ),
         /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
-          d,
+          i,
           {
             tabMenu: h,
             selectedTabIndex: m,
@@ -127,27 +126,27 @@ const z = () => {
           }
         ),
         /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
-          d,
+          i,
           {
-            tabMenu: r,
-            selectedTabIndex: i,
+            tabMenu: c,
+            selectedTabIndex: r,
             onChange: x
           }
         ) }),
         /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
           "Selected option:",
           " ",
-          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: r[i].title }),
+          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: c[r].title }),
           " ",
           "(",
-          i + 1,
+          r + 1,
           " of ",
-          r.length,
+          c.length,
           ")"
         ] }) })
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Use Cases", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Use Cases", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("div", { className: "space-y-6", children: [
       /* @__PURE__ */ t("div", { children: [
         /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Mobile Navigation" }),
         /* @__PURE__ */ t(
@@ -157,13 +156,13 @@ const z = () => {
             className: "text-sm text-gray-600 dark:text-gray-400 mb-3",
             children: [
               "Perfect for replacing horizontal tab bars on mobile devices where space is limited.",
-              /* @__PURE__ */ e("code", { className: "ml-1 text-xs border border-gray-300 dark:border-gray-600 px-2 py-1 rounded", children: "ParamTab" }),
+              /* @__PURE__ */ e("code", { className: "ml-1 text-xs border border-border px-2 py-1 rounded", children: "ParamTab" }),
               " ",
               "automatically switches to TabSelect on mobile breakpoints."
             ]
           }
         ),
-        /* @__PURE__ */ e(s, { className: "p-4 bg-blue-50 dark:bg-blue-900/20", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+        /* @__PURE__ */ e(l, { className: "p-4 bg-blue-50 dark:bg-blue-900/20", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
           /* @__PURE__ */ e("span", { role: "img", "aria-label": "tip", children: "💡" }),
           " ",
           /* @__PURE__ */ e("span", { className: "font-semibold", children: "Tip:" }),
@@ -193,8 +192,8 @@ const z = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Features", 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(s, { className: "p-4", children: [
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Features", 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(l, { className: "p-4", children: [
         /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
           /* @__PURE__ */ e("span", { role: "img", "aria-label": "palette", children: "🎨" }),
           " ",
@@ -209,7 +208,7 @@ const z = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ t(s, { className: "p-4", children: [
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
         /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
           /* @__PURE__ */ e("span", { role: "img", "aria-label": "moon", children: "🌙" }),
           " ",
@@ -224,7 +223,7 @@ const z = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ t(s, { className: "p-4", children: [
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
         /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
           /* @__PURE__ */ e("span", { role: "img", "aria-label": "lightning", children: "⚡" }),
           " ",
@@ -239,7 +238,7 @@ const z = () => {
           }
         )
       ] }),
-      /* @__PURE__ */ t(s, { className: "p-4", children: [
+      /* @__PURE__ */ t(l, { className: "p-4", children: [
         /* @__PURE__ */ t(a, { tag: "h5", className: "mb-2", children: [
           /* @__PURE__ */ e("span", { role: "img", "aria-label": "target", children: "🎯" }),
           " ",
@@ -255,30 +254,61 @@ const z = () => {
         )
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabSelectMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ t("table", { className: "w-full text-sm text-left", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Prop" }),
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Type" }),
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Default" }),
-        /* @__PURE__ */ e("th", { className: "px-3 py-2 font-semibold", children: "Description" })
-      ] }) }),
-      /* @__PURE__ */ e("tbody", { children: u.map((l) => /* @__PURE__ */ t(
-        "tr",
-        {
-          className: "border-b border-gray-100 dark:border-gray-800",
-          children: [
-            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: l.prop }) }),
-            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: /* @__PURE__ */ e("code", { className: "text-xs", children: l.type }) }),
-            /* @__PURE__ */ e("td", { className: "px-3 py-2", children: l.default === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: l.default }) }),
-            /* @__PURE__ */ e("td", { className: "px-3 py-2 text-gray-600 dark:text-gray-400", children: l.description })
-          ]
-        },
-        l.prop
-      )) })
-    ] }) }) }) }),
-    /* @__PURE__ */ e(f, { componentName: "TabSelect" }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "TabSelectMenuItem Interface", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
       y,
+      {
+        columns: [
+          {
+            key: "prop",
+            label: "Prop",
+            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs text-brand", children: String(s ?? "") })
+          },
+          {
+            key: "type",
+            label: "Type",
+            render: (s) => /* @__PURE__ */ e("code", { className: "text-xs", children: String(s ?? "") })
+          },
+          {
+            key: "default",
+            label: "Default",
+            render: (s) => s === "required" ? /* @__PURE__ */ e("span", { className: "text-xs text-red-500", children: "required" }) : /* @__PURE__ */ e("code", { className: "text-xs", children: String(s ?? "") })
+          },
+          {
+            key: "description",
+            label: "Description",
+            render: (s) => /* @__PURE__ */ e("span", { className: "text-xs text-gray-600 dark:text-gray-400", children: String(s ?? "") })
+          }
+        ],
+        data: u
+      }
+    ) }) }) }),
+    /* @__PURE__ */ e(
+      S,
+      {
+        componentName: "TabSelect",
+        title: "TabSelect Playground",
+        defaultValues: {
+          selectedTabIndex: 0
+        },
+        excludeProps: ["onChange", "tabMenu"],
+        children: (s) => /* @__PURE__ */ e(
+          i,
+          {
+            ...s,
+            onChange: () => {
+            },
+            tabMenu: [
+              { title: "Option A" },
+              { title: "Option B" },
+              { title: "Option C" }
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ e(w, { componentName: "TabSelect" }),
+    /* @__PURE__ */ e(l, { className: "overflow-hidden", children: /* @__PURE__ */ e(n, { title: "Code Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      v,
       {
         language: "tsx",
         code: `import { TabSelect } from '@e-burgos/tucu-ui';
@@ -386,5 +416,5 @@ function CustomExample() {
   ] });
 };
 export {
-  z as default
+  H as default
 };

package/documentation/TabSelectSection-BseTPExy.js

@@ -0,0 +1,102 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),t=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const g=()=>{const[i,m]=r.useState(0),[d,p]=r.useState(0),[n,h]=r.useState(0),c=[{title:"Dashboard",path:"dashboard"},{title:"Analytics",path:"analytics"},{title:"Reports",path:"reports"},{title:"Settings",path:"settings"}],o=[{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.Home,{size:16}),"Home"]}),path:"home"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.User,{size:16}),"Profile"]}),path:"profile"},{title:e.jsxs("span",{className:"flex items-center gap-2",children:[e.jsx(s.Settings,{size:16}),"Settings"]}),path:"settings"}],l=[{title:"Orders",path:"orders"},{title:"Products",path:"products"},{title:"Customers",path:"customers"},{title:"Analytics",path:"analytics"},{title:"Marketing",path:"marketing"},{title:"Reports",path:"reports"},{title:"Integrations",path:"integrations"},{title:"Settings",path:"settings"}],x=[{prop:"title",type:"React.ReactNode",default:"required",description:"Tab label (can be text, JSX, or components)"},{prop:"path",type:"string",default:"required",description:"Unique identifier/route path for the tab"}];return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"TabSelect",description:`A mobile-friendly dropdown tab selector with smooth animations and
+          transitions, designed for responsive tab navigation in constrained
+          spaces.`,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-indigo-500 to-purple-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(s.ChevronDown,{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(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:"space-y-8",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Basic TabSelect"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Standard dropdown selector with text options. Click to expand and select a tab."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:c,selectedTabIndex:i,onChange:m})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected:"," ",e.jsx("span",{className:"font-semibold text-brand",children:c[i].title})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"With Icons"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Enhanced dropdown with icon support for better visual clarity."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:o,selectedTabIndex:d,onChange:p})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Current selection:"," ",e.jsx("span",{className:"font-semibold text-brand",children:o[d].path})]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-3",children:"Many Options"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-4",children:"Handles large lists efficiently with scrollable dropdown."}),e.jsx("div",{className:"max-w-md",children:e.jsx(t.TabSelect,{tabMenu:l,selectedTabIndex:n,onChange:h})}),e.jsx("div",{className:"mt-4 p-4 bg-light-dark rounded-lg",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:["Selected option:"," ",e.jsx("span",{className:"font-semibold text-brand",children:l[n].title})," ","(",n+1," of ",l.length,")"]})})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Use Cases",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"space-y-6",children:[e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Mobile Navigation"}),e.jsxs(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:["Perfect for replacing horizontal tab bars on mobile devices where space is limited.",e.jsx("code",{className:"ml-1 text-xs border border-border px-2 py-1 rounded",children:"ParamTab"})," ","automatically switches to TabSelect on mobile breakpoints."]}),e.jsx(t.CardContainer,{className:"p-4 bg-blue-50 dark:bg-blue-900/20",children:e.jsxs(t.Typography,{tag:"p",className:"text-sm",children:[e.jsx("span",{role:"img","aria-label":"tip",children:"💡"})," ",e.jsx("span",{className:"font-semibold",children:"Tip:"})," Use TabSelect when you have 4+ tabs and limited horizontal space."]})})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Form Filters"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400 mb-3",children:"Use as a filter selector in forms and data tables to switch between different views or data categories."})]}),e.jsxs("div",{children:[e.jsx(t.Typography,{tag:"h5",className:"mb-2",children:"Settings Panels"}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Navigate between different settings sections in a compact, accessible dropdown format."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Features",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.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"palette",children:"🎨"})," ","Smooth Animations"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Chevron rotation and dropdown transitions with translate-y effects."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"moon",children:"🌙"})," ","Dark Mode"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Full dark mode support with automatic theme adaptation."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"lightning",children:"⚡"})," ","Performance"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Optimized rendering with proper key management for large lists."})]}),e.jsxs(t.CardContainer,{className:"p-4",children:[e.jsxs(t.Typography,{tag:"h5",className:"mb-2",children:[e.jsx("span",{role:"img","aria-label":"target",children:"🎯"})," ","Accessibility"]}),e.jsx(t.Typography,{tag:"p",className:"text-sm text-gray-600 dark:text-gray-400",children:"Keyboard navigation and focus management built-in."})]})]})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"TabSelectMenuItem Interface",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(t.BasicTable,{columns:[{key:"prop",label:"Prop",render:a=>e.jsx("code",{className:"text-xs text-brand",children:String(a??"")})},{key:"type",label:"Type",render:a=>e.jsx("code",{className:"text-xs",children:String(a??"")})},{key:"default",label:"Default",render:a=>a==="required"?e.jsx("span",{className:"text-xs text-red-500",children:"required"}):e.jsx("code",{className:"text-xs",children:String(a??"")})},{key:"description",label:"Description",render:a=>e.jsx("span",{className:"text-xs text-gray-600 dark:text-gray-400",children:String(a??"")})}],data:x})})})}),e.jsx(t.PropPlayground,{componentName:"TabSelect",title:"TabSelect Playground",defaultValues:{selectedTabIndex:0},excludeProps:["onChange","tabMenu"],children:a=>e.jsx(t.TabSelect,{...a,onChange:()=>{},tabMenu:[{title:"Option A"},{title:"Option B"},{title:"Option C"}]})}),e.jsx(t.AutoPropsTable,{componentName:"TabSelect"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Examples",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 { TabSelect } from '@e-burgos/tucu-ui';
+import { useState } from 'react';
+import { Home, Settings, User } from 'lucide-react';
+
+// Basic usage
+function BasicExample() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const tabMenu = [
+    { title: 'Dashboard', path: 'dashboard' },
+    { title: 'Analytics', path: 'analytics' },
+    { title: 'Reports', path: 'reports' },
+    { title: 'Settings', path: 'settings' },
+  ];
+
+  return (
+    <TabSelect
+      tabMenu={tabMenu}
+      selectedTabIndex={selectedIndex}
+      onChange={setSelectedIndex}
+    />
+  );
+}
+
+// With icons
+function IconExample() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const tabMenu = [
+    { 
+      title: (
+        <span className="flex items-center gap-2">
+          <Home size={16} />
+          Home
+        </span>
+      ), 
+      path: 'home' 
+    },
+    { 
+      title: (
+        <span className="flex items-center gap-2">
+          <User size={16} />
+          Profile
+        </span>
+      ), 
+      path: 'profile' 
+    },
+  ];
+
+  return (
+    <TabSelect
+      tabMenu={tabMenu}
+      selectedTabIndex={selectedIndex}
+      onChange={setSelectedIndex}
+    />
+  );
+}
+
+// Integration with ParamTab
+// ParamTab automatically uses TabSelect on mobile devices
+import { ParamTab, TabPanel } from '@e-burgos/tucu-ui';
+
+function ResponsiveTabs() {
+  const tabMenu = [
+    { title: 'Overview', path: 'overview' },
+    { title: 'Details', path: 'details' },
+    { title: 'Settings', path: 'settings' },
+  ];
+
+  return (
+    <ParamTab tabMenu={tabMenu}>
+      <TabPanel>Overview content</TabPanel>
+      <TabPanel>Details content</TabPanel>
+      <TabPanel>Settings content</TabPanel>
+    </ParamTab>
+  );
+}
+
+// Custom styling
+function CustomExample() {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  const tabMenu = [
+    { title: 'Option 1', path: 'opt1' },
+    { title: 'Option 2', path: 'opt2' },
+  ];
+
+  return (
+    <div className="max-w-md">
+      <TabSelect
+        tabMenu={tabMenu}
+        selectedTabIndex={selectedIndex}
+        onChange={(index) => {
+          console.log('Selected:', tabMenu[index].path);
+          setSelectedIndex(index);
+        }}
+      />
+    </div>
+  );
+}`})})})})]})};exports.default=g;

package/documentation/TahoeCommandPaletteSection-DaORHbNv.js

@@ -0,0 +1,21 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),s=require("../index-DMs_SmPq.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const c=[{id:"1",label:"New File",icon:e.jsx(a.FilePlus,{className:"h-4 w-4"}),shortcut:"⌘N",group:"File"},{id:"2",label:"Open File...",icon:e.jsx(a.FolderOpen,{className:"h-4 w-4"}),shortcut:"⌘O",group:"File"},{id:"3",label:"Save",icon:e.jsx(a.Save,{className:"h-4 w-4"}),shortcut:"⌘S",group:"File"},{id:"4",label:"Find & Replace",icon:e.jsx(a.Search,{className:"h-4 w-4"}),shortcut:"⌘⇧F",group:"Edit"},{id:"5",label:"Toggle Sidebar",icon:e.jsx(a.PanelLeft,{className:"h-4 w-4"}),shortcut:"⌘B",group:"View"},{id:"6",label:"Toggle Dark Mode",icon:e.jsx(a.Moon,{className:"h-4 w-4"}),group:"View"},{id:"7",label:"Open Terminal",icon:e.jsx(a.Terminal,{className:"h-4 w-4"}),shortcut:"⌘`",group:"Tools"},{id:"8",label:"Run Build",icon:e.jsx(a.Play,{className:"h-4 w-4"}),shortcut:"⌘⇧B",group:"Tools"},{id:"9",label:"Git: Commit",icon:e.jsx(a.GitCommitHorizontal,{className:"h-4 w-4"}),group:"Git"},{id:"10",label:"Git: Push",icon:e.jsx(a.ArrowUpFromLine,{className:"h-4 w-4"}),group:"Git"}];function i(r){const[o,t]=l.useState(!1);return e.jsxs("div",{className:"space-y-3",children:[e.jsx("button",{onClick:()=>t(!0),className:"rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-4 py-2 text-[13px] text-(--macos-tahoe-text) backdrop-blur-sm transition-colors hover:bg-(--macos-tahoe-hover)",children:"Open Command Palette"}),e.jsx(s.MacOSTahoeCommandPalette,{...r,items:c,open:o,onOpenChange:t})]})}const n=()=>{const[r,o]=l.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Command Palette",description:"Spotlight-style command palette with glass material, real-time search filtering, grouped results, keyboard navigation, and customizable trigger key.",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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50",children:e.jsx(a.Command,{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(s.CardContainer,{children:e.jsxs(s.CardTitle,{title:"Interactive Demo",className:"mt-2 mb-2",children:[e.jsxs("div",{className:"space-y-3",children:[e.jsx("button",{onClick:()=>o(!0),className:"rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-4 py-2 text-[13px] text-(--macos-tahoe-text) backdrop-blur-sm transition-colors hover:bg-(--macos-tahoe-hover)",children:"Open Command Palette"}),e.jsxs("p",{className:"text-[12px] text-(--macos-tahoe-text-muted)",children:["Or press"," ",e.jsx("kbd",{className:"rounded border border-(--macos-glass-border) px-1.5 py-0.5 text-[11px]",children:"⌘K"})," ","to toggle"]})]}),e.jsx(s.MacOSTahoeCommandPalette,{items:c,open:r,onOpenChange:o,placeholder:"Type a command or search..."})]})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Features",className:"mt-2 mb-2",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[{icon:e.jsx(a.Search,{className:"h-4 w-4"}),title:"Real-time Filtering",desc:"Fuzzy search across labels and groups"},{icon:e.jsx(a.Keyboard,{className:"h-4 w-4"}),title:"Keyboard Navigation",desc:"Arrow keys to move, Enter to select, Esc to close"},{icon:e.jsx(a.Layers,{className:"h-4 w-4"}),title:"Grouped Results",desc:"Items organized by category with headers"},{icon:e.jsx(a.Sparkles,{className:"h-4 w-4"}),title:"Glass Material",desc:"Prominent blur, translucent background, spatial depth"}].map(t=>e.jsxs("div",{className:"flex gap-3 rounded-lg bg-(--macos-glass-clear-bg) p-3 backdrop-blur-sm border border-(--macos-glass-border-subtle)",children:[e.jsx("div",{className:"mt-0.5 text-(--macos-tahoe-accent)",children:t.icon}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[13px] font-medium text-(--macos-tahoe-text)",children:t.title}),e.jsx("p",{className:"text-[12px] text-(--macos-tahoe-text-muted)",children:t.desc})]})]},t.title))})})}),e.jsx(s.CardContainer,{children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx(s.CodeBlock,{code:`import { MacOSTahoeCommandPalette } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: '1',
+    label: 'New File',
+    icon: <FilePlusIcon />,
+    shortcut: '⌘N',
+    group: 'File',
+    onSelect: () => createFile(),
+  },
+  // ...more items
+];
+
+<MacOSTahoeCommandPalette
+  items={items}
+  open={isOpen}
+  onOpenChange={setIsOpen}
+  placeholder="Type a command..."
+  triggerKey="k"  // ⌘K to toggle
+/>`,language:"tsx"})})}),e.jsx(s.PropPlayground,{componentName:"MacOSTahoeCommandPalette",defaultValues:{placeholder:"Type a command or search...",triggerKey:"k"},includeProps:["placeholder","triggerKey"],excludeProps:["className","items","open","onOpenChange"],children:t=>e.jsx(i,{...t})}),e.jsx(s.AutoPropsTable,{componentName:"MacOSTahoeCommandPalette"})]})};exports.default=n;

package/documentation/TahoeCommandPaletteSection-v_iOPj8C.js

@@ -0,0 +1,217 @@
+import { jsxs as o, Fragment as d, jsx as e } from "react/jsx-runtime";
+import { useState as c } from "react";
+import { H as h, C as l, a as r, bJ as i, c as p, P as g, A as u } from "../index-19KsCnyX.js";
+import { Command as b, Search as m, Keyboard as N, Layers as x, Sparkles as w, FilePlus as y, FolderOpen as C, Save as P, PanelLeft as O, Moon as v, Terminal as F, Play as T, GitCommitHorizontal as f, ArrowUpFromLine as k } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const n = [
+  {
+    id: "1",
+    label: "New File",
+    icon: /* @__PURE__ */ e(y, { className: "h-4 w-4" }),
+    shortcut: "⌘N",
+    group: "File"
+  },
+  {
+    id: "2",
+    label: "Open File...",
+    icon: /* @__PURE__ */ e(C, { className: "h-4 w-4" }),
+    shortcut: "⌘O",
+    group: "File"
+  },
+  {
+    id: "3",
+    label: "Save",
+    icon: /* @__PURE__ */ e(P, { className: "h-4 w-4" }),
+    shortcut: "⌘S",
+    group: "File"
+  },
+  {
+    id: "4",
+    label: "Find & Replace",
+    icon: /* @__PURE__ */ e(m, { className: "h-4 w-4" }),
+    shortcut: "⌘⇧F",
+    group: "Edit"
+  },
+  {
+    id: "5",
+    label: "Toggle Sidebar",
+    icon: /* @__PURE__ */ e(O, { className: "h-4 w-4" }),
+    shortcut: "⌘B",
+    group: "View"
+  },
+  {
+    id: "6",
+    label: "Toggle Dark Mode",
+    icon: /* @__PURE__ */ e(v, { className: "h-4 w-4" }),
+    group: "View"
+  },
+  {
+    id: "7",
+    label: "Open Terminal",
+    icon: /* @__PURE__ */ e(F, { className: "h-4 w-4" }),
+    shortcut: "⌘`",
+    group: "Tools"
+  },
+  {
+    id: "8",
+    label: "Run Build",
+    icon: /* @__PURE__ */ e(T, { className: "h-4 w-4" }),
+    shortcut: "⌘⇧B",
+    group: "Tools"
+  },
+  {
+    id: "9",
+    label: "Git: Commit",
+    icon: /* @__PURE__ */ e(f, { className: "h-4 w-4" }),
+    group: "Git"
+  },
+  {
+    id: "10",
+    label: "Git: Push",
+    icon: /* @__PURE__ */ e(k, { className: "h-4 w-4" }),
+    group: "Git"
+  }
+];
+function S(s) {
+  const [t, a] = c(!1);
+  return /* @__PURE__ */ o("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => a(!0),
+        className: "rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-4 py-2 text-[13px] text-(--macos-tahoe-text) backdrop-blur-sm transition-colors hover:bg-(--macos-tahoe-hover)",
+        children: "Open Command Palette"
+      }
+    ),
+    /* @__PURE__ */ e(
+      i,
+      {
+        ...s,
+        items: n,
+        open: t,
+        onOpenChange: a
+      }
+    )
+  ] });
+}
+const B = () => {
+  const [s, t] = c(!1);
+  return /* @__PURE__ */ o(d, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "Command Palette",
+        description: "Spotlight-style command palette with glass material, real-time search filtering, grouped results, keyboard navigation, and customizable trigger key.",
+        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-orange-500 via-amber-500 to-yellow-500 rounded-full flex items-center justify-center shadow-lg border border-orange-500/50", children: /* @__PURE__ */ e(b, { 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, { children: /* @__PURE__ */ o(r, { title: "Interactive Demo", className: "mt-2 mb-2", children: [
+      /* @__PURE__ */ o("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ e(
+          "button",
+          {
+            onClick: () => t(!0),
+            className: "rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-4 py-2 text-[13px] text-(--macos-tahoe-text) backdrop-blur-sm transition-colors hover:bg-(--macos-tahoe-hover)",
+            children: "Open Command Palette"
+          }
+        ),
+        /* @__PURE__ */ o("p", { className: "text-[12px] text-(--macos-tahoe-text-muted)", children: [
+          "Or press",
+          " ",
+          /* @__PURE__ */ e("kbd", { className: "rounded border border-(--macos-glass-border) px-1.5 py-0.5 text-[11px]", children: "⌘K" }),
+          " ",
+          "to toggle"
+        ] })
+      ] }),
+      /* @__PURE__ */ e(
+        i,
+        {
+          items: n,
+          open: s,
+          onOpenChange: t,
+          placeholder: "Type a command or search..."
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(r, { title: "Features", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+      {
+        icon: /* @__PURE__ */ e(m, { className: "h-4 w-4" }),
+        title: "Real-time Filtering",
+        desc: "Fuzzy search across labels and groups"
+      },
+      {
+        icon: /* @__PURE__ */ e(N, { className: "h-4 w-4" }),
+        title: "Keyboard Navigation",
+        desc: "Arrow keys to move, Enter to select, Esc to close"
+      },
+      {
+        icon: /* @__PURE__ */ e(x, { className: "h-4 w-4" }),
+        title: "Grouped Results",
+        desc: "Items organized by category with headers"
+      },
+      {
+        icon: /* @__PURE__ */ e(w, { className: "h-4 w-4" }),
+        title: "Glass Material",
+        desc: "Prominent blur, translucent background, spatial depth"
+      }
+    ].map((a) => /* @__PURE__ */ o(
+      "div",
+      {
+        className: "flex gap-3 rounded-lg bg-(--macos-glass-clear-bg) p-3 backdrop-blur-sm border border-(--macos-glass-border-subtle)",
+        children: [
+          /* @__PURE__ */ e("div", { className: "mt-0.5 text-(--macos-tahoe-accent)", children: a.icon }),
+          /* @__PURE__ */ o("div", { children: [
+            /* @__PURE__ */ e("p", { className: "text-[13px] font-medium text-(--macos-tahoe-text)", children: a.title }),
+            /* @__PURE__ */ e("p", { className: "text-[12px] text-(--macos-tahoe-text-muted)", children: a.desc })
+          ] })
+        ]
+      },
+      a.title
+    )) }) }) }),
+    /* @__PURE__ */ e(l, { children: /* @__PURE__ */ e(r, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
+      p,
+      {
+        code: `import { MacOSTahoeCommandPalette } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: '1',
+    label: 'New File',
+    icon: <FilePlusIcon />,
+    shortcut: '⌘N',
+    group: 'File',
+    onSelect: () => createFile(),
+  },
+  // ...more items
+];
+
+<MacOSTahoeCommandPalette
+  items={items}
+  open={isOpen}
+  onOpenChange={setIsOpen}
+  placeholder="Type a command..."
+  triggerKey="k"  // ⌘K to toggle
+/>`,
+        language: "tsx"
+      }
+    ) }) }),
+    /* @__PURE__ */ e(
+      g,
+      {
+        componentName: "MacOSTahoeCommandPalette",
+        defaultValues: {
+          placeholder: "Type a command or search...",
+          triggerKey: "k"
+        },
+        includeProps: ["placeholder", "triggerKey"],
+        excludeProps: ["className", "items", "open", "onOpenChange"],
+        children: (a) => /* @__PURE__ */ e(S, { ...a })
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "MacOSTahoeCommandPalette" })
+  ] });
+};
+export {
+  B as default
+};