@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/TabSelectSection-Bwf53Fqf.js

@@ -0,0 +1,420 @@
+import { jsxs as t, Fragment as N, jsx as e } from "react/jsx-runtime";
+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-DoxeCFUJ.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 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" },
+    { title: "Settings", path: "settings" }
+  ], h = [
+    {
+      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(I, { size: 16 }),
+        "Home"
+      ] }),
+      path: "home"
+    },
+    {
+      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(k, { size: 16 }),
+        "Profile"
+      ] }),
+      path: "profile"
+    },
+    {
+      title: /* @__PURE__ */ t("span", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ e(M, { size: 16 }),
+        "Settings"
+      ] }),
+      path: "settings"
+    }
+  ], c = [
+    { 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" }
+  ], u = [
+    {
+      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 /* @__PURE__ */ t(N, { 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(
+          a,
+          {
+            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."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
+          i,
+          {
+            tabMenu: p,
+            selectedTabIndex: o,
+            onChange: b
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          "Selected:",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: p[o].title })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "With Icons" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Enhanced dropdown with icon support for better visual clarity."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
+          i,
+          {
+            tabMenu: h,
+            selectedTabIndex: m,
+            onChange: g
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-4 p-4 bg-light-dark rounded-lg", children: /* @__PURE__ */ t(a, { tag: "p", className: "text-sm", children: [
+          "Current selection:",
+          " ",
+          /* @__PURE__ */ e("span", { className: "font-semibold text-brand", children: h[m].path })
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-3", children: "Many Options" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400 mb-4",
+            children: "Handles large lists efficiently with scrollable dropdown."
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "max-w-md", children: /* @__PURE__ */ e(
+          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: c[r].title }),
+          " ",
+          "(",
+          r + 1,
+          " of ",
+          c.length,
+          ")"
+        ] }) })
+      ] })
+    ] }) }) }) }),
+    /* @__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(
+          a,
+          {
+            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.",
+              /* @__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(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:" }),
+          " Use TabSelect when you have 4+ tabs and limited horizontal space."
+        ] }) })
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Form Filters" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            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."
+          }
+        )
+      ] }),
+      /* @__PURE__ */ t("div", { children: [
+        /* @__PURE__ */ e(a, { tag: "h5", className: "mb-2", children: "Settings Panels" }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Navigate between different settings sections in a compact, accessible dropdown format."
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__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: "🎨" }),
+          " ",
+          "Smooth Animations"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Chevron rotation and dropdown transitions with translate-y effects."
+          }
+        )
+      ] }),
+      /* @__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: "🌙" }),
+          " ",
+          "Dark Mode"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Full dark mode support with automatic theme adaptation."
+          }
+        )
+      ] }),
+      /* @__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: "⚡" }),
+          " ",
+          "Performance"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Optimized rendering with proper key management for large lists."
+          }
+        )
+      ] }),
+      /* @__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: "🎯" }),
+          " ",
+          "Accessibility"
+        ] }),
+        /* @__PURE__ */ e(
+          a,
+          {
+            tag: "p",
+            className: "text-sm text-gray-600 dark:text-gray-400",
+            children: "Keyboard navigation and focus management built-in."
+          }
+        )
+      ] })
+    ] }) }) }) }),
+    /* @__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';
+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>
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  H as default
+};

package/documentation/TabSelectSection-qEsIlzZP.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-DWDUS-PU.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-CAOQM68l.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-DWDUS-PU.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;