@e-burgos/tucu-ui 2.5.0 → 2.6.0

package/documentation/SonomaShapesSection-CLA0w7wt.js

@@ -1,482 +0,0 @@
-import { jsxs as s, Fragment as d, jsx as e } from "react/jsx-runtime";
-import { ay as m, H as p, C as t, a as o, T as n } from "../index-DYDFy1df.js";
-import { Shapes as x } from "lucide-react";
-import "react-router-dom";
-import "react";
-import "react-dom";
-const g = [
-  {
-    name: "Pill",
-    cssVar: "--macos-radius-pill",
-    value: "999px",
-    usage: "Tags, badges, chips"
-  },
-  {
-    name: "Sheet",
-    cssVar: "--macos-radius-sheet",
-    value: "24px",
-    usage: "Full-screen sheets, drawers"
-  },
-  {
-    name: "Window",
-    cssVar: "--macos-radius-window",
-    value: "18px",
-    usage: "App windows, main containers"
-  },
-  {
-    name: "Popover",
-    cssVar: "--macos-radius-popover",
-    value: "16px",
-    usage: "Popovers, dropdowns, menus"
-  },
-  {
-    name: "Control",
-    cssVar: "--macos-radius-control",
-    value: "10px",
-    usage: "Buttons, inputs, cards"
-  },
-  {
-    name: "Small Control",
-    cssVar: "--macos-radius-small-control",
-    value: "8px",
-    usage: "Icon buttons, small chips"
-  }
-], h = [
-  {
-    name: "1",
-    cssVar: "--macos-space-1",
-    value: "4px",
-    px: 4,
-    desc: "½ grid — tight inline spacing"
-  },
-  {
-    name: "2",
-    cssVar: "--macos-space-2",
-    value: "8px",
-    px: 8,
-    desc: "1 grid — base unit, icon padding"
-  },
-  {
-    name: "3",
-    cssVar: "--macos-space-3",
-    value: "12px",
-    px: 12,
-    desc: "1.5× — compact row gaps"
-  },
-  {
-    name: "4",
-    cssVar: "--macos-space-4",
-    value: "16px",
-    px: 16,
-    desc: "2× — standard row / column gap"
-  },
-  {
-    name: "5",
-    cssVar: "--macos-space-5",
-    value: "20px",
-    px: 20,
-    desc: "2.5× — section padding"
-  },
-  {
-    name: "6",
-    cssVar: "--macos-space-6",
-    value: "24px",
-    px: 24,
-    desc: "3× — card padding, section gap"
-  },
-  {
-    name: "8",
-    cssVar: "--macos-space-8",
-    value: "32px",
-    px: 32,
-    desc: "4× — content column gap"
-  }
-], u = [
-  {
-    name: "Window",
-    cssVar: "--macos-shadow-window",
-    value: `0 18px 60px rgba(0,0,0,0.14),
-0 4px 16px rgba(0,0,0,0.08)`,
-    usage: "App windows, floating panels",
-    intensity: 4
-  },
-  {
-    name: "Popover",
-    cssVar: "--macos-shadow-popover",
-    value: `0 8px 32px rgba(0,0,0,0.12),
-0 2px 8px rgba(0,0,0,0.06)`,
-    usage: "Menus, popovers, tooltips",
-    intensity: 3
-  },
-  {
-    name: "Card",
-    cssVar: "--macos-shadow-card",
-    value: `0 1px 4px rgba(0,0,0,0.04),
-0 4px 16px rgba(0,0,0,0.06)`,
-    usage: "Content cards, widget panels",
-    intensity: 2
-  },
-  {
-    name: "Focus Ring",
-    cssVar: "--macos-shadow-focus",
-    value: "0 0 0 3px rgba(0,122,255,0.5)",
-    usage: "Focused interactive controls",
-    intensity: 1
-  },
-  {
-    name: "Button Pressed",
-    cssVar: "--macos-shadow-button-pressed",
-    value: "inset 0 1px 2px rgba(0,0,0,0.10)",
-    usage: "Pressed/active button state",
-    intensity: 1
-  }
-], b = [
-  {
-    name: "Title Bar Height",
-    cssVar: "--macos-titlebar-height",
-    value: "28px",
-    desc: "App title bar + traffic lights zone"
-  },
-  {
-    name: "Toolbar Height",
-    cssVar: "--macos-toolbar-height",
-    value: "58px",
-    desc: "Primary app toolbar below title bar"
-  },
-  {
-    name: "Sidebar Width",
-    cssVar: "--macos-sidebar-width",
-    value: "240px",
-    desc: "Default sidebar panel width"
-  },
-  {
-    name: "Inspector Width",
-    cssVar: "--macos-inspector-width",
-    value: "300px",
-    desc: "Trailing inspector / detail panel width"
-  },
-  {
-    name: "Content Padding",
-    cssVar: "--macos-content-padding",
-    value: "20px",
-    desc: "Standard content area insets"
-  },
-  {
-    name: "Grid Base",
-    cssVar: "--macos-grid",
-    value: "8px",
-    desc: "Base 8pt grid unit for all spacing"
-  }
-], f = [
-  {
-    name: "Fast",
-    cssVar: "--macos-transition-fast",
-    value: "150ms ease-out",
-    usage: "Hover states, color changes, micro-interactions",
-    bar: 15
-  },
-  {
-    name: "Normal",
-    cssVar: "--macos-transition-normal",
-    value: "250ms cubic-bezier(0.2, 0, 0, 1)",
-    usage: "Panel slides, focus rings, most animations",
-    bar: 25
-  },
-  {
-    name: "Slow",
-    cssVar: "--macos-transition-slow",
-    value: "350ms cubic-bezier(0.2, 0, 0, 1)",
-    usage: "Large panel reveals, sheet presentations",
-    bar: 35
-  }
-], C = () => {
-  const { mode: l } = m(), r = l === "dark";
-  return /* @__PURE__ */ s(d, { children: [
-    /* @__PURE__ */ e(
-      p,
-      {
-        title: "Shapes & Spacing",
-        description: "Sonoma geometric tokens — border radii, spacing grid, shadows, layout dimensions, and motion timing defined via --macos-* CSS custom properties.",
-        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-indigo-400 via-violet-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-indigo-400/50", children: /* @__PURE__ */ e(x, { 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(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Border Radii", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
-      /* @__PURE__ */ e(
-        n,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
-          children: "Six radius levels from Pill down to Small Control. Each is stored in a CSS custom property and used consistently across all surfaces."
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-4", children: g.map((a) => {
-        const c = a.value === "999px" ? 40 : parseInt(a.value), i = a.value === "999px" ? 40 : c;
-        return /* @__PURE__ */ s(
-          "div",
-          {
-            className: "flex flex-col items-center gap-3",
-            children: [
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "w-20 h-20 border-2",
-                  style: {
-                    borderRadius: `${i}px`,
-                    borderColor: r ? "rgba(255,255,255,0.2)" : "rgba(0,0,0,0.15)",
-                    backgroundColor: r ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.04)"
-                  }
-                }
-              ),
-              /* @__PURE__ */ s("div", { className: "text-center", children: [
-                /* @__PURE__ */ e("p", { className: "font-semibold text-sm", children: a.name }),
-                /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-gray-400", children: a.cssVar }),
-                /* @__PURE__ */ e("p", { className: "text-xs font-mono font-bold", children: a.value }),
-                /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400 mt-0.5", children: a.usage })
-              ] })
-            ]
-          },
-          a.name
-        );
-      }) })
-    ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "8pt Spacing Grid", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
-      /* @__PURE__ */ s(
-        n,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
-          children: [
-            "Sonoma uses an 8pt base grid (",
-            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "--macos-grid: 8px" }),
-            "). All layout spacing snaps to multiples of this unit for visual consistency and perfect pixel alignment."
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "space-y-3", children: h.map((a) => /* @__PURE__ */ s("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ e("code", { className: "w-32 shrink-0 text-[10px] font-mono text-gray-400", children: a.cssVar }),
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 flex-1", children: [
-          /* @__PURE__ */ e(
-            "div",
-            {
-              className: "rounded shrink-0",
-              style: {
-                width: `${a.px}px`,
-                height: 20,
-                backgroundColor: r ? `rgba(10,132,255,${0.5 + a.px / 120})` : `rgba(0,122,255,${0.3 + a.px / 120})`
-              }
-            }
-          ),
-          /* @__PURE__ */ s("div", { children: [
-            /* @__PURE__ */ e("span", { className: "font-mono font-bold text-xs", children: a.value }),
-            /* @__PURE__ */ e("span", { className: "ml-2 text-[10px] text-gray-400", children: a.desc })
-          ] })
-        ] })
-      ] }, a.name)) })
-    ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Shadow Levels", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
-      /* @__PURE__ */ s(
-        n,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
-          children: [
-            "Sonoma shadows are subtle and layered — two box-shadows combined for natural depth perception.",
-            " ",
-            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "--macos-shadow-*" }),
-            " tokens are referenced by all surface components."
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "space-y-5", children: u.map((a) => /* @__PURE__ */ s(
-        "div",
-        {
-          className: "flex flex-col sm:flex-row sm:items-center gap-4",
-          children: [
-            /* @__PURE__ */ e("div", { className: "sm:w-32 shrink-0 text-sm font-semibold", children: a.name }),
-            /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(
-              "div",
-              {
-                className: "w-16 h-12 rounded-xl",
-                style: {
-                  boxShadow: `var(${a.cssVar}, ${a.value.replace(
-                    /\n/g,
-                    " "
-                  )})`,
-                  backgroundColor: r ? "#2c2c2e" : "#ffffff"
-                }
-              }
-            ) }),
-            /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ e("code", { className: "block text-[9px] font-mono text-gray-400 whitespace-pre-line", children: a.cssVar }),
-              /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400 mt-0.5", children: a.usage })
-            ] })
-          ]
-        },
-        a.name
-      )) })
-    ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Layout Dimensions", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
-      /* @__PURE__ */ e(
-        n,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
-          children: "Fixed layout constants matching macOS 14 Sonoma's window chrome and structural panel dimensions."
-        }
-      ),
-      /* @__PURE__ */ s(
-        "div",
-        {
-          className: "relative rounded-2xl overflow-hidden mb-6 border",
-          style: {
-            borderColor: r ? "rgba(255,255,255,0.12)" : "rgba(0,0,0,0.1)",
-            backgroundColor: r ? "#1c1c1e" : "#f5f5f7",
-            height: 220
-          },
-          children: [
-            /* @__PURE__ */ s(
-              "div",
-              {
-                className: "absolute top-0 left-0 right-0 flex items-center px-3 gap-1.5",
-                style: {
-                  height: 28,
-                  backgroundColor: r ? "rgba(40,40,42,0.8)" : "rgba(255,255,255,0.72)",
-                  borderBottom: `1px solid ${r ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`
-                },
-                children: [
-                  /* @__PURE__ */ e("span", { className: "w-2.5 h-2.5 rounded-full bg-red-400 opacity-80" }),
-                  /* @__PURE__ */ e("span", { className: "w-2.5 h-2.5 rounded-full bg-yellow-400 opacity-80" }),
-                  /* @__PURE__ */ e("span", { className: "w-2.5 h-2.5 rounded-full bg-green-400 opacity-80" }),
-                  /* @__PURE__ */ e("span", { className: "ml-auto text-[9px] text-gray-400", children: "Title Bar · 28px" })
-                ]
-              }
-            ),
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: "absolute left-0 right-0 flex items-center px-4",
-                style: {
-                  top: 28,
-                  height: 58,
-                  backgroundColor: r ? "rgba(44,44,46,0.6)" : "rgba(246,246,248,0.6)",
-                  borderBottom: `1px solid ${r ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`
-                },
-                children: /* @__PURE__ */ e("span", { className: "text-[9px] text-gray-400", children: "Toolbar · 58px" })
-              }
-            ),
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: "absolute left-0 bottom-0 flex items-end pb-2 pl-2",
-                style: {
-                  top: 86,
-                  width: 120,
-                  backgroundColor: r ? "rgba(28,28,30,0.7)" : "rgba(246,246,248,0.7)",
-                  borderRight: `1px solid ${r ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.08)"}`
-                },
-                children: /* @__PURE__ */ e("span", { className: "text-[8px] text-gray-400", children: "Sidebar · 240px" })
-              }
-            ),
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: "absolute right-0 bottom-0 flex items-center justify-center",
-                style: {
-                  top: 86,
-                  left: 120
-                },
-                children: /* @__PURE__ */ e("span", { className: "text-[9px] text-gray-400", children: "Content · 20px padding" })
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-3", children: b.map((a) => /* @__PURE__ */ s(
-        "div",
-        {
-          className: "flex items-start gap-3 p-3 rounded-xl border border-[var(--color-border)]",
-          children: [
-            /* @__PURE__ */ e(
-              "div",
-              {
-                className: "w-10 shrink-0 text-center py-1 rounded font-mono text-[9px] font-bold",
-                style: {
-                  backgroundColor: r ? "rgba(10,132,255,0.2)" : "rgba(0,122,255,0.1)",
-                  color: r ? "#0a84ff" : "#007aff"
-                },
-                children: a.value
-              }
-            ),
-            /* @__PURE__ */ s("div", { children: [
-              /* @__PURE__ */ e("p", { className: "text-xs font-semibold", children: a.name }),
-              /* @__PURE__ */ e("code", { className: "text-[9px] font-mono text-gray-400", children: a.cssVar }),
-              /* @__PURE__ */ e("p", { className: "text-[10px] text-gray-400 mt-0.5", children: a.desc })
-            ] })
-          ]
-        },
-        a.name
-      )) })
-    ] }) }) }),
-    /* @__PURE__ */ e(t, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Motion & Transitions", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full p-4 sm:p-6", children: [
-      /* @__PURE__ */ s(
-        n,
-        {
-          tag: "p",
-          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
-          children: [
-            "Three motion speeds using",
-            " ",
-            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "cubic-bezier(0.2, 0, 0, 1)" }),
-            " ",
-            "for the standard and slow durations — a deceleration curve that feels physically natural at larger distances."
-          ]
-        }
-      ),
-      /* @__PURE__ */ e("div", { className: "space-y-4", children: f.map((a) => /* @__PURE__ */ s(
-        "div",
-        {
-          className: "p-4 rounded-xl border border-[var(--color-border)]",
-          children: [
-            /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-2", children: [
-              /* @__PURE__ */ e("span", { className: "font-semibold text-sm", children: a.name }),
-              /* @__PURE__ */ e("code", { className: "text-[10px] font-mono text-gray-400", children: a.cssVar })
-            ] }),
-            /* @__PURE__ */ s("div", { className: "flex items-center gap-3 mb-2", children: [
-              /* @__PURE__ */ e(
-                "div",
-                {
-                  className: "h-2 rounded-full",
-                  style: {
-                    width: `${a.bar * 3}px`,
-                    backgroundColor: r ? "#0a84ff" : "#007aff",
-                    opacity: 0.7
-                  }
-                }
-              ),
-              /* @__PURE__ */ e("code", { className: "text-xs font-mono text-gray-500", children: a.value })
-            ] }),
-            /* @__PURE__ */ e("p", { className: "text-[11px] text-gray-400", children: a.usage })
-          ]
-        },
-        a.name
-      )) }),
-      /* @__PURE__ */ e(
-        "pre",
-        {
-          className: "mt-6 rounded-xl p-4 text-xs font-mono overflow-x-auto text-gray-300",
-          style: { backgroundColor: r ? "#1c1c1e" : "#1d1d1f" },
-          children: `.my-panel {
-  transition: transform var(--macos-transition-normal),
-              opacity  var(--macos-transition-fast);
-  border-radius: var(--macos-radius-popover);
-  box-shadow: var(--macos-shadow-popover);
-  padding: var(--macos-space-4);
-}`
-        }
-      )
-    ] }) }) })
-  ] });
-};
-export {
-  C as default
-};

package/documentation/SonomaShapesSection-aQq097e6.js

@@ -1,10 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../index-COp_AWCS.js"),l=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const c=[{name:"Pill",cssVar:"--macos-radius-pill",value:"999px",usage:"Tags, badges, chips"},{name:"Sheet",cssVar:"--macos-radius-sheet",value:"24px",usage:"Full-screen sheets, drawers"},{name:"Window",cssVar:"--macos-radius-window",value:"18px",usage:"App windows, main containers"},{name:"Popover",cssVar:"--macos-radius-popover",value:"16px",usage:"Popovers, dropdowns, menus"},{name:"Control",cssVar:"--macos-radius-control",value:"10px",usage:"Buttons, inputs, cards"},{name:"Small Control",cssVar:"--macos-radius-small-control",value:"8px",usage:"Icon buttons, small chips"}],i=[{name:"1",cssVar:"--macos-space-1",value:"4px",px:4,desc:"½ grid — tight inline spacing"},{name:"2",cssVar:"--macos-space-2",value:"8px",px:8,desc:"1 grid — base unit, icon padding"},{name:"3",cssVar:"--macos-space-3",value:"12px",px:12,desc:"1.5× — compact row gaps"},{name:"4",cssVar:"--macos-space-4",value:"16px",px:16,desc:"2× — standard row / column gap"},{name:"5",cssVar:"--macos-space-5",value:"20px",px:20,desc:"2.5× — section padding"},{name:"6",cssVar:"--macos-space-6",value:"24px",px:24,desc:"3× — card padding, section gap"},{name:"8",cssVar:"--macos-space-8",value:"32px",px:32,desc:"4× — content column gap"}],d=[{name:"Window",cssVar:"--macos-shadow-window",value:`0 18px 60px rgba(0,0,0,0.14),
-0 4px 16px rgba(0,0,0,0.08)`,usage:"App windows, floating panels",intensity:4},{name:"Popover",cssVar:"--macos-shadow-popover",value:`0 8px 32px rgba(0,0,0,0.12),
-0 2px 8px rgba(0,0,0,0.06)`,usage:"Menus, popovers, tooltips",intensity:3},{name:"Card",cssVar:"--macos-shadow-card",value:`0 1px 4px rgba(0,0,0,0.04),
-0 4px 16px rgba(0,0,0,0.06)`,usage:"Content cards, widget panels",intensity:2},{name:"Focus Ring",cssVar:"--macos-shadow-focus",value:"0 0 0 3px rgba(0,122,255,0.5)",usage:"Focused interactive controls",intensity:1},{name:"Button Pressed",cssVar:"--macos-shadow-button-pressed",value:"inset 0 1px 2px rgba(0,0,0,0.10)",usage:"Pressed/active button state",intensity:1}],m=[{name:"Title Bar Height",cssVar:"--macos-titlebar-height",value:"28px",desc:"App title bar + traffic lights zone"},{name:"Toolbar Height",cssVar:"--macos-toolbar-height",value:"58px",desc:"Primary app toolbar below title bar"},{name:"Sidebar Width",cssVar:"--macos-sidebar-width",value:"240px",desc:"Default sidebar panel width"},{name:"Inspector Width",cssVar:"--macos-inspector-width",value:"300px",desc:"Trailing inspector / detail panel width"},{name:"Content Padding",cssVar:"--macos-content-padding",value:"20px",desc:"Standard content area insets"},{name:"Grid Base",cssVar:"--macos-grid",value:"8px",desc:"Base 8pt grid unit for all spacing"}],x=[{name:"Fast",cssVar:"--macos-transition-fast",value:"150ms ease-out",usage:"Hover states, color changes, micro-interactions",bar:15},{name:"Normal",cssVar:"--macos-transition-normal",value:"250ms cubic-bezier(0.2, 0, 0, 1)",usage:"Panel slides, focus rings, most animations",bar:25},{name:"Slow",cssVar:"--macos-transition-slow",value:"350ms cubic-bezier(0.2, 0, 0, 1)",usage:"Large panel reveals, sheet presentations",bar:35}],p=()=>{const{mode:t}=a.useTheme(),r=t==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(a.HeroCard,{title:"Shapes & Spacing",description:"Sonoma geometric tokens — border radii, spacing grid, shadows, layout dimensions, and motion timing defined via --macos-* CSS custom properties.",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-indigo-400 via-violet-500 to-purple-600 rounded-full flex items-center justify-center shadow-lg border border-indigo-400/50",children:e.jsx(l.Shapes,{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:"Border Radii",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:"Six radius levels from Pill down to Small Control. Each is stored in a CSS custom property and used consistently across all surfaces."}),e.jsx("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-4",children:c.map(s=>{const o=s.value==="999px"?40:parseInt(s.value),n=s.value==="999px"?40:o;return e.jsxs("div",{className:"flex flex-col items-center gap-3",children:[e.jsx("div",{className:"w-20 h-20 border-2",style:{borderRadius:`${n}px`,borderColor:r?"rgba(255,255,255,0.2)":"rgba(0,0,0,0.15)",backgroundColor:r?"rgba(255,255,255,0.06)":"rgba(0,0,0,0.04)"}}),e.jsxs("div",{className:"text-center",children:[e.jsx("p",{className:"font-semibold text-sm",children:s.name}),e.jsx("code",{className:"text-[10px] font-mono text-gray-400",children:s.cssVar}),e.jsx("p",{className:"text-xs font-mono font-bold",children:s.value}),e.jsx("p",{className:"text-[10px] text-gray-400 mt-0.5",children:s.usage})]})]},s.name)})})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"8pt Spacing Grid",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:["Sonoma uses an 8pt base grid (",e.jsx("code",{className:"text-xs font-mono",children:"--macos-grid: 8px"}),"). All layout spacing snaps to multiples of this unit for visual consistency and perfect pixel alignment."]}),e.jsx("div",{className:"space-y-3",children:i.map(s=>e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsx("code",{className:"w-32 shrink-0 text-[10px] font-mono text-gray-400",children:s.cssVar}),e.jsxs("div",{className:"flex items-center gap-2 flex-1",children:[e.jsx("div",{className:"rounded shrink-0",style:{width:`${s.px}px`,height:20,backgroundColor:r?`rgba(10,132,255,${.5+s.px/120})`:`rgba(0,122,255,${.3+s.px/120})`}}),e.jsxs("div",{children:[e.jsx("span",{className:"font-mono font-bold text-xs",children:s.value}),e.jsx("span",{className:"ml-2 text-[10px] text-gray-400",children:s.desc})]})]})]},s.name))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Shadow Levels",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-6",children:["Sonoma shadows are subtle and layered — two box-shadows combined for natural depth perception."," ",e.jsx("code",{className:"text-xs font-mono",children:"--macos-shadow-*"})," tokens are referenced by all surface components."]}),e.jsx("div",{className:"space-y-5",children:d.map(s=>e.jsxs("div",{className:"flex flex-col sm:flex-row sm:items-center gap-4",children:[e.jsx("div",{className:"sm:w-32 shrink-0 text-sm font-semibold",children:s.name}),e.jsx("div",{className:"shrink-0",children:e.jsx("div",{className:"w-16 h-12 rounded-xl",style:{boxShadow:`var(${s.cssVar}, ${s.value.replace(/\n/g," ")})`,backgroundColor:r?"#2c2c2e":"#ffffff"}})}),e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("code",{className:"block text-[9px] font-mono text-gray-400 whitespace-pre-line",children:s.cssVar}),e.jsx("p",{className:"text-[10px] text-gray-400 mt-0.5",children:s.usage})]})]},s.name))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Layout Dimensions",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsx(a.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:"Fixed layout constants matching macOS 14 Sonoma's window chrome and structural panel dimensions."}),e.jsxs("div",{className:"relative rounded-2xl overflow-hidden mb-6 border",style:{borderColor:r?"rgba(255,255,255,0.12)":"rgba(0,0,0,0.1)",backgroundColor:r?"#1c1c1e":"#f5f5f7",height:220},children:[e.jsxs("div",{className:"absolute top-0 left-0 right-0 flex items-center px-3 gap-1.5",style:{height:28,backgroundColor:r?"rgba(40,40,42,0.8)":"rgba(255,255,255,0.72)",borderBottom:`1px solid ${r?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)"}`},children:[e.jsx("span",{className:"w-2.5 h-2.5 rounded-full bg-red-400 opacity-80"}),e.jsx("span",{className:"w-2.5 h-2.5 rounded-full bg-yellow-400 opacity-80"}),e.jsx("span",{className:"w-2.5 h-2.5 rounded-full bg-green-400 opacity-80"}),e.jsx("span",{className:"ml-auto text-[9px] text-gray-400",children:"Title Bar · 28px"})]}),e.jsx("div",{className:"absolute left-0 right-0 flex items-center px-4",style:{top:28,height:58,backgroundColor:r?"rgba(44,44,46,0.6)":"rgba(246,246,248,0.6)",borderBottom:`1px solid ${r?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)"}`},children:e.jsx("span",{className:"text-[9px] text-gray-400",children:"Toolbar · 58px"})}),e.jsx("div",{className:"absolute left-0 bottom-0 flex items-end pb-2 pl-2",style:{top:86,width:120,backgroundColor:r?"rgba(28,28,30,0.7)":"rgba(246,246,248,0.7)",borderRight:`1px solid ${r?"rgba(255,255,255,0.08)":"rgba(0,0,0,0.08)"}`},children:e.jsx("span",{className:"text-[8px] text-gray-400",children:"Sidebar · 240px"})}),e.jsx("div",{className:"absolute right-0 bottom-0 flex items-center justify-center",style:{top:86,left:120},children:e.jsx("span",{className:"text-[9px] text-gray-400",children:"Content · 20px padding"})})]}),e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3",children:m.map(s=>e.jsxs("div",{className:"flex items-start gap-3 p-3 rounded-xl border border-[var(--color-border)]",children:[e.jsx("div",{className:"w-10 shrink-0 text-center py-1 rounded font-mono text-[9px] font-bold",style:{backgroundColor:r?"rgba(10,132,255,0.2)":"rgba(0,122,255,0.1)",color:r?"#0a84ff":"#007aff"},children:s.value}),e.jsxs("div",{children:[e.jsx("p",{className:"text-xs font-semibold",children:s.name}),e.jsx("code",{className:"text-[9px] font-mono text-gray-400",children:s.cssVar}),e.jsx("p",{className:"text-[10px] text-gray-400 mt-0.5",children:s.desc})]})]},s.name))})]})})}),e.jsx(a.CardContainer,{className:"overflow-hidden",children:e.jsx(a.CardTitle,{title:"Motion & Transitions",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:["Three motion speeds using"," ",e.jsx("code",{className:"text-xs font-mono",children:"cubic-bezier(0.2, 0, 0, 1)"})," ","for the standard and slow durations — a deceleration curve that feels physically natural at larger distances."]}),e.jsx("div",{className:"space-y-4",children:x.map(s=>e.jsxs("div",{className:"p-4 rounded-xl border border-[var(--color-border)]",children:[e.jsxs("div",{className:"flex items-center justify-between mb-2",children:[e.jsx("span",{className:"font-semibold text-sm",children:s.name}),e.jsx("code",{className:"text-[10px] font-mono text-gray-400",children:s.cssVar})]}),e.jsxs("div",{className:"flex items-center gap-3 mb-2",children:[e.jsx("div",{className:"h-2 rounded-full",style:{width:`${s.bar*3}px`,backgroundColor:r?"#0a84ff":"#007aff",opacity:.7}}),e.jsx("code",{className:"text-xs font-mono text-gray-500",children:s.value})]}),e.jsx("p",{className:"text-[11px] text-gray-400",children:s.usage})]},s.name))}),e.jsx("pre",{className:"mt-6 rounded-xl p-4 text-xs font-mono overflow-x-auto text-gray-300",style:{backgroundColor:r?"#1c1c1e":"#1d1d1f"},children:`.my-panel {
-  transition: transform var(--macos-transition-normal),
-              opacity  var(--macos-transition-fast);
-  border-radius: var(--macos-radius-popover);
-  box-shadow: var(--macos-shadow-popover);
-  padding: var(--macos-space-4);
-}`})]})})})]})};exports.default=p;

package/documentation/SonomaTypographySection-DuZtgZjb.js

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