@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/MacOSTextStylesSection-DZmQayrr.js

@@ -0,0 +1,366 @@
+import { jsxs as a, Fragment as c, jsx as e } from "react/jsx-runtime";
+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 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 h(s) {
+  return s.weight.includes("700") ? 700 : s.weight.includes("600") ? 600 : s.weight.includes("500") ? 500 : 400;
+}
+function x(s) {
+  return s.font === "SF Pro Display" ? "var(--macos-font-display, 'Inter', system-ui)" : "var(--macos-font-family, 'Inter', system-ui)";
+}
+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(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(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(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,
+            {
+              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-border",
+            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-border",
+            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-border",
+            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(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-border",
+        style: { backgroundColor: t ? "#1e1e1e" : "#ffffff" },
+        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-[var(--color-border)] last:border-0",
+            children: [
+              /* @__PURE__ */ e(
+                "span",
+                {
+                  className: "shrink-0",
+                  style: {
+                    fontFamily: x(r),
+                    fontSize: r.size,
+                    lineHeight: r.leading,
+                    fontWeight: h(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(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,
+        {
+          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-border",
+          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(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 {
+  v as MacOSTextStylesSection,
+  v as default
+};

package/documentation/MacOSToolbarSection-B_bHKn8G.js

@@ -0,0 +1,23 @@
+"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
+  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} />`})})})})]})};exports.MacOSToolbarSection=s;exports.default=s;

package/documentation/MacOSToolbarSection-Ci3H22eP.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, 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";
+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
+};

package/documentation/MacOSWidgetSection-CEJiUAXx.js

@@ -0,0 +1,107 @@
+import { jsxs as t, Fragment as d, jsx as e } from "react/jsx-runtime";
+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";
+import "react-dom";
+const y = () => /* @__PURE__ */ t(d, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      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: /* @__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-emerald-500 via-teal-500 to-cyan-600 rounded-full flex items-center justify-center shadow-lg border border-emerald-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 filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "All Sizes", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-6 items-start justify-center", children: ["sm", "md", "lg", "xl"].map((a) => /* @__PURE__ */ t(l, { size: a, children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        title: `Widget ${a.toUpperCase()}`,
+        subtitle: "Description",
+        icon: /* @__PURE__ */ e(g, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ t("div", { className: "px-3 pb-3 text-xs text-gray-500 dark:text-gray-400", children: [
+      "Content area for the ",
+      a,
+      " widget."
+    ] })
+  ] }, a)) }) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Glass Mode", className: "mt-2 mb-2", children: /* @__PURE__ */ e("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: /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-6 items-start justify-center", children: ["sm", "md", "lg"].map((a) => /* @__PURE__ */ t(l, { size: a, glass: !0, children: [
+    /* @__PURE__ */ e(
+      r,
+      {
+        title: `Glass ${a.toUpperCase()}`,
+        icon: /* @__PURE__ */ e(u, { className: "w-4 h-4" })
+      }
+    ),
+    /* @__PURE__ */ e("div", { className: "px-3 pb-3 text-xs text-gray-300", children: "Glass vibrancy mode — blurred background." })
+  ] }, a)) }) }) }) }),
+  /* @__PURE__ */ e(
+    o,
+    {
+      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) => /* @__PURE__ */ e("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: /* @__PURE__ */ t(l, { ...a, children: [
+        /* @__PURE__ */ e(
+          r,
+          {
+            title: "Preview Widget",
+            subtitle: "Subtitle text",
+            icon: /* @__PURE__ */ e(h, { className: "w-4 h-4" })
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: "px-3 pb-3 text-xs text-gray-600 dark:text-gray-400", children: "Widget content — adjust props above." })
+      ] }) })
+    }
+  ),
+  /* @__PURE__ */ e(n, { componentName: "MacOSWidget" }),
+  /* @__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(
+    m,
+    {
+      language: "tsx",
+      code: `import { MacOSWidget, MacOSWidgetHeader } from '@e-burgos/tucu-ui';
+
+// Basic widget
+<MacOSWidget size="md">
+  <MacOSWidgetHeader
+    title="Weather"
+    subtitle="San Francisco"
+    icon={<CloudIcon />}
+  />
+  <div className="px-3 pb-3">72°F — Sunny</div>
+</MacOSWidget>
+
+// Glass mode on gradient background
+<MacOSWidget size="lg" glass>
+  <MacOSWidgetHeader title="Music" icon={<MusicIcon />} />
+  <div className="px-3 pb-3">Now Playing — Song Title</div>
+</MacOSWidget>
+
+// Sizes: 'sm' | 'md' | 'lg' | 'xl'`
+    }
+  ) }) }) })
+] });
+export {
+  y as MacOSWidgetSection,
+  y as default
+};

package/documentation/MacOSWidgetSection-CS6SNE1x.js

@@ -0,0 +1,19 @@
+"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">
+  <MacOSWidgetHeader
+    title="Weather"
+    subtitle="San Francisco"
+    icon={<CloudIcon />}
+  />
+  <div className="px-3 pb-3">72°F — Sunny</div>
+</MacOSWidget>
+
+// Glass mode on gradient background
+<MacOSWidget size="lg" glass>
+  <MacOSWidgetHeader title="Music" icon={<MusicIcon />} />
+  <div className="px-3 pb-3">Now Playing — Song Title</div>
+</MacOSWidget>
+
+// Sizes: 'sm' | 'md' | 'lg' | 'xl'`})})})})]});exports.MacOSWidgetSection=i;exports.default=i;

package/documentation/MacOSWindowSection-Cj5W9tOb.js

@@ -0,0 +1,22 @@
+"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
+  title="My Application"
+  defaultWidth={500}
+  defaultHeight={300}
+  minWidth={200}
+  minHeight={120}
+>
+  <div className="p-6">Drag, resize, or double-click title bar</div>
+</MacOSWindow>
+
+// Static window (no drag/resize)
+<MacOSWindow title="Static" draggable={false} resizable={false}>
+  <div className="p-6">Content</div>
+</MacOSWindow>
+
+// Traffic lights on the right
+<MacOSWindow title="Settings" trafficLightsPosition="right">
+  <div className="p-6">Content</div>
+</MacOSWindow>`})})})})]})};exports.MacOSWindowSection=l;exports.default=l;