@e-burgos/tucu-ui 2.0.8 → 2.0.9

package/documentation/MacOSSidebarSection-DDGdU_Wr.js

@@ -0,0 +1,35 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),d=require("react"),a=require("../index-BaGqriuz.js"),s=require("lucide-react");require("react-router-dom");require("react-dom");const l=[{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(r){const[t,i]=d.useState(r.activeId||"inbox");return e.jsxs("div",{className:"flex h-64 rounded-xl overflow-hidden border border-gray-200 dark:border-gray-700",children:[e.jsx(a.MacSidebarCard,{sections:l,activeId:t,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:t})]})]})}const c=()=>{const[r,t]=d.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-gray-200 dark:border-gray-700 shadow-sm",children:[e.jsx(a.MacSidebarCard,{sections:l,activeId:r,onSelect:t,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:r})]})]})})})}),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-gray-200 dark:border-gray-700 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-gray-200 dark:border-gray-700 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/MacOSTahoeSection-DKtgrult.js

@@ -0,0 +1,98 @@
+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 { Sparkles as h, Home as u, Settings as f } from "lucide-react";
+import "react-router-dom";
+import "react-dom";
+const b = () => /* @__PURE__ */ e("div", { className: "flex flex-col gap-6 w-full max-w-4xl mx-auto h-[400px]", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 h-full", children: [
+  /* @__PURE__ */ a(
+    "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: [
+        /* @__PURE__ */ a("div", { className: "flex flex-col gap-1 mb-2", children: [
+          /* @__PURE__ */ e("h3", { className: "text-[var(--macos-label)] font-semibold mb-0", children: "System Preferences" }),
+          /* @__PURE__ */ e("p", { className: "text-[var(--macos-secondary-label)] text-xs mb-0", children: "Manage liquid glass settings in Tahoe" })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--macos-label)]", children: "Enable Notifications" }),
+          /* @__PURE__ */ e(d, { checked: !0, onChange: () => {
+          } })
+        ] }),
+        /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ e("span", { className: "text-sm font-medium text-[var(--macos-label)]", children: "Auto-play content" }),
+          /* @__PURE__ */ e(c, { defaultChecked: !0 })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ e(
+          n,
+          {
+            variant: "ghost",
+            options: [
+              { name: "Wi-Fi", value: "wifi" },
+              { name: "Bluetooth", value: "bt" }
+            ],
+            placeholder: "Search settings...",
+            className: "w-full"
+          }
+        ) }),
+        /* @__PURE__ */ e("div", { className: "mt-auto", children: /* @__PURE__ */ e(l, { variant: "solid", fullWidth: !0, children: "Apply Changes" }) })
+      ]
+    }
+  ),
+  /* @__PURE__ */ a("div", { className: "flex flex-col gap-5 justify-between", children: [
+    /* @__PURE__ */ a("div", { "data-tucu": "panel-card", className: "p-5 flex flex-col gap-3", children: [
+      /* @__PURE__ */ e("h4", { className: "text-[var(--macos-label)] font-medium mb-1", children: "Standard Material" }),
+      /* @__PURE__ */ e("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." })
+    ] }),
+    /* @__PURE__ */ e(m, { variant: "info", children: /* @__PURE__ */ a("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ e("strong", { children: "New Update Available" }),
+      /* @__PURE__ */ e("span", { children: "macOS 26 Tahoe is ready to be installed. Restart to apply changes." })
+    ] }) }),
+    /* @__PURE__ */ a("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ e(l, { variant: "ghost", fullWidth: !0, children: "Cancel" }),
+      /* @__PURE__ */ e(l, { variant: "solid", fullWidth: !0, children: "Restart Now" })
+    ] })
+  ] })
+] }) });
+function y() {
+  const [t, s] = r(!1);
+  return /* @__PURE__ */ a("div", { className: "flex flex-col gap-4", children: [
+    /* @__PURE__ */ e(
+      i,
+      {
+        title: "Liquid Glass",
+        description: "The variant='tahoe' setting forces the Layout to use Liquid Glass materials and Spatial backgrounds.",
+        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-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: /* @__PURE__ */ e(h, { 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" }) })
+      }
+    ),
+    /* @__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",
+        style: {
+          background: "var(--macos-tahoe-root-bg, var(--macos-spatial-bg))"
+        },
+        children: t ? /* @__PURE__ */ e("div", { className: "w-full h-full relative p-0 m-0", children: /* @__PURE__ */ a(
+          o,
+          {
+            variant: "tahoe",
+            menuItems: [
+              { name: "Dashboard", path: "#", icon: /* @__PURE__ */ e(u, {}) },
+              { name: "Settings", path: "#", icon: /* @__PURE__ */ e(f, {}) }
+            ],
+            className: "absolute inset-0 rounded-2xl",
+            children: [
+              /* @__PURE__ */ e("div", { className: "macos-bg-spatial-aurora absolute inset-0 -z-10 rounded-2xl" }),
+              /* @__PURE__ */ e(b, {})
+            ]
+          }
+        ) }) : /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(l, { onClick: () => s(!0), variant: "solid", children: "Launch Tahoe Demo" }) })
+      }
+    )
+  ] });
+}
+export {
+  b as TahoeDemoContent,
+  y as default
+};

package/documentation/MacOSTahoeSection-ErqFjWX4.js

@@ -0,0 +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;

package/documentation/MacOSTextStylesSection-B4xYNfLo.js

@@ -0,0 +1,362 @@
+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 "react-router-dom";
+import "react";
+import "react-dom";
+const o = [
+  {
+    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 f(i) {
+  return i.weight.includes("700") ? 700 : i.weight.includes("600") ? 600 : i.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)";
+}
+const w = () => {
+  const { mode: i } = d(), t = i === "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" }) })
+      }
+    ),
+    /* @__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__ */ 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__ */ a("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ e(
+            l,
+            {
+              tag: "p",
+              className: "text-sm text-blue-800 dark:text-blue-200 font-medium",
+              children: "Alternative Font: Inter Variable"
+            }
+          ),
+          /* @__PURE__ */ a(
+            l,
+            {
+              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",
+                " ",
+                /* @__PURE__ */ e("strong", { children: "Inter" }),
+                " (SIL Open Font License) as the primary typeface and ",
+                /* @__PURE__ */ e("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."
+              ]
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ a("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4 mt-6", children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "p-4 rounded-lg border border-gray-200 dark:border-gray-700",
+            style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
+            children: [
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  className: "text-lg mb-2",
+                  style: {
+                    fontFamily: "var(--macos-font-display, 'Inter', system-ui)",
+                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
+                  },
+                  children: "Inter (Display)"
+                }
+              ),
+              /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Used at ≥20pt. Replaces SF Pro Display for large headlines and titles." })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "p-4 rounded-lg border border-gray-200 dark:border-gray-700",
+            style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
+            children: [
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  className: "text-lg mb-2",
+                  style: {
+                    fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
+                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
+                  },
+                  children: "Inter (Text)"
+                }
+              ),
+              /* @__PURE__ */ e("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." })
+            ]
+          }
+        ),
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: "p-4 rounded-lg border border-gray-200 dark:border-gray-700",
+            style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
+            children: [
+              /* @__PURE__ */ e(
+                "p",
+                {
+                  className: "text-lg mb-2",
+                  style: {
+                    fontFamily: "var(--macos-font-mono, 'JetBrains Mono', monospace)",
+                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
+                  },
+                  children: "JetBrains Mono"
+                }
+              ),
+              /* @__PURE__ */ e("p", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Monospaced variant. Replaces SF Mono for code, terminal output, and technical data." })
+            ]
+          }
+        )
+      ] })
+    ] }) }) }),
+    /* @__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(
+      "div",
+      {
+        className: "rounded-xl p-6 border border-gray-200 dark:border-gray-700",
+        style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
+        children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-4", children: o.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",
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "shrink-0",
+                  style: {
+                    fontFamily: h(r),
+                    fontSize: r.size,
+                    lineHeight: r.leading,
+                    fontWeight: f(r),
+                    letterSpacing: r.tracking,
+                    color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
+                  },
+                  children: r.name
+                }
+              ),
+              /* @__PURE__ */ a("div", { className: "flex flex-wrap gap-3 text-[10px] font-mono text-gray-400", children: [
+                /* @__PURE__ */ e("span", { children: r.size }),
+                /* @__PURE__ */ a("span", { children: [
+                  "/ ",
+                  r.leading
+                ] }),
+                /* @__PURE__ */ e("span", { children: r.weight }),
+                r.tracking !== "0" && /* @__PURE__ */ a("span", { children: [
+                  "tracking: ",
+                  r.tracking
+                ] })
+              ] })
+            ]
+          },
+          r.name
+        )) })
+      }
+    ) }) }) }),
+    /* @__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__ */ a(
+        l,
+        {
+          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 ",
+            t ? "dark" : "light",
+            " appearance values."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "rounded-xl p-6 border border-gray-200 dark:border-gray-700",
+          style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
+          children: /* @__PURE__ */ a("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ a(
+              "p",
+              {
+                style: {
+                  fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
+                  fontSize: "13px",
+                  lineHeight: "16px",
+                  color: t ? "rgba(255, 255, 255, 0.85)" : "rgba(0, 0, 0, 0.85)"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "inline-block w-20 text-[10px] font-mono opacity-50", children: "Primary" }),
+                  " ",
+                  "The quick brown fox jumps over the lazy dog"
+                ]
+              }
+            ),
+            /* @__PURE__ */ a(
+              "p",
+              {
+                style: {
+                  fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
+                  fontSize: "13px",
+                  lineHeight: "16px",
+                  color: t ? "rgba(235, 235, 245, 0.6)" : "rgba(60, 60, 67, 0.6)"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "inline-block w-20 text-[10px] font-mono opacity-70", children: "Secondary" }),
+                  " ",
+                  "The quick brown fox jumps over the lazy dog"
+                ]
+              }
+            ),
+            /* @__PURE__ */ a(
+              "p",
+              {
+                style: {
+                  fontFamily: "var(--macos-font-family, 'Inter', system-ui)",
+                  fontSize: "13px",
+                  lineHeight: "16px",
+                  color: t ? "rgba(235, 235, 245, 0.3)" : "rgba(60, 60, 67, 0.3)"
+                },
+                children: [
+                  /* @__PURE__ */ e("span", { className: "inline-block w-20 text-[10px] font-mono opacity-70", children: "Tertiary" }),
+                  " ",
+                  "The quick brown fox jumps over the lazy dog"
+                ]
+              }
+            )
+          ] })
+        }
+      )
+    ] }) }) }),
+    /* @__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
+      )) })
+    ] }) }) }) })
+  ] });
+};
+export {
+  w as MacOSTextStylesSection,
+  w as default
+};

package/documentation/MacOSTextStylesSection-DL6rw2CK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../index-BaGqriuz.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(s){return s.weight.includes("700")?700:s.weight.includes("600")?600:s.weight.includes("500")?500:400}function c(s){return s.font==="SF Pro Display"?"var(--macos-font-display, 'Inter', system-ui)":"var(--macos-font-family, 'Inter', system-ui)"}const l=()=>{const{mode:s}=t.useTheme(),r=s==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(t.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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.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(t.Typography,{tag:"p",className:"text-sm text-blue-800 dark:text-blue-200 font-medium",children:"Alternative Font: Inter Variable"}),e.jsxs(t.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-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-display, 'Inter', system-ui)",color:r?"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-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-family, 'Inter', system-ui)",color:r?"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-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:[e.jsx("p",{className:"text-lg mb-2",style:{fontFamily:"var(--macos-font-mono, 'JetBrains Mono', monospace)",color:r?"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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.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-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#1e1e1e":"#ffffff"},children:e.jsx("div",{className:"flex flex-col gap-4",children:n.map(a=>e.jsxs("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",children:[e.jsx("span",{className:"shrink-0",style:{fontFamily:c(a),fontSize:a.size,lineHeight:a.leading,fontWeight:o(a),letterSpacing:a.tracking,color:r?"rgba(255, 255, 255, 0.85)":"rgba(0, 0, 0, 0.85)"},children:a.name}),e.jsxs("div",{className:"flex flex-wrap gap-3 text-[10px] font-mono text-gray-400",children:[e.jsx("span",{children:a.size}),e.jsxs("span",{children:["/ ",a.leading]}),e.jsx("span",{children:a.weight}),a.tracking!=="0"&&e.jsxs("span",{children:["tracking: ",a.tracking]})]})]},a.name))})})})})}),e.jsx(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"Label Colors",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(t.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 ",r?"dark":"light"," appearance values."]}),e.jsx("div",{className:"rounded-xl p-6 border border-gray-200 dark:border-gray-700",style:{backgroundColor:r?"#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:r?"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:r?"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:r?"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(t.CardContainer,{className:"overflow-hidden",children:e.jsx(t.CardTitle,{title:"CSS Variables",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6 overflow-x-auto",children:e.jsxs("table",{className:"w-full text-xs",children:[e.jsx("thead",{children:e.jsxs("tr",{className:"border-b border-gray-200 dark:border-gray-700",children:[e.jsx("th",{className:"text-left py-2 pr-4 font-medium text-gray-500",children:"Style"}),e.jsx("th",{className:"text-left py-2 pr-4 font-medium text-gray-500",children:"CSS Variable"}),e.jsx("th",{className:"text-left py-2 pr-4 font-medium text-gray-500",children:"Size"}),e.jsx("th",{className:"text-left py-2 pr-4 font-medium text-gray-500",children:"Leading"}),e.jsx("th",{className:"text-left py-2 font-medium text-gray-500",children:"Font"})]})}),e.jsx("tbody",{children:n.map(a=>e.jsxs("tr",{className:"border-b border-gray-100 dark:border-gray-800 last:border-0",children:[e.jsx("td",{className:"py-2 pr-4 text-gray-700 dark:text-gray-300",children:a.name}),e.jsx("td",{className:"py-2 pr-4 font-mono text-gray-500",children:a.cssVar}),e.jsx("td",{className:"py-2 pr-4 font-mono text-gray-500",children:a.size}),e.jsx("td",{className:"py-2 pr-4 font-mono text-gray-500",children:a.leading}),e.jsx("td",{className:"py-2 text-gray-500",children:a.font})]},a.name))})]})})})})]})};exports.MacOSTextStylesSection=l;exports.default=l;

package/documentation/MacOSToolbarSection-BUSdw1-N.js

@@ -0,0 +1,100 @@
+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 { 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";
+const T = () => {
+  const [s, o] = i("");
+  return /* @__PURE__ */ a(n, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        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: /* @__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-sky-400 via-blue-500 to-indigo-600 rounded-full flex items-center justify-center shadow-lg border border-sky-400/50", children: /* @__PURE__ */ e(h, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Title + Leading + Trailing", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          title: "Documents",
+          leading: /* @__PURE__ */ a("button", { className: "flex items-center gap-1 text-xs text-[#007aff] hover:opacity-80", children: [
+            /* @__PURE__ */ e(u, { className: "w-3.5 h-3.5" }),
+            "Back"
+          ] }),
+          trailing: /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("button", { className: "p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ e(b, { className: "w-4 h-4" }) }),
+            /* @__PURE__ */ e("button", { className: "p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ e(g, { className: "w-4 h-4" }) })
+          ] })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400", children: "Content area" })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Search Bar in Center", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("div", { className: "rounded-xl overflow-hidden border border-(--color-semantic-line-primary-subtle) shadow-(--shadow-card)", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          leading: /* @__PURE__ */ e(f, { className: "w-4 h-4 text-gray-500" }),
+          center: /* @__PURE__ */ e(
+            c,
+            {
+              value: s,
+              onChange: o,
+              onClear: () => o(""),
+              className: "w-56",
+              placeholder: "Search messages"
+            }
+          ),
+          trailing: /* @__PURE__ */ e("button", { className: "p-1.5 rounded-md hover:bg-gray-500/10 text-gray-600 dark:text-gray-400", children: /* @__PURE__ */ e(p, { className: "w-4 h-4" }) })
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "h-24 bg-(--color-semantic-bg) flex items-center justify-center text-sm text-gray-400", children: "Content area" })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Transparent (no background)", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ a("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: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          title: "Transparent Toolbar",
+          transparent: !0,
+          bordered: !1
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "h-24 flex items-center justify-center text-sm text-gray-500", children: "Toolbar blends into background" })
+    ] }) }) }) }),
+    /* @__PURE__ */ e(r, { className: "overflow-hidden", children: /* @__PURE__ */ e(t, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+      m,
+      {
+        language: "tsx",
+        code: `import { MacOSToolbar, MacOSSearchBar } from '@e-burgos/tucu-ui';
+
+// Title with leading and trailing slots
+<MacOSToolbar
+  title="Documents"
+  leading={<BackButton />}
+  trailing={<MoreButton />}
+/>
+
+// Search bar in center slot
+<MacOSToolbar
+  center={
+    <MacOSSearchBar
+      value={search}
+      onChange={setSearch}
+      onClear={() => setSearch('')}
+    />
+  }
+  trailing={<FilterButton />}
+/>
+
+// Transparent — blends into parent background
+<MacOSToolbar title="Overlay" transparent bordered={false} />`
+      }
+    ) }) }) })
+  ] });
+};
+export {
+  T as MacOSToolbarSection,
+  T as default
+};