import { jsxs as r, Fragment as c, jsx as e } from "react/jsx-runtime";
import { ay as n, H as m, T as t, C as s, a as i, aj as g } from "../index-sdOMz8GW.js";
import { Brush as b } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const w = () => {
  const { primaryPreset: d } = n(), o = [
    "bg-brand",
    "text-brand",
    "border-brand",
    "bg-primary",
    "text-primary",
    "border-primary",
    "bg-secondary",
    "text-secondary",
    "border-secondary",
    "bg-accent",
    "text-accent",
    "border-accent",
    "bg-foreground",
    "text-foreground",
    "border-foreground",
    "bg-muted",
    "text-muted",
    "border-muted",
    "bg-border",
    "border-border",
    "bg-success",
    "text-success",
    "bg-warning",
    "text-warning",
    "bg-error",
    "text-error",
    "bg-info",
    "text-info",
    "bg-body",
    "bg-dark",
    "text-dark",
    "bg-light",
    "text-light",
    "text-foreground/60",
    "bg-brand/50",
    "border-brand/30"
  ];
  return /* @__PURE__ */ r(c, { children: [
    /* @__PURE__ */ e(
      m,
      {
        title: "Color Customization",
        description: "Dynamic brand colors using CSS custom properties and seamless Tailwind CSS utility integration.",
        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-green-500 via-emerald-500 to-teal-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(b, { className: "w-10 h-10 sm:w-12 sm:h-12 md:w-16 md:h-16 text-white filter drop-shadow-lg" }) })
      }
    ),
    /* @__PURE__ */ r("section", { className: "space-y-8", children: [
      /* @__PURE__ */ r("div", { className: "text-center", children: [
        /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Dynamic Brand Colors" }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Real-time theme updates via CSS custom properties"
          }
        )
      ] }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { title: "Active CSS Variable", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ r(t, { tag: "p", className: "text-gray-600 dark:text-gray-400", children: [
          "Brand colors are dynamically applied using CSS custom properties, allowing real-time theme updates without rebuilding. Colors are defined in",
          " ",
          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "ui/tucu-ui/src/themes/config/index.ts" })
        ] }),
        /* @__PURE__ */ e("div", { className: "p-3 flex justify-center items-center bg-gray-200 dark:bg-gray-800 rounded-lg w-full", children: /* @__PURE__ */ r(
          t,
          {
            tag: "code",
            className: "w-full text-sm text-gray-600 dark:text-gray-400",
            children: [
              "--color-semantic-bg-primary:",
              " ",
              d?.value || "#0052ff"
            ]
          }
        ) }),
        /* @__PURE__ */ e(g, { variant: "info", children: /* @__PURE__ */ r(t, { tag: "p", className: "text-xs", children: [
          /* @__PURE__ */ e("strong", { children: "Color Presets:" }),
          " Spectrum colors use the",
          " ",
          /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "-50" }),
          " ",
          "value from Tucu UI Design Tokens. Default colors use semantic mappings (e.g., blue-60 for primary)."
        ] }) })
      ] }) }) })
    ] }),
    /* @__PURE__ */ r("section", { className: "space-y-8", children: [
      /* @__PURE__ */ r("div", { className: "text-center", children: [
        /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Tailwind Integration" }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
            children: "Available utility classes that consume theme colors"
          }
        )
      ] }),
      /* @__PURE__ */ e(s, { children: /* @__PURE__ */ e(i, { title: "Utility Classes", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ e("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-2", children: o.map((a, l) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
          /* @__PURE__ */ e(
            "div",
            {
              className: `w-3 h-3 rounded border border-border ${a.includes("bg-") ? a : "bg-brand"}`
            }
          ),
          /* @__PURE__ */ r(
            t,
            {
              tag: "code",
              className: "text-xs text-gray-600 dark:text-gray-400",
              children: [
                ".",
                a
              ]
            }
          )
        ] }, l)) }),
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-xs text-gray-500 dark:text-gray-400 mt-2",
            children: "All colors support opacity modifiers (/10, /20, /30, /50, /80, etc.)"
          }
        )
      ] }) }) })
    ] })
  ] });
};
export {
  w as default
};
