import { jsxs as d, jsx as e } from "react/jsx-runtime";
import { H as l, C as i, a as o, T as a } from "../index-sdOMz8GW.js";
import { Circle as n } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const f = () => /* @__PURE__ */ d("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(
    l,
    {
      title: "Border Radius",
      description: "Border radius scale using Tailwind arbitrary values for consistent rounded corners.",
      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-amber-500 via-yellow-500 to-orange-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(n, { 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(i, { className: "overflow-hidden", children: /* @__PURE__ */ e(o, { title: "Border Radius 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-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: Object.entries({
    0: "rounded-[0px]",
    100: "rounded-[4px]",
    200: "rounded-[8px]",
    300: "rounded-[12px]",
    400: "rounded-[16px]",
    500: "rounded-[24px]",
    600: "rounded-[32px]",
    700: "rounded-[40px]",
    800: "rounded-[48px]",
    900: "rounded-[56px]",
    1e3: "rounded-[100000px]"
  }).map(
    ([s, r]) => {
      const t = r.replace("rounded-[", "").replace("]", "");
      return /* @__PURE__ */ d(
        "div",
        {
          className: "border border-border rounded-lg p-4 space-y-3",
          children: [
            /* @__PURE__ */ d("div", { className: "flex items-center justify-between", children: [
              /* @__PURE__ */ e(a, { tag: "h4", className: "font-semibold", children: s }),
              /* @__PURE__ */ e(a, { tag: "h4", className: "text-muted text-[10px]", children: t })
            ] }),
            /* @__PURE__ */ e("div", { className: "flex justify-center", children: /* @__PURE__ */ e("div", { className: `w-20 h-20 bg-primary ${r}` }) }),
            /* @__PURE__ */ e(
              a,
              {
                tag: "h4",
                className: "text-muted text-[9px] break-all px-1 text-center",
                children: r
              }
            )
          ]
        },
        s
      );
    }
  ) }) }) }) })
] });
export {
  f as default
};
