import { jsxs as s, jsx as a } from "react/jsx-runtime";
import { useState as y, useEffect as u } from "react";
import { ay as w, H as $, C as l, a as d, aj as k, T as t } from "../index-sdOMz8GW.js";
import { Palette as C, Info as S } from "lucide-react";
import "react-router-dom";
import "react-dom";
const c = (n) => {
  if (typeof window > "u") return "";
  const m = document.documentElement;
  return getComputedStyle(m).getPropertyValue(n).trim() || "";
}, H = () => {
  const { mode: n } = w(), [m, o] = y(0);
  u(() => {
    const e = setTimeout(() => {
      o((r) => r + 1);
    }, 100);
    return () => clearTimeout(e);
  }, [n]), u(() => {
    const e = new MutationObserver(() => {
      o((r) => r + 1);
    });
    return e.observe(document.documentElement, {
      attributes: !0,
      attributeFilter: ["class", "style"]
    }), () => e.disconnect();
  }, []);
  const N = [
    { name: "Primary", class: "bg-primary", varName: "--color-primary" },
    { name: "Accent", class: "bg-accent", varName: "--color-accent" }
  ], v = [
    { name: "Secondary", class: "bg-secondary", varName: "--color-secondary" },
    { name: "Background", class: "bg-body", varName: "--color-body" },
    { name: "Dark", class: "bg-dark", varName: "--color-dark" }
  ], b = [
    { name: "Muted", class: "bg-muted", varName: "--color-muted" },
    { name: "Primary", class: "bg-foreground", varName: "--color-foreground" },
    { name: "Border", class: "bg-border", varName: "--color-border" }
  ], p = [
    { name: "Success", class: "bg-success", varName: "--color-success" },
    { name: "Warning", class: "bg-warning", varName: "--color-warning" },
    { name: "Error", class: "bg-error", varName: "--color-error" },
    { name: "Info", class: "bg-info", varName: "--color-info" }
  ], x = [
    {
      name: "blue",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "green",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "orange",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "gray",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "indigo",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "pink",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "purple",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "red",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "teal",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "yellow",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    },
    {
      name: "chartreuse",
      shades: [0, 5, 10, 15, 20, 30, 40, 50, 60, 70, 80, 90, 100]
    }
  ], f = [
    { name: "brand", varName: "--color-brand", class: "bg-brand" },
    { name: "primary", varName: "--color-primary", class: "bg-primary" },
    { name: "secondary", varName: "--color-secondary", class: "bg-secondary" },
    { name: "accent", varName: "--color-accent", class: "bg-accent" },
    {
      name: "foreground",
      varName: "--color-foreground",
      class: "bg-foreground"
    },
    { name: "muted", varName: "--color-muted", class: "bg-muted" },
    { name: "border", varName: "--color-border", class: "bg-border" },
    { name: "success", varName: "--color-success", class: "bg-success" },
    { name: "warning", varName: "--color-warning", class: "bg-warning" },
    { name: "error", varName: "--color-error", class: "bg-error" },
    { name: "info", varName: "--color-info", class: "bg-info" },
    { name: "body", varName: "--color-body", class: "bg-body" },
    { name: "dark", varName: "--color-dark", class: "bg-dark" },
    { name: "light", varName: "--color-light", class: "bg-light" },
    {
      name: "light-dark",
      varName: "--color-light-dark",
      class: "bg-light-dark"
    }
  ];
  return /* @__PURE__ */ s("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__ */ a(
      $,
      {
        title: "Color System",
        description: "Carefully crafted color palettes that work across all themes and contexts.",
        icon: /* @__PURE__ */ a("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__ */ a(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__ */ s("div", { className: "space-y-8", children: [
      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Brand Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: N.map((e) => {
        const r = c(e.varName);
        return /* @__PURE__ */ s(
          "div",
          {
            className: "text-center space-y-2",
            children: [
              /* @__PURE__ */ a(
                "div",
                {
                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
                }
              ),
              /* @__PURE__ */ s("div", { className: "text-sm", children: [
                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
              ] })
            ]
          },
          `${e.name}-${m}`
        );
      }) }) }) }),
      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Surfaces", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: v.map((e) => {
        const r = c(e.varName);
        return /* @__PURE__ */ s(
          "div",
          {
            className: "text-center space-y-2",
            children: [
              /* @__PURE__ */ a(
                "div",
                {
                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
                }
              ),
              /* @__PURE__ */ s("div", { className: "text-sm", children: [
                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
              ] })
            ]
          },
          `surface-${e.name}-${m}`
        );
      }) }) }) }),
      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Text", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-3 gap-4 sm:gap-6", children: b.map((e) => {
        const r = c(e.varName);
        return /* @__PURE__ */ s(
          "div",
          {
            className: "text-center space-y-2",
            children: [
              /* @__PURE__ */ a(
                "div",
                {
                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
                }
              ),
              /* @__PURE__ */ s("div", { className: "text-sm", children: [
                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
              ] })
            ]
          },
          `text-${e.name}-${m}`
        );
      }) }) }) }),
      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Status", className: "mt-2 mb-2", children: /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-4 sm:gap-6", children: p.map((e) => {
        const r = c(e.varName);
        return /* @__PURE__ */ s(
          "div",
          {
            className: "text-center space-y-2",
            children: [
              /* @__PURE__ */ a(
                "div",
                {
                  className: `w-16 h-16 rounded-lg ${e.class} mx-auto border border-border`
                }
              ),
              /* @__PURE__ */ s("div", { className: "text-sm", children: [
                /* @__PURE__ */ a("div", { className: "font-semibold", children: e.name }),
                /* @__PURE__ */ a("div", { className: "text-muted text-xs", children: r || e.varName })
              ] })
            ]
          },
          `status-${e.name}-${m}`
        );
      }) }) }) }),
      /* @__PURE__ */ a(k, { variant: "info", children: /* @__PURE__ */ s("div", { children: [
        /* @__PURE__ */ s("div", { className: "font-semibold flex items-center gap-2", children: [
          /* @__PURE__ */ a(S, { className: "h-4 w-4" }),
          "Dynamic Theming"
        ] }),
        /* @__PURE__ */ a("div", { children: "Colors automatically adapt based on the selected theme preset and mode (light/dark)." })
      ] }) }),
      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Color Spectrum", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ a(
          t,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400 mb-6",
            children: "Complete color palette with all shades from 0 to 100 for each color spectrum."
          }
        ),
        /* @__PURE__ */ a("div", { className: "space-y-8", children: x.map((e) => /* @__PURE__ */ s("div", { children: [
          /* @__PURE__ */ a(
            t,
            {
              tag: "h3",
              className: "font-semibold text-lg mb-4 capitalize",
              children: e.name
            }
          ),
          /* @__PURE__ */ a("div", { className: "grid grid-cols-4 sm:grid-cols-7 md:grid-cols-10 lg:grid-cols-[repeat(13,minmax(0,1fr))] gap-2", children: e.shades.map((r) => {
            const i = `bg-${e.name}-${r}`, g = `--color-${e.name}-${r}`, h = c(g);
            return /* @__PURE__ */ s(
              "div",
              {
                className: "space-y-1 w-full min-w-[40px]",
                children: [
                  /* @__PURE__ */ a(
                    "div",
                    {
                      className: `h-16 w-full rounded border border-border ${i}`,
                      title: `${e.name}-${r}: ${h || g}`
                    }
                  ),
                  /* @__PURE__ */ a(
                    t,
                    {
                      tag: "h4",
                      className: "text-center text-xs font-semibold",
                      children: r
                    }
                  ),
                  h && /* @__PURE__ */ a(
                    t,
                    {
                      tag: "h4",
                      className: "text-center text-muted text-[10px]",
                      children: h
                    }
                  )
                ]
              },
              `${e.name}-${r}-${m}`
            );
          }) })
        ] }, e.name)) })
      ] }) }) }),
      /* @__PURE__ */ a(l, { className: "overflow-hidden", children: /* @__PURE__ */ a(d, { title: "Main Colors", className: "mt-2 mb-2", children: /* @__PURE__ */ s("div", { className: "w-full space-y-8 p-4 sm:p-6", children: [
        /* @__PURE__ */ a(
          t,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400 mb-6",
            children: "Primary theme colors used throughout the application. These colors are mapped from semantic colors and adapt to light/dark mode."
          }
        ),
        /* @__PURE__ */ a("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: f.map((e) => {
          const r = c(e.varName), i = e.name === "body" || e.name === "light" || e.name === "light-dark" ? "text-dark dark:text-light" : "text-white";
          return /* @__PURE__ */ s(
            "div",
            {
              className: "space-y-2 border border-border rounded-lg p-2",
              children: [
                /* @__PURE__ */ a(
                  "div",
                  {
                    className: `h-20 rounded flex items-center justify-center ${e.class} ${i} border border-border`,
                    title: `${e.name}: var(${e.varName})${r ? ` = ${r}` : ""}`,
                    children: /* @__PURE__ */ a(
                      t,
                      {
                        tag: "h4",
                        className: "text-center px-2 break-all text-xs",
                        children: e.name
                      }
                    )
                  }
                ),
                /* @__PURE__ */ a(
                  t,
                  {
                    tag: "h4",
                    className: "text-center text-muted text-xs",
                    children: e.name
                  }
                ),
                r && /* @__PURE__ */ a(
                  t,
                  {
                    tag: "h4",
                    className: "text-center text-muted text-[10px]",
                    children: r
                  }
                ),
                /* @__PURE__ */ a(
                  t,
                  {
                    tag: "h4",
                    className: "text-center text-muted text-[9px] mt-1 break-all px-1",
                    children: e.class
                  }
                )
              ]
            },
            `main-${e.name}-${m}`
          );
        }) })
      ] }) }) })
    ] })
  ] });
};
export {
  H as default
};
