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-sdOMz8GW.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
};
