@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/SonomaMaterialsSection-C96PRKqk.js

@@ -0,0 +1,9 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),l=require("../index-DMs_SmPq.js"),t=require("lucide-react");require("react-router-dom");require("react");require("react-dom");const i=[{name:"Sidebar",cssVar:"--macos-material-sidebar",blurVar:"--macos-material-sidebar-blur",blurValue:"20px",lightValue:"rgba(246,246,248,0.82)",darkValue:"rgba(28,28,30,0.85)",desc:"High opacity, strong blur — keeps sidebar content legible over any background",usage:"Sidebar panels, navigation drawers"},{name:"Toolbar",cssVar:"--macos-material-toolbar",blurVar:"--macos-material-toolbar-blur",blurValue:"16px",lightValue:"rgba(255,255,255,0.72)",darkValue:"rgba(40,40,42,0.80)",desc:"Medium opacity with focused blur — toolbar floats above content with visible separation",usage:"App toolbars, top navigation bars"},{name:"Popover",cssVar:"--macos-material-popover",blurVar:"--macos-material-popover-blur",blurValue:"24px",lightValue:"rgba(255,255,255,0.90)",darkValue:"rgba(44,44,46,0.92)",desc:"Near-opaque with deep blur — maximum legibility for transient content",usage:"Popovers, menus, tooltips, dropdown panels"},{name:"Sheet",cssVar:"--macos-material-sheet",blurVar:"--macos-material-sheet-blur",blurValue:"30px",lightValue:"rgba(255,255,255,0.94)",darkValue:"rgba(44,44,46,0.96)",desc:"Highest opacity, maximum blur — modal surfaces that demand full attention",usage:"Modal sheets, dialogs, alert panels"},{name:"Overlay",cssVar:"--macos-material-overlay",blurVar:"",blurValue:"—",lightValue:"rgba(0,0,0,0.40)",darkValue:"rgba(0,0,0,0.60)",desc:"Scrim behind modal surfaces to focus attention on foreground content",usage:"Modal scrim, blocking overlay, dimming layer"}],o=[{name:"UltraThin",opacity:.36,blur:15,lightBg:"rgba(246,246,248,0.36)",darkBg:"rgba(28,28,30,0.36)",desc:"Maximum transparency — background content clearly visible"},{name:"Thin",opacity:.48,blur:15,lightBg:"rgba(246,246,248,0.48)",darkBg:"rgba(28,28,30,0.48)",desc:"High translucency — subtle tinting of background"},{name:"Medium",opacity:.6,blur:15,lightBg:"rgba(246,246,248,0.60)",darkBg:"rgba(28,28,30,0.60)",desc:"Balanced — background muted but perceptible"},{name:"Thick",opacity:.72,blur:15,lightBg:"rgba(246,246,248,0.72)",darkBg:"rgba(40,40,42,0.72)",desc:"Low translucency — subtle depth hint"},{name:"UltraThick",opacity:.84,blur:15,lightBg:"rgba(246,246,248,0.84)",darkBg:"rgba(44,44,46,0.84)",desc:"Near-opaque — maximum legibility, minimal blur"}],d=()=>{const{mode:s}=l.useTheme(),r=s==="dark";return e.jsxs(e.Fragment,{children:[e.jsx(l.HeroCard,{title:"Materials",description:"Sonoma vibrancy materials — translucent CSS surfaces defined by --macos-material-* tokens. Each balances blur, opacity, and brightness for its role.",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-white/80 via-gray-200/60 to-gray-400/40 dark:from-gray-700/80 dark:via-gray-800/60 dark:to-gray-900/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-border/50 backdrop-blur-md",children:e.jsx(t.Layers,{className:"w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-gray-700 dark:text-gray-200 filter drop-shadow-lg"})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Named Surface Materials",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:["Pre-defined materials mapped to"," ",e.jsx("code",{className:"font-mono text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded",children:"--macos-material-*"})," ","CSS custom properties. Displayed over a colorful background to demonstrate vibrancy. Showing"," ",e.jsx("strong",{children:r?"dark":"light"})," values."]}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 gap-4",children:i.map(a=>e.jsx("div",{className:"rounded-2xl overflow-hidden",style:{background:r?"linear-gradient(135deg,#0d1b2a 0%,#1b2838 50%,#0a1628 100%)":"linear-gradient(135deg,#a8edea 0%,#fed6e3 50%,#d299c2 100%)"},children:e.jsxs("div",{className:"m-3 rounded-xl p-4 border border-border",style:{backgroundColor:`var(${a.cssVar}, ${r?a.darkValue:a.lightValue})`,backdropFilter:a.blurValue!=="—"?`blur(${a.blurValue})`:void 0,WebkitBackdropFilter:a.blurValue!=="—"?`blur(${a.blurValue})`:void 0},children:[e.jsx("div",{className:"flex items-start justify-between gap-2",children:e.jsxs("div",{children:[e.jsx("p",{className:`font-semibold text-sm ${r?"text-gray-100":"text-gray-900"}`,children:a.name}),e.jsx("p",{className:`text-xs mt-1 ${r?"text-gray-300":"text-gray-600"}`,children:a.desc}),e.jsxs("p",{className:`text-[10px] mt-1.5 ${r?"text-gray-400":"text-gray-500"}`,children:["Usage: ",a.usage]})]})}),e.jsxs("div",{className:"mt-3 pt-3 border-t border-border space-y-0.5",children:[e.jsx("code",{className:`block text-[9px] font-mono ${r?"text-gray-400":"text-gray-600"}`,children:a.cssVar}),e.jsx("code",{className:`block text-[9px] font-mono ${r?"text-gray-400":"text-gray-600"}`,children:r?a.darkValue:a.lightValue}),a.blurValue!=="—"&&e.jsxs("code",{className:`block text-[9px] font-mono ${r?"text-gray-400":"text-gray-600"}`,children:["backdrop-filter: blur(",a.blurValue,")"]})]})]})},a.name))})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Vibrancy Opacity Scale",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-6",children:["Five translucency levels from ",e.jsx("strong",{children:"UltraThin"})," (most transparent) to ",e.jsx("strong",{children:"UltraThick"})," (near-opaque). All use a consistent 15px backdrop blur. Displayed over a colorful gradient."]}),e.jsxs("div",{className:"relative rounded-2xl overflow-hidden p-6",style:{background:r?"linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%)":"linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#f5576c 75%,#4facfe 100%)",minHeight:380},children:[e.jsx("div",{className:"absolute inset-0 pointer-events-none opacity-50",children:r?e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"absolute top-6 left-8 w-20 h-20 rounded-full bg-purple-600"}),e.jsx("div",{className:"absolute top-16 right-12 w-28 h-28 rounded-full bg-indigo-500"}),e.jsx("div",{className:"absolute bottom-6 left-1/3 w-16 h-16 rounded-full bg-blue-600"}),e.jsx("div",{className:"absolute bottom-10 right-8 w-24 h-24 rounded-full bg-violet-700"})]}):e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"absolute top-4 left-4 w-24 h-24 rounded-full bg-yellow-300"}),e.jsx("div",{className:"absolute top-20 right-10 w-32 h-32 rounded-full bg-pink-400"}),e.jsx("div",{className:"absolute bottom-8 left-1/4 w-20 h-20 rounded-full bg-green-400"}),e.jsx("div",{className:"absolute bottom-4 right-8 w-28 h-28 rounded-full bg-blue-300"})]})}),e.jsx("div",{className:"relative flex flex-col gap-3",children:o.map(a=>e.jsx("div",{className:"rounded-xl p-3.5 border border-white/20",style:{backgroundColor:r?a.darkBg:a.lightBg,backdropFilter:`blur(${a.blur}px)`,WebkitBackdropFilter:`blur(${a.blur}px)`},children:e.jsxs("div",{className:"flex items-center justify-between",children:[e.jsxs("div",{children:[e.jsx("span",{className:`text-sm font-semibold ${r?"text-gray-100":"text-gray-800"}`,children:a.name}),e.jsx("p",{className:`text-[10px] mt-0.5 ${r?"text-gray-300":"text-gray-600"}`,children:a.desc})]}),e.jsxs("div",{className:"text-right",children:[e.jsxs("span",{className:`text-[10px] font-mono ${r?"text-gray-300":"text-gray-700"}`,children:["opacity ",Math.round(a.opacity*100),"%"]}),e.jsx("br",{}),e.jsxs("span",{className:`text-[10px] font-mono ${r?"text-gray-300":"text-gray-700"}`,children:["blur ",a.blur,"px"]})]})]})},a.name))})]})]})})}),e.jsx(l.CardContainer,{className:"overflow-hidden",children:e.jsx(l.CardTitle,{title:"Using Materials in Code",className:"mt-2 mb-2",children:e.jsxs("div",{className:"w-full p-4 sm:p-6",children:[e.jsxs(l.Typography,{tag:"p",className:"text-sm text-gray-500 dark:text-gray-400 mb-4",children:["Apply named material tokens directly via CSS custom properties. The tokens automatically resolve the correct value for the current appearance (light/dark) when"," ",e.jsx("code",{className:"text-xs font-mono",children:"html.macos"})," is active."]}),e.jsx("pre",{className:"rounded-xl p-4 text-xs font-mono overflow-x-auto text-gray-300",style:{backgroundColor:r?"#1c1c1e":"#1d1d1f"},children:`.my-surface {
+  background-color: var(--macos-material-sidebar);
+  backdrop-filter: blur(var(--macos-material-sidebar-blur));
+  -webkit-backdrop-filter: blur(var(--macos-material-sidebar-blur));
+}
+
+/* Or use Tailwind arbitrary values */
+<div className="bg-[var(--macos-material-toolbar)]
+                backdrop-blur-[var(--macos-material-toolbar-blur)]" />`})]})})})]})};exports.default=d;

package/documentation/SonomaMaterialsSection-DGAN4s50.js

@@ -0,0 +1,334 @@
+import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
+import { ay as c, H as n, C as s, a as o, T as i } from "../index-19KsCnyX.js";
+import { Layers as m } from "lucide-react";
+import "react-router-dom";
+import "react";
+import "react-dom";
+const b = [
+  {
+    name: "Sidebar",
+    cssVar: "--macos-material-sidebar",
+    blurVar: "--macos-material-sidebar-blur",
+    blurValue: "20px",
+    lightValue: "rgba(246,246,248,0.82)",
+    darkValue: "rgba(28,28,30,0.85)",
+    desc: "High opacity, strong blur — keeps sidebar content legible over any background",
+    usage: "Sidebar panels, navigation drawers"
+  },
+  {
+    name: "Toolbar",
+    cssVar: "--macos-material-toolbar",
+    blurVar: "--macos-material-toolbar-blur",
+    blurValue: "16px",
+    lightValue: "rgba(255,255,255,0.72)",
+    darkValue: "rgba(40,40,42,0.80)",
+    desc: "Medium opacity with focused blur — toolbar floats above content with visible separation",
+    usage: "App toolbars, top navigation bars"
+  },
+  {
+    name: "Popover",
+    cssVar: "--macos-material-popover",
+    blurVar: "--macos-material-popover-blur",
+    blurValue: "24px",
+    lightValue: "rgba(255,255,255,0.90)",
+    darkValue: "rgba(44,44,46,0.92)",
+    desc: "Near-opaque with deep blur — maximum legibility for transient content",
+    usage: "Popovers, menus, tooltips, dropdown panels"
+  },
+  {
+    name: "Sheet",
+    cssVar: "--macos-material-sheet",
+    blurVar: "--macos-material-sheet-blur",
+    blurValue: "30px",
+    lightValue: "rgba(255,255,255,0.94)",
+    darkValue: "rgba(44,44,46,0.96)",
+    desc: "Highest opacity, maximum blur — modal surfaces that demand full attention",
+    usage: "Modal sheets, dialogs, alert panels"
+  },
+  {
+    name: "Overlay",
+    cssVar: "--macos-material-overlay",
+    blurVar: "",
+    blurValue: "—",
+    lightValue: "rgba(0,0,0,0.40)",
+    darkValue: "rgba(0,0,0,0.60)",
+    desc: "Scrim behind modal surfaces to focus attention on foreground content",
+    usage: "Modal scrim, blocking overlay, dimming layer"
+  }
+], u = [
+  {
+    name: "UltraThin",
+    opacity: 0.36,
+    blur: 15,
+    lightBg: "rgba(246,246,248,0.36)",
+    darkBg: "rgba(28,28,30,0.36)",
+    desc: "Maximum transparency — background content clearly visible"
+  },
+  {
+    name: "Thin",
+    opacity: 0.48,
+    blur: 15,
+    lightBg: "rgba(246,246,248,0.48)",
+    darkBg: "rgba(28,28,30,0.48)",
+    desc: "High translucency — subtle tinting of background"
+  },
+  {
+    name: "Medium",
+    opacity: 0.6,
+    blur: 15,
+    lightBg: "rgba(246,246,248,0.60)",
+    darkBg: "rgba(28,28,30,0.60)",
+    desc: "Balanced — background muted but perceptible"
+  },
+  {
+    name: "Thick",
+    opacity: 0.72,
+    blur: 15,
+    lightBg: "rgba(246,246,248,0.72)",
+    darkBg: "rgba(40,40,42,0.72)",
+    desc: "Low translucency — subtle depth hint"
+  },
+  {
+    name: "UltraThick",
+    opacity: 0.84,
+    blur: 15,
+    lightBg: "rgba(246,246,248,0.84)",
+    darkBg: "rgba(44,44,46,0.84)",
+    desc: "Near-opaque — maximum legibility, minimal blur"
+  }
+], v = () => {
+  const { mode: d } = c(), l = d === "dark";
+  return /* @__PURE__ */ r(t, { children: [
+    /* @__PURE__ */ e(
+      n,
+      {
+        title: "Materials",
+        description: "Sonoma vibrancy materials — translucent CSS surfaces defined by --macos-material-* tokens. Each balances blur, opacity, and brightness for its role.",
+        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-white/80 via-gray-200/60 to-gray-400/40 dark:from-gray-700/80 dark:via-gray-800/60 dark:to-gray-900/40 rounded-full flex items-center justify-center shadow-lg border border-white/50 dark:border-border/50 backdrop-blur-md", children: /* @__PURE__ */ e(m, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-gray-700 dark:text-gray-200 filter drop-shadow-lg" }) })
+      }
+    ),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Named Surface Materials", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ r(
+        i,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
+          children: [
+            "Pre-defined materials mapped to",
+            " ",
+            /* @__PURE__ */ e("code", { className: "font-mono text-xs bg-gray-100 dark:bg-gray-800 px-1 rounded", children: "--macos-material-*" }),
+            " ",
+            "CSS custom properties. Displayed over a colorful background to demonstrate vibrancy. Showing",
+            " ",
+            /* @__PURE__ */ e("strong", { children: l ? "dark" : "light" }),
+            " values."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: b.map((a) => /* @__PURE__ */ e(
+        "div",
+        {
+          className: "rounded-2xl overflow-hidden",
+          style: {
+            background: l ? "linear-gradient(135deg,#0d1b2a 0%,#1b2838 50%,#0a1628 100%)" : "linear-gradient(135deg,#a8edea 0%,#fed6e3 50%,#d299c2 100%)"
+          },
+          children: /* @__PURE__ */ r(
+            "div",
+            {
+              className: "m-3 rounded-xl p-4 border border-border",
+              style: {
+                backgroundColor: `var(${a.cssVar}, ${l ? a.darkValue : a.lightValue})`,
+                backdropFilter: a.blurValue !== "—" ? `blur(${a.blurValue})` : void 0,
+                WebkitBackdropFilter: a.blurValue !== "—" ? `blur(${a.blurValue})` : void 0
+              },
+              children: [
+                /* @__PURE__ */ e("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ r("div", { children: [
+                  /* @__PURE__ */ e(
+                    "p",
+                    {
+                      className: `font-semibold text-sm ${l ? "text-gray-100" : "text-gray-900"}`,
+                      children: a.name
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "p",
+                    {
+                      className: `text-xs mt-1 ${l ? "text-gray-300" : "text-gray-600"}`,
+                      children: a.desc
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    "p",
+                    {
+                      className: `text-[10px] mt-1.5 ${l ? "text-gray-400" : "text-gray-500"}`,
+                      children: [
+                        "Usage: ",
+                        a.usage
+                      ]
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ r("div", { className: "mt-3 pt-3 border-t border-border space-y-0.5", children: [
+                  /* @__PURE__ */ e(
+                    "code",
+                    {
+                      className: `block text-[9px] font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
+                      children: a.cssVar
+                    }
+                  ),
+                  /* @__PURE__ */ e(
+                    "code",
+                    {
+                      className: `block text-[9px] font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
+                      children: l ? a.darkValue : a.lightValue
+                    }
+                  ),
+                  a.blurValue !== "—" && /* @__PURE__ */ r(
+                    "code",
+                    {
+                      className: `block text-[9px] font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
+                      children: [
+                        "backdrop-filter: blur(",
+                        a.blurValue,
+                        ")"
+                      ]
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        },
+        a.name
+      )) })
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Vibrancy Opacity Scale", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ r(
+        i,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
+          children: [
+            "Five translucency levels from ",
+            /* @__PURE__ */ e("strong", { children: "UltraThin" }),
+            " (most transparent) to ",
+            /* @__PURE__ */ e("strong", { children: "UltraThick" }),
+            " (near-opaque). All use a consistent 15px backdrop blur. Displayed over a colorful gradient."
+          ]
+        }
+      ),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: "relative rounded-2xl overflow-hidden p-6",
+          style: {
+            background: l ? "linear-gradient(135deg,#0f0c29 0%,#302b63 50%,#24243e 100%)" : "linear-gradient(135deg,#667eea 0%,#764ba2 25%,#f093fb 50%,#f5576c 75%,#4facfe 100%)",
+            minHeight: 380
+          },
+          children: [
+            /* @__PURE__ */ e("div", { className: "absolute inset-0 pointer-events-none opacity-50", children: l ? /* @__PURE__ */ r(t, { children: [
+              /* @__PURE__ */ e("div", { className: "absolute top-6 left-8 w-20 h-20 rounded-full bg-purple-600" }),
+              /* @__PURE__ */ e("div", { className: "absolute top-16 right-12 w-28 h-28 rounded-full bg-indigo-500" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-6 left-1/3 w-16 h-16 rounded-full bg-blue-600" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-10 right-8 w-24 h-24 rounded-full bg-violet-700" })
+            ] }) : /* @__PURE__ */ r(t, { children: [
+              /* @__PURE__ */ e("div", { className: "absolute top-4 left-4 w-24 h-24 rounded-full bg-yellow-300" }),
+              /* @__PURE__ */ e("div", { className: "absolute top-20 right-10 w-32 h-32 rounded-full bg-pink-400" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-8 left-1/4 w-20 h-20 rounded-full bg-green-400" }),
+              /* @__PURE__ */ e("div", { className: "absolute bottom-4 right-8 w-28 h-28 rounded-full bg-blue-300" })
+            ] }) }),
+            /* @__PURE__ */ e("div", { className: "relative flex flex-col gap-3", children: u.map((a) => /* @__PURE__ */ e(
+              "div",
+              {
+                className: "rounded-xl p-3.5 border border-white/20",
+                style: {
+                  backgroundColor: l ? a.darkBg : a.lightBg,
+                  backdropFilter: `blur(${a.blur}px)`,
+                  WebkitBackdropFilter: `blur(${a.blur}px)`
+                },
+                children: /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+                  /* @__PURE__ */ r("div", { children: [
+                    /* @__PURE__ */ e(
+                      "span",
+                      {
+                        className: `text-sm font-semibold ${l ? "text-gray-100" : "text-gray-800"}`,
+                        children: a.name
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      "p",
+                      {
+                        className: `text-[10px] mt-0.5 ${l ? "text-gray-300" : "text-gray-600"}`,
+                        children: a.desc
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ r("div", { className: "text-right", children: [
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: `text-[10px] font-mono ${l ? "text-gray-300" : "text-gray-700"}`,
+                        children: [
+                          "opacity ",
+                          Math.round(a.opacity * 100),
+                          "%"
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ e("br", {}),
+                    /* @__PURE__ */ r(
+                      "span",
+                      {
+                        className: `text-[10px] font-mono ${l ? "text-gray-300" : "text-gray-700"}`,
+                        children: [
+                          "blur ",
+                          a.blur,
+                          "px"
+                        ]
+                      }
+                    )
+                  ] })
+                ] })
+              },
+              a.name
+            )) })
+          ]
+        }
+      )
+    ] }) }) }),
+    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Using Materials in Code", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
+      /* @__PURE__ */ r(
+        i,
+        {
+          tag: "p",
+          className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
+          children: [
+            "Apply named material tokens directly via CSS custom properties. The tokens automatically resolve the correct value for the current appearance (light/dark) when",
+            " ",
+            /* @__PURE__ */ e("code", { className: "text-xs font-mono", children: "html.macos" }),
+            " is active."
+          ]
+        }
+      ),
+      /* @__PURE__ */ e(
+        "pre",
+        {
+          className: "rounded-xl p-4 text-xs font-mono overflow-x-auto text-gray-300",
+          style: { backgroundColor: l ? "#1c1c1e" : "#1d1d1f" },
+          children: `.my-surface {
+  background-color: var(--macos-material-sidebar);
+  backdrop-filter: blur(var(--macos-material-sidebar-blur));
+  -webkit-backdrop-filter: blur(var(--macos-material-sidebar-blur));
+}
+
+/* Or use Tailwind arbitrary values */
+<div className="bg-[var(--macos-material-toolbar)]
+                backdrop-blur-[var(--macos-material-toolbar-blur)]" />`
+        }
+      )
+    ] }) }) })
+  ] });
+};
+export {
+  v as default
+};

package/documentation/SonomaShapesSection-BhLTcP3w.js

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