import { jsxs as r, Fragment as t, jsx as e } from "react/jsx-runtime";
import { ay as m, H as b, C as s, a as i, T as d } from "../index-sdOMz8GW.js";
import { Layers as g } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const u = [
  {
    name: "UltraThin",
    opacity: 0.36,
    blur: 15,
    lightBg: "rgba(246, 246, 248, 0.36)",
    darkBg: "rgba(28, 28, 30, 0.36)",
    desc: "Maximum translucency — content behind is 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 content"
  },
  {
    name: "Medium",
    opacity: 0.6,
    blur: 15,
    lightBg: "rgba(246, 246, 248, 0.60)",
    darkBg: "rgba(28, 28, 30, 0.60)",
    desc: "Balanced — background content is 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 from background"
  },
  {
    name: "UltraThick",
    opacity: 0.84,
    blur: 15,
    lightBg: "rgba(246, 246, 248, 0.84)",
    darkBg: "rgba(44, 44, 46, 0.84)",
    desc: "Near-opaque — minimal translucency, maximum legibility"
  }
], o = {
  light: [
    {
      name: "Sidebar",
      css: "var(--macos-material-sidebar)",
      blur: "20px",
      value: "rgba(246, 246, 248, 0.82)"
    },
    {
      name: "Toolbar",
      css: "var(--macos-material-toolbar)",
      blur: "16px",
      value: "rgba(255, 255, 255, 0.72)"
    },
    {
      name: "Popover",
      css: "var(--macos-material-popover)",
      blur: "24px",
      value: "rgba(255, 255, 255, 0.9)"
    },
    {
      name: "Sheet",
      css: "var(--macos-material-sheet)",
      blur: "30px",
      value: "rgba(255, 255, 255, 0.94)"
    }
  ],
  dark: [
    {
      name: "Sidebar",
      css: "var(--macos-material-sidebar)",
      blur: "20px",
      value: "rgba(28, 28, 30, 0.85)"
    },
    {
      name: "Toolbar",
      css: "var(--macos-material-toolbar)",
      blur: "16px",
      value: "rgba(40, 40, 42, 0.8)"
    },
    {
      name: "Popover",
      css: "var(--macos-material-popover)",
      blur: "24px",
      value: "rgba(44, 44, 46, 0.92)"
    },
    {
      name: "Sheet",
      css: "var(--macos-material-sheet)",
      blur: "30px",
      value: "rgba(44, 44, 46, 0.96)"
    }
  ]
}, N = () => {
  const { mode: c } = m(), l = c === "dark", n = l ? o.dark : o.light;
  return /* @__PURE__ */ r(t, { children: [
    /* @__PURE__ */ e(
      b,
      {
        title: "Materials",
        description: "macOS vibrancy materials combine translucency and blur to provide depth and context. Content behind the material informs the user of spatial hierarchy.",
        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(g, { 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(i, { title: "Material Levels", className: "mt-2 mb-2", children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
      /* @__PURE__ */ e(
        d,
        {
          tag: "p",
          className: "text-sm text-gray-500 dark:text-gray-400 mb-6",
          children: "Five translucency levels from UltraThin (most transparent) to UltraThick (near-opaque). All use backdrop-filter blur for the frosted-glass effect."
        }
      ),
      /* @__PURE__ */ r(
        "div",
        {
          className: "relative rounded-xl 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: "400px"
          },
          children: [
            /* @__PURE__ */ e("div", { className: "absolute inset-0 opacity-60", 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-12 right-16 w-28 h-28 rounded-full bg-indigo-600" }),
              /* @__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-8 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-16 right-12 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-4", children: u.map((a) => /* @__PURE__ */ e(
              "div",
              {
                className: "rounded-xl p-4 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-xs 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-xs font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
                        children: [
                          "opacity: ",
                          a.opacity
                        ]
                      }
                    ),
                    /* @__PURE__ */ e("br", {}),
                    /* @__PURE__ */ r(
                      "span",
                      {
                        className: `text-xs font-mono ${l ? "text-gray-400" : "text-gray-600"}`,
                        children: [
                          "blur: ",
                          a.blur,
                          "px"
                        ]
                      }
                    )
                  ] })
                ] })
              },
              a.name
            )) })
          ]
        }
      )
    ] }) }) }),
    /* @__PURE__ */ e(s, { className: "overflow-hidden", children: /* @__PURE__ */ e(
      i,
      {
        title: "Named Materials (CSS Variables)",
        className: "mt-2 mb-2",
        children: /* @__PURE__ */ r("div", { className: "w-full p-4 sm:p-6", children: [
          /* @__PURE__ */ r(
            d,
            {
              tag: "p",
              className: "text-sm text-gray-500 dark:text-gray-400 mb-4",
              children: [
                "Pre-defined materials for common macOS surfaces. Each maps to a CSS custom property. Showing ",
                l ? "dark" : "light",
                " mode values."
              ]
            }
          ),
          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-4", children: n.map((a) => /* @__PURE__ */ e(
            "div",
            {
              className: "rounded-xl p-4 border border-border",
              style: {
                background: l ? "linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)" : "linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #d299c2 100%)"
              },
              children: /* @__PURE__ */ r(
                "div",
                {
                  className: "rounded-lg p-4 border border-border",
                  style: {
                    backgroundColor: a.value,
                    backdropFilter: `blur(${a.blur})`,
                    WebkitBackdropFilter: `blur(${a.blur})`
                  },
                  children: [
                    /* @__PURE__ */ e(
                      "span",
                      {
                        className: `text-sm font-semibold ${l ? "text-gray-100" : "text-gray-800"}`,
                        children: a.name
                      }
                    ),
                    /* @__PURE__ */ r("div", { className: "mt-2 space-y-1", children: [
                      /* @__PURE__ */ e(
                        "p",
                        {
                          className: `text-[10px] font-mono ${l ? "text-gray-400" : "text-gray-500"}`,
                          children: a.css
                        }
                      ),
                      /* @__PURE__ */ r(
                        "p",
                        {
                          className: `text-[10px] font-mono ${l ? "text-gray-400" : "text-gray-500"}`,
                          children: [
                            "blur: ",
                            a.blur
                          ]
                        }
                      ),
                      /* @__PURE__ */ e(
                        "p",
                        {
                          className: `text-[10px] font-mono ${l ? "text-gray-400" : "text-gray-500"}`,
                          children: a.value
                        }
                      )
                    ] })
                  ]
                }
              )
            },
            a.name
          )) })
        ] })
      }
    ) })
  ] });
};
export {
  N as default
};
