import { jsxs as r, Fragment as o, jsx as e } from "react/jsx-runtime";
import { H as t, T as a, C as d, a as s, c as i, aj as l } from "../index-sdOMz8GW.js";
import { Paintbrush as c } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const x = () => /* @__PURE__ */ r(o, { children: [
  /* @__PURE__ */ e(
    t,
    {
      title: "Custom Color Palette",
      description: "Override every color layer with hex values to match your brand identity exactly.",
      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-pink-500 via-rose-500 to-red-500 rounded-full flex items-center justify-center shadow-lg", children: /* @__PURE__ */ e(c, { 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(a, { tag: "h2", className: "mb-2", children: "Custom Palette Configuration" }),
      /* @__PURE__ */ r(
        a,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: [
            "Provide custom colors via the",
            " ",
            /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "customPaletteColor" }),
            " ",
            "prop on ThemeProvider"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ e(d, { children: /* @__PURE__ */ e(s, { title: "Usage Example", children: /* @__PURE__ */ e(
      i,
      {
        language: "tsx",
        code: `<ThemeProvider
  menuItems={menuItems}
  customPaletteColor={{
    primary: '#0052ff',           // Hex color or preset name
    darkPrimary: '#578bfa',
    secondary: '#f3f4f6',
    darkSecondary: '#172131',
    accent: '#f7d21a',
    darkAccent: '#936000',
    muted: '#4a5565',
    darkMuted: '#828a99',
    darkBg: '#030712',
    lightBg: '#ffffff',
    lightDark: '#f9fafb',
    darkLightDark: '#0a101d',
  }}
>
  {/* Your app */}
</ThemeProvider>`
      }
    ) }) }),
    /* @__PURE__ */ e(l, { variant: "info", children: /* @__PURE__ */ r(a, { tag: "p", className: "text-xs", children: [
      /* @__PURE__ */ e("strong", { children: "Note:" }),
      " All color presets are defined in",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded", children: "ui/tucu-ui/src/themes/config/index.ts" }),
      ". Spectrum colors use the",
      " ",
      /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border dark:border-border rounded", children: "-50" }),
      " ",
      "value from Tucu UI Design Tokens, while default colors use semantic mappings."
    ] }) })
  ] })
] });
export {
  x as default
};
