import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { H as o, C as n, a as d, T as r } from "../index-sdOMz8GW.js";
import { Layers as i } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const m = (a) => {
  if (typeof window > "u") return "";
  const t = document.documentElement;
  return getComputedStyle(t).getPropertyValue(a).trim() || "";
}, f = () => /* @__PURE__ */ s("div", { className: "space-y-8 max-w-6xl sm:space-y-12 w-full mx-auto px-4 sm:px-6 lg:px-8 relative pt-8 lg:pt-12", children: [
  /* @__PURE__ */ e(
    o,
    {
      title: "Shadows",
      description: "Shadow tokens from Tucu UI Design System for depth and elevation.",
      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-gray-500 via-slate-500 to-zinc-600 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(i, { 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(n, { className: "overflow-hidden", children: /* @__PURE__ */ e(d, { title: "Shadow Tokens", className: "mt-2 mb-2", children: /* @__PURE__ */ e("div", { className: "w-full space-y-8 p-4 sm:p-6", children: /* @__PURE__ */ e("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6", children: [
    {
      name: "Main",
      varName: "--shadow-main",
      description: "Primary shadow for cards and elevated elements"
    },
    {
      name: "Light",
      varName: "--shadow-light",
      description: "Subtle shadow for minimal elevation"
    },
    {
      name: "Large",
      varName: "--shadow-large",
      description: "Prominent shadow for modals and overlays"
    },
    {
      name: "Card",
      varName: "--shadow-card",
      description: "Standard shadow for card components"
    },
    {
      name: "Transaction",
      varName: "--shadow-transaction",
      description: "Shadow for transaction lists and tables"
    },
    {
      name: "Expand",
      varName: "--shadow-expand",
      description: "Strong shadow for expanded elements"
    },
    {
      name: "Button",
      varName: "--shadow-button",
      description: "Shadow for button components"
    },
    {
      name: "Drop Shadow Main",
      varName: "--drop-shadow-main",
      description: "Drop shadow for images and graphics"
    }
  ].map((a) => {
    const t = m(a.varName);
    return /* @__PURE__ */ s("div", { className: "space-y-3", children: [
      /* @__PURE__ */ s("div", { className: "space-y-1", children: [
        /* @__PURE__ */ e(r, { tag: "h3", className: "font-semibold", children: a.name }),
        /* @__PURE__ */ e(r, { tag: "p", className: "text-sm text-muted", children: a.description })
      ] }),
      /* @__PURE__ */ e(
        "div",
        {
          className: "h-32 bg-white dark:bg-gray-800 rounded-lg p-4 flex items-center justify-center",
          style: {
            boxShadow: t || `var(${a.varName})`
          },
          children: /* @__PURE__ */ e(r, { tag: "h4", className: "text-center", children: a.name })
        }
      ),
      /* @__PURE__ */ s("div", { className: "space-y-1", children: [
        /* @__PURE__ */ e(
          r,
          {
            tag: "h4",
            className: "text-muted text-xs break-all font-mono",
            children: a.varName
          }
        ),
        t && /* @__PURE__ */ e(
          r,
          {
            tag: "h4",
            className: "text-muted text-[10px] break-all",
            children: t
          }
        )
      ] })
    ] }, a.name);
  }) }) }) }) })
] });
export {
  f as default
};
