@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/MacOSTextStylesSection-BHMRNo-v.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-DoxeCFUJ.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/MacOSTextStylesSection-DlvKbXki.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-DWDUS-PU.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/MacOSToolbarSection-COuNpmj_.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-DoxeCFUJ.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/MacOSToolbarSection-CdsL85Jb.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-DWDUS-PU.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/MacOSWidgetSection-BNaAjj5p.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-DoxeCFUJ.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-b_I1PVF7.js

@@ -0,0 +1,19 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-DWDUS-PU.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;