import { jsxs as i, jsx as e } from "react/jsx-runtime";
import { H as n, C as c, a as o, T as d } from "../index-sdOMz8GW.js";
import { Maximize as h } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const m = (a) => {
  if (typeof window > "u") return "";
  const s = document.documentElement;
  return getComputedStyle(s).getPropertyValue(a).trim() || "";
}, N = () => /* @__PURE__ */ i("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(
    n,
    {
      title: "Sizing",
      description: "Icon and avatar size tokens from Tucu UI Design Tokens.",
      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-500 via-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(h, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
    }
  ),
  /* @__PURE__ */ i("div", { className: "space-y-8", children: [
    /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Icon Sizes", 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 lg:grid-cols-3 gap-4", children: ["xs", "s", "m", "l"].map((a) => {
      const s = `w-icon-${a}`, l = `h-icon-${a}`, r = `--size-icon-${a}`, t = m(r);
      return /* @__PURE__ */ i(
        "div",
        {
          className: "text-center space-y-2 border border-border rounded-lg p-3",
          children: [
            /* @__PURE__ */ e(
              "div",
              {
                className: `bg-primary rounded mx-auto ${s} ${l}`,
                style: {
                  width: t || `var(${r})`,
                  height: t || `var(${r})`
                }
              }
            ),
            /* @__PURE__ */ e(d, { tag: "h4", className: "font-semibold", children: a }),
            t && /* @__PURE__ */ e(d, { tag: "h4", className: "text-muted text-[10px]", children: t }),
            /* @__PURE__ */ i(
              d,
              {
                tag: "h4",
                className: "text-muted text-[9px] mt-1 break-all px-1",
                children: [
                  s,
                  ", ",
                  l
                ]
              }
            )
          ]
        },
        a
      );
    }) }) }) }) }),
    /* @__PURE__ */ e(c, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Avatar Sizes", 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 lg:grid-cols-3 gap-4", children: ["s", "m", "l", "xl", "xxl", "xxxl"].map((a) => {
      const s = `w-avatar-${a}`, l = `h-avatar-${a}`, r = `--size-avatar-${a}`, t = m(r);
      return /* @__PURE__ */ i(
        "div",
        {
          className: "text-center space-y-2 border border-border rounded-lg p-3",
          children: [
            /* @__PURE__ */ e(
              "div",
              {
                className: `bg-primary rounded-full mx-auto ${s} ${l}`,
                style: {
                  width: t || `var(${r})`,
                  height: t || `var(${r})`
                }
              }
            ),
            /* @__PURE__ */ e(d, { tag: "h4", className: "font-semibold", children: a }),
            t && /* @__PURE__ */ e(d, { tag: "h4", className: "text-muted text-[10px]", children: t }),
            /* @__PURE__ */ i(
              d,
              {
                tag: "h4",
                className: "text-muted text-[9px] mt-1 break-all px-1",
                children: [
                  s,
                  ", ",
                  l
                ]
              }
            )
          ]
        },
        a
      );
    }) }) }) }) })
  ] })
] });
export {
  N as default
};
