@e-burgos/tucu-ui 2.0.9 → 2.0.10

package/documentation/{MacOSSidebarSection-D0DT2x5w.js → MacOSSidebarSection-DYZ6onyY.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-19KsCnyX.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';

package/documentation/{MacOSTahoeSection-DKtgrult.js → MacOSTahoeSection-DCwsZnWz.js}

@@ -1,6 +1,6 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
 import { useState as r } from "react";
-import { H as i, x as l, bx as o, u as d, p as c, q as n, aj as m } from "../index-lfg6LZ1p.js";
+import { H as i, x as l, bz as o, u as d, p as c, q as n, aj as m } from "../index-19KsCnyX.js";
 import { Sparkles as h, Home as u, Settings as f } from "lucide-react";
 import "react-router-dom";
 import "react-dom";
@@ -69,7 +69,7 @@ function y() {
     /* @__PURE__ */ e(
       "div",
       {
-        className: "relative w-full h-[600px] border border-[var(--macos-tahoe-border,rgba(130,161,183,0.28))] rounded-2xl overflow-hidden bg-[var(--macos-spatial-bg)] group",
+        className: "relative w-full h-[600px] border border-border rounded-2xl overflow-hidden bg-[var(--macos-spatial-bg)] group",
         style: {
           background: "var(--macos-tahoe-root-bg, var(--macos-spatial-bg))"
         },

package/documentation/{MacOSTahoeSection-ErqFjWX4.js → MacOSTahoeSection-dZq5MXs6.js}

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>e.jsx("div",{className:"flex flex-col gap-6 w-full max-w-4xl mx-auto h-[400px]",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8 h-full",children:[e.jsxs("div",{"data-tucu":"drawer-content",className:"p-6 flex flex-col gap-5 bg-[var(--macos-glass-regular-bg)] backdrop-blur-xl border border-[var(--macos-glass-regular-border)] rounded-2xl shadow-xl",children:[e.jsxs("div",{className:"flex flex-col gap-1 mb-2",children:[e.jsx("h3",{className:"text-[var(--macos-label)] font-semibold mb-0",children:"System Preferences"}),e.jsx("p",{className:"text-[var(--macos-secondary-label)] text-xs mb-0",children:"Manage liquid glass settings in Tahoe"})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-medium text-[var(--macos-label)]",children:"Enable Notifications"}),e.jsx(a.Switch,{checked:!0,onChange:()=>{}})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-medium text-[var(--macos-label)]",children:"Auto-play content"}),e.jsx(a.Checkbox,{defaultChecked:!0})]}),e.jsx("div",{className:"w-full",children:e.jsx(a.InputSearcher,{variant:"ghost",options:[{name:"Wi-Fi",value:"wifi"},{name:"Bluetooth",value:"bt"}],placeholder:"Search settings...",className:"w-full"})}),e.jsx("div",{className:"mt-auto",children:e.jsx(a.Button,{variant:"solid",fullWidth:!0,children:"Apply Changes"})})]}),e.jsxs("div",{className:"flex flex-col gap-5 justify-between",children:[e.jsxs("div",{"data-tucu":"panel-card",className:"p-5 flex flex-col gap-3",children:[e.jsx("h4",{className:"text-[var(--macos-label)] font-medium mb-1",children:"Standard Material"}),e.jsx("p",{className:"text-xs text-[var(--macos-secondary-label)] leading-relaxed",children:"Reading contents and tables use standard opaque material to keep contrast levels High regardless of the background imagery."})]}),e.jsx(a.Alert,{variant:"info",children:e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx("strong",{children:"New Update Available"}),e.jsx("span",{children:"macOS 26 Tahoe is ready to be installed. Restart to apply changes."})]})}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(a.Button,{variant:"ghost",fullWidth:!0,children:"Cancel"}),e.jsx(a.Button,{variant:"solid",fullWidth:!0,children:"Restart Now"})]})]})]})});function o(){const[t,r]=i.useState(!1);return e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx(a.HeroCard,{title:"Liquid Glass",description:"The variant='tahoe' setting forces the Layout to use Liquid Glass materials and Spatial backgrounds.",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-blue-400/80 via-cyan-300/60 to-white/40 dark:from-blue-600/80 dark:via-cyan-500/60 dark:to-gray-800/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-cyan-400/50 backdrop-blur-md",children:e.jsx(s.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-blue-700 dark:text-cyan-200 filter drop-shadow-lg"})})}),e.jsx("div",{className:"relative w-full h-[600px] border border-[var(--macos-tahoe-border,rgba(130,161,183,0.28))] rounded-2xl overflow-hidden bg-[var(--macos-spatial-bg)] group",style:{background:"var(--macos-tahoe-root-bg, var(--macos-spatial-bg))"},children:t?e.jsx("div",{className:"w-full h-full relative p-0 m-0",children:e.jsxs(a.MacOSLayout,{variant:"tahoe",menuItems:[{name:"Dashboard",path:"#",icon:e.jsx(s.Home,{})},{name:"Settings",path:"#",icon:e.jsx(s.Settings,{})}],className:"absolute inset-0 rounded-2xl",children:[e.jsx("div",{className:"macos-bg-spatial-aurora absolute inset-0 -z-10 rounded-2xl"}),e.jsx(l,{})]})}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx(a.Button,{onClick:()=>r(!0),variant:"solid",children:"Launch Tahoe Demo"})})})]})}exports.TahoeDemoContent=l;exports.default=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("react"),a=require("../index-DMs_SmPq.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const l=()=>e.jsx("div",{className:"flex flex-col gap-6 w-full max-w-4xl mx-auto h-[400px]",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-8 h-full",children:[e.jsxs("div",{"data-tucu":"drawer-content",className:"p-6 flex flex-col gap-5 bg-[var(--macos-glass-regular-bg)] backdrop-blur-xl border border-[var(--macos-glass-regular-border)] rounded-2xl shadow-xl",children:[e.jsxs("div",{className:"flex flex-col gap-1 mb-2",children:[e.jsx("h3",{className:"text-[var(--macos-label)] font-semibold mb-0",children:"System Preferences"}),e.jsx("p",{className:"text-[var(--macos-secondary-label)] text-xs mb-0",children:"Manage liquid glass settings in Tahoe"})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-medium text-[var(--macos-label)]",children:"Enable Notifications"}),e.jsx(a.Switch,{checked:!0,onChange:()=>{}})]}),e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx("span",{className:"text-sm font-medium text-[var(--macos-label)]",children:"Auto-play content"}),e.jsx(a.Checkbox,{defaultChecked:!0})]}),e.jsx("div",{className:"w-full",children:e.jsx(a.InputSearcher,{variant:"ghost",options:[{name:"Wi-Fi",value:"wifi"},{name:"Bluetooth",value:"bt"}],placeholder:"Search settings...",className:"w-full"})}),e.jsx("div",{className:"mt-auto",children:e.jsx(a.Button,{variant:"solid",fullWidth:!0,children:"Apply Changes"})})]}),e.jsxs("div",{className:"flex flex-col gap-5 justify-between",children:[e.jsxs("div",{"data-tucu":"panel-card",className:"p-5 flex flex-col gap-3",children:[e.jsx("h4",{className:"text-[var(--macos-label)] font-medium mb-1",children:"Standard Material"}),e.jsx("p",{className:"text-xs text-[var(--macos-secondary-label)] leading-relaxed",children:"Reading contents and tables use standard opaque material to keep contrast levels High regardless of the background imagery."})]}),e.jsx(a.Alert,{variant:"info",children:e.jsxs("div",{className:"flex flex-col gap-1",children:[e.jsx("strong",{children:"New Update Available"}),e.jsx("span",{children:"macOS 26 Tahoe is ready to be installed. Restart to apply changes."})]})}),e.jsxs("div",{className:"flex gap-2",children:[e.jsx(a.Button,{variant:"ghost",fullWidth:!0,children:"Cancel"}),e.jsx(a.Button,{variant:"solid",fullWidth:!0,children:"Restart Now"})]})]})]})});function n(){const[t,r]=i.useState(!1);return e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx(a.HeroCard,{title:"Liquid Glass",description:"The variant='tahoe' setting forces the Layout to use Liquid Glass materials and Spatial backgrounds.",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-blue-400/80 via-cyan-300/60 to-white/40 dark:from-blue-600/80 dark:via-cyan-500/60 dark:to-gray-800/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-cyan-400/50 backdrop-blur-md",children:e.jsx(s.Sparkles,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-blue-700 dark:text-cyan-200 filter drop-shadow-lg"})})}),e.jsx("div",{className:"relative w-full h-[600px] border border-border rounded-2xl overflow-hidden bg-[var(--macos-spatial-bg)] group",style:{background:"var(--macos-tahoe-root-bg, var(--macos-spatial-bg))"},children:t?e.jsx("div",{className:"w-full h-full relative p-0 m-0",children:e.jsxs(a.MacOSLayout,{variant:"tahoe",menuItems:[{name:"Dashboard",path:"#",icon:e.jsx(s.Home,{})},{name:"Settings",path:"#",icon:e.jsx(s.Settings,{})}],className:"absolute inset-0 rounded-2xl",children:[e.jsx("div",{className:"macos-bg-spatial-aurora absolute inset-0 -z-10 rounded-2xl"}),e.jsx(l,{})]})}):e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:e.jsx(a.Button,{onClick:()=>r(!0),variant:"solid",children:"Launch Tahoe Demo"})})})]})}exports.TahoeDemoContent=l;exports.default=n;

package/documentation/MacOSTextStylesSection-DGktqEPk.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DMs_SmPq.js"),i=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const n=[{name:"Large Title",size:"26px",leading:"32px",weight:"400 (Regular)",tracking:"0",font:"SF Pro Display",cssVar:"--macos-font-size-large-title"},{name:"Title 1",size:"22px",leading:"26px",weight:"400 (Regular)",tracking:"0",font:"SF Pro Display",cssVar:"--macos-font-size-title1"},{name:"Title 2",size:"17px",leading:"22px",weight:"400 (Regular)",tracking:"0",font:"SF Pro Text",cssVar:"--macos-font-size-title2"},{name:"Title 3",size:"15px",leading:"20px",weight:"600 (Semibold)",tracking:"0",font:"SF Pro Text",cssVar:"--macos-font-size-title3"},{name:"Headline",size:"13px",leading:"16px",weight:"700 (Bold)",tracking:"0",font:"SF Pro Text",cssVar:"--macos-font-size-body"},{name:"Body",size:"13px",leading:"16px",weight:"400 (Regular)",tracking:"0",font:"SF Pro Text",cssVar:"--macos-font-size-body"},{name:"Callout",size:"12px",leading:"15px",weight:"400 (Regular)",tracking:"0",font:"SF Pro Text",cssVar:"--macos-font-size-callout"},{name:"Subheadline",size:"11px",leading:"14px",weight:"400 (Regular)",tracking:"0.006em",font:"SF Pro Text",cssVar:"--macos-font-size-subheadline"},{name:"Footnote",size:"10px",leading:"13px",weight:"400 (Regular)",tracking:"0.012em",font:"SF Pro Text",cssVar:"--macos-font-size-footnote"},{name:"Caption 1",size:"10px",leading:"13px",weight:"500 (Medium)",tracking:"0.012em",font:"SF Pro Text",cssVar:"--macos-font-size-caption"},{name:"Caption 2",size:"10px",leading:"13px",weight:"400 (Regular)",tracking:"0.012em",font:"SF Pro Text",cssVar:"--macos-font-size-caption"}];function o(t){return t.weight.includes("700")?700:t.weight.includes("600")?600:t.weight.includes("500")?500:400}function c(t){return t.font==="SF Pro Display"?"var(--macos-font-display, 'Inter', system-ui)":"var(--macos-font-family, 'Inter', system-ui)"}const l=()=>{const{mode:t}=a.useTheme(),s=t==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Text Styles",description:"The macOS type scale defines size, weight, leading, and tracking for each text style. Each style adapts to the current appearance 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-gray-800 via-gray-600 to-gray-400 dark:from-gray-200 dark:via-gray-400 dark:to-gray-600 rounded-full flex items-center justify-center shadow-lg border border-gray-500/50",children:e.jsx(i.Type,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white dark:text-gray-900 filter drop-shadow-lg"})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Font Family",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs("div",{className:"flex items-start gap-3 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800",children:[e.jsx(i.Info,{className:"w-5 h-5 text-blue-500 shrink-0 mt-0.5"}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-blue-800 dark:text-blue-200 font-medium",children:"Alternative Font: Inter Variable"}),e.jsxs(a.Typography,{tag:"p",className:"text-xs text-blue-700 dark:text-blue-300",children:["Apple's SF Pro is restricted by its license to Apple platforms only. To comply with this restriction, this design system uses"," ",e.jsx("strong",{children:"Inter"})," (SIL Open Font License) as the primary typeface and ",e.jsx("strong",{children:"JetBrains Mono"})," for monospaced content. Inter closely matches SF Pro's metrics, proportions, and optical sizing, making it an excellent open-source alternative that renders consistently across all platforms."]})]})]}),e.jsxs("div",{className:"grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6",children:[e.jsxs("div",{className:"p-4 rounded-lg border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-display, 'Inter', system-ui)",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:"Inter (Display)"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Used at ≥20pt. Replaces SF Pro Display for large headlines and titles."})]}),e.jsxs("div",{className:"p-4 rounded-lg border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:"Inter (Text)"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Used at <20pt. Replaces SF Pro Text for body text and UI labels."})]}),e.jsxs("div",{className:"p-4 rounded-lg border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-mono, 'JetBrains Mono', monospace)",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:"JetBrains Mono"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Monospaced variant. Replaces SF Mono for code, terminal output, and technical data."})]})]})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Type Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"rounded-xl p-6 border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:e.jsx("div",{className:"flex flex-col gap-4",children:n.map(r=>e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-6 pb-3 border-b border-[var(--color-border)] last:border-0",children:[e.jsx("span",{className:"shrink-0",style:{fontFamily:c(r),fontSize:r.size,lineHeight:r.leading,fontWeight:o(r),letterSpacing:r.tracking,color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:r.name}),e.jsxs("div",{className:"flex flex-wrap gap-3 text-[10px] font-mono text-gray-400",children:[e.jsx("span",{children:r.size}),e.jsxs("span",{children:["/ ",r.leading]}),e.jsx("span",{children:r.weight}),r.tracking!=="0"&&e.jsxs("span",{children:["tracking: ",r.tracking]})]})]},r.name))})})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Label Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Text styles combine with label colors to create visual hierarchy. Showing ",s?"dark":"light"," appearance values."]}),e.jsx("div",{className:"rounded-xl p-6 border border-border",style:{backgroundColor:s?"#1e1e1e":"#ffffff"},children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("p",{style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",fontSize:"13px",lineHeight:"16px",color:s?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:[e.jsx("span",{className:"inline-block w-20 text-[10px] font-mono opacity-50",children:"Primary"})," ","The quick brown fox jumps over the lazy dog"]}),e.jsxs("p",{style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",fontSize:"13px",lineHeight:"16px",color:s?"rgba(235, 235, 245, 0.6)":"rgba(60, 60, 67, 0.6)"},children:[e.jsx("span",{className:"inline-block w-20 text-[10px] font-mono opacity-70",children:"Secondary"})," ","The quick brown fox jumps over the lazy dog"]}),e.jsxs("p",{style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",fontSize:"13px",lineHeight:"16px",color:s?"rgba(235, 235, 245, 0.3)":"rgba(60, 60, 67, 0.3)"},children:[e.jsx("span",{className:"inline-block w-20 text-[10px] font-mono opacity-70",children:"Tertiary"})," ","The quick brown fox jumps over the lazy dog"]})]})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"CSS Variables",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(a.BasicTable,{columns:[{key:"name",label:"Style"},{key:"cssVar",label:"CSS Variable",className:"font-mono text-gray-500"},{key:"size",label:"Size",className:"font-mono text-gray-500"},{key:"leading",label:"Leading",className:"font-mono text-gray-500"},{key:"font",label:"Font",className:"text-gray-500"}],data:n,maxRows:15,resizable:!1})})})})]})};exports.MacOSTextStylesSection=l;exports.default=l;

package/documentation/{MacOSTextStylesSection-B4xYNfLo.js → MacOSTextStylesSection-DZmQayrr.js}

@@ -1,10 +1,10 @@
 import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { ay as d, H as m, C as n, a as s, T as l } from "../index-lfg6LZ1p.js";
-import { Type as g, Info as p } from "lucide-react";
+import { ay as d, H as m, C as o, a as i, T as l, y as g } from "../index-19KsCnyX.js";
+import { Type as p, Info as f } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const o = [
+const n = [
   {
     name: "Large Title",
     size: "26px",
@@ -105,26 +105,26 @@ const o = [
     cssVar: "--macos-font-size-caption"
   }
 ];
-function f(i) {
-  return i.weight.includes("700") ? 700 : i.weight.includes("600") ? 600 : i.weight.includes("500") ? 500 : 400;
+function h(s) {
+  return s.weight.includes("700") ? 700 : s.weight.includes("600") ? 600 : s.weight.includes("500") ? 500 : 400;
 }
-function h(i) {
-  return i.font === "SF Pro Display" ? "var(--macos-font-display, 'Inter', system-ui)" : "var(--macos-font-family, 'Inter', system-ui)";
+function x(s) {
+  return s.font === "SF Pro Display" ? "var(--macos-font-display, 'Inter', system-ui)" : "var(--macos-font-family, 'Inter', system-ui)";
 }
-const w = () => {
-  const { mode: i } = d(), t = i === "dark";
+const v = () => {
+  const { mode: s } = d(), t = s === "dark";
   return /* @__PURE__ */ a(c, { children: [
     /* @__PURE__ */ e(
       m,
       {
         title: "Text Styles",
         description: "The macOS type scale defines size, weight, leading, and tracking for each text style. Each style adapts to the current appearance mode.",
-        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-gray-800 via-gray-600 to-gray-400 dark:from-gray-200 dark:via-gray-400 dark:to-gray-600 rounded-full flex items-center justify-center shadow-lg border border-gray-500/50", children: /* @__PURE__ */ e(g, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white dark:text-gray-900 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-gray-800 via-gray-600 to-gray-400 dark:from-gray-200 dark:via-gray-400 dark:to-gray-600 rounded-full flex items-center justify-center shadow-lg border border-gray-500/50", children: /* @__PURE__ */ e(p, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white dark:text-gray-900 filter drop-shadow-lg" }) })
       }
     ),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Font Family", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Font Family", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ a("div", { className: "flex items-start gap-3 p-4 rounded-lg bg-blue-50 dark:bg-blue-950/30 border border-blue-200 dark:border-blue-800", children: [
-        /* @__PURE__ */ e(p, { className: "w-5 h-5 text-blue-500 shrink-0 mt-0.5" }),
+        /* @__PURE__ */ e(f, { className: "w-5 h-5 text-blue-500 shrink-0 mt-0.5" }),
         /* @__PURE__ */ a("div", { className: "space-y-2", children: [
           /* @__PURE__ */ e(
             l,
@@ -155,7 +155,7 @@ const w = () => {
         /* @__PURE__ */ a(
           "div",
           {
-            className: "p-4 rounded-lg border border-gray-200 dark:border-gray-700",
+            className: "p-4 rounded-lg border border-border",
             style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
             children: [
               /* @__PURE__ */ e(
@@ -176,7 +176,7 @@ const w = () => {
         /* @__PURE__ */ a(
           "div",
           {
-            className: "p-4 rounded-lg border border-gray-200 dark:border-gray-700",
+            className: "p-4 rounded-lg border border-border",
             style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
             children: [
               /* @__PURE__ */ e(
@@ -197,7 +197,7 @@ const w = () => {
         /* @__PURE__ */ a(
           "div",
           {
-            className: "p-4 rounded-lg border border-gray-200 dark:border-gray-700",
+            className: "p-4 rounded-lg border border-border",
             style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
             children: [
               /* @__PURE__ */ e(
@@ -217,25 +217,25 @@ const w = () => {
         )
       ] })
     ] }) }) }),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Type Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Type Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
       "div",
       {
-        className: "rounded-xl p-6 border border-gray-200 dark:border-gray-700",
+        className: "rounded-xl p-6 border border-border",
         style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
-        children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: o.map((r) => /* @__PURE__ */ a(
+        children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: n.map((r) => /* @__PURE__ */ a(
           "div",
           {
-            className: "flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-6 pb-3 border-b border-gray-100 dark:border-gray-800 last:border-0",
+            className: "flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-6 pb-3 border-b border-[var(--color-border)] last:border-0",
             children: [
               /* @__PURE__ */ e(
                 "span",
                 {
                   className: "shrink-0",
                   style: {
-                    fontFamily: h(r),
+                    fontFamily: x(r),
                     fontSize: r.size,
                     lineHeight: r.leading,
-                    fontWeight: f(r),
+                    fontWeight: h(r),
                     letterSpacing: r.tracking,
                     color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
                   },
@@ -260,7 +260,7 @@ const w = () => {
         )) })
       }
     ) }) }) }),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "Label Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Label Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "w-full p-4 sm:p-6", children: [
       /* @__PURE__ */ a(
         l,
         {
@@ -276,7 +276,7 @@ const w = () => {
       /* @__PURE__ */ e(
         "div",
         {
-          className: "rounded-xl p-6 border border-gray-200 dark:border-gray-700",
+          className: "rounded-xl p-6 border border-border",
           style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
           children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
             /* @__PURE__ */ a(
@@ -331,32 +331,36 @@ const w = () => {
         }
       )
     ] }) }) }),
-    /* @__PURE__ */ e(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(s, { title: "CSS Variables", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6 overflow-x-auto", children: /* @__PURE__ */ a("table", { className: "w-full text-xs", children: [
-      /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ a("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [
-        /* @__PURE__ */ e("th", { className: "text-left py-2 pr-4 font-medium text-gray-500", children: "Style" }),
-        /* @__PURE__ */ e("th", { className: "text-left py-2 pr-4 font-medium text-gray-500", children: "CSS Variable" }),
-        /* @__PURE__ */ e("th", { className: "text-left py-2 pr-4 font-medium text-gray-500", children: "Size" }),
-        /* @__PURE__ */ e("th", { className: "text-left py-2 pr-4 font-medium text-gray-500", children: "Leading" }),
-        /* @__PURE__ */ e("th", { className: "text-left py-2 font-medium text-gray-500", children: "Font" })
-      ] }) }),
-      /* @__PURE__ */ e("tbody", { children: o.map((r) => /* @__PURE__ */ a(
-        "tr",
-        {
-          className: "border-b border-gray-100 dark:border-gray-800 last:border-0",
-          children: [
-            /* @__PURE__ */ e("td", { className: "py-2 pr-4 text-gray-700 dark:text-gray-300", children: r.name }),
-            /* @__PURE__ */ e("td", { className: "py-2 pr-4 font-mono text-gray-500", children: r.cssVar }),
-            /* @__PURE__ */ e("td", { className: "py-2 pr-4 font-mono text-gray-500", children: r.size }),
-            /* @__PURE__ */ e("td", { className: "py-2 pr-4 font-mono text-gray-500", children: r.leading }),
-            /* @__PURE__ */ e("td", { className: "py-2 text-gray-500", children: r.font })
-          ]
-        },
-        r.name
-      )) })
-    ] }) }) }) })
+    /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "CSS Variables", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      g,
+      {
+        columns: [
+          { key: "name", label: "Style" },
+          {
+            key: "cssVar",
+            label: "CSS Variable",
+            className: "font-mono text-gray-500"
+          },
+          {
+            key: "size",
+            label: "Size",
+            className: "font-mono text-gray-500"
+          },
+          {
+            key: "leading",
+            label: "Leading",
+            className: "font-mono text-gray-500"
+          },
+          { key: "font", label: "Font", className: "text-gray-500" }
+        ],
+        data: n,
+        maxRows: 15,
+        resizable: !1
+      }
+    ) }) }) })
   ] });
 };
 export {
-  w as MacOSTextStylesSection,
-  w as default
+  v as MacOSTextStylesSection,
+  v as default
 };

package/documentation/{MacOSToolbarSection-GwXI_HM0.js → MacOSToolbarSection-B_bHKn8G.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const s=()=>{const[l,t]=o.useState("");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"MacOSToolbar",description:"A macOS-style toolbar with leading, center, and trailing slots. Supports vibrancy backdrop blur, a transparent mode, and an optional bottom border.",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-sky-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-sky-400/50",children:e.jsx(r.PanelTop,{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:"Title + Leading + Trailing",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)",children:[e.jsx(a.MacOSToolbarSonoma,{title:"Documents",leading:e.jsxs("button",{className:"flex items-center gap-1 text-xs text-[#007aff] hover:opacity-80",children:[e.jsx(r.ChevronLeft,{className:"w-3.5 h-3.5"}),"Back"]}),trailing:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.Share2,{className:"w-4 h-4"})}),e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.MoreHorizontal,{className:"w-4 h-4"})})]})}),e.jsx("div",{className:"h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400",children:"Content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Search Bar in Center",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)",children:[e.jsx(a.MacOSToolbarSonoma,{leading:e.jsx(r.Mail,{className:"w-4 h-4 text-gray-500"}),center:e.jsx(a.MacOSSearchBar,{value:l,onChange:t,onClear:()=>t(""),className:"w-56",placeholder:"Search messages"}),trailing:e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.SlidersHorizontal,{className:"w-4 h-4"})})}),e.jsx("div",{className:"h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400",children:"Content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Transparent (no background)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card) bg-linear-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900",children:[e.jsx(a.MacOSToolbarSonoma,{title:"Transparent Toolbar",transparent:!0,bordered:!1}),e.jsx("div",{className:"h-24 flex items-center justify-center text-sm text-gray-500",children:"Toolbar blends into background"})]})})})}),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 { MacOSToolbar, MacOSSearchBar } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),a=require("../index-DMs_SmPq.js"),r=require("lucide-react");require("react-router-dom");require("react-dom");const s=()=>{const[l,t]=o.useState("");return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"MacOSToolbar",description:"A macOS-style toolbar with leading, center, and trailing slots. Supports vibrancy backdrop blur, a transparent mode, and an optional bottom border.",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-sky-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-sky-400/50",children:e.jsx(r.PanelTop,{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:"Title + Leading + Trailing",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)",children:[e.jsx(a.MacOSToolbarSonoma,{title:"Documents",leading:e.jsxs("button",{className:"flex items-center gap-1 text-xs text-[#007aff] hover:opacity-80",children:[e.jsx(r.ChevronLeft,{className:"w-3.5 h-3.5"}),"Back"]}),trailing:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.Share2,{className:"w-4 h-4"})}),e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.MoreHorizontal,{className:"w-4 h-4"})})]})}),e.jsx("div",{className:"h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400",children:"Content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Search Bar in Center",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)",children:[e.jsx(a.MacOSToolbarSonoma,{leading:e.jsx(r.Mail,{className:"w-4 h-4 text-gray-500"}),center:e.jsx(a.MacOSSearchBar,{value:l,onChange:t,onClear:()=>t(""),className:"w-56",placeholder:"Search messages"}),trailing:e.jsx("button",{className:"p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400",children:e.jsx(r.SlidersHorizontal,{className:"w-4 h-4"})})}),e.jsx("div",{className:"h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400",children:"Content area"})]})})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Transparent (no background)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card) bg-linear-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900",children:[e.jsx(a.MacOSToolbarSonoma,{title:"Transparent Toolbar",transparent:!0,bordered:!1}),e.jsx("div",{className:"h-24 flex items-center justify-center text-sm text-gray-500",children:"Toolbar blends into background"})]})})})}),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 { MacOSToolbar, MacOSSearchBar } from '@e-burgos/tucu-ui';
 
 // Title with leading and trailing slots
 <MacOSToolbar

package/documentation/{MacOSToolbarSection-BUSdw1-N.js → MacOSToolbarSection-Ci3H22eP.js}

@@ -1,6 +1,6 @@
 import { jsxs as a, Fragment as n, jsx as e } from "react/jsx-runtime";
 import { useState as i } from "react";
-import { H as d, C as r, a as t, bl as l, bm as c, c as m } from "../index-lfg6LZ1p.js";
+import { H as d, C as r, a as t, bn as l, bo as c, c as m } from "../index-19KsCnyX.js";
 import { PanelTop as h, Share2 as b, MoreHorizontal as g, ChevronLeft as u, SlidersHorizontal as p, Mail as f } from "lucide-react";
 import "react-router-dom";
 import "react-dom";

package/documentation/{MacOSWidgetSection-B2c5Jiqb.js → MacOSWidgetSection-CEJiUAXx.js}

@@ -1,5 +1,5 @@
 import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { H as c, C as s, a as i, bq as l, br as r, P as o, A as n, c as m } from "../index-lfg6LZ1p.js";
+import { H as c, C as s, a as i, bs as l, bt as r, P as o, A as n, c as m } from "../index-19KsCnyX.js";
 import { LayoutGrid as p, Cloud as g, Sparkles as u, Activity as h } from "lucide-react";
 import "react-router-dom";
 import "react";

package/documentation/{MacOSWidgetSection-BEuuPDcI.js → MacOSWidgetSection-CS6SNE1x.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Widget",description:"macOS-style widget cards in four sizes with optional glass/vibrancy backdrop, icon header, and subtitle. Perfect for dashboards, quick-glance info, and control center 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-emerald-500 via-teal-500 to-cyan-600 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50",children:e.jsx(t.LayoutGrid,{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,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"All Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"flex flex-wrap gap-6 items-start justify-center",children:["sm","md","lg","xl"].map(a=>e.jsxs(s.MacOSWidget,{size:a,children:[e.jsx(s.MacOSWidgetHeader,{title:`Widget ${a.toUpperCase()}`,subtitle:"Description",icon:e.jsx(t.Cloud,{className:"w-4 h-4"})}),e.jsxs("div",{className:"px-3 pb-3 text-xs text-gray-500 dark:text-gray-400",children:["Content area for the ",a," widget."]})]},a))})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Glass Mode",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 bg-linear-to-br from-purple-600/30 via-blue-500/30 to-cyan-400/30 rounded-lg",children:e.jsx("div",{className:"flex flex-wrap gap-6 items-start justify-center",children:["sm","md","lg"].map(a=>e.jsxs(s.MacOSWidget,{size:a,glass:!0,children:[e.jsx(s.MacOSWidgetHeader,{title:`Glass ${a.toUpperCase()}`,icon:e.jsx(t.Sparkles,{className:"w-4 h-4"})}),e.jsx("div",{className:"px-3 pb-3 text-xs text-gray-300",children:"Glass vibrancy mode — blurred background."})]},a))})})})}),e.jsx(s.PropPlayground,{componentName:"MacOSWidget",defaultValues:{size:"md",glass:!1},controlOverrides:[{name:"size",type:"select",options:["sm","md","lg","xl"],description:"Widget size preset"},{name:"glass",type:"boolean",description:"Enable glass/vibrancy backdrop"}],includeProps:["size","glass"],excludeProps:["className"],children:a=>e.jsx("div",{className:"flex items-center justify-center p-6 rounded-lg bg-linear-to-br from-purple-600/20 via-blue-500/20 to-cyan-400/20",children:e.jsxs(s.MacOSWidget,{...a,children:[e.jsx(s.MacOSWidgetHeader,{title:"Preview Widget",subtitle:"Subtitle text",icon:e.jsx(t.Activity,{className:"w-4 h-4"})}),e.jsx("div",{className:"px-3 pb-3 text-xs text-gray-600 dark:text-gray-400",children:"Widget content — adjust props above."})]})})}),e.jsx(s.AutoPropsTable,{componentName:"MacOSWidget"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { MacOSWidget, MacOSWidgetHeader } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Widget",description:"macOS-style widget cards in four sizes with optional glass/vibrancy backdrop, icon header, and subtitle. Perfect for dashboards, quick-glance info, and control center 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-emerald-500 via-teal-500 to-cyan-600 rounded-full flex items-center justify-center shadow-lg border border-emerald-500/50",children:e.jsx(t.LayoutGrid,{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,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"All Sizes",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"flex flex-wrap gap-6 items-start justify-center",children:["sm","md","lg","xl"].map(a=>e.jsxs(s.MacOSWidget,{size:a,children:[e.jsx(s.MacOSWidgetHeader,{title:`Widget ${a.toUpperCase()}`,subtitle:"Description",icon:e.jsx(t.Cloud,{className:"w-4 h-4"})}),e.jsxs("div",{className:"px-3 pb-3 text-xs text-gray-500 dark:text-gray-400",children:["Content area for the ",a," widget."]})]},a))})})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Glass Mode",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 bg-linear-to-br from-purple-600/30 via-blue-500/30 to-cyan-400/30 rounded-lg",children:e.jsx("div",{className:"flex flex-wrap gap-6 items-start justify-center",children:["sm","md","lg"].map(a=>e.jsxs(s.MacOSWidget,{size:a,glass:!0,children:[e.jsx(s.MacOSWidgetHeader,{title:`Glass ${a.toUpperCase()}`,icon:e.jsx(t.Sparkles,{className:"w-4 h-4"})}),e.jsx("div",{className:"px-3 pb-3 text-xs text-gray-300",children:"Glass vibrancy mode — blurred background."})]},a))})})})}),e.jsx(s.PropPlayground,{componentName:"MacOSWidget",defaultValues:{size:"md",glass:!1},controlOverrides:[{name:"size",type:"select",options:["sm","md","lg","xl"],description:"Widget size preset"},{name:"glass",type:"boolean",description:"Enable glass/vibrancy backdrop"}],includeProps:["size","glass"],excludeProps:["className"],children:a=>e.jsx("div",{className:"flex items-center justify-center p-6 rounded-lg bg-linear-to-br from-purple-600/20 via-blue-500/20 to-cyan-400/20",children:e.jsxs(s.MacOSWidget,{...a,children:[e.jsx(s.MacOSWidgetHeader,{title:"Preview Widget",subtitle:"Subtitle text",icon:e.jsx(t.Activity,{className:"w-4 h-4"})}),e.jsx("div",{className:"px-3 pb-3 text-xs text-gray-600 dark:text-gray-400",children:"Widget content — adjust props above."})]})})}),e.jsx(s.AutoPropsTable,{componentName:"MacOSWidget"}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(s.CodeBlock,{language:"tsx",code:`import { MacOSWidget, MacOSWidgetHeader } from '@e-burgos/tucu-ui';
 
 // Basic widget
 <MacOSWidget size="md">

package/documentation/{MacOSWindowSection-ChLGxWkJ.js → MacOSWindowSection-Cj5W9tOb.js}

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function d(t){return e.jsx("div",{className:"relative rounded-xl bg-gray-100 dark:bg-gray-800/50 p-8",style:{minHeight:220},children:e.jsx(i.MacOSWindow,{...t,defaultWidth:t.defaultWidth??380,children:e.jsx("div",{className:"p-4 text-sm text-gray-700 dark:text-gray-300",children:"Interactive window — adjust props above."})})})}const l=()=>{const[t,s]=r.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"Window",description:"A macOS-style window container with vibrancy title bar, traffic-light buttons, drag & resize support, maximize/minimize states, and optional action slots.",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-blue-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50",children:e.jsx(n.AppWindow,{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(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Interactive — Drag, Resize, Maximize",className:"mt-2 mb-2",children:e.jsx("div",{className:"relative w-full overflow-hidden",style:{height:400},children:e.jsx(i.MacOSWindow,{title:"Drag & Resize Me",defaultWidth:420,defaultHeight:220,children:e.jsxs("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:[e.jsx("p",{className:"mb-2 font-medium",children:"Try these interactions:"}),e.jsxs("ul",{className:"list-disc pl-5 space-y-1 text-[12px]",children:[e.jsx("li",{children:"Drag the title bar to move the window"}),e.jsx("li",{children:"Drag any edge or corner to resize"}),e.jsx("li",{children:"Double-click the title bar to maximize"}),e.jsx("li",{children:"Click the green traffic light to maximize/restore"}),e.jsx("li",{children:"Click the yellow traffic light to restore default size"})]})]})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Traffic Lights — Left (default)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"My Application",draggable:!1,resizable:!1,onClose:()=>alert("close"),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Window content goes here. The title bar uses vibrancy material and the traffic lights appear on hover."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Traffic Lights — Right",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"Settings",trafficLightsPosition:"right",draggable:!1,resizable:!1,children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Traffic lights positioned on the right side of the title bar."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Without Traffic Lights + Custom Actions",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"Document",showTrafficLights:!1,draggable:!1,resizable:!1,actions:e.jsx(i.Button,{size:"mini",shape:"rounded",color:"info",children:"Save"}),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Traffic lights hidden. A custom action button appears in the trailing slot."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Toggle Visibility",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsx(i.Button,{onClick:()=>s(a=>!a),children:t?"Hide Window":"Show Window"}),t&&e.jsx(i.MacOSWindow,{title:"Toggled Window",draggable:!1,resizable:!1,onClose:()=>s(!1),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Click the red traffic light or the button above to close."})})]})})}),e.jsx(i.PropPlayground,{componentName:"MacOSWindow",defaultValues:{title:"My Window",draggable:!0,resizable:!0,showTrafficLights:!0,trafficLightsPosition:"left",defaultWidth:380,defaultHeight:200,minWidth:200,minHeight:120},controlOverrides:[{name:"title",type:"text",description:"Window title displayed in the title bar"},{name:"draggable",type:"boolean",description:"Allow drag-moving by the title bar"},{name:"resizable",type:"boolean",description:"Allow resizing from edges/corners"},{name:"showTrafficLights",type:"boolean",description:"Show close/minimize/maximize buttons"},{name:"trafficLightsPosition",type:"select",options:["left","right"],description:"Position of traffic light buttons"},{name:"defaultWidth",type:"text",description:"Initial width (px or CSS value)"},{name:"defaultHeight",type:"text",description:"Initial height (px or CSS value)"},{name:"minWidth",type:"text",description:"Minimum width in pixels"},{name:"minHeight",type:"text",description:"Minimum height in pixels"}],includeProps:["title","draggable","resizable","showTrafficLights","trafficLightsPosition","defaultWidth","defaultHeight","minWidth","minHeight"],excludeProps:["className","titleBarClassName","actions","onClose","onMinimize","onMaximize"],children:a=>e.jsx(d,{...a})}),e.jsx(i.AutoPropsTable,{componentName:"MacOSWindow"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { MacOSWindow } from '@e-burgos/tucu-ui';
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),i=require("../index-DMs_SmPq.js"),n=require("lucide-react");require("react-router-dom");require("react-dom");function d(t){return e.jsx("div",{className:"relative rounded-xl bg-gray-100 dark:bg-gray-800/50 p-8",style:{minHeight:220},children:e.jsx(i.MacOSWindow,{...t,defaultWidth:t.defaultWidth??380,children:e.jsx("div",{className:"p-4 text-sm text-gray-700 dark:text-gray-300",children:"Interactive window — adjust props above."})})})}const l=()=>{const[t,s]=r.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsx(i.HeroCard,{title:"Window",description:"A macOS-style window container with vibrancy title bar, traffic-light buttons, drag & resize support, maximize/minimize states, and optional action slots.",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-blue-500 via-indigo-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-blue-500/50",children:e.jsx(n.AppWindow,{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(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Interactive — Drag, Resize, Maximize",className:"mt-2 mb-2",children:e.jsx("div",{className:"relative w-full overflow-hidden",style:{height:400},children:e.jsx(i.MacOSWindow,{title:"Drag & Resize Me",defaultWidth:420,defaultHeight:220,children:e.jsxs("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:[e.jsx("p",{className:"mb-2 font-medium",children:"Try these interactions:"}),e.jsxs("ul",{className:"list-disc pl-5 space-y-1 text-[12px]",children:[e.jsx("li",{children:"Drag the title bar to move the window"}),e.jsx("li",{children:"Drag any edge or corner to resize"}),e.jsx("li",{children:"Double-click the title bar to maximize"}),e.jsx("li",{children:"Click the green traffic light to maximize/restore"}),e.jsx("li",{children:"Click the yellow traffic light to restore default size"})]})]})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Traffic Lights — Left (default)",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"My Application",draggable:!1,resizable:!1,onClose:()=>alert("close"),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Window content goes here. The title bar uses vibrancy material and the traffic lights appear on hover."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Traffic Lights — Right",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"Settings",trafficLightsPosition:"right",draggable:!1,resizable:!1,children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Traffic lights positioned on the right side of the title bar."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Without Traffic Lights + Custom Actions",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.MacOSWindow,{title:"Document",showTrafficLights:!1,draggable:!1,resizable:!1,actions:e.jsx(i.Button,{size:"mini",shape:"rounded",color:"info",children:"Save"}),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Traffic lights hidden. A custom action button appears in the trailing slot."})})})})}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Toggle Visibility",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 space-y-4",children:[e.jsx(i.Button,{onClick:()=>s(a=>!a),children:t?"Hide Window":"Show Window"}),t&&e.jsx(i.MacOSWindow,{title:"Toggled Window",draggable:!1,resizable:!1,onClose:()=>s(!1),children:e.jsx("div",{className:"p-6 text-sm text-gray-700 dark:text-gray-300",children:"Click the red traffic light or the button above to close."})})]})})}),e.jsx(i.PropPlayground,{componentName:"MacOSWindow",defaultValues:{title:"My Window",draggable:!0,resizable:!0,showTrafficLights:!0,trafficLightsPosition:"left",defaultWidth:380,defaultHeight:200,minWidth:200,minHeight:120},controlOverrides:[{name:"title",type:"text",description:"Window title displayed in the title bar"},{name:"draggable",type:"boolean",description:"Allow drag-moving by the title bar"},{name:"resizable",type:"boolean",description:"Allow resizing from edges/corners"},{name:"showTrafficLights",type:"boolean",description:"Show close/minimize/maximize buttons"},{name:"trafficLightsPosition",type:"select",options:["left","right"],description:"Position of traffic light buttons"},{name:"defaultWidth",type:"text",description:"Initial width (px or CSS value)"},{name:"defaultHeight",type:"text",description:"Initial height (px or CSS value)"},{name:"minWidth",type:"text",description:"Minimum width in pixels"},{name:"minHeight",type:"text",description:"Minimum height in pixels"}],includeProps:["title","draggable","resizable","showTrafficLights","trafficLightsPosition","defaultWidth","defaultHeight","minWidth","minHeight"],excludeProps:["className","titleBarClassName","actions","onClose","onMinimize","onMaximize"],children:a=>e.jsx(d,{...a})}),e.jsx(i.AutoPropsTable,{componentName:"MacOSWindow"}),e.jsx(i.CardContainer,{className:"overflow-hidden",children:e.jsx(i.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(i.CodeBlock,{language:"tsx",code:`import { MacOSWindow } from '@e-burgos/tucu-ui';
 
 // Interactive window — drag, resize, maximize
 <MacOSWindow