import { jsxs as r, Fragment as l, jsx as e } from "react/jsx-runtime";
import { H as c, T as t, ax as o, C as a, a as s } from "../index-sdOMz8GW.js";
import { Anchor as n, Zap as d, Palette as h, Globe as m } from "lucide-react";
import "react-router-dom";
import "react";
import "react-dom";
const v = () => /* @__PURE__ */ r(l, { children: [
  /* @__PURE__ */ e(
    c,
    {
      title: "Theme Hooks",
      description: "Powerful hooks for accessing, modifying, and reacting to theme state throughout your application.",
      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-yellow-500 via-amber-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__ */ r("section", { className: "space-y-8", children: [
    /* @__PURE__ */ r("div", { className: "text-center", children: [
      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "Available Hooks" }),
      /* @__PURE__ */ e(
        t,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Three hooks that power the theming system"
        }
      )
    ] }),
    /* @__PURE__ */ e("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6", children: [
      {
        icon: /* @__PURE__ */ e(d, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "useTheme",
        description: "Main hook — all state, setters, and actions. Zustand-based with localStorage persistence.",
        iconBgClassName: "from-yellow-500 via-amber-500 to-orange-500"
      },
      {
        icon: /* @__PURE__ */ e(h, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "useThemeColor",
        description: "Injects 24 CSS variables (12 light/dark pairs) into document root for real-time theming.",
        iconBgClassName: "from-blue-500 via-cyan-500 to-teal-500"
      },
      {
        icon: /* @__PURE__ */ e(m, { className: "w-6 h-6 text-white filter drop-shadow-sm" }),
        title: "useDirection",
        description: "Sets document.documentElement.dir for RTL/LTR layout support.",
        iconBgClassName: "from-purple-500 via-violet-500 to-indigo-500"
      }
    ].map((i) => /* @__PURE__ */ e(o, { layout: "horizontal", ...i }, i.title)) })
  ] }),
  /* @__PURE__ */ r("section", { className: "space-y-8", children: [
    /* @__PURE__ */ r("div", { className: "text-center", children: [
      /* @__PURE__ */ e(t, { tag: "h2", className: "mb-2", children: "useTheme Hook API" }),
      /* @__PURE__ */ e(
        t,
        {
          tag: "p",
          className: "text-gray-500 dark:text-gray-400 max-w-2xl mx-auto",
          children: "Complete state, setters, and actions reference"
        }
      )
    ] }),
    /* @__PURE__ */ r("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "State Properties", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ r(
          t,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400 text-sm",
            children: [
              "Accessed via",
              " ",
              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "useTheme()" }),
              " ",
              "— persisted to localStorage automatically."
            ]
          }
        ),
        /* @__PURE__ */ r("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
          /* @__PURE__ */ e("li", { children: "mode, layout, direction, logo, lang" }),
          /* @__PURE__ */ e("li", { children: "colorScheme (theme variant: default | macos | macos-tahoe)" }),
          /* @__PURE__ */ e("li", { children: "primaryPreset, darkPrimaryPreset" }),
          /* @__PURE__ */ e("li", { children: "secondaryPreset, darkSecondaryPreset" }),
          /* @__PURE__ */ e("li", { children: "accentPreset, darkAccentPreset" }),
          /* @__PURE__ */ e("li", { children: "mutedPreset, darkMutedPreset" }),
          /* @__PURE__ */ e("li", { children: "darkBgPreset, lightBgPreset" }),
          /* @__PURE__ */ e("li", { children: "lightDarkPreset, darkLightDarkPreset" }),
          /* @__PURE__ */ e("li", { children: "successPreset, darkSuccessPreset" }),
          /* @__PURE__ */ e("li", { children: "warningPreset, darkWarningPreset" }),
          /* @__PURE__ */ e("li", { children: "errorPreset, darkErrorPreset" }),
          /* @__PURE__ */ e("li", { children: "infoPreset, darkInfoPreset" }),
          /* @__PURE__ */ e("li", { children: "fgPreset, darkFgPreset" }),
          /* @__PURE__ */ e("li", { children: "borderPreset, darkBorderPreset" }),
          /* @__PURE__ */ e("li", { children: "backgroundVariant" }),
          /* @__PURE__ */ e("li", { children: "isSettingsOpen, showSettings" })
        ] })
      ] }) }) }),
      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "Setters", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400 text-sm",
            children: "Each setter updates the store and persists to localStorage."
          }
        ),
        /* @__PURE__ */ r("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
          /* @__PURE__ */ e("li", { children: "setMode, setLayout, setDirection" }),
          /* @__PURE__ */ e("li", { children: "setPrimaryPreset, setDarkPrimaryPreset" }),
          /* @__PURE__ */ e("li", { children: "setSecondaryPreset, setDarkSecondaryPreset" }),
          /* @__PURE__ */ e("li", { children: "setAccentPreset, setDarkAccentPreset" }),
          /* @__PURE__ */ e("li", { children: "setMutedPreset, setDarkMutedPreset" }),
          /* @__PURE__ */ e("li", { children: "setDarkBgPreset, setLightBgPreset" }),
          /* @__PURE__ */ e("li", { children: "setLightDarkPreset, setDarkLightDarkPreset" }),
          /* @__PURE__ */ e("li", { children: "setSuccessPreset, setDarkSuccessPreset" }),
          /* @__PURE__ */ e("li", { children: "setWarningPreset, setDarkWarningPreset" }),
          /* @__PURE__ */ e("li", { children: "setErrorPreset, setDarkErrorPreset" }),
          /* @__PURE__ */ e("li", { children: "setInfoPreset, setDarkInfoPreset" }),
          /* @__PURE__ */ e("li", { children: "setFgPreset, setDarkFgPreset" }),
          /* @__PURE__ */ e("li", { children: "setBorderPreset, setDarkBorderPreset" }),
          /* @__PURE__ */ e("li", { children: "setBackgroundVariant" }),
          /* @__PURE__ */ e("li", { children: "setLogo, setLang, setIsSettingsOpen, setShowSettings" })
        ] })
      ] }) }) }),
      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "Actions", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ e(
          t,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400 text-sm",
            children: "Compound actions that apply multiple state changes at once."
          }
        ),
        /* @__PURE__ */ r("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
          /* @__PURE__ */ e("li", { children: "restoreDefaultColors — resets all color presets to defaults" }),
          /* @__PURE__ */ e("li", { children: "applyMacOSTheme — sets layout to MACOS + Sonoma style" }),
          /* @__PURE__ */ e("li", { children: "applyMacOSTahoeTheme — sets layout to MACOS_TAHOE + Tahoe style" }),
          /* @__PURE__ */ e("li", { children: "applyThemeStyle(style: THEME_VARIANT) — generic applicator for any variant" })
        ] })
      ] }) }) }),
      /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(s, { title: "useThemeColor Variables", children: /* @__PURE__ */ r("div", { className: "space-y-4", children: [
        /* @__PURE__ */ r(
          t,
          {
            tag: "p",
            className: "text-gray-600 dark:text-gray-400 text-sm",
            children: [
              "24 CSS variables injected into",
              " ",
              /* @__PURE__ */ e("code", { className: "px-1 py-0.5 border border-border rounded text-xs", children: "document.documentElement" }),
              ":"
            ]
          }
        ),
        /* @__PURE__ */ r("ul", { className: "text-xs text-gray-600 dark:text-gray-400 space-y-1 ml-4 list-disc", children: [
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-primary / dark variant" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-secondary / dark variant" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-accent-bold-yellow / dark variant" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-fg-muted / dark variant" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg / dark variant" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-secondary-wash / dark variant" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-positive / dark variant (success)" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-warning / dark variant (warning)" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-negative / dark variant (error)" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-bg-info / dark variant (info)" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-fg / dark variant (text foreground)" }),
          /* @__PURE__ */ e("li", { children: "--color-semantic-line-primary-subtle / dark variant (border)" })
        ] })
      ] }) }) })
    ] })
  ] })
] });
export {
  v as default
};
