@e-burgos/tucu-ui 2.4.1 → 2.6.0

package/documentation/SonomaTypographySection-BwdPUraH.js

@@ -1,389 +0,0 @@
-import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
-import { ay as d, H as g, C as t, a as i, T as l, y as p } from "../index-BOVWnu1L.js";
-import { Type as h } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const n = [
-  {
-    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"
-  }
-], x = [
-  {
-    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: r } = d(), o = r === "dark";
-  return /* @__PURE__ */ s(m, { children: [
-    /* @__PURE__ */ e(
-      g,
-      {
-        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(h, { 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: x.map((a) => /* @__PURE__ */ s(
-        "div",
-        {
-          className: "p-4 rounded-xl border border-border",
-          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: n.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-[var(--color-border)]",
-          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: o ? "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", 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__ */ e(
-        p,
-        {
-          columns: [
-            { key: "name", label: "Style" },
-            {
-              key: "size",
-              label: "Size",
-              className: "font-mono text-gray-500"
-            },
-            {
-              key: "weight",
-              label: "Weight",
-              className: "text-gray-500",
-              render: (a, c) => `${c.weightLabel} (${c.weight})`
-            },
-            {
-              key: "leading",
-              label: "Leading",
-              className: "font-mono text-gray-500"
-            },
-            {
-              key: "tracking",
-              label: "Tracking",
-              className: "font-mono text-gray-500"
-            }
-          ],
-          data: n,
-          maxRows: 15,
-          resizable: !1
-        }
-      )
-    ] }) }) }),
-    /* @__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-border",
-          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 {
-  N as default
-};

package/documentation/SonomaTypographySection-CUcTN91T.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("../index-CQ1tqJiQ.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=[{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"}],r=[{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"}],o=()=>{const{mode:l}=s.useTheme(),c=l==="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(n.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:r.map(a=>e.jsxs("div",{className:"p-4 rounded-xl border border-border",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:i.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-[var(--color-border)]",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:c?"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",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.jsx(s.BasicTable,{columns:[{key:"name",label:"Style"},{key:"size",label:"Size",className:"font-mono text-gray-500"},{key:"weight",label:"Weight",className:"text-gray-500",render:(a,t)=>`${t.weightLabel} (${t.weight})`},{key:"leading",label:"Leading",className:"font-mono text-gray-500"},{key:"tracking",label:"Tracking",className:"font-mono text-gray-500"}],data:i,maxRows:15,resizable:!1})]})})}),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-border",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=o;

package/documentation/SpacingSystemSection-CZqar8tk.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-CQ1tqJiQ.js"),n=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const u=t=>{if(typeof window>"u")return"";const l=document.documentElement;return getComputedStyle(l).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(a.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(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.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(l=>{const s=`--spacing-${l.key}`,r=u(s),i=`p-${l.value}, m-${l.value}, gap-${l.value}`,d=l.value.toString();return e.jsxs("div",{className:"border border-border rounded-lg p-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsx(a.Typography,{tag:"h4",className:"font-semibold",children:d}),r&&e.jsx(a.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(a.Typography,{tag:"h4",className:"text-muted text-[9px] break-all px-1",children:i})]},l.key)})})})})})]})};exports.default=c;

package/documentation/SpacingSystemSection-Dc78tsOa.js

@@ -1,79 +0,0 @@
-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-BOVWnu1L.js";
-import { Ruler as u } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const p = (i) => {
-  if (typeof window > "u") return "";
-  const a = document.documentElement;
-  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" },
-    { 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" }
-  ].map((a) => {
-    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-border rounded-lg p-4 space-y-3",
-        children: [
-          /* @__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: t || `var(${l})`,
-                minWidth: "4px"
-              }
-            }
-          ),
-          /* @__PURE__ */ e(
-            s,
-            {
-              tag: "h4",
-              className: "text-muted text-[9px] break-all px-1",
-              children: d
-            }
-          )
-        ]
-      },
-      a.key
-    );
-  }) }) }) }) })
-] });
-export {
-  f as default
-};

package/documentation/SpinnerSection-BUJOmJnm.js

@@ -1,78 +0,0 @@
-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-BOVWnu1L.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-DjVOmedh.js

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