import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { H as m, C as o, a as c, T as s } from "../index-sdOMz8GW.js";
import { Ruler as u } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const p = (i) => {
  if (typeof window > "u") return "";
  const a = document.documentElement;
  return getComputedStyle(a).getPropertyValue(i).trim() || "";
}, f = () => /* @__PURE__ */ r("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(
    m,
    {
      title: "Spacing System",
      description: "Spacing scale mapped to 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-emerald-500 via-green-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(u, { 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(o, { className: "overflow-hidden", children: /* @__PURE__ */ e(c, { title: "Spacing Scale", 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: [
    { value: 0, key: "0" },
    { value: 1, key: "1" },
    { value: 2, key: "2" },
    { value: 3, key: "3" },
    { value: 4, key: "4" },
    { value: 5, key: "5" },
    { value: 6, key: "6" },
    { value: 7, key: "7" },
    { value: 8, key: "8" },
    { value: 9, key: "9" },
    { value: 10, key: "10" },
    { value: 11, key: "11" },
    { value: 12, key: "12" },
    { value: 13, key: "13" },
    { value: 14, key: "14" },
    { value: 15, key: "15" },
    { value: 16, key: "16" },
    { value: 17, key: "17" },
    { value: 18, key: "18" },
    { value: 19, key: "19" },
    { value: 20, key: "20" }
  ].map((a) => {
    const l = `--spacing-${a.key}`, t = p(l), d = `p-${a.value}, m-${a.value}, gap-${a.value}`, n = a.value.toString();
    return /* @__PURE__ */ r(
      "div",
      {
        className: "border border-border rounded-lg p-4 space-y-3",
        children: [
          /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
            /* @__PURE__ */ e(s, { tag: "h4", className: "font-semibold", children: n }),
            t && /* @__PURE__ */ e(s, { tag: "h4", className: "text-muted text-[10px]", children: t })
          ] }),
          /* @__PURE__ */ e(
            "div",
            {
              className: "bg-primary h-8 rounded w-full",
              style: {
                width: t || `var(${l})`,
                minWidth: "4px"
              }
            }
          ),
          /* @__PURE__ */ e(
            s,
            {
              tag: "h4",
              className: "text-muted text-[9px] break-all px-1",
              children: d
            }
          )
        ]
      },
      a.key
    );
  }) }) }) }) })
] });
export {
  f as default
};
