@e-burgos/tucu-ui 2.0.7 → 2.0.9

package/documentation/SonomaTypographySection-BXzAkRPA.js

@@ -0,0 +1,388 @@
+import { jsxs as s, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { ay as m, H as d, C as t, a as i, T as l } from "../index-lfg6LZ1p.js";
+import { Type as g } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const c = [
+  {
+    name: "Large Title",
+    className: "macos-large-title",
+    cssVarSize: "--macos-ts-large-title-size",
+    cssVarWeight: "--macos-ts-large-title-weight",
+    cssVarLeading: "--macos-ts-large-title-leading",
+    cssVarTracking: "--macos-ts-large-title-tracking",
+    size: "26px",
+    weight: "400",
+    leading: "32px",
+    tracking: "+0.22px",
+    weightLabel: "Regular",
+    sample: "The quick brown fox"
+  },
+  {
+    name: "Title 1",
+    className: "macos-title-1",
+    cssVarSize: "--macos-ts-title1-size",
+    cssVarWeight: "--macos-ts-title1-weight",
+    cssVarLeading: "--macos-ts-title1-leading",
+    cssVarTracking: "--macos-ts-title1-tracking",
+    size: "22px",
+    weight: "400",
+    leading: "26px",
+    tracking: "−0.26px",
+    weightLabel: "Regular",
+    sample: "System Preferences"
+  },
+  {
+    name: "Title 2",
+    className: "macos-title-2",
+    cssVarSize: "--macos-ts-title2-size",
+    cssVarWeight: "--macos-ts-title2-weight",
+    cssVarLeading: "--macos-ts-title2-leading",
+    cssVarTracking: "--macos-ts-title2-tracking",
+    size: "17px",
+    weight: "400",
+    leading: "22px",
+    tracking: "−0.43px",
+    weightLabel: "Regular",
+    sample: "Network Preferences"
+  },
+  {
+    name: "Title 3",
+    className: "macos-title-3",
+    cssVarSize: "--macos-ts-title3-size",
+    cssVarWeight: "--macos-ts-title3-weight",
+    cssVarLeading: "--macos-ts-title3-leading",
+    cssVarTracking: "--macos-ts-title3-tracking",
+    size: "15px",
+    weight: "400",
+    leading: "20px",
+    tracking: "−0.23px",
+    weightLabel: "Regular",
+    sample: "Wi-Fi Settings"
+  },
+  {
+    name: "Headline",
+    className: "macos-headline",
+    cssVarSize: "--macos-ts-headline-size",
+    cssVarWeight: "--macos-ts-headline-weight",
+    cssVarLeading: "--macos-ts-headline-leading",
+    cssVarTracking: "--macos-ts-headline-tracking",
+    size: "13px",
+    weight: "700",
+    leading: "16px",
+    tracking: "−0.08px",
+    weightLabel: "Bold",
+    sample: "Connected Devices"
+  },
+  {
+    name: "Body",
+    className: "macos-body",
+    cssVarSize: "--macos-ts-body-size",
+    cssVarWeight: "--macos-ts-body-weight",
+    cssVarLeading: "--macos-ts-body-leading",
+    cssVarTracking: "--macos-ts-body-tracking",
+    size: "13px",
+    weight: "400",
+    leading: "16px",
+    tracking: "−0.08px",
+    weightLabel: "Regular",
+    sample: "Your Mac is connected to the internet via Wi-Fi."
+  },
+  {
+    name: "Callout",
+    className: "macos-callout",
+    cssVarSize: "--macos-ts-callout-size",
+    cssVarWeight: "--macos-ts-callout-weight",
+    cssVarLeading: "--macos-ts-callout-leading",
+    cssVarTracking: "--macos-ts-callout-tracking",
+    size: "12px",
+    weight: "400",
+    leading: "15px",
+    tracking: "0",
+    weightLabel: "Regular",
+    sample: "Signal strength: Excellent"
+  },
+  {
+    name: "Subheadline",
+    className: "macos-subheadline",
+    cssVarSize: "--macos-ts-subheadline-size",
+    cssVarWeight: "--macos-ts-subheadline-weight",
+    cssVarLeading: "--macos-ts-subheadline-leading",
+    cssVarTracking: "--macos-ts-subheadline-tracking",
+    size: "11px",
+    weight: "400",
+    leading: "14px",
+    tracking: "+0.06px",
+    weightLabel: "Regular",
+    sample: "Last updated: just now"
+  },
+  {
+    name: "Footnote",
+    className: "macos-footnote",
+    cssVarSize: "--macos-ts-footnote-size",
+    cssVarWeight: "--macos-ts-footnote-weight",
+    cssVarLeading: "--macos-ts-footnote-leading",
+    cssVarTracking: "--macos-ts-footnote-tracking",
+    size: "10px",
+    weight: "400",
+    leading: "13px",
+    tracking: "+0.12px",
+    weightLabel: "Regular",
+    sample: "More network diagnostics available in Utilities."
+  },
+  {
+    name: "Caption 1",
+    className: "macos-caption-1",
+    cssVarSize: "--macos-ts-caption1-size",
+    cssVarWeight: "--macos-ts-caption1-weight",
+    cssVarLeading: "--macos-ts-caption1-leading",
+    cssVarTracking: "--macos-ts-caption1-tracking",
+    size: "10px",
+    weight: "400",
+    leading: "13px",
+    tracking: "+0.12px",
+    weightLabel: "Regular",
+    sample: "IPv4: 192.168.1.1 / IPv6: ::1"
+  },
+  {
+    name: "Caption 2",
+    className: "macos-caption-2",
+    cssVarSize: "--macos-ts-caption2-size",
+    cssVarWeight: "--macos-ts-caption2-weight",
+    cssVarLeading: "--macos-ts-caption2-leading",
+    cssVarTracking: "--macos-ts-caption2-tracking",
+    size: "10px",
+    weight: "500",
+    leading: "13px",
+    tracking: "+0.12px",
+    weightLabel: "Medium",
+    sample: "NETWORK · ETHERNET"
+  }
+], p = [
+  {
+    name: "Inter (Primary)",
+    cssVar: "--macos-font-family",
+    stack: "Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif",
+    usage: "All body, UI, and display text under html.macos"
+  },
+  {
+    name: "Inter Display",
+    cssVar: "--macos-font-display",
+    stack: "Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif",
+    usage: "Large Title, Title 1, Title 2 — display-weight headings"
+  },
+  {
+    name: "JetBrains Mono",
+    cssVar: "--macos-font-mono",
+    stack: "JetBrains Mono, SF Mono, SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace",
+    usage: "Code snippets, terminal, monospace data"
+  }
+], u = () => {
+  const { mode: r } = m(), n = r === "dark";
+  return /* @__PURE__ */ s(o, { children: [
+    /* @__PURE__ */ e(
+      d,
+      {
+        title: "Typography",
+        description: "11 Apple HIG text styles for macOS Sonoma 14 — defined via --macos-ts-* tokens and applied with utility classes like .macos-body.",
+        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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Font Families", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ s(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "Inter Variable is loaded via",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "@font-face" }),
+            " in",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "macos-fonts.css" }),
+            " with",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "-apple-system" }),
+            " as the fallback stack (renders as SF Pro on macOS Safari)."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "space-y-4", children: p.map((a) => /* @__PURE__ */ s(
+        "div",
+        {
+          className: "p-4 rounded-xl border border-gray-200 dark:border-gray-700",
+          children: [
+            /* @__PURE__ */ s("div", { className: "flex flex-wrap items-start justify-between gap-2 mb-2", children: [
+              /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ e("span", { className: "font-semibold text-sm", children: a.name }),
+                /* @__PURE__ */ e("code", { className: "ml-2 text-[10px] font-mono text-gray-400", children: a.cssVar })
+              ] }),
+              /* @__PURE__ */ e("span", { className: "text-[10px] text-gray-400", children: a.usage })
+            ] }),
+            /* @__PURE__ */ e(
+              "p",
+              {
+                className: "text-base mb-1",
+                style: { fontFamily: `var(${a.cssVar})` },
+                children: "Aa Bb Cc — The quick brown fox jumps over the lazy dog"
+              }
+            ),
+            /* @__PURE__ */ e("code", { className: "text-[9px] text-gray-400 font-mono break-all", children: a.stack })
+          ]
+        },
+        a.name
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "Text Style Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ s(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "All 11 text styles defined by Apple HIG for macOS. Each style maps to a set of",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "--macos-ts-*" }),
+            " tokens and a CSS utility class applied under",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "html.macos" }),
+            "."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "space-y-3", children: c.map((a) => /* @__PURE__ */ s(
+        "div",
+        {
+          className: "flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4 p-3 rounded-xl border border-gray-100 dark:border-gray-800",
+          children: [
+            /* @__PURE__ */ s("div", { className: "sm:w-40 shrink-0", children: [
+              /* @__PURE__ */ e("span", { className: "text-[10px] font-medium text-gray-400 uppercase tracking-widest", children: a.name }),
+              /* @__PURE__ */ e("br", {}),
+              /* @__PURE__ */ s("code", { className: "text-[9px] font-mono text-gray-400", children: [
+                ".",
+                a.className
+              ] })
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(
+              "p",
+              {
+                className: a.className,
+                style: {
+                  color: n ? "var(--macos-label, rgba(255,255,255,0.92))" : "var(--macos-label, rgba(0,0,0,0.88))",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap"
+                },
+                children: a.sample
+              }
+            ) }),
+            /* @__PURE__ */ s("div", { className: "flex gap-4 shrink-0 text-[9px] font-mono text-gray-400", children: [
+              /* @__PURE__ */ e("span", { children: a.size }),
+              /* @__PURE__ */ e("span", { children: a.weightLabel }),
+              /* @__PURE__ */ s("span", { children: [
+                "↕ ",
+                a.leading
+              ] }),
+              /* @__PURE__ */ e("span", { className: "hidden sm:inline", children: a.tracking })
+            ] })
+          ]
+        },
+        a.name
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "CSS Token Reference", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6 overflow-x-auto", children: [
+      /* @__PURE__ */ e(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: "Full token reference for all 11 text styles."
+        }
+      ),
+      /* @__PURE__ */ s("table", { className: "w-full text-xs", children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: ["Style", "Size", "Weight", "Leading", "Tracking"].map(
+          (a) => /* @__PURE__ */ e(
+            "th",
+            {
+              className: "text-left pb-2 pr-4 font-semibold text-gray-500 dark:text-gray-400",
+              children: a
+            },
+            a
+          )
+        ) }) }),
+        /* @__PURE__ */ e("tbody", { children: c.map((a) => /* @__PURE__ */ s(
+          "tr",
+          {
+            className: "border-b border-gray-100 dark:border-gray-800",
+            children: [
+              /* @__PURE__ */ e("td", { className: "py-2 pr-4 font-medium", children: a.name }),
+              /* @__PURE__ */ e("td", { className: "py-2 pr-4 font-mono text-gray-500", children: a.size }),
+              /* @__PURE__ */ s("td", { className: "py-2 pr-4 text-gray-500", children: [
+                a.weightLabel,
+                " (",
+                a.weight,
+                ")"
+              ] }),
+              /* @__PURE__ */ e("td", { className: "py-2 pr-4 font-mono text-gray-500", children: a.leading }),
+              /* @__PURE__ */ e("td", { className: "py-2 font-mono text-gray-500", children: a.tracking })
+            ]
+          },
+          a.name
+        )) })
+      ] })
+    ] }) }) }),
+    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(i, { title: "OpenType & Rendering", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ s(
+        l,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "The Sonoma typography system enables key OpenType features and optimized text rendering via",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "html.macos" }),
+            " base styles."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: [
+        {
+          label: "font-optical-sizing",
+          value: "auto",
+          desc: "Optical size axis adjusts details at small/large sizes"
+        },
+        {
+          label: "font-feature-settings",
+          value: "'liga' 1, 'calt' 1, 'kern' 1",
+          desc: "Ligatures, contextual alternates, and kerning"
+        },
+        {
+          label: "-webkit-font-smoothing",
+          value: "antialiased",
+          desc: "macOS sub-pixel antialiasing optimized for Retina"
+        },
+        {
+          label: "base font-size",
+          value: "13px",
+          desc: "Apple HIG macOS default — matches native macOS apps"
+        }
+      ].map((a) => /* @__PURE__ */ s(
+        "div",
+        {
+          className: "p-3 rounded-xl border border-gray-200 dark:border-gray-700",
+          children: [
+            /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-blue-500 dark:text-blue-400", children: a.label }),
+            /* @__PURE__ */ e("code", { className: "block text-[10px] font-mono text-gray-500 mt-0.5", children: a.value }),
+            /* @__PURE__ */ e("p", { className: "text-[11px] text-gray-500 mt-1", children: a.desc })
+          ]
+        },
+        a.label
+      )) })
+    ] }) }) })
+  ] });
+};
+export {
+  u as default
+};

package/documentation/SonomaTypographySection-C7bSKgHl.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-BaGqriuz.js"),r=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const t=[{name:"Large Title",className:"macos-large-title",cssVarSize:"--macos-ts-large-title-size",cssVarWeight:"--macos-ts-large-title-weight",cssVarLeading:"--macos-ts-large-title-leading",cssVarTracking:"--macos-ts-large-title-tracking",size:"26px",weight:"400",leading:"32px",tracking:"+0.22px",weightLabel:"Regular",sample:"The quick brown fox"},{name:"Title 1",className:"macos-title-1",cssVarSize:"--macos-ts-title1-size",cssVarWeight:"--macos-ts-title1-weight",cssVarLeading:"--macos-ts-title1-leading",cssVarTracking:"--macos-ts-title1-tracking",size:"22px",weight:"400",leading:"26px",tracking:"−0.26px",weightLabel:"Regular",sample:"System Preferences"},{name:"Title 2",className:"macos-title-2",cssVarSize:"--macos-ts-title2-size",cssVarWeight:"--macos-ts-title2-weight",cssVarLeading:"--macos-ts-title2-leading",cssVarTracking:"--macos-ts-title2-tracking",size:"17px",weight:"400",leading:"22px",tracking:"−0.43px",weightLabel:"Regular",sample:"Network Preferences"},{name:"Title 3",className:"macos-title-3",cssVarSize:"--macos-ts-title3-size",cssVarWeight:"--macos-ts-title3-weight",cssVarLeading:"--macos-ts-title3-leading",cssVarTracking:"--macos-ts-title3-tracking",size:"15px",weight:"400",leading:"20px",tracking:"−0.23px",weightLabel:"Regular",sample:"Wi-Fi Settings"},{name:"Headline",className:"macos-headline",cssVarSize:"--macos-ts-headline-size",cssVarWeight:"--macos-ts-headline-weight",cssVarLeading:"--macos-ts-headline-leading",cssVarTracking:"--macos-ts-headline-tracking",size:"13px",weight:"700",leading:"16px",tracking:"−0.08px",weightLabel:"Bold",sample:"Connected Devices"},{name:"Body",className:"macos-body",cssVarSize:"--macos-ts-body-size",cssVarWeight:"--macos-ts-body-weight",cssVarLeading:"--macos-ts-body-leading",cssVarTracking:"--macos-ts-body-tracking",size:"13px",weight:"400",leading:"16px",tracking:"−0.08px",weightLabel:"Regular",sample:"Your Mac is connected to the internet via Wi-Fi."},{name:"Callout",className:"macos-callout",cssVarSize:"--macos-ts-callout-size",cssVarWeight:"--macos-ts-callout-weight",cssVarLeading:"--macos-ts-callout-leading",cssVarTracking:"--macos-ts-callout-tracking",size:"12px",weight:"400",leading:"15px",tracking:"0",weightLabel:"Regular",sample:"Signal strength: Excellent"},{name:"Subheadline",className:"macos-subheadline",cssVarSize:"--macos-ts-subheadline-size",cssVarWeight:"--macos-ts-subheadline-weight",cssVarLeading:"--macos-ts-subheadline-leading",cssVarTracking:"--macos-ts-subheadline-tracking",size:"11px",weight:"400",leading:"14px",tracking:"+0.06px",weightLabel:"Regular",sample:"Last updated: just now"},{name:"Footnote",className:"macos-footnote",cssVarSize:"--macos-ts-footnote-size",cssVarWeight:"--macos-ts-footnote-weight",cssVarLeading:"--macos-ts-footnote-leading",cssVarTracking:"--macos-ts-footnote-tracking",size:"10px",weight:"400",leading:"13px",tracking:"+0.12px",weightLabel:"Regular",sample:"More network diagnostics available in Utilities."},{name:"Caption 1",className:"macos-caption-1",cssVarSize:"--macos-ts-caption1-size",cssVarWeight:"--macos-ts-caption1-weight",cssVarLeading:"--macos-ts-caption1-leading",cssVarTracking:"--macos-ts-caption1-tracking",size:"10px",weight:"400",leading:"13px",tracking:"+0.12px",weightLabel:"Regular",sample:"IPv4: 192.168.1.1 / IPv6: ::1"},{name:"Caption 2",className:"macos-caption-2",cssVarSize:"--macos-ts-caption2-size",cssVarWeight:"--macos-ts-caption2-weight",cssVarLeading:"--macos-ts-caption2-leading",cssVarTracking:"--macos-ts-caption2-tracking",size:"10px",weight:"500",leading:"13px",tracking:"+0.12px",weightLabel:"Medium",sample:"NETWORK · ETHERNET"}],c=[{name:"Inter (Primary)",cssVar:"--macos-font-family",stack:"Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif",usage:"All body, UI, and display text under html.macos"},{name:"Inter Display",cssVar:"--macos-font-display",stack:"Inter, -apple-system, BlinkMacSystemFont, Helvetica Neue, Arial, sans-serif",usage:"Large Title, Title 1, Title 2 — display-weight headings"},{name:"JetBrains Mono",cssVar:"--macos-font-mono",stack:"JetBrains Mono, SF Mono, SFMono-Regular, ui-monospace, Menlo, Monaco, Consolas, monospace",usage:"Code snippets, terminal, monospace data"}],n=()=>{const{mode:i}=s.useTheme(),l=i==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(s.HeroCard,{title:"Typography",description:"11 Apple HIG text styles for macOS Sonoma 14 — defined via --macos-ts-* tokens and applied with utility classes like .macos-body.",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(r.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(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Font Families",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Inter Variable is loaded via"," ",e.jsx("code",{className:"text-xs font-mono",children:"@font-face"})," in"," ",e.jsx("code",{className:"text-xs font-mono",children:"macos-fonts.css"})," with"," ",e.jsx("code",{className:"text-xs font-mono",children:"-apple-system"})," as the fallback stack (renders as SF Pro on macOS Safari)."]}),e.jsx("div",{className:"space-y-4",children:c.map(a=>e.jsxs("div",{className:"p-4 rounded-xl border border-gray-200 dark:border-gray-700",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-2 mb-2",children:[e.jsxs("div",{children:[e.jsx("span",{className:"font-semibold text-sm",children:a.name}),e.jsx("code",{className:"ml-2 text-[10px] font-mono text-gray-400",children:a.cssVar})]}),e.jsx("span",{className:"text-[10px] text-gray-400",children:a.usage})]}),e.jsx("p",{className:"text-base mb-1",style:{fontFamily:`var(${a.cssVar})`},children:"Aa Bb Cc — The quick brown fox jumps over the lazy dog"}),e.jsx("code",{className:"text-[9px] text-gray-400 font-mono break-all",children:a.stack})]},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"Text Style Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["All 11 text styles defined by Apple HIG for macOS. Each style maps to a set of"," ",e.jsx("code",{className:"text-xs font-mono",children:"--macos-ts-*"})," tokens and a CSS utility class applied under"," ",e.jsx("code",{className:"text-xs font-mono",children:"html.macos"}),"."]}),e.jsx("div",{className:"space-y-3",children:t.map(a=>e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-baseline gap-2 sm:gap-4 p-3 rounded-xl border border-gray-100 dark:border-gray-800",children:[e.jsxs("div",{className:"sm:w-40 shrink-0",children:[e.jsx("span",{className:"text-[10px] font-medium text-gray-400 uppercase tracking-widest",children:a.name}),e.jsx("br",{}),e.jsxs("code",{className:"text-[9px] font-mono text-gray-400",children:[".",a.className]})]}),e.jsx("div",{className:"flex-1 min-w-0",children:e.jsx("p",{className:a.className,style:{color:l?"var(--macos-label, rgba(255,255,255,0.92))":"var(--macos-label, rgba(0,0,0,0.88))",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a.sample})}),e.jsxs("div",{className:"flex gap-4 shrink-0 text-[9px] font-mono text-gray-400",children:[e.jsx("span",{children:a.size}),e.jsx("span",{children:a.weightLabel}),e.jsxs("span",{children:["↕ ",a.leading]}),e.jsx("span",{className:"hidden sm:inline",children:a.tracking})]})]},a.name))})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"CSS Token Reference",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6 overflow-x-auto",children:[e.jsx(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Full token reference for all 11 text styles."}),e.jsxs("table",{className:"w-full text-xs",children:[e.jsx("thead",{children:e.jsx("tr",{className:"border-b border-gray-200 dark:border-gray-700",children:["Style","Size","Weight","Leading","Tracking"].map(a=>e.jsx("th",{className:"text-left pb-2 pr-4 font-semibold text-gray-500 dark:text-gray-400",children:a},a))})}),e.jsx("tbody",{children:t.map(a=>e.jsxs("tr",{className:"border-b border-gray-100 dark:border-gray-800",children:[e.jsx("td",{className:"py-2 pr-4 font-medium",children:a.name}),e.jsx("td",{className:"py-2 pr-4 font-mono text-gray-500",children:a.size}),e.jsxs("td",{className:"py-2 pr-4 text-gray-500",children:[a.weightLabel," (",a.weight,")"]}),e.jsx("td",{className:"py-2 pr-4 font-mono text-gray-500",children:a.leading}),e.jsx("td",{className:"py-2 font-mono text-gray-500",children:a.tracking})]},a.name))})]})]})})}),e.jsx(s.CardContainer,{className:"overflow-hidden",children:e.jsx(s.CardTitle,{title:"OpenType & Rendering",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(s.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["The Sonoma typography system enables key OpenType features and optimized text rendering via"," ",e.jsx("code",{className:"text-xs font-mono",children:"html.macos"})," base styles."]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3",children:[{label:"font-optical-sizing",value:"auto",desc:"Optical size axis adjusts details at small/large sizes"},{label:"font-feature-settings",value:"'liga' 1, 'calt' 1, 'kern' 1",desc:"Ligatures, contextual alternates, and kerning"},{label:"-webkit-font-smoothing",value:"antialiased",desc:"macOS sub-pixel antialiasing optimized for Retina"},{label:"base font-size",value:"13px",desc:"Apple HIG macOS default — matches native macOS apps"}].map(a=>e.jsxs("div",{className:"p-3 rounded-xl border border-gray-200 dark:border-gray-700",children:[e.jsx("code",{className:"text-[10px] font-mono text-blue-500 dark:text-blue-400",children:a.label}),e.jsx("code",{className:"block text-[10px] font-mono text-gray-500 mt-0.5",children:a.value}),e.jsx("p",{className:"text-[11px] text-gray-500 mt-1",children:a.desc})]},a.label))})]})})})]})};exports.default=n;

package/documentation/SpacingSystemSection-RdnzjpSK.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const u=t=>{if(typeof window>"u")return"";const a=document.documentElement;return getComputedStyle(a).getPropertyValue(t).trim()||""},c=()=>{const t=[{value:0,key:"0"},{value:1,key:"1"},{value:2,key:"2"},{value:3,key:"3"},{value:4,key:"4"},{value:5,key:"5"},{value:6,key:"6"},{value:7,key:"7"},{value:8,key:"8"},{value:9,key:"9"},{value:10,key:"10"},{value:11,key:"11"},{value:12,key:"12"},{value:13,key:"13"},{value:14,key:"14"},{value:15,key:"15"},{value:16,key:"16"},{value:17,key:"17"},{value:18,key:"18"},{value:19,key:"19"},{value:20,key:"20"}];return e.jsxs("div",{className:"space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12",children:[e.jsx(l.HeroCard,{title:"Spacing System",description:"Spacing scale mapped to Tucu UI Design Tokens.",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-green-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.Ruler,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg"})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Spacing Scale",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full space-y-8 p-4 sm:p-6",children:e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:t.map(a=>{const s=`--spacing-${a.key}`,r=u(s),i=`p-${a.value}, m-${a.value}, gap-${a.value}`,d=a.value.toString();return e.jsxs("div",{className:"border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(l.Typography,{tag:"h4",className:"font-semibold",children:d}),r&&e.jsx(l.Typography,{tag:"h4",className:"text-muted text-[10px]",children:r})]}),e.jsx("div",{className:"bg-primary h-8 rounded w-full",style:{width:r||`var(${s})`,minWidth:"4px"}}),e.jsx(l.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1",children:i})]},a.key)})})})})})]})};exports.default=c;

package/documentation/{SpacingSystemSection-BKr7Htp3.js → SpacingSystemSection-rDylj_Un.js}

@@ -1,26 +1,23 @@
-import { jsxs as t, Fragment as c, jsx as e } from "react/jsx-runtime";
-import { T as l, C as o, a as u } from "../index-B919yoKU.js";
-import "lucide-react";
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { H as m, C as o, a as c, T as s } from "../index-lfg6LZ1p.js";
+import { Ruler as u } from "lucide-react";
 import "react-router-dom";
 import "react";
 import "react-dom";
-const m = (s) => {
+const p = (i) => {
   if (typeof window > "u") return "";
   const a = document.documentElement;
-  return getComputedStyle(a).getPropertyValue(s).trim() || "";
-}, h = () => /* @__PURE__ */ t(c, { children: [
-  /* @__PURE__ */ t("div", { className: "text-center space-y-4", children: [
-    /* @__PURE__ */ e(l, { tag: "h2", className: "text-3xl md:text-4xl font-bold", children: "Spacing System" }),
-    /* @__PURE__ */ e(
-      l,
-      {
-        tag: "p",
-        className: "text-xl text-gray-600 dark:text-gray-400 max-w-2xl mx-auto",
-        children: "Spacing scale mapped to Tucu UI Design Tokens"
-      }
-    )
-  ] }),
-  /* @__PURE__ */ e(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(u, { title: "Spacing Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
+  return getComputedStyle(a).getPropertyValue(i).trim() || "";
+}, f = () => /* @__PURE__ */ r("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
+  /* @__PURE__ */ e(
+    m,
+    {
+      title: "Spacing System",
+      description: "Spacing scale mapped to Tucu UI Design Tokens.",
+      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-green-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Spacing Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [
     { value: 0, key: "0" },
     { value: 1, key: "1" },
     { value: 2, key: "2" },
@@ -43,28 +40,28 @@ const m = (s) => {
     { value: 19, key: "19" },
     { value: 20, key: "20" }
   ].map((a) => {
-    const r = `--spacing-${a.key}`, n = m(r), d = `p-${a.value}, m-${a.value}, gap-${a.value}`, i = a.value.toString();
-    return /* @__PURE__ */ t(
+    const l = `--spacing-${a.key}`, t = p(l), d = `p-${a.value}, m-${a.value}, gap-${a.value}`, n = a.value.toString();
+    return /* @__PURE__ */ r(
       "div",
       {
         className: "border border-gray-200 dark:border-gray-700 rounded-lg p-4 space-y-3",
         children: [
-          /* @__PURE__ */ t("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ e(l, { tag: "h4", className: "font-semibold", children: i }),
-            n && /* @__PURE__ */ e(l, { tag: "h4", className: "text-muted text-[10px]", children: n })
+          /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: n }),
+            t && /* @__PURE__ */ e(s, { tag: "h4", className: "text-muted text-[10px]", children: t })
           ] }),
           /* @__PURE__ */ e(
             "div",
             {
               className: "bg-primary h-8 rounded w-full",
               style: {
-                width: n || `var(${r})`,
+                width: t || `var(${l})`,
                 minWidth: "4px"
               }
             }
           ),
           /* @__PURE__ */ e(
-            l,
+            s,
             {
               tag: "h4",
               className: "text-muted text-[9px] break-all px-1",
@@ -78,5 +75,5 @@ const m = (s) => {
   }) }) }) }) })
 ] });
 export {
-  h as default
+  f as default
 };

package/documentation/SpinnerSection-BTEupT8d.js

@@ -0,0 +1,78 @@
+import { jsxs as i, Fragment as o, jsx as e } from "react/jsx-runtime";
+import { H as c, C as s, a as l, T as n, af as r, P as m, A as d, c as t } from "../index-lfg6LZ1p.js";
+import { RefreshCw as p } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const w = () => /* @__PURE__ */ i(o, { children: [
+  /* @__PURE__ */ e(
+    c,
+    {
+      title: "Spinner",
+      description: `A simple spinning loader component for indicating loading states with
+          customizable sizes and colors.`,
+      icon: /* @__PURE__ */ e("div", { className: "w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-indigo-600 to-violet-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(p, { className: "w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg" }) })
+    }
+  ),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Basic Examples", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ i("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
+    /* @__PURE__ */ i(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Default Spinner" }),
+      /* @__PURE__ */ e(r, {})
+    ] }),
+    /* @__PURE__ */ i(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Small Spinner" }),
+      /* @__PURE__ */ e(r, { size: "sm" })
+    ] }),
+    /* @__PURE__ */ i(s, { className: "p-4", children: [
+      /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Large Spinner" }),
+      /* @__PURE__ */ e(r, { size: "lg" })
+    ] })
+  ] }) }) }) }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Variants", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "space-y-4", children: /* @__PURE__ */ i("div", { children: [
+    /* @__PURE__ */ e(n, { tag: "h5", className: "mb-3", children: "Colors" }),
+    /* @__PURE__ */ i("div", { className: "flex items-center gap-4", children: [
+      /* @__PURE__ */ e(r, { color: "primary" }),
+      /* @__PURE__ */ e(r, { color: "success" }),
+      /* @__PURE__ */ e(r, { color: "danger" }),
+      /* @__PURE__ */ e(r, { color: "info" }),
+      /* @__PURE__ */ e(r, { color: "warning" }),
+      /* @__PURE__ */ e(r, { color: "gray" })
+    ] })
+  ] }) }) }) }) }),
+  /* @__PURE__ */ e(
+    m,
+    {
+      componentName: "Spinner",
+      defaultValues: { size: "md", color: "primary" },
+      excludeProps: [],
+      children: (a) => /* @__PURE__ */ e(r, { ...a })
+    }
+  ),
+  /* @__PURE__ */ e(d, { componentName: "Spinner" }),
+  /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(l, { title: "Code Example", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full p-4 sm:p-6", children: /* @__PURE__ */ e(
+    t,
+    {
+      language: "tsx",
+      code: `import { Spinner } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Spinner />
+
+// Different sizes
+<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner size="lg" />
+
+// Different colors
+<Spinner color="primary" />
+<Spinner color="success" />
+<Spinner color="danger" />
+<Spinner color="info" />
+<Spinner color="warning" />
+<Spinner color="gray" />`
+    }
+  ) }) }) })
+] });
+export {
+  w as default
+};

package/documentation/SpinnerSection-C2SLIBWN.js

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("../index-BaGqriuz.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=()=>e.jsxs(e.Fragment,{children:[e.jsx(r.HeroCard,{title:"Spinner",description:`A simple spinning loader component for indicating loading states with
+          customizable sizes and colors.`,icon:e.jsx("div",{className:"w-16 h-16 sm:w-20 sm:h-20 md:w-24 md:h-24 bg-linear-to-br from-indigo-600 to-violet-500 rounded-full flex items-center justify-center shadow-lg",children:e.jsx(n.RefreshCw,{className:"w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 text-white filter drop-shadow-lg"})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Basic Examples",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsxs("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:[e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Default Spinner"}),e.jsx(r.Spinner,{})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Small Spinner"}),e.jsx(r.Spinner,{size:"sm"})]}),e.jsxs(r.CardContainer,{className:"p-4",children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Large Spinner"}),e.jsx(r.Spinner,{size:"lg"})]})]})})})}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Variants",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx("div",{className:"space-y-4",children:e.jsxs("div",{children:[e.jsx(r.Typography,{tag:"h5",className:"mb-3",children:"Colors"}),e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx(r.Spinner,{color:"primary"}),e.jsx(r.Spinner,{color:"success"}),e.jsx(r.Spinner,{color:"danger"}),e.jsx(r.Spinner,{color:"info"}),e.jsx(r.Spinner,{color:"warning"}),e.jsx(r.Spinner,{color:"gray"})]})]})})})})}),e.jsx(r.PropPlayground,{componentName:"Spinner",defaultValues:{size:"md",color:"primary"},excludeProps:[],children:s=>e.jsx(r.Spinner,{...s})}),e.jsx(r.AutoPropsTable,{componentName:"Spinner"}),e.jsx(r.CardContainer,{className:"overflow-hidden",children:e.jsx(r.CardTitle,{title:"Code Example",className:"mt-2 mb-2",children:e.jsx("div",{className:"w-full p-4 sm:p-6",children:e.jsx(r.CodeBlock,{language:"tsx",code:`import { Spinner } from '@e-burgos/tucu-ui';
+
+// Basic usage
+<Spinner />
+
+// Different sizes
+<Spinner size="sm" />
+<Spinner size="md" />
+<Spinner size="lg" />
+
+// Different colors
+<Spinner color="primary" />
+<Spinner color="success" />
+<Spinner color="danger" />
+<Spinner color="info" />
+<Spinner color="warning" />
+<Spinner color="gray" />`})})})})]});exports.default=i;