@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/TabSelectSection-CH7wbbF-.js

@@ -1,420 +0,0 @@
-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-BOVWnu1L.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-DcSilG1V.js

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

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