@e-burgos/tucu-ui 2.0.9 → 2.0.11

package/documentation/{MacOSPopoverSection-Ct-lBd1V.js → MacOSPopoverSection-CkT1ssbc.js}

@@ -1,7 +1,7 @@
 import { jsxs as n, Fragment as b, jsx as e } from "react/jsx-runtime";
 import { useState as p } from "react";
-import { H as v, C as i, a as c, bv as d, bw as o, P as g, A as y, c as N } from "../index-lfg6LZ1p.js";
-import { MessageSquare as f, FilePlus as h, Clock as k, Save as C, Trash2 as m, Check as x, Lock as O, FolderOpen as w } from "lucide-react";
+import { H as v, C as i, a as c, bx as d, by as o, P as g, A as N, c as f } from "../index-4GONhZIF.js";
+import { MessageSquare as y, FilePlus as h, Clock as x, Save as C, Trash2 as m, Check as O, Lock as k, FolderOpen as w } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
 function P(r) {
@@ -14,15 +14,39 @@ function P(r) {
       placement: r.placement,
       minWidth: r.minWidth,
       content: /* @__PURE__ */ n("div", { className: "py-1", children: [
-        /* @__PURE__ */ e(o, { label: "New File", icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }), shortcut: "⌘N", onClick: () => a(!1) }),
-        /* @__PURE__ */ e(o, { label: "Open", icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }), shortcut: "⌘O", onClick: () => a(!1) }),
-        /* @__PURE__ */ e(o, { label: "Delete", icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }), destructive: !0, onClick: () => a(!1) })
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "New File",
+            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
+            shortcut: "⌘N",
+            onClick: () => a(!1)
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Open",
+            icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
+            shortcut: "⌘O",
+            onClick: () => a(!1)
+          }
+        ),
+        /* @__PURE__ */ e(
+          o,
+          {
+            label: "Delete",
+            icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
+            destructive: !0,
+            onClick: () => a(!1)
+          }
+        )
       ] }),
       children: /* @__PURE__ */ n(
         "button",
         {
           onClick: () => a(!0),
-          className: "rounded-lg border border-gray-300 dark:border-gray-600 px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+          className: "rounded-lg border border-border px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
           children: [
             "Open Popover (",
             r.placement,
@@ -41,7 +65,7 @@ const D = () => {
       {
         title: "Popover",
         description: "A macOS-style popover / context menu with backdrop blur, placement options, keyboard shortcuts, destructive styling, disabled items, and animated show/hide.",
-        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-violet-500 via-purple-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-violet-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" }) })
+        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-violet-500 via-purple-500 to-fuchsia-600 rounded-full flex items-center justify-center shadow-lg border border-violet-500/50", children: /* @__PURE__ */ e(y, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Context Menu", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center pb-40", children: /* @__PURE__ */ e(
@@ -51,56 +75,112 @@ const D = () => {
         onClose: t,
         placement: "bottom",
         content: /* @__PURE__ */ n("div", { className: "py-1", children: [
-          /* @__PURE__ */ e(o, { label: "New File", icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }), shortcut: "⌘N", onClick: t }),
-          /* @__PURE__ */ e(o, { label: "Open Recent", icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }), onClick: t }),
-          /* @__PURE__ */ e(o, { label: "Save As…", icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }), shortcut: "⌘⇧S", onClick: t }),
-          /* @__PURE__ */ e(o, { label: "Delete", icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }), destructive: !0, onClick: t })
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "New File",
+              icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" }),
+              shortcut: "⌘N",
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Open Recent",
+              icon: /* @__PURE__ */ e(x, { className: "w-4 h-4" }),
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Save As…",
+              icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
+              shortcut: "⌘⇧S",
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Delete",
+              icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
+              destructive: !0,
+              onClick: t
+            }
+          )
         ] }),
         children: /* @__PURE__ */ e(
           "button",
           {
             onClick: () => a("context"),
-            className: "rounded-lg border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+            className: "rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
             children: "Right-click Menu"
           }
         )
       }
     ) }) }) }),
-    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Four Placements", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-8 p-8", children: ["bottom", "top", "right", "left"].map((l) => /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
-      d,
-      {
-        isOpen: r === l,
-        onClose: t,
-        placement: l,
-        content: /* @__PURE__ */ n("div", { className: "py-1", children: [
-          /* @__PURE__ */ e(o, { label: "Option A", onClick: t }),
-          /* @__PURE__ */ e(o, { label: "Option B", onClick: t })
-        ] }),
-        children: /* @__PURE__ */ e(
-          "button",
-          {
-            onClick: () => a(l),
-            className: "rounded-lg border border-gray-300 dark:border-gray-600 px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors capitalize",
-            children: l
-          }
-        )
-      }
-    ) }, l)) }) }) }) }),
+    /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Four Placements", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-2 gap-8 p-8", children: ["bottom", "top", "right", "left"].map(
+      (l) => /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e(
+        d,
+        {
+          isOpen: r === l,
+          onClose: t,
+          placement: l,
+          content: /* @__PURE__ */ n("div", { className: "py-1", children: [
+            /* @__PURE__ */ e(o, { label: "Option A", onClick: t }),
+            /* @__PURE__ */ e(o, { label: "Option B", onClick: t })
+          ] }),
+          children: /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => a(l),
+              className: "rounded-lg border border-border px-3 py-2 text-xs text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors capitalize",
+              children: l
+            }
+          )
+        }
+      ) }, l)
+    ) }) }) }) }),
     /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Disabled & Destructive Items", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 flex justify-center pb-40", children: /* @__PURE__ */ e(
       d,
       {
         isOpen: r === "disabled",
         onClose: t,
         content: /* @__PURE__ */ n("div", { className: "py-1", children: [
-          /* @__PURE__ */ e(o, { label: "Available", icon: /* @__PURE__ */ e(x, { className: "w-4 h-4" }), onClick: t }),
-          /* @__PURE__ */ e(o, { label: "Unavailable", icon: /* @__PURE__ */ e(O, { className: "w-4 h-4" }), disabled: !0, onClick: t }),
-          /* @__PURE__ */ e(o, { label: "Delete", destructive: !0, icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }), onClick: t })
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Available",
+              icon: /* @__PURE__ */ e(O, { className: "w-4 h-4" }),
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Unavailable",
+              icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
+              disabled: !0,
+              onClick: t
+            }
+          ),
+          /* @__PURE__ */ e(
+            o,
+            {
+              label: "Delete",
+              destructive: !0,
+              icon: /* @__PURE__ */ e(m, { className: "w-4 h-4" }),
+              onClick: t
+            }
+          )
         ] }),
         children: /* @__PURE__ */ e(
           "button",
           {
             onClick: () => a("disabled"),
-            className: "rounded-lg border border-gray-300 dark:border-gray-600 px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+            className: "rounded-lg border border-border px-3 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
             children: "Show Popover"
           }
         )
@@ -115,17 +195,32 @@ const D = () => {
           minWidth: 200
         },
         controlOverrides: [
-          { name: "placement", type: "select", options: ["top", "bottom", "left", "right"], description: "Popover placement relative to trigger" },
-          { name: "minWidth", type: "text", description: "Minimum width in pixels" }
+          {
+            name: "placement",
+            type: "select",
+            options: ["top", "bottom", "left", "right"],
+            description: "Popover placement relative to trigger"
+          },
+          {
+            name: "minWidth",
+            type: "text",
+            description: "Minimum width in pixels"
+          }
         ],
         includeProps: ["placement", "minWidth"],
-        excludeProps: ["className", "contentClassName", "isOpen", "onClose", "content"],
+        excludeProps: [
+          "className",
+          "contentClassName",
+          "isOpen",
+          "onClose",
+          "content"
+        ],
         children: (l) => /* @__PURE__ */ e(P, { ...l })
       }
     ),
-    /* @__PURE__ */ e(y, { componentName: "MacOSPopover" }),
+    /* @__PURE__ */ e(N, { componentName: "MacOSPopover" }),
     /* @__PURE__ */ e(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
-      N,
+      f,
       {
         language: "tsx",
         code: `import { MacOSPopover, MacOSPopoverItem } from '@e-burgos/tucu-ui';

package/documentation/{MacOSSearchBarSection-DNHmkSQF.js → MacOSSearchBarSection-Bq6w8HML.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function i(t){const[s,r]=l.useState("");return e.jsx("div",{className:"w-full max-w-lg mx-auto",children:e.jsx(a.MacOSSearchBar,{...t,value:s,onChange:r,onClear:()=>r(""),onSubmit:o=>alert(`Submitted: ${o}`)})})}const c=()=>{const[t,s]=l.useState("");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"SearchBar",description:"A macOS-style search input with clear button, keyboard submit, auto-focus, and multiple sizes. Includes smooth transitions and icon accent matching the system appearance.",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-cyan-500 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(n.Search,{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,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Interactive",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 max-w-lg mx-auto",children:[e.jsx(a.MacOSSearchBar,{value:t,onChange:s,onClear:()=>s(""),onSubmit:r=>alert(`Search: ${r}`),placeholder:"Search files, apps, settings…"}),e.jsxs("p",{className:"mt-3 text-xs text-gray-500 dark:text-gray-400 text-center",children:["Current value: ",e.jsx("code",{className:"bg-gray-100 dark:bg-gray-800 px-1 rounded",children:t||"(empty)"})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-4 max-w-lg mx-auto",children:["sm","md","lg"].map(r=>e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase",children:r}),e.jsx(a.MacOSSearchBar,{size:r,placeholder:`Size: ${r}`,value:"",onChange:()=>{}})]},r))})})}),e.jsx(a.PropPlayground,{componentName:"MacOSSearchBar",defaultValues:{placeholder:"Search…",size:"md",autoFocus:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text"},{name:"size",type:"select",options:["sm","md","lg"],description:"Input size"},{name:"autoFocus",type:"boolean",description:"Auto-focus on mount"}],includeProps:["placeholder","size","autoFocus"],excludeProps:["className","value","onChange","onClear","onSubmit"],children:r=>e.jsx(i,{...r})}),e.jsx(a.AutoPropsTable,{componentName:"MacOSSearchBar"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { MacOSSearchBar } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("../index-C0NugKZs.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function i(t){const[s,r]=l.useState("");return e.jsx("div",{className:"w-full max-w-lg mx-auto",children:e.jsx(a.MacOSSearchBar,{...t,value:s,onChange:r,onClear:()=>r(""),onSubmit:o=>alert(`Submitted: ${o}`)})})}const c=()=>{const[t,s]=l.useState("");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"SearchBar",description:"A macOS-style search input with clear button, keyboard submit, auto-focus, and multiple sizes. Includes smooth transitions and icon accent matching the system appearance.",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-cyan-500 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-cyan-500/50",children:e.jsx(n.Search,{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,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Interactive",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 max-w-lg mx-auto",children:[e.jsx(a.MacOSSearchBar,{value:t,onChange:s,onClear:()=>s(""),onSubmit:r=>alert(`Search: ${r}`),placeholder:"Search files, apps, settings…"}),e.jsxs("p",{className:"mt-3 text-xs text-gray-500 dark:text-gray-400 text-center",children:["Current value: ",e.jsx("code",{className:"bg-gray-100 dark:bg-gray-800 px-1 rounded",children:t||"(empty)"})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-4 max-w-lg mx-auto",children:["sm","md","lg"].map(r=>e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 mb-1 uppercase",children:r}),e.jsx(a.MacOSSearchBar,{size:r,placeholder:`Size: ${r}`,value:"",onChange:()=>{}})]},r))})})}),e.jsx(a.PropPlayground,{componentName:"MacOSSearchBar",defaultValues:{placeholder:"Search…",size:"md",autoFocus:!1},controlOverrides:[{name:"placeholder",type:"text",description:"Placeholder text"},{name:"size",type:"select",options:["sm","md","lg"],description:"Input size"},{name:"autoFocus",type:"boolean",description:"Auto-focus on mount"}],includeProps:["placeholder","size","autoFocus"],excludeProps:["className","value","onChange","onClear","onSubmit"],children:r=>e.jsx(i,{...r})}),e.jsx(a.AutoPropsTable,{componentName:"MacOSSearchBar"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { MacOSSearchBar } from '@e-burgos/tucu-ui';
 
 function SearchDemo() {
   const [value, setValue] = useState('');

package/documentation/{MacOSSearchBarSection-DruORVTc.js → MacOSSearchBarSection-BsqmjAJO.js}

@@ -1,6 +1,6 @@
 import { jsxs as l, Fragment as i, jsx as e } from "react/jsx-runtime";
 import { useState as n } from "react";
-import { H as d, C as o, a as s, bm as c, P as u, A as h, c as p } from "../index-lfg6LZ1p.js";
+import { H as d, C as o, a as s, bo as c, P as u, A as h, c as p } from "../index-4GONhZIF.js";
 import { Search as g } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/{MacOSSegmentedControlSection-D5ZpMdGL.js → MacOSSegmentedControlSection-BgsDLI96.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),l=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");function c(n){const[s,i]=o.useState("tab1");return e.jsx("div",{className:"w-full max-w-lg mx-auto",children:e.jsx(l.MacOSSegmentedControl,{...n,value:s,onChange:i,options:[{label:"General",value:"tab1"},{label:"Privacy",value:"tab2"},{label:"Advanced",value:"tab3"}]})})}const r=()=>{const[n,s]=o.useState("general"),[i,d]=o.useState("grid");return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"SegmentedControl",description:"A macOS-style segmented control (tab bar) with animated sliding indicator, icon+text options, keyboard navigation, size variants, and full-width mode.",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-teal-500 via-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg border border-teal-500/50",children:e.jsx(t.ToggleLeft,{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:"With Icons",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center",children:e.jsx(l.MacOSSegmentedControl,{value:i,onChange:d,options:[{label:"Grid",value:"grid",icon:e.jsx(t.LayoutGrid,{className:"w-3.5 h-3.5"})},{label:"List",value:"list",icon:e.jsx(t.List,{className:"w-3.5 h-3.5"})},{label:"Column",value:"column",icon:e.jsx(t.Columns3,{className:"w-3.5 h-3.5"})}]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Text Only — Full Width",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.MacOSSegmentedControl,{value:n,onChange:s,fullWidth:!0,options:[{label:"General",value:"general"},{label:"Privacy",value:"privacy"},{label:"Security",value:"security"},{label:"Advanced",value:"advanced"}]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-4",children:["sm","md","lg"].map(a=>e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-8",children:a}),e.jsx(l.MacOSSegmentedControl,{size:a,value:"a",onChange:()=>{},options:[{label:"Alpha",value:"a"},{label:"Beta",value:"b"},{label:"Gamma",value:"c"}]})]},a))})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Disabled Option",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center",children:e.jsx(l.MacOSSegmentedControl,{value:"on",onChange:()=>{},options:[{label:"On",value:"on"},{label:"Off",value:"off"},{label:"Unavailable",value:"na",disabled:!0}]})})})}),e.jsx(l.PropPlayground,{componentName:"MacOSSegmentedControl",defaultValues:{size:"md",fullWidth:!1},controlOverrides:[{name:"size",type:"select",options:["sm","md","lg"],description:"Control size"},{name:"fullWidth",type:"boolean",description:"Stretch to fill container width"}],includeProps:["size","fullWidth"],excludeProps:["className","options","value","onChange"],children:a=>e.jsx(c,{...a})}),e.jsx(l.AutoPropsTable,{componentName:"MacOSSegmentedControl"}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.CodeBlock,{language:"tsx",code:`import { MacOSSegmentedControl } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),l=require("../index-C0NugKZs.js"),t=require("lucide-react");require("react-router-dom");require("react-dom");function c(n){const[s,i]=o.useState("tab1");return e.jsx("div",{className:"w-full max-w-lg mx-auto",children:e.jsx(l.MacOSSegmentedControl,{...n,value:s,onChange:i,options:[{label:"General",value:"tab1"},{label:"Privacy",value:"tab2"},{label:"Advanced",value:"tab3"}]})})}const r=()=>{const[n,s]=o.useState("general"),[i,d]=o.useState("grid");return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"SegmentedControl",description:"A macOS-style segmented control (tab bar) with animated sliding indicator, icon+text options, keyboard navigation, size variants, and full-width mode.",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-teal-500 via-emerald-500 to-green-600 rounded-full flex items-center justify-center shadow-lg border border-teal-500/50",children:e.jsx(t.ToggleLeft,{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:"With Icons",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center",children:e.jsx(l.MacOSSegmentedControl,{value:i,onChange:d,options:[{label:"Grid",value:"grid",icon:e.jsx(t.LayoutGrid,{className:"w-3.5 h-3.5"})},{label:"List",value:"list",icon:e.jsx(t.List,{className:"w-3.5 h-3.5"})},{label:"Column",value:"column",icon:e.jsx(t.Columns3,{className:"w-3.5 h-3.5"})}]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Text Only — Full Width",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.MacOSSegmentedControl,{value:n,onChange:s,fullWidth:!0,options:[{label:"General",value:"general"},{label:"Privacy",value:"privacy"},{label:"Security",value:"security"},{label:"Advanced",value:"advanced"}]})})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 space-y-4",children:["sm","md","lg"].map(a=>e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("span",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 uppercase w-8",children:a}),e.jsx(l.MacOSSegmentedControl,{size:a,value:"a",onChange:()=>{},options:[{label:"Alpha",value:"a"},{label:"Beta",value:"b"},{label:"Gamma",value:"c"}]})]},a))})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Disabled Option",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 flex justify-center",children:e.jsx(l.MacOSSegmentedControl,{value:"on",onChange:()=>{},options:[{label:"On",value:"on"},{label:"Off",value:"off"},{label:"Unavailable",value:"na",disabled:!0}]})})})}),e.jsx(l.PropPlayground,{componentName:"MacOSSegmentedControl",defaultValues:{size:"md",fullWidth:!1},controlOverrides:[{name:"size",type:"select",options:["sm","md","lg"],description:"Control size"},{name:"fullWidth",type:"boolean",description:"Stretch to fill container width"}],includeProps:["size","fullWidth"],excludeProps:["className","options","value","onChange"],children:a=>e.jsx(c,{...a})}),e.jsx(l.AutoPropsTable,{componentName:"MacOSSegmentedControl"}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(l.CodeBlock,{language:"tsx",code:`import { MacOSSegmentedControl } from '@e-burgos/tucu-ui';
 
 function TabsDemo() {
   const [value, setValue] = useState('general');

package/documentation/{MacOSSegmentedControlSection-BFuSzzal.js → MacOSSegmentedControlSection-ls5gxPUT.js}

@@ -1,6 +1,6 @@
 import { jsxs as d, Fragment as m, jsx as e } from "react/jsx-runtime";
 import { useState as r } from "react";
-import { H as u, C as a, a as t, bs as n, P as v, A as h, c as p } from "../index-lfg6LZ1p.js";
+import { H as u, C as a, a as t, bu as n, P as v, A as h, c as p } from "../index-4GONhZIF.js";
 import { ToggleLeft as b, LayoutGrid as f, List as g, Columns3 as w } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/MacOSSidebarSection-CiN4hOs1.js

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("react"),a=require("../index-C0NugKZs.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const d=[{label:"Favorites",items:[{id:"inbox",label:"Inbox",icon:e.jsx(s.Inbox,{className:"w-4 h-4"}),badge:12},{id:"starred",label:"Starred",icon:e.jsx(s.Star,{className:"w-4 h-4"})},{id:"sent",label:"Sent",icon:e.jsx(s.Send,{className:"w-4 h-4"})}]},{label:"Folders",items:[{id:"work",label:"Work",icon:e.jsx(s.Briefcase,{className:"w-4 h-4"}),badge:3},{id:"personal",label:"Personal",icon:e.jsx(s.User,{className:"w-4 h-4"})},{id:"archive",label:"Archive",icon:e.jsx(s.Archive,{className:"w-4 h-4"}),disabled:!0}]}];function n(t){const[r,i]=l.useState(t.activeId||"inbox");return e.jsxs("div",{className:"flex h-64 rounded-xl overflow-hidden border border-border",children:[e.jsx(a.MacSidebarCard,{sections:d,activeId:r,onSelect:i,header:e.jsx("p",{className:"text-sm font-semibold text-gray-800 dark:text-gray-100",children:"Mail"})}),e.jsxs("div",{className:"flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500",children:["Active:"," ",e.jsx("span",{className:"ml-1 font-medium text-gray-800 dark:text-gray-200",children:r})]})]})}const c=()=>{const[t,r]=l.useState("inbox");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"MacSidebarCard",description:"A macOS-style navigation sidebar with backdrop blur, section group labels, badge counts, active-item tinting, header/footer slots, and disabled state for items.",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-slate-500 via-gray-600 to-zinc-700 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50",children:e.jsx(s.PanelLeft,{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,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Interactive Sidebar",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex h-72 rounded-xl overflow-hidden border border-border shadow-sm",children:[e.jsx(a.MacSidebarCard,{sections:d,activeId:t,onSelect:r,header:e.jsx("p",{className:"text-sm font-semibold text-gray-800 dark:text-gray-100",children:"Mail"}),footer:e.jsxs("button",{className:"flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300",children:[e.jsx(s.Settings,{className:"w-3.5 h-3.5"}),"Preferences"]})}),e.jsxs("div",{className:"flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500",children:["Active:"," ",e.jsx("span",{className:"ml-1 font-medium text-gray-800 dark:text-gray-200",children:t})]})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Without Section Labels",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex h-56 rounded-xl overflow-hidden border border-border shadow-sm",children:[e.jsx(a.MacSidebarCard,{sections:[{items:[{id:"home",label:"Home",icon:e.jsx(s.Home,{className:"w-4 h-4"})},{id:"search",label:"Search",icon:e.jsx(s.Search,{className:"w-4 h-4"})},{id:"settings",label:"Settings",icon:e.jsx(s.Settings,{className:"w-4 h-4"})}]}],activeId:"home",onSelect:()=>{}}),e.jsx("div",{className:"flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400",children:"Main content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"With Badge Counts & Disabled Items",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"flex h-64 rounded-xl overflow-hidden border border-border shadow-sm",children:[e.jsx(a.MacSidebarCard,{sections:[{label:"Notifications",items:[{id:"all",label:"All",icon:e.jsx(s.Bell,{className:"w-4 h-4"}),badge:42},{id:"mentions",label:"Mentions",icon:e.jsx(s.AtSign,{className:"w-4 h-4"}),badge:7},{id:"muted",label:"Muted",icon:e.jsx(s.BellOff,{className:"w-4 h-4"}),disabled:!0}]}],activeId:"all",onSelect:()=>{}}),e.jsx("div",{className:"flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400",children:"Badges show count; disabled items appear muted"})]})})})}),e.jsx(a.PropPlayground,{componentName:"MacOSSidebar",defaultValues:{activeId:"inbox"},controlOverrides:[{name:"activeId",type:"select",options:["inbox","starred","sent","work","personal","archive"],description:"Currently active item ID"}],includeProps:["activeId"],excludeProps:["className","sections","onSelect","header","footer"],children:i=>e.jsx(n,{...i})}),e.jsx(a.AutoPropsTable,{componentName:"MacOSSidebar"}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.CodeBlock,{language:"tsx",code:`import { MacSidebarCard } from '@e-burgos/tucu-ui';
+
+const sections = [
+  {
+    label: 'Favorites',
+    items: [
+      { id: 'inbox', label: 'Inbox', icon: <InboxIcon />, badge: 12 },
+      { id: 'starred', label: 'Starred', icon: <StarIcon /> },
+    ],
+  },
+  {
+    label: 'Folders',
+    items: [
+      { id: 'work', label: 'Work', icon: <BriefcaseIcon /> },
+      { id: 'archive', label: 'Archive', icon: <ArchiveIcon />, disabled: true },
+    ],
+  },
+];
+
+function App() {
+  const [activeId, setActiveId] = useState('inbox');
+
+  return (
+    <div className="flex h-screen">
+      <MacSidebarCard
+        sections={sections}
+        activeId={activeId}
+        onSelect={setActiveId}
+        header={<h2>Mail</h2>}
+        footer={<PreferencesButton />}
+      />
+      <main className="flex-1">Content</main>
+    </div>
+  );
+}`})})})})]})};exports.MacOSSidebarSection=c;exports.default=c;

package/documentation/{MacOSSidebarSection-D0DT2x5w.js → MacOSSidebarSection-ZtF4anKi.js}

@@ -1,63 +1,91 @@
 import { jsxs as a, Fragment as m, jsx as e } from "react/jsx-runtime";
 import { useState as o } from "react";
-import { H as b, C as s, a as i, bk as l, P as h, A as g, c as f } from "../index-lfg6LZ1p.js";
-import { PanelLeft as x, Settings as c, Home as v, Search as u, Bell as N, AtSign as w, BellOff as y, Inbox as p, Star as S, Send as I, Briefcase as k, User as A, Archive as C } from "lucide-react";
+import { H as b, C as s, a as i, bm as l, P as h, A as f, c as x } from "../index-4GONhZIF.js";
+import { PanelLeft as v, Settings as c, Home as g, Search as u, Bell as N, AtSign as w, BellOff as p, Inbox as S, Star as y, Send as I, Briefcase as k, User as A, Archive as C } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
 const n = [
   {
     label: "Favorites",
     items: [
-      { id: "inbox", label: "Inbox", icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" }), badge: 12 },
-      { id: "starred", label: "Starred", icon: /* @__PURE__ */ e(S, { className: "w-4 h-4" }) },
-      { id: "sent", label: "Sent", icon: /* @__PURE__ */ e(I, { className: "w-4 h-4" }) }
+      {
+        id: "inbox",
+        label: "Inbox",
+        icon: /* @__PURE__ */ e(S, { className: "w-4 h-4" }),
+        badge: 12
+      },
+      {
+        id: "starred",
+        label: "Starred",
+        icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" })
+      },
+      {
+        id: "sent",
+        label: "Sent",
+        icon: /* @__PURE__ */ e(I, { className: "w-4 h-4" })
+      }
     ]
   },
   {
     label: "Folders",
     items: [
-      { id: "work", label: "Work", icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }), badge: 3 },
-      { id: "personal", label: "Personal", icon: /* @__PURE__ */ e(A, { className: "w-4 h-4" }) },
-      { id: "archive", label: "Archive", icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }), disabled: !0 }
+      {
+        id: "work",
+        label: "Work",
+        icon: /* @__PURE__ */ e(k, { className: "w-4 h-4" }),
+        badge: 3
+      },
+      {
+        id: "personal",
+        label: "Personal",
+        icon: /* @__PURE__ */ e(A, { className: "w-4 h-4" })
+      },
+      {
+        id: "archive",
+        label: "Archive",
+        icon: /* @__PURE__ */ e(C, { className: "w-4 h-4" }),
+        disabled: !0
+      }
     ]
   }
 ];
-function M(r) {
-  const [t, d] = o(r.activeId || "inbox");
-  return /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700", children: [
+function M(t) {
+  const [r, d] = o(t.activeId || "inbox");
+  return /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-border", children: [
     /* @__PURE__ */ e(
       l,
       {
         sections: n,
-        activeId: t,
+        activeId: r,
         onSelect: d,
         header: /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: "Mail" })
       }
     ),
     /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500", children: [
-      "Active: ",
-      /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: t })
+      "Active:",
+      " ",
+      /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: r })
     ] })
   ] });
 }
 const W = () => {
-  const [r, t] = o("inbox");
+  const [t, r] = o("inbox");
   return /* @__PURE__ */ a(m, { children: [
     /* @__PURE__ */ e(
       b,
       {
         title: "MacSidebarCard",
         description: "A macOS-style navigation sidebar with backdrop blur, section group labels, badge counts, active-item tinting, header/footer slots, and disabled state for items.",
-        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-slate-500 via-gray-600 to-zinc-700 rounded-full flex items-center justify-center shadow-lg border border-slate-500/50", children: /* @__PURE__ */ e(x, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+        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-slate-500 via-gray-600 to-zinc-700 rounded-full flex items-center justify-center shadow-lg border border-slate-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(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Interactive Sidebar", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-72 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Interactive Sidebar", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-72 rounded-xl overflow-hidden border border-border shadow-sm", children: [
       /* @__PURE__ */ e(
         l,
         {
           sections: n,
-          activeId: r,
-          onSelect: t,
+          activeId: t,
+          onSelect: r,
           header: /* @__PURE__ */ e("p", { className: "text-sm font-semibold text-gray-800 dark:text-gray-100", children: "Mail" }),
           footer: /* @__PURE__ */ a("button", { className: "flex items-center gap-2 text-xs text-gray-500 hover:text-gray-700 dark:hover:text-gray-300", children: [
             /* @__PURE__ */ e(c, { className: "w-3.5 h-3.5" }),
@@ -68,19 +96,31 @@ const W = () => {
       /* @__PURE__ */ a("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-500", children: [
         "Active:",
         " ",
-        /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: r })
+        /* @__PURE__ */ e("span", { className: "ml-1 font-medium text-gray-800 dark:text-gray-200", children: t })
       ] })
     ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Without Section Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-56 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm", children: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Without Section Labels", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-56 rounded-xl overflow-hidden border border-border shadow-sm", children: [
       /* @__PURE__ */ e(
         l,
         {
           sections: [
             {
               items: [
-                { id: "home", label: "Home", icon: /* @__PURE__ */ e(v, { className: "w-4 h-4" }) },
-                { id: "search", label: "Search", icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" }) },
-                { id: "settings", label: "Settings", icon: /* @__PURE__ */ e(c, { className: "w-4 h-4" }) }
+                {
+                  id: "home",
+                  label: "Home",
+                  icon: /* @__PURE__ */ e(g, { className: "w-4 h-4" })
+                },
+                {
+                  id: "search",
+                  label: "Search",
+                  icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
+                },
+                {
+                  id: "settings",
+                  label: "Settings",
+                  icon: /* @__PURE__ */ e(c, { className: "w-4 h-4" })
+                }
               ]
             }
           ],
@@ -91,27 +131,49 @@ const W = () => {
       ),
       /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Main content area" })
     ] }) }) }) }),
-    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "With Badge Counts & Disabled Items", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700 shadow-sm", children: [
-      /* @__PURE__ */ e(
-        l,
-        {
-          sections: [
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
+      i,
+      {
+        title: "With Badge Counts & Disabled Items",
+        className: "mt-2 mb-2",
+        children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "flex h-64 rounded-xl overflow-hidden border border-border shadow-sm", children: [
+          /* @__PURE__ */ e(
+            l,
             {
-              label: "Notifications",
-              items: [
-                { id: "all", label: "All", icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }), badge: 42 },
-                { id: "mentions", label: "Mentions", icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }), badge: 7 },
-                { id: "muted", label: "Muted", icon: /* @__PURE__ */ e(y, { className: "w-4 h-4" }), disabled: !0 }
-              ]
+              sections: [
+                {
+                  label: "Notifications",
+                  items: [
+                    {
+                      id: "all",
+                      label: "All",
+                      icon: /* @__PURE__ */ e(N, { className: "w-4 h-4" }),
+                      badge: 42
+                    },
+                    {
+                      id: "mentions",
+                      label: "Mentions",
+                      icon: /* @__PURE__ */ e(w, { className: "w-4 h-4" }),
+                      badge: 7
+                    },
+                    {
+                      id: "muted",
+                      label: "Muted",
+                      icon: /* @__PURE__ */ e(p, { className: "w-4 h-4" }),
+                      disabled: !0
+                    }
+                  ]
+                }
+              ],
+              activeId: "all",
+              onSelect: () => {
+              }
             }
-          ],
-          activeId: "all",
-          onSelect: () => {
-          }
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Badges show count; disabled items appear muted" })
-    ] }) }) }) }),
+          ),
+          /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center bg-gray-50 dark:bg-gray-900 text-sm text-gray-400", children: "Badges show count; disabled items appear muted" })
+        ] }) })
+      }
+    ) }),
     /* @__PURE__ */ e(
       h,
       {
@@ -120,16 +182,28 @@ const W = () => {
           activeId: "inbox"
         },
         controlOverrides: [
-          { name: "activeId", type: "select", options: ["inbox", "starred", "sent", "work", "personal", "archive"], description: "Currently active item ID" }
+          {
+            name: "activeId",
+            type: "select",
+            options: [
+              "inbox",
+              "starred",
+              "sent",
+              "work",
+              "personal",
+              "archive"
+            ],
+            description: "Currently active item ID"
+          }
         ],
         includeProps: ["activeId"],
         excludeProps: ["className", "sections", "onSelect", "header", "footer"],
         children: (d) => /* @__PURE__ */ e(M, { ...d })
       }
     ),
-    /* @__PURE__ */ e(g, { componentName: "MacOSSidebar" }),
+    /* @__PURE__ */ e(f, { componentName: "MacOSSidebar" }),
     /* @__PURE__ */ e(s, { 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(
-      f,
+      x,
       {
         language: "tsx",
         code: `import { MacSidebarCard } from '@e-burgos/tucu-ui';