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