@e-burgos/tucu-ui 2.0.8 → 2.0.10

package/documentation/SonomaShapesSection-C8Pf87LY.js

@@ -0,0 +1,482 @@
+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-19KsCnyX.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
+};