@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/TabSelectSection-jn_HenZM.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-BaGqriuz.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-gray-300 dark:border-gray-600 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-Bs1enphA.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-BaGqriuz.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-ClvMCVUp.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-lfg6LZ1p.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
+};

package/documentation/TahoeDialogSection-Bzn59FfH.js

@@ -0,0 +1,228 @@
+import { jsxs as a, Fragment as h, jsx as e } from "react/jsx-runtime";
+import { useState as i } from "react";
+import { H as b, C as c, a as n, bL as d, bM as o, c as u, P as x, A as f } from "../index-lfg6LZ1p.js";
+import { MessageSquare as v, Laptop as C } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+function N(m) {
+  const [t, l] = i(!1);
+  return /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ e(
+      "button",
+      {
+        onClick: () => l(!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 Dialog"
+      }
+    ),
+    /* @__PURE__ */ e(
+      d,
+      {
+        ...m,
+        open: t,
+        onClose: () => l(!1),
+        footer: /* @__PURE__ */ e(
+          o,
+          {
+            variant: "primary",
+            onClick: () => l(!1),
+            children: "Close"
+          }
+        ),
+        children: /* @__PURE__ */ e("p", { className: "text-[13px] text-(--macos-tahoe-text-muted) leading-relaxed", children: "Adjust the props above to see changes reflected here." })
+      }
+    )
+  ] });
+}
+const S = () => {
+  const [m, t] = i(!1), [l, s] = i(!1), [p, r] = i(!1);
+  return /* @__PURE__ */ a(h, { children: [
+    /* @__PURE__ */ e(
+      b,
+      {
+        title: "Dialog",
+        description: "Modal dialog with prominent glass material, overlay blur, focus trapping, and footer action buttons.",
+        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-rose-500 via-pink-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-rose-500/50", children: /* @__PURE__ */ e(v, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ a(n, { title: "Basic Dialog", className: "mt-2 mb-2", 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 Dialog"
+        }
+      ),
+      /* @__PURE__ */ e(
+        d,
+        {
+          open: m,
+          onClose: () => t(!1),
+          title: "About This Mac",
+          footer: /* @__PURE__ */ e(
+            o,
+            {
+              variant: "primary",
+              onClick: () => t(!1),
+              children: "OK"
+            }
+          ),
+          children: /* @__PURE__ */ a("div", { className: "space-y-3 text-(--macos-tahoe-text)", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ e(C, { className: "h-10 w-10 text-(--macos-tahoe-accent)" }),
+              /* @__PURE__ */ a("div", { children: [
+                /* @__PURE__ */ e("p", { className: "text-[15px] font-semibold", children: "macOS Tahoe" }),
+                /* @__PURE__ */ e("p", { className: "text-[13px] text-(--macos-tahoe-text-muted)", children: "Version 26.0" })
+              ] })
+            ] }),
+            /* @__PURE__ */ a("p", { className: "text-[13px] text-(--macos-tahoe-text-muted) leading-relaxed", children: [
+              "MacBook Pro (16-inch, 2024)",
+              /* @__PURE__ */ e("br", {}),
+              "Apple M4 Max — 48 GB Memory"
+            ] })
+          ] })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ a(n, { title: "Confirmation Dialog", className: "mt-2 mb-2", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => s(!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: "Delete Item"
+        }
+      ),
+      /* @__PURE__ */ e(
+        d,
+        {
+          open: l,
+          onClose: () => s(!1),
+          title: "Are you sure?",
+          width: 380,
+          footer: /* @__PURE__ */ a(h, { children: [
+            /* @__PURE__ */ e(o, { onClick: () => s(!1), children: "Cancel" }),
+            /* @__PURE__ */ e(
+              o,
+              {
+                variant: "destructive",
+                onClick: () => s(!1),
+                children: "Delete"
+              }
+            )
+          ] }),
+          children: /* @__PURE__ */ e("p", { className: "text-[13px] text-(--macos-tahoe-text-muted) leading-relaxed", children: "This will permanently delete the selected item. This action cannot be undone." })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ a(n, { title: "Form Dialog", className: "mt-2 mb-2", children: [
+      /* @__PURE__ */ e(
+        "button",
+        {
+          onClick: () => r(!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: "Save As..."
+        }
+      ),
+      /* @__PURE__ */ e(
+        d,
+        {
+          open: p,
+          onClose: () => r(!1),
+          title: "Save As",
+          width: 460,
+          footer: /* @__PURE__ */ a(h, { children: [
+            /* @__PURE__ */ e(o, { onClick: () => r(!1), children: "Cancel" }),
+            /* @__PURE__ */ e(
+              o,
+              {
+                variant: "primary",
+                onClick: () => r(!1),
+                children: "Save"
+              }
+            )
+          ] }),
+          children: /* @__PURE__ */ a("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ e("label", { className: "mb-1 block text-[12px] font-medium text-(--macos-tahoe-text)", children: "Save As:" }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  defaultValue: "Untitled",
+                  className: "w-full rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-3 py-2 text-[13px] text-(--macos-tahoe-text) outline-none backdrop-blur-sm focus:ring-2 focus:ring-(--macos-tahoe-accent)/40"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ e("label", { className: "mb-1 block text-[12px] font-medium text-(--macos-tahoe-text)", children: "Tags:" }),
+              /* @__PURE__ */ e(
+                "input",
+                {
+                  placeholder: "Add tags...",
+                  className: "w-full rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-3 py-2 text-[13px] text-(--macos-tahoe-text) outline-none backdrop-blur-sm placeholder:text-(--macos-tahoe-text-muted) focus:ring-2 focus:ring-(--macos-tahoe-accent)/40"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a("div", { children: [
+              /* @__PURE__ */ e("label", { className: "mb-1 block text-[12px] font-medium text-(--macos-tahoe-text)", children: "File Format:" }),
+              /* @__PURE__ */ a("select", { className: "w-full rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-3 py-2 text-[13px] text-(--macos-tahoe-text) outline-none backdrop-blur-sm focus:ring-2 focus:ring-(--macos-tahoe-accent)/40", children: [
+                /* @__PURE__ */ e("option", { children: "Rich Text Document" }),
+                /* @__PURE__ */ e("option", { children: "Plain Text" }),
+                /* @__PURE__ */ e("option", { children: "HTML" })
+              ] })
+            ] })
+          ] })
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(n, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e(
+      u,
+      {
+        code: `import { MacOSTahoeDialog, MacOSTahoeDialogButton } from '@e-burgos/tucu-ui';
+
+<MacOSTahoeDialog
+  open={isOpen}
+  onClose={() => setOpen(false)}
+  title="Save As"
+  width={420}
+  closeOnOverlay
+  closeOnEscape
+  footer={
+    <>
+      <MacOSTahoeDialogButton onClick={cancel}>
+        Cancel
+      </MacOSTahoeDialogButton>
+      <MacOSTahoeDialogButton variant="primary" onClick={save}>
+        Save
+      </MacOSTahoeDialogButton>
+    </>
+  }
+>
+  <p>Dialog content</p>
+</MacOSTahoeDialog>`,
+        language: "tsx"
+      }
+    ) }) }),
+    /* @__PURE__ */ e(
+      x,
+      {
+        componentName: "MacOSTahoeDialog",
+        defaultValues: {
+          title: "My Dialog",
+          width: 420,
+          closeOnEscape: !0,
+          closeOnOverlay: !0
+        },
+        includeProps: ["title", "width", "closeOnEscape", "closeOnOverlay"],
+        excludeProps: ["className", "open", "onClose", "footer"],
+        children: (g) => /* @__PURE__ */ e(N, { ...g })
+      }
+    ),
+    /* @__PURE__ */ e(f, { componentName: "MacOSTahoeDialog" })
+  ] });
+};
+export {
+  S as TahoeDialogSection,
+  S as default
+};

package/documentation/TahoeDialogSection-LvFsaPNL.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),a=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function m(c){const[o,t]=r.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 Dialog"}),e.jsx(a.MacOSTahoeDialog,{...c,open:o,onClose:()=>t(!1),footer:e.jsx(a.MacOSTahoeDialogButton,{variant:"primary",onClick:()=>t(!1),children:"Close"}),children:e.jsx("p",{className:"text-[13px] text-(--macos-tahoe-text-muted) leading-relaxed",children:"Adjust the props above to see changes reflected here."})})]})}const i=()=>{const[c,o]=r.useState(!1),[t,s]=r.useState(!1),[d,l]=r.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Dialog",description:"Modal dialog with prominent glass material, overlay blur, focus trapping, and footer action buttons.",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-rose-500 via-pink-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-rose-500/50",children:e.jsx(n.MessageSquare,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{children:e.jsxs(a.CardTitle,{title:"Basic Dialog",className:"mt-2 mb-2",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 Dialog"}),e.jsx(a.MacOSTahoeDialog,{open:c,onClose:()=>o(!1),title:"About This Mac",footer:e.jsx(a.MacOSTahoeDialogButton,{variant:"primary",onClick:()=>o(!1),children:"OK"}),children:e.jsxs("div",{className:"space-y-3 text-(--macos-tahoe-text)",children:[e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(n.Laptop,{className:"h-10 w-10 text-(--macos-tahoe-accent)"}),e.jsxs("div",{children:[e.jsx("p",{className:"text-[15px] font-semibold",children:"macOS Tahoe"}),e.jsx("p",{className:"text-[13px] text-(--macos-tahoe-text-muted)",children:"Version 26.0"})]})]}),e.jsxs("p",{className:"text-[13px] text-(--macos-tahoe-text-muted) leading-relaxed",children:["MacBook Pro (16-inch, 2024)",e.jsx("br",{}),"Apple M4 Max — 48 GB Memory"]})]})})]})}),e.jsx(a.CardContainer,{children:e.jsxs(a.CardTitle,{title:"Confirmation Dialog",className:"mt-2 mb-2",children:[e.jsx("button",{onClick:()=>s(!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:"Delete Item"}),e.jsx(a.MacOSTahoeDialog,{open:t,onClose:()=>s(!1),title:"Are you sure?",width:380,footer:e.jsxs(e.Fragment,{children:[e.jsx(a.MacOSTahoeDialogButton,{onClick:()=>s(!1),children:"Cancel"}),e.jsx(a.MacOSTahoeDialogButton,{variant:"destructive",onClick:()=>s(!1),children:"Delete"})]}),children:e.jsx("p",{className:"text-[13px] text-(--macos-tahoe-text-muted) leading-relaxed",children:"This will permanently delete the selected item. This action cannot be undone."})})]})}),e.jsx(a.CardContainer,{children:e.jsxs(a.CardTitle,{title:"Form Dialog",className:"mt-2 mb-2",children:[e.jsx("button",{onClick:()=>l(!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:"Save As..."}),e.jsx(a.MacOSTahoeDialog,{open:d,onClose:()=>l(!1),title:"Save As",width:460,footer:e.jsxs(e.Fragment,{children:[e.jsx(a.MacOSTahoeDialogButton,{onClick:()=>l(!1),children:"Cancel"}),e.jsx(a.MacOSTahoeDialogButton,{variant:"primary",onClick:()=>l(!1),children:"Save"})]}),children:e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-[12px] font-medium text-(--macos-tahoe-text)",children:"Save As:"}),e.jsx("input",{defaultValue:"Untitled",className:"w-full rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-3 py-2 text-[13px] text-(--macos-tahoe-text) outline-none backdrop-blur-sm focus:ring-2 focus:ring-(--macos-tahoe-accent)/40"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-[12px] font-medium text-(--macos-tahoe-text)",children:"Tags:"}),e.jsx("input",{placeholder:"Add tags...",className:"w-full rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-3 py-2 text-[13px] text-(--macos-tahoe-text) outline-none backdrop-blur-sm placeholder:text-(--macos-tahoe-text-muted) focus:ring-2 focus:ring-(--macos-tahoe-accent)/40"})]}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-[12px] font-medium text-(--macos-tahoe-text)",children:"File Format:"}),e.jsxs("select",{className:"w-full rounded-lg border border-(--macos-glass-border) bg-(--macos-glass-clear-bg) px-3 py-2 text-[13px] text-(--macos-tahoe-text) outline-none backdrop-blur-sm focus:ring-2 focus:ring-(--macos-tahoe-accent)/40",children:[e.jsx("option",{children:"Rich Text Document"}),e.jsx("option",{children:"Plain Text"}),e.jsx("option",{children:"HTML"})]})]})]})})]})}),e.jsx(a.CardContainer,{children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx(a.CodeBlock,{code:`import { MacOSTahoeDialog, MacOSTahoeDialogButton } from '@e-burgos/tucu-ui';
+
+<MacOSTahoeDialog
+  open={isOpen}
+  onClose={() => setOpen(false)}
+  title="Save As"
+  width={420}
+  closeOnOverlay
+  closeOnEscape
+  footer={
+    <>
+      <MacOSTahoeDialogButton onClick={cancel}>
+        Cancel
+      </MacOSTahoeDialogButton>
+      <MacOSTahoeDialogButton variant="primary" onClick={save}>
+        Save
+      </MacOSTahoeDialogButton>
+    </>
+  }
+>
+  <p>Dialog content</p>
+</MacOSTahoeDialog>`,language:"tsx"})})}),e.jsx(a.PropPlayground,{componentName:"MacOSTahoeDialog",defaultValues:{title:"My Dialog",width:420,closeOnEscape:!0,closeOnOverlay:!0},includeProps:["title","width","closeOnEscape","closeOnOverlay"],excludeProps:["className","open","onClose","footer"],children:x=>e.jsx(m,{...x})}),e.jsx(a.AutoPropsTable,{componentName:"MacOSTahoeDialog"})]})};exports.TahoeDialogSection=i;exports.default=i;