@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/MacOSColorsSection-VDHMUov0.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-BaGqriuz.js"),g=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const b=[{label:"Blue",light:"#007aff",dark:"#0a84ff"},{label:"Green",light:"#34c759",dark:"#30d158"},{label:"Orange",light:"#ff9500",dark:"#ff9f0a"},{label:"Red",light:"#ff3b30",dark:"#ff453a"},{label:"Yellow",light:"#ffcc00",dark:"#ffd60a"},{label:"Purple",light:"#af52de",dark:"#bf5af2"},{label:"Pink",light:"#ff2d55",dark:"#ff375f"},{label:"Teal",light:"#5ac8fa",dark:"#64d2ff"},{label:"Indigo",light:"#5856d6",dark:"#5e5ce6"}],m=[{label:"Gray",light:"#8e8e93",dark:"#8e8e93"},{label:"Gray 2",light:"#aeaeb2",dark:"#636366"},{label:"Gray 3",light:"#c7c7cc",dark:"#48484a"},{label:"Gray 4",light:"#d1d1d6",dark:"#3a3a3c"},{label:"Gray 5",light:"#e5e5ea",dark:"#2c2c2e"},{label:"Gray 6",light:"#f2f2f7",dark:"#1c1c1e"}],s={light:[{label:"Primary",color:"rgba(0, 0, 0, 0.85)",opacity:.85,desc:"Main text"},{label:"Secondary",color:"rgba(60, 60, 67, 0.6)",opacity:.6,desc:"Subtitles"},{label:"Tertiary",color:"rgba(60, 60, 67, 0.3)",opacity:.3,desc:"Placeholders"},{label:"Quaternary",color:"rgba(60, 60, 67, 0.18)",opacity:.18,desc:"Disabled"},{label:"Quinary",color:"rgba(60, 60, 67, 0.05)",opacity:.05,desc:"Faint"}],dark:[{label:"Primary",color:"rgba(255, 255, 255, 0.85)",opacity:.85,desc:"Main text"},{label:"Secondary",color:"rgba(235, 235, 245, 0.6)",opacity:.6,desc:"Subtitles"},{label:"Tertiary",color:"rgba(235, 235, 245, 0.3)",opacity:.3,desc:"Placeholders"},{label:"Quaternary",color:"rgba(235, 235, 245, 0.18)",opacity:.18,desc:"Disabled"},{label:"Quinary",color:"rgba(235, 235, 245, 0.05)",opacity:.05,desc:"Faint"}]},t={light:[{label:"Label",value:"rgba(0, 0, 0, 0.85)"},{label:"Secondary Label",value:"rgba(60, 60, 67, 0.6)"},{label:"Tertiary Label",value:"rgba(60, 60, 67, 0.3)"},{label:"Separator",value:"rgba(60, 60, 67, 0.29)"},{label:"Window BG",value:"#ececec"},{label:"Control BG",value:"#ffffff"},{label:"Accent",value:"#007aff"},{label:"Link",value:"#0068da"}],dark:[{label:"Label",value:"rgba(255, 255, 255, 0.85)"},{label:"Secondary Label",value:"rgba(235, 235, 245, 0.6)"},{label:"Tertiary Label",value:"rgba(235, 235, 245, 0.3)"},{label:"Separator",value:"rgba(84, 84, 88, 0.65)"},{label:"Window BG",value:"#1e1e1e"},{label:"Control BG",value:"#1e1e1e"},{label:"Accent",value:"#0a84ff"},{label:"Link",value:"#419cff"}]},d=()=>{const{mode:c}=l.useTheme(),r=c==="dark",i=r?s.dark:s.light,o=r?t.dark:t.light;return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"Colors",description:"macOS system color palette based on Apple HIG. All colors adapt between light and dark appearances automatically.",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-red-400 via-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-red-400/50",children:e.jsx(g.Palette,{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(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Label Hierarchy",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Text labels use varying opacity levels to create visual hierarchy. Colors adapt based on the current appearance mode."}),e.jsx("div",{className:"rounded-xl p-6 border border-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4",children:i.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center",style:{backgroundColor:a.color}}),e.jsx("span",{className:"text-sm font-medium",style:{color:a.color},children:a.label}),e.jsxs("span",{className:"text-[10px] text-gray-400",children:[Math.round(a.opacity*100),"% — ",a.desc]})]},a.label))})})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"System Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["9 vibrant system colors used for accents, charts, and interactive elements. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3",children:b.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-xl shadow-sm",style:{backgroundColor:r?a.dark:a.light}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono",children:r?a.dark:a.light})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Gray Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["6 neutral grays for backgrounds, borders, and disabled states. Showing ",r?"dark":"light"," mode values."]}),e.jsx("div",{className:"grid grid-cols-3 sm:grid-cols-6 gap-3",children:m.map(a=>e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-full h-16 rounded-xl border border-gray-200 dark:border-gray-700",style:{backgroundColor:r?a.dark:a.light}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono",children:r?a.dark:a.light})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Semantic Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Purpose-driven tokens mapped to CSS variables. Values shown correspond to the current ",r?"dark":"light"," appearance."]}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-4 gap-3",children:o.map(a=>e.jsxs("div",{className:"flex flex-col gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700",children:[e.jsx("div",{className:"w-full h-10 rounded-md border border-gray-200 dark:border-gray-600",style:{backgroundColor:a.value}}),e.jsx("span",{className:"text-xs font-medium text-gray-700 dark:text-gray-300",children:a.label}),e.jsx("span",{className:"text-[10px] text-gray-400 font-mono break-all",children:a.value})]},a.label))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Tinted Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"System blue applied at varying opacities creates tinted backgrounds for selections and active states."}),e.jsx("div",{className:"flex flex-wrap gap-3",children:[.05,.1,.15,.2,.3,.5].map(a=>{const n=r?`rgba(10, 132, 255, ${a})`:`rgba(0, 122, 255, ${a})`;return e.jsxs("div",{className:"flex flex-col items-center gap-2",children:[e.jsx("div",{className:"w-20 h-14 rounded-lg border border-gray-200 dark:border-gray-700",style:{backgroundColor:n}}),e.jsxs("span",{className:"text-[10px] text-gray-400 font-mono",children:[Math.round(a*100),"%"]})]},a)})})]})})})]})};exports.MacOSColorsSection=d;exports.default=d;

package/documentation/MacOSColorsSection-YEtkXtT9.js

@@ -0,0 +1,305 @@
+import { jsxs as l, Fragment as m, jsx as e } from "react/jsx-runtime";
+import { ay as h, H as f, C as t, a as d, T as s } from "../index-lfg6LZ1p.js";
+import { Palette as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const y = [
+  { label: "Blue", light: "#007aff", dark: "#0a84ff" },
+  { label: "Green", light: "#34c759", dark: "#30d158" },
+  { label: "Orange", light: "#ff9500", dark: "#ff9f0a" },
+  { label: "Red", light: "#ff3b30", dark: "#ff453a" },
+  { label: "Yellow", light: "#ffcc00", dark: "#ffd60a" },
+  { label: "Purple", light: "#af52de", dark: "#bf5af2" },
+  { label: "Pink", light: "#ff2d55", dark: "#ff375f" },
+  { label: "Teal", light: "#5ac8fa", dark: "#64d2ff" },
+  { label: "Indigo", light: "#5856d6", dark: "#5e5ce6" }
+], u = [
+  { label: "Gray", light: "#8e8e93", dark: "#8e8e93" },
+  { label: "Gray 2", light: "#aeaeb2", dark: "#636366" },
+  { label: "Gray 3", light: "#c7c7cc", dark: "#48484a" },
+  { label: "Gray 4", light: "#d1d1d6", dark: "#3a3a3c" },
+  { label: "Gray 5", light: "#e5e5ea", dark: "#2c2c2e" },
+  { label: "Gray 6", light: "#f2f2f7", dark: "#1c1c1e" }
+], c = {
+  light: [
+    {
+      label: "Primary",
+      color: "rgba(0, 0, 0, 0.85)",
+      opacity: 0.85,
+      desc: "Main text"
+    },
+    {
+      label: "Secondary",
+      color: "rgba(60, 60, 67, 0.6)",
+      opacity: 0.6,
+      desc: "Subtitles"
+    },
+    {
+      label: "Tertiary",
+      color: "rgba(60, 60, 67, 0.3)",
+      opacity: 0.3,
+      desc: "Placeholders"
+    },
+    {
+      label: "Quaternary",
+      color: "rgba(60, 60, 67, 0.18)",
+      opacity: 0.18,
+      desc: "Disabled"
+    },
+    {
+      label: "Quinary",
+      color: "rgba(60, 60, 67, 0.05)",
+      opacity: 0.05,
+      desc: "Faint"
+    }
+  ],
+  dark: [
+    {
+      label: "Primary",
+      color: "rgba(255, 255, 255, 0.85)",
+      opacity: 0.85,
+      desc: "Main text"
+    },
+    {
+      label: "Secondary",
+      color: "rgba(235, 235, 245, 0.6)",
+      opacity: 0.6,
+      desc: "Subtitles"
+    },
+    {
+      label: "Tertiary",
+      color: "rgba(235, 235, 245, 0.3)",
+      opacity: 0.3,
+      desc: "Placeholders"
+    },
+    {
+      label: "Quaternary",
+      color: "rgba(235, 235, 245, 0.18)",
+      opacity: 0.18,
+      desc: "Disabled"
+    },
+    {
+      label: "Quinary",
+      color: "rgba(235, 235, 245, 0.05)",
+      opacity: 0.05,
+      desc: "Faint"
+    }
+  ]
+}, i = {
+  light: [
+    { label: "Label", value: "rgba(0, 0, 0, 0.85)" },
+    { label: "Secondary Label", value: "rgba(60, 60, 67, 0.6)" },
+    { label: "Tertiary Label", value: "rgba(60, 60, 67, 0.3)" },
+    { label: "Separator", value: "rgba(60, 60, 67, 0.29)" },
+    { label: "Window BG", value: "#ececec" },
+    { label: "Control BG", value: "#ffffff" },
+    { label: "Accent", value: "#007aff" },
+    { label: "Link", value: "#0068da" }
+  ],
+  dark: [
+    { label: "Label", value: "rgba(255, 255, 255, 0.85)" },
+    { label: "Secondary Label", value: "rgba(235, 235, 245, 0.6)" },
+    { label: "Tertiary Label", value: "rgba(235, 235, 245, 0.3)" },
+    { label: "Separator", value: "rgba(84, 84, 88, 0.65)" },
+    { label: "Window BG", value: "#1e1e1e" },
+    { label: "Control BG", value: "#1e1e1e" },
+    { label: "Accent", value: "#0a84ff" },
+    { label: "Link", value: "#419cff" }
+  ]
+}, S = () => {
+  const { mode: o } = h(), r = o === "dark", n = r ? c.dark : c.light, b = r ? i.dark : i.light;
+  return /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ e(
+      f,
+      {
+        title: "Colors",
+        description: "macOS system color palette based on Apple HIG. All colors adapt between light and dark appearances automatically.",
+        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-red-400 via-blue-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-red-400/50", children: /* @__PURE__ */ e(p, { 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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Label Hierarchy", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "Text labels use varying opacity levels to create visual hierarchy. Colors adapt based on the current appearance mode."
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "rounded-xl p-6 border border-gray-200 dark:border-gray-700",
+          style: { backgroundColor: r ? "#1e1e1e" : "#ffffff" },
+          children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4", children: n.map((a) => /* @__PURE__ */ l(
+            "div",
+            {
+              className: "flex flex-col items-center gap-2",
+              children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "w-full h-16 rounded-lg border border-gray-200 dark:border-gray-700 flex items-center justify-center",
+                    style: { backgroundColor: a.color }
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: "text-sm font-medium",
+                    style: { color: a.color },
+                    children: a.label
+                  }
+                ),
+                /* @__PURE__ */ l("span", { className: "text-[10px] text-gray-400", children: [
+                  Math.round(a.opacity * 100),
+                  "% — ",
+                  a.desc
+                ] })
+              ]
+            },
+            a.label
+          )) })
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "System Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ l(
+        s,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "9 vibrant system colors used for accents, charts, and interactive elements. Showing ",
+            r ? "dark" : "light",
+            " mode values."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-4 lg:grid-cols-9 gap-3", children: y.map((a) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex flex-col items-center gap-2",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-full h-16 rounded-xl shadow-sm",
+                style: {
+                  backgroundColor: r ? a.dark : a.light
+                }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: a.label }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 font-mono", children: r ? a.dark : a.light })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Gray Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ l(
+        s,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "6 neutral grays for backgrounds, borders, and disabled states. Showing ",
+            r ? "dark" : "light",
+            " mode values."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-6 gap-3", children: u.map((a) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex flex-col items-center gap-2",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-full h-16 rounded-xl border border-gray-200 dark:border-gray-700",
+                style: {
+                  backgroundColor: r ? a.dark : a.light
+                }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: a.label }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 font-mono", children: r ? a.dark : a.light })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Semantic Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ l(
+        s,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "Purpose-driven tokens mapped to CSS variables. Values shown correspond to the current ",
+            r ? "dark" : "light",
+            " appearance."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-3", children: b.map((a) => /* @__PURE__ */ l(
+        "div",
+        {
+          className: "flex flex-col gap-2 p-3 rounded-lg border border-gray-200 dark:border-gray-700",
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: "w-full h-10 rounded-md border border-gray-200 dark:border-gray-600",
+                style: { backgroundColor: a.value }
+              }
+            ),
+            /* @__PURE__ */ e("span", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: a.label }),
+            /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400 font-mono break-all", children: a.value })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Tinted Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ l("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "System blue applied at varying opacities creates tinted backgrounds for selections and active states."
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3", children: [0.05, 0.1, 0.15, 0.2, 0.3, 0.5].map((a) => {
+        const g = r ? `rgba(10, 132, 255, ${a})` : `rgba(0, 122, 255, ${a})`;
+        return /* @__PURE__ */ l(
+          "div",
+          {
+            className: "flex flex-col items-center gap-2",
+            children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "w-20 h-14 rounded-lg border border-gray-200 dark:border-gray-700",
+                  style: { backgroundColor: g }
+                }
+              ),
+              /* @__PURE__ */ l("span", { className: "text-[10px] text-gray-400 font-mono", children: [
+                Math.round(a * 100),
+                "%"
+              ] })
+            ]
+          },
+          a
+        );
+      }) })
+    ] }) }) })
+  ] });
+};
+export {
+  S as MacOSColorsSection,
+  S as default
+};

package/documentation/MacOSCommandPaletteSection-BNpF6qM7.js

@@ -0,0 +1,33 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("../index-BaGqriuz.js"),a=require("lucide-react");require("react-router-dom");require("react-dom");const r=[{id:"new-file",label:"New File",group:"File",shortcut:["⌘","N"],icon:e.jsx(a.FilePlus,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"open-file",label:"Open File",group:"File",shortcut:["⌘","O"],icon:e.jsx(a.FolderOpen,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"save",label:"Save",group:"File",shortcut:["⌘","S"],icon:e.jsx(a.Save,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"settings",label:"Settings",group:"Navigation",shortcut:["⌘",","],icon:e.jsx(a.Settings,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"theme",label:"Toggle Theme",group:"Navigation",icon:e.jsx(a.Moon,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"terminal",label:"Open Terminal",group:"Tools",shortcut:["⌘","`"],icon:e.jsx(a.Terminal,{className:"w-4 h-4"}),onSelect:()=>{}},{id:"search",label:"Search in Files",group:"Tools",shortcut:["⌘","Shift","F"],icon:e.jsx(a.Search,{className:"w-4 h-4"}),onSelect:()=>{}}];function c(s){const[o,l]=n.useState(!1);return e.jsxs("div",{className:"flex flex-col items-center gap-4",children:[e.jsxs(t.Button,{variant:"solid",size:"medium",onClick:()=>l(!0),children:[e.jsx(a.Search,{size:14,className:"mr-2"}),"Open Command Palette"]}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:["Or press ",e.jsxs("kbd",{className:"px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:["⌘",s.triggerKey?.toUpperCase()??"K"]})]}),e.jsx(t.MacOSCommandPalette,{open:o,onOpenChange:l,items:r,placeholder:s.placeholder})]})}const i=()=>{const[s,o]=n.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(t.HeroCard,{title:"CommandPalette",description:"A native macOS Spotlight-style command palette with Liquid Glass, grouped results, keyboard navigation, shortcut display, and fuzzy search. Triggered via ⌘K by default.",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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Interactive Demo",className:"mt-2 mb-2",children:e.jsxs("div",{className:"p-6 flex flex-col items-center gap-4",children:[e.jsxs(t.Button,{variant:"solid",size:"medium",onClick:()=>o(!0),children:[e.jsx(a.Search,{size:14,className:"mr-2"}),"Open Command Palette"]}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:["Or press"," ",e.jsx("kbd",{className:"px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono",children:"⌘K"})," ","anywhere on this page"]})]})})}),e.jsx(t.MacOSCommandPalette,{open:s,onOpenChange:o,items:r,placeholder:"Search commands, files, navigation…"}),e.jsx(t.PropPlayground,{componentName:"MacOSCommandPalette",defaultValues:{placeholder:"Search or type a command…",triggerKey:"k"},controlOverrides:[{name:"placeholder",type:"text",description:"Search input placeholder"},{name:"triggerKey",type:"text",description:"Keyboard shortcut letter (Meta+key)"}],includeProps:["placeholder","triggerKey"],excludeProps:["className","items","open","onOpenChange"],children:l=>e.jsx(c,{...l})}),e.jsx(t.AutoPropsTable,{componentName:"MacOSCommandPalette"}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Code Example",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 { MacOSCommandPalette } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: 'new-file',
+    label: 'New File',
+    group: 'File',
+    shortcut: ['⌘', 'N'],
+    icon: <FilePlusIcon />,
+    onSelect: () => { /* … */ },
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    group: 'Navigation',
+    shortcut: ['⌘', ','],
+    onSelect: () => navigate('/settings'),
+  },
+];
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSCommandPalette
+      items={items}
+      placeholder="Search commands…"
+      open={open}
+      onOpenChange={setOpen}
+      triggerKey="k"   // default: Meta+K
+    />
+  );
+}`})})})})]})};exports.MacOSCommandPaletteSection=i;exports.default=i;

package/documentation/MacOSCommandPaletteSection-WanBDypB.js

@@ -0,0 +1,143 @@
+import { jsxs as a, Fragment as p, jsx as e } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { H as h, C as r, a as i, x as c, bt as d, P as g, A as u, c as S } from "../index-lfg6LZ1p.js";
+import { Command as f, Search as n, FilePlus as N, FolderOpen as y, Save as v, Settings as b, Moon as w, Terminal as x } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const m = [
+  { id: "new-file", label: "New File", group: "File", shortcut: ["⌘", "N"], icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "open-file", label: "Open File", group: "File", shortcut: ["⌘", "O"], icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "save", label: "Save", group: "File", shortcut: ["⌘", "S"], icon: /* @__PURE__ */ e(v, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "settings", label: "Settings", group: "Navigation", shortcut: ["⌘", ","], icon: /* @__PURE__ */ e(b, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "theme", label: "Toggle Theme", group: "Navigation", icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "terminal", label: "Open Terminal", group: "Tools", shortcut: ["⌘", "`"], icon: /* @__PURE__ */ e(x, { className: "w-4 h-4" }), onSelect: () => {
+  } },
+  { id: "search", label: "Search in Files", group: "Tools", shortcut: ["⌘", "Shift", "F"], icon: /* @__PURE__ */ e(n, { className: "w-4 h-4" }), onSelect: () => {
+  } }
+];
+function C(t) {
+  const [o, l] = s(!1);
+  return /* @__PURE__ */ a("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ a(c, { variant: "solid", size: "medium", onClick: () => l(!0), children: [
+      /* @__PURE__ */ e(n, { size: 14, className: "mr-2" }),
+      "Open Command Palette"
+    ] }),
+    /* @__PURE__ */ a("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+      "Or press ",
+      /* @__PURE__ */ a("kbd", { className: "px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: [
+        "⌘",
+        t.triggerKey?.toUpperCase() ?? "K"
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        open: o,
+        onOpenChange: l,
+        items: m,
+        placeholder: t.placeholder
+      }
+    )
+  ] });
+}
+const T = () => {
+  const [t, o] = s(!1);
+  return /* @__PURE__ */ a(p, { children: [
+    /* @__PURE__ */ e(
+      h,
+      {
+        title: "CommandPalette",
+        description: "A native macOS Spotlight-style command palette with Liquid Glass, grouped results, keyboard navigation, shortcut display, and fuzzy search. Triggered via ⌘K by default.",
+        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(f, { 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(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Interactive Demo", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "p-6 flex flex-col items-center gap-4", children: [
+      /* @__PURE__ */ a(c, { variant: "solid", size: "medium", onClick: () => o(!0), children: [
+        /* @__PURE__ */ e(n, { size: 14, className: "mr-2" }),
+        "Open Command Palette"
+      ] }),
+      /* @__PURE__ */ a("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: [
+        "Or press",
+        " ",
+        /* @__PURE__ */ e("kbd", { className: "px-1.5 py-0.5 rounded bg-gray-100 dark:bg-gray-800 font-mono", children: "⌘K" }),
+        " ",
+        "anywhere on this page"
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(
+      d,
+      {
+        open: t,
+        onOpenChange: o,
+        items: m,
+        placeholder: "Search commands, files, navigation…"
+      }
+    ),
+    /* @__PURE__ */ e(
+      g,
+      {
+        componentName: "MacOSCommandPalette",
+        defaultValues: {
+          placeholder: "Search or type a command…",
+          triggerKey: "k"
+        },
+        controlOverrides: [
+          { name: "placeholder", type: "text", description: "Search input placeholder" },
+          { name: "triggerKey", type: "text", description: "Keyboard shortcut letter (Meta+key)" }
+        ],
+        includeProps: ["placeholder", "triggerKey"],
+        excludeProps: ["className", "items", "open", "onOpenChange"],
+        children: (l) => /* @__PURE__ */ e(C, { ...l })
+      }
+    ),
+    /* @__PURE__ */ e(u, { componentName: "MacOSCommandPalette" }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      S,
+      {
+        language: "tsx",
+        code: `import { MacOSCommandPalette } from '@e-burgos/tucu-ui';
+
+const items = [
+  {
+    id: 'new-file',
+    label: 'New File',
+    group: 'File',
+    shortcut: ['⌘', 'N'],
+    icon: <FilePlusIcon />,
+    onSelect: () => { /* … */ },
+  },
+  {
+    id: 'settings',
+    label: 'Settings',
+    group: 'Navigation',
+    shortcut: ['⌘', ','],
+    onSelect: () => navigate('/settings'),
+  },
+];
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <MacOSCommandPalette
+      items={items}
+      placeholder="Search commands…"
+      open={open}
+      onOpenChange={setOpen}
+      triggerKey="k"   // default: Meta+K
+    />
+  );
+}`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as MacOSCommandPaletteSection,
+  T as default
+};