@aster-ui/prefixed 0.12.87 → 0.12.89

package/dist/hooks/useTheme.d.ts

@@ -9,7 +9,9 @@ export interface UseThemeReturn {
     isDark: boolean;
     /** Set the theme. Only available with ThemeProvider. */
     setTheme: ((theme: string) => void) | undefined;
-    /** Computed theme colors as hex values */
+    /** Toggle between light and dark. Only available with ThemeProvider. */
+    toggleTheme: (() => void) | undefined;
+    /** Computed theme colors as hex values. Computed asynchronously after theme changes. */
     colors: ThemeColors;
     /** The system preference. Only available with ThemeProvider. */
     systemTheme: 'light' | 'dark' | undefined;
@@ -24,11 +26,13 @@ export interface UseThemeReturn {
  * to isDark and colors based on the current data-theme attribute and
  * system preference.
  *
+ * Colors are computed asynchronously after mount and theme changes,
+ * using DOM-based color conversion (no canvas).
+ *
  * @example
  * // With ThemeProvider (full control)
  * const { theme, setTheme, resolvedTheme, isDark, colors } = useTheme()
  * setTheme('dark')
- * setTheme('system')
  *
  * @example
  * // Without ThemeProvider (read-only)

package/dist/hooks/useTheme.js

@@ -1,6 +1,6 @@
-import { useState as i, useEffect as m, useMemo as u } from "react";
-import { useHasThemeProvider as d, useThemeContext as l } from "../providers/ThemeProvider.js";
-const h = /* @__PURE__ */ new Set([
+import { useState as u, useRef as g, useEffect as f, useMemo as l } from "react";
+import { useHasThemeProvider as b, useThemeContext as T } from "../providers/ThemeProvider.js";
+const p = /* @__PURE__ */ new Set([
   "dark",
   "synthwave",
   "halloween",
@@ -13,107 +13,106 @@ const h = /* @__PURE__ */ new Set([
   "coffee",
   "dim",
   "sunset"
-]);
-function g(r) {
-  if (typeof document > "u") return "#000000";
-  const e = document.createElement("canvas");
-  e.width = e.height = 1;
-  const t = e.getContext("2d");
-  if (!t) return "#000000";
-  t.fillStyle = r, t.fillRect(0, 0, 1, 1);
-  const [n, o, s] = t.getImageData(0, 0, 1, 1).data;
-  return `#${((1 << 24) + (n << 16) + (o << 8) + s).toString(16).slice(1)}`;
+]), a = {
+  background: "#ffffff",
+  foreground: "#000000",
+  primary: "#6366f1",
+  primaryContent: "#ffffff",
+  secondary: "#f000b8",
+  accent: "#37cdbe",
+  info: "#3abff8",
+  success: "#36d399",
+  warning: "#fbbd23",
+  error: "#f87272"
+};
+let o = null;
+function v() {
+  return o || (o = document.createElement("span"), o.style.position = "absolute", o.style.visibility = "hidden", o.style.pointerEvents = "none", o.style.width = "0", o.style.height = "0", o.style.overflow = "hidden", document.body.appendChild(o)), o;
 }
-function a() {
-  if (typeof document > "u")
-    return {
-      background: "#ffffff",
-      foreground: "#000000",
-      primary: "#6366f1",
-      primaryContent: "#ffffff",
-      secondary: "#f000b8",
-      accent: "#37cdbe",
-      info: "#3abff8",
-      success: "#36d399",
-      warning: "#fbbd23",
-      error: "#f87272"
-    };
-  const r = getComputedStyle(document.documentElement), e = (t, n) => {
-    const o = r.getPropertyValue(t).trim();
-    return o ? g(o) : n;
+function w(e) {
+  const t = v();
+  t.style.color = e;
+  const n = getComputedStyle(t).color.match(/\d+/g);
+  if (!n) return "#000000";
+  const [r, c, m] = n.map(Number);
+  return `#${((1 << 24) + (r << 16) + (c << 8) + m).toString(16).slice(1)}`;
+}
+function h() {
+  if (typeof document > "u") return a;
+  const e = getComputedStyle(document.documentElement), t = (s, n) => {
+    const r = e.getPropertyValue(s).trim();
+    return r ? w(r) : n;
   };
   return {
-    background: e("--color-base-100", "#ffffff"),
-    foreground: e("--color-base-content", "#000000"),
-    primary: e("--color-primary", "#6366f1"),
-    primaryContent: e("--color-primary-content", "#ffffff"),
-    secondary: e("--color-secondary", "#f000b8"),
-    accent: e("--color-accent", "#37cdbe"),
-    info: e("--color-info", "#3abff8"),
-    success: e("--color-success", "#36d399"),
-    warning: e("--color-warning", "#fbbd23"),
-    error: e("--color-error", "#f87272")
+    background: t("--color-base-100", "#ffffff"),
+    foreground: t("--color-base-content", "#000000"),
+    primary: t("--color-primary", "#6366f1"),
+    primaryContent: t("--color-primary-content", "#ffffff"),
+    secondary: t("--color-secondary", "#f000b8"),
+    accent: t("--color-accent", "#37cdbe"),
+    info: t("--color-info", "#3abff8"),
+    success: t("--color-success", "#36d399"),
+    warning: t("--color-warning", "#fbbd23"),
+    error: t("--color-error", "#f87272")
   };
 }
-function y() {
+function k() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function b() {
+function C() {
   return typeof document > "u" ? null : document.documentElement.getAttribute("data-theme");
 }
-function k() {
-  if (d()) {
-    const e = l();
-    return {
-      theme: e.theme,
-      resolvedTheme: e.resolvedTheme,
-      isDark: e.isDark,
-      setTheme: e.setTheme,
-      colors: e.colors,
-      systemTheme: e.systemTheme
-    };
-  }
-  return T();
+function x() {
+  return b() ? S() : E();
+}
+function S() {
+  const e = T(), [t, s] = u(a), n = g(!1);
+  return f(() => {
+    requestAnimationFrame(() => {
+      s(h());
+    }), n.current = !0;
+  }, [e.resolvedTheme]), l(() => ({
+    theme: e.theme,
+    resolvedTheme: e.resolvedTheme,
+    isDark: e.isDark,
+    setTheme: e.setTheme,
+    toggleTheme: e.toggleTheme,
+    colors: t,
+    systemTheme: e.systemTheme
+  }), [e.theme, e.resolvedTheme, e.isDark, e.setTheme, e.toggleTheme, t, e.systemTheme]);
 }
-function T() {
-  const [r, e] = i(() => ({
-    isDark: !1,
-    colors: a()
-  }));
-  return m(() => {
-    const t = () => {
-      const s = b(), f = y();
-      let c = !1;
-      s ? c = h.has(s) : c = f === "dark", requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          e({
-            isDark: c,
-            colors: a()
-          });
-        });
+function E() {
+  const [e, t] = u(!1), [s, n] = u(a);
+  return f(() => {
+    const r = () => {
+      const d = C(), y = k();
+      let i = !1;
+      d ? i = p.has(d) : i = y === "dark", t(i), requestAnimationFrame(() => {
+        n(h());
       });
     };
-    t();
-    const n = new MutationObserver(t);
-    n.observe(document.documentElement, {
+    r();
+    const c = new MutationObserver(r);
+    c.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme", "class"]
     });
-    const o = window.matchMedia("(prefers-color-scheme: dark)");
-    return o.addEventListener("change", t), () => {
-      n.disconnect(), o.removeEventListener("change", t);
+    const m = window.matchMedia("(prefers-color-scheme: dark)");
+    return m.addEventListener("change", r), () => {
+      c.disconnect(), m.removeEventListener("change", r);
     };
-  }, []), u(() => ({
+  }, []), l(() => ({
     theme: void 0,
     resolvedTheme: void 0,
-    isDark: r.isDark,
+    isDark: e,
     setTheme: void 0,
-    colors: r.colors,
+    toggleTheme: void 0,
+    colors: s,
     systemTheme: void 0
-  }), [r.isDark, r.colors]);
+  }), [e, s]);
 }
 export {
-  k as default,
-  k as useTheme
+  x as default,
+  x as useTheme
 };
 //# sourceMappingURL=useTheme.js.map

package/dist/hooks/useTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.js","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useMemo } from 'react'\nimport { useHasThemeProvider, useThemeContext, type ThemeColors } from '../providers/ThemeProvider'\n\nexport type { ThemeColors }\n\n// Common dark themes in DaisyUI\nconst DARK_THEMES = new Set([\n  'dark', 'synthwave', 'halloween', 'forest', 'black', 'luxury', 'dracula',\n  'business', 'night', 'coffee', 'dim', 'sunset'\n])\n\nexport interface UseThemeReturn {\n  /** The theme setting (what user selected). Only available with ThemeProvider. */\n  theme: string | undefined\n  /** The actual applied theme. Only available with ThemeProvider. */\n  resolvedTheme: string | undefined\n  /** Whether dark mode is active */\n  isDark: boolean\n  /** Set the theme. Only available with ThemeProvider. */\n  setTheme: ((theme: string) => void) | undefined\n  /** Computed theme colors as hex values */\n  colors: ThemeColors\n  /** The system preference. Only available with ThemeProvider. */\n  systemTheme: 'light' | 'dark' | undefined\n}\n\n// Convert any CSS color to hex\nfunction colorToHex(color: string): string {\n  if (typeof document === 'undefined') return '#000000'\n  const canvas = document.createElement('canvas')\n  canvas.width = canvas.height = 1\n  const ctx = canvas.getContext('2d')\n  if (!ctx) return '#000000'\n  ctx.fillStyle = color\n  ctx.fillRect(0, 0, 1, 1)\n  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data\n  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`\n}\n\nfunction getThemeColors(): ThemeColors {\n  if (typeof document === 'undefined') {\n    return {\n      background: '#ffffff',\n      foreground: '#000000',\n      primary: '#6366f1',\n      primaryContent: '#ffffff',\n      secondary: '#f000b8',\n      accent: '#37cdbe',\n      info: '#3abff8',\n      success: '#36d399',\n      warning: '#fbbd23',\n      error: '#f87272',\n    }\n  }\n\n  const style = getComputedStyle(document.documentElement)\n  const getColor = (varName: string, fallback: string): string => {\n    const value = style.getPropertyValue(varName).trim()\n    return value ? colorToHex(value) : fallback\n  }\n\n  return {\n    background: getColor('--color-base-100', '#ffffff'),\n    foreground: getColor('--color-base-content', '#000000'),\n    primary: getColor('--color-primary', '#6366f1'),\n    primaryContent: getColor('--color-primary-content', '#ffffff'),\n    secondary: getColor('--color-secondary', '#f000b8'),\n    accent: getColor('--color-accent', '#37cdbe'),\n    info: getColor('--color-info', '#3abff8'),\n    success: getColor('--color-success', '#36d399'),\n    warning: getColor('--color-warning', '#fbbd23'),\n    error: getColor('--color-error', '#f87272'),\n  }\n}\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getCurrentTheme(): string | null {\n  if (typeof document === 'undefined') return null\n  return document.documentElement.getAttribute('data-theme')\n}\n\n/**\n * Hook to detect current theme and get computed colors.\n *\n * When used within a ThemeProvider, returns full theme control including\n * setTheme, theme selection, and resolved theme.\n *\n * When used standalone (without ThemeProvider), provides read-only access\n * to isDark and colors based on the current data-theme attribute and\n * system preference.\n *\n * @example\n * // With ThemeProvider (full control)\n * const { theme, setTheme, resolvedTheme, isDark, colors } = useTheme()\n * setTheme('dark')\n * setTheme('system')\n *\n * @example\n * // Without ThemeProvider (read-only)\n * const { isDark, colors } = useTheme()\n * // colors.primary, colors.foreground, etc.\n */\nexport function useTheme(): UseThemeReturn {\n  const hasProvider = useHasThemeProvider()\n\n  // If we have a provider, use its context\n  if (hasProvider) {\n    // This is safe because hasProvider is stable after initial render\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const context = useThemeContext()\n    return {\n      theme: context.theme,\n      resolvedTheme: context.resolvedTheme,\n      isDark: context.isDark,\n      setTheme: context.setTheme,\n      colors: context.colors,\n      systemTheme: context.systemTheme,\n    }\n  }\n\n  // Standalone mode - no provider\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useThemeStandalone()\n}\n\n/**\n * Standalone theme detection (no ThemeProvider)\n */\nfunction useThemeStandalone(): UseThemeReturn {\n  const [state, setState] = useState<{ isDark: boolean; colors: ThemeColors }>(() => ({\n    isDark: false,\n    colors: getThemeColors(),\n  }))\n\n  useEffect(() => {\n    const updateTheme = () => {\n      const currentTheme = getCurrentTheme()\n      const systemTheme = getSystemTheme()\n\n      // Determine if dark based on data-theme or system preference\n      let isDark = false\n      if (currentTheme) {\n        isDark = DARK_THEMES.has(currentTheme)\n      } else {\n        isDark = systemTheme === 'dark'\n      }\n\n      // Double RAF ensures CSS has fully recalculated\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          setState({\n            isDark,\n            colors: getThemeColors(),\n          })\n        })\n      })\n    }\n\n    updateTheme()\n\n    // Watch for theme changes via attribute mutation\n    const observer = new MutationObserver(updateTheme)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme', 'class']\n    })\n\n    // Watch for system preference changes\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', updateTheme)\n\n    return () => {\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', updateTheme)\n    }\n  }, [])\n\n  return useMemo(() => ({\n    theme: undefined,\n    resolvedTheme: undefined,\n    isDark: state.isDark,\n    setTheme: undefined,\n    colors: state.colors,\n    systemTheme: undefined,\n  }), [state.isDark, state.colors])\n}\n\nexport default useTheme\n"],"names":["DARK_THEMES","colorToHex","color","canvas","ctx","r","g","b","getThemeColors","style","getColor","varName","fallback","value","getSystemTheme","getCurrentTheme","useTheme","useHasThemeProvider","context","useThemeContext","useThemeStandalone","state","setState","useState","useEffect","updateTheme","currentTheme","systemTheme","isDark","observer","mediaQuery","useMemo"],"mappings":"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"}
+{"version":3,"file":"useTheme.js","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useMemo, useRef } from 'react'\nimport { useHasThemeProvider, useThemeContext, type ThemeColors } from '../providers/ThemeProvider'\n\nexport type { ThemeColors }\n\n// Common dark themes in DaisyUI\nconst DARK_THEMES = new Set([\n  'dark', 'synthwave', 'halloween', 'forest', 'black', 'luxury', 'dracula',\n  'business', 'night', 'coffee', 'dim', 'sunset'\n])\n\nexport interface UseThemeReturn {\n  /** The theme setting (what user selected). Only available with ThemeProvider. */\n  theme: string | undefined\n  /** The actual applied theme. Only available with ThemeProvider. */\n  resolvedTheme: string | undefined\n  /** Whether dark mode is active */\n  isDark: boolean\n  /** Set the theme. Only available with ThemeProvider. */\n  setTheme: ((theme: string) => void) | undefined\n  /** Toggle between light and dark. Only available with ThemeProvider. */\n  toggleTheme: (() => void) | undefined\n  /** Computed theme colors as hex values. Computed asynchronously after theme changes. */\n  colors: ThemeColors\n  /** The system preference. Only available with ThemeProvider. */\n  systemTheme: 'light' | 'dark' | undefined\n}\n\nconst SSR_COLORS: ThemeColors = {\n  background: '#ffffff',\n  foreground: '#000000',\n  primary: '#6366f1',\n  primaryContent: '#ffffff',\n  secondary: '#f000b8',\n  accent: '#37cdbe',\n  info: '#3abff8',\n  success: '#36d399',\n  warning: '#fbbd23',\n  error: '#f87272',\n}\n\n// Persistent hidden element for DOM-based color conversion\nlet colorProbe: HTMLSpanElement | null = null\n\nfunction getColorProbe(): HTMLSpanElement {\n  if (!colorProbe) {\n    colorProbe = document.createElement('span')\n    colorProbe.style.position = 'absolute'\n    colorProbe.style.visibility = 'hidden'\n    colorProbe.style.pointerEvents = 'none'\n    colorProbe.style.width = '0'\n    colorProbe.style.height = '0'\n    colorProbe.style.overflow = 'hidden'\n    document.body.appendChild(colorProbe)\n  }\n  return colorProbe\n}\n\n/** Convert any CSS color (including oklch) to hex via getComputedStyle */\nfunction colorToHex(color: string): string {\n  const probe = getColorProbe()\n  probe.style.color = color\n  const computed = getComputedStyle(probe).color\n  // getComputedStyle returns rgb(r, g, b) or rgba(r, g, b, a)\n  const match = computed.match(/\\d+/g)\n  if (!match) return '#000000'\n  const [r, g, b] = match.map(Number)\n  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`\n}\n\nfunction computeThemeColors(): ThemeColors {\n  if (typeof document === 'undefined') return SSR_COLORS\n\n  const style = getComputedStyle(document.documentElement)\n  const getColor = (varName: string, fallback: string): string => {\n    const value = style.getPropertyValue(varName).trim()\n    return value ? colorToHex(value) : fallback\n  }\n\n  return {\n    background: getColor('--color-base-100', '#ffffff'),\n    foreground: getColor('--color-base-content', '#000000'),\n    primary: getColor('--color-primary', '#6366f1'),\n    primaryContent: getColor('--color-primary-content', '#ffffff'),\n    secondary: getColor('--color-secondary', '#f000b8'),\n    accent: getColor('--color-accent', '#37cdbe'),\n    info: getColor('--color-info', '#3abff8'),\n    success: getColor('--color-success', '#36d399'),\n    warning: getColor('--color-warning', '#fbbd23'),\n    error: getColor('--color-error', '#f87272'),\n  }\n}\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getCurrentTheme(): string | null {\n  if (typeof document === 'undefined') return null\n  return document.documentElement.getAttribute('data-theme')\n}\n\n/**\n * Hook to detect current theme and get computed colors.\n *\n * When used within a ThemeProvider, returns full theme control including\n * setTheme, theme selection, and resolved theme.\n *\n * When used standalone (without ThemeProvider), provides read-only access\n * to isDark and colors based on the current data-theme attribute and\n * system preference.\n *\n * Colors are computed asynchronously after mount and theme changes,\n * using DOM-based color conversion (no canvas).\n *\n * @example\n * // With ThemeProvider (full control)\n * const { theme, setTheme, resolvedTheme, isDark, colors } = useTheme()\n * setTheme('dark')\n *\n * @example\n * // Without ThemeProvider (read-only)\n * const { isDark, colors } = useTheme()\n * // colors.primary, colors.foreground, etc.\n */\nexport function useTheme(): UseThemeReturn {\n  const hasProvider = useHasThemeProvider()\n\n  if (hasProvider) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    return useThemeWithProvider()\n  }\n\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  return useThemeStandalone()\n}\n\n/**\n * Theme hook when ThemeProvider is present.\n */\nfunction useThemeWithProvider(): UseThemeReturn {\n  const context = useThemeContext()\n  const [colors, setColors] = useState<ThemeColors>(SSR_COLORS)\n  const mountedRef = useRef(false)\n\n  useEffect(() => {\n    // On mount and when theme changes, compute colors after CSS has applied\n    requestAnimationFrame(() => {\n      setColors(computeThemeColors())\n    })\n    mountedRef.current = true\n  }, [context.resolvedTheme])\n\n  return useMemo(() => ({\n    theme: context.theme,\n    resolvedTheme: context.resolvedTheme,\n    isDark: context.isDark,\n    setTheme: context.setTheme,\n    toggleTheme: context.toggleTheme,\n    colors,\n    systemTheme: context.systemTheme,\n  }), [context.theme, context.resolvedTheme, context.isDark, context.setTheme, context.toggleTheme, colors, context.systemTheme])\n}\n\n/**\n * Standalone theme detection (no ThemeProvider)\n */\nfunction useThemeStandalone(): UseThemeReturn {\n  const [isDark, setIsDark] = useState(false)\n  const [colors, setColors] = useState<ThemeColors>(SSR_COLORS)\n\n  useEffect(() => {\n    const updateTheme = () => {\n      const currentTheme = getCurrentTheme()\n      const systemTheme = getSystemTheme()\n\n      let dark = false\n      if (currentTheme) {\n        dark = DARK_THEMES.has(currentTheme)\n      } else {\n        dark = systemTheme === 'dark'\n      }\n\n      setIsDark(dark)\n\n      // Compute colors after CSS has applied\n      requestAnimationFrame(() => {\n        setColors(computeThemeColors())\n      })\n    }\n\n    updateTheme()\n\n    const observer = new MutationObserver(updateTheme)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme', 'class']\n    })\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', updateTheme)\n\n    return () => {\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', updateTheme)\n    }\n  }, [])\n\n  return useMemo(() => ({\n    theme: undefined,\n    resolvedTheme: undefined,\n    isDark,\n    setTheme: undefined,\n    toggleTheme: undefined,\n    colors,\n    systemTheme: undefined,\n  }), [isDark, colors])\n}\n\nexport default useTheme\n"],"names":["DARK_THEMES","SSR_COLORS","colorProbe","getColorProbe","colorToHex","color","probe","match","g","b","computeThemeColors","style","getColor","varName","fallback","value","getSystemTheme","getCurrentTheme","useTheme","useHasThemeProvider","useThemeWithProvider","useThemeStandalone","context","useThemeContext","colors","setColors","useState","mountedRef","useRef","useEffect","useMemo","isDark","setIsDark","updateTheme","currentTheme","systemTheme","dark","observer","mediaQuery"],"mappings":"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"}

package/dist/providers/ThemeProvider.d.ts

@@ -33,8 +33,8 @@ export interface ThemeContextValue {
     isDark: boolean;
     /** Set the theme */
     setTheme: (theme: string) => void;
-    /** Computed theme colors as hex values (for canvas/non-CSS contexts) */
-    colors: ThemeColors;
+    /** Toggle between light and dark */
+    toggleTheme: () => void;
     /** The system preference ("light" or "dark") */
     systemTheme: 'light' | 'dark';
 }

package/dist/providers/ThemeProvider.js

@@ -1,6 +1,6 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useState as d, useMemo as m, useCallback as k, useEffect as l, createContext as P, useContext as v } from "react";
-const A = /* @__PURE__ */ new Set([
+import { jsx as M } from "react/jsx-runtime";
+import { useState as S, useMemo as m, useEffect as l, useCallback as y, createContext as P, useContext as g } from "react";
+const C = /* @__PURE__ */ new Set([
   "dark",
   "synthwave",
   "halloween",
@@ -13,52 +13,11 @@ const A = /* @__PURE__ */ new Set([
   "coffee",
   "dim",
   "sunset"
-]), h = P(void 0);
-function L(t) {
-  if (typeof document > "u") return "#000000";
-  const e = document.createElement("canvas");
-  e.width = e.height = 1;
-  const n = e.getContext("2d");
-  if (!n) return "#000000";
-  n.fillStyle = t, n.fillRect(0, 0, 1, 1);
-  const [f, o, i] = n.getImageData(0, 0, 1, 1).data;
-  return `#${((1 << 24) + (f << 16) + (o << 8) + i).toString(16).slice(1)}`;
-}
-function b() {
-  if (typeof document > "u")
-    return {
-      background: "#ffffff",
-      foreground: "#000000",
-      primary: "#6366f1",
-      primaryContent: "#ffffff",
-      secondary: "#f000b8",
-      accent: "#37cdbe",
-      info: "#3abff8",
-      success: "#36d399",
-      warning: "#fbbd23",
-      error: "#f87272"
-    };
-  const t = getComputedStyle(document.documentElement), e = (n, f) => {
-    const o = t.getPropertyValue(n).trim();
-    return o ? L(o) : f;
-  };
-  return {
-    background: e("--color-base-100", "#ffffff"),
-    foreground: e("--color-base-content", "#000000"),
-    primary: e("--color-primary", "#6366f1"),
-    primaryContent: e("--color-primary-content", "#ffffff"),
-    secondary: e("--color-secondary", "#f000b8"),
-    accent: e("--color-accent", "#37cdbe"),
-    info: e("--color-info", "#3abff8"),
-    success: e("--color-success", "#36d399"),
-    warning: e("--color-warning", "#fbbd23"),
-    error: e("--color-error", "#f87272")
-  };
-}
-function M() {
+]), w = P(void 0);
+function k() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function H(t) {
+function T(t) {
   if (!t || typeof window > "u") return null;
   try {
     return localStorage.getItem(t);
@@ -66,65 +25,64 @@ function H(t) {
     return null;
   }
 }
-function I(t, e) {
+function b(t, f) {
   if (!(!t || typeof window > "u"))
     try {
-      localStorage.setItem(t, e);
+      localStorage.setItem(t, f);
     } catch {
     }
 }
-function F({
+function V({
   children: t,
-  defaultTheme: e = "system",
-  storageKey: n = "asterui-theme",
-  lightTheme: f = "light",
-  darkTheme: o = "dark",
-  isDarkTheme: i
+  defaultTheme: f = "system",
+  storageKey: r = "asterui-theme",
+  lightTheme: c = "light",
+  darkTheme: d = "dark",
+  isDarkTheme: s
 }) {
-  const [u, w] = d(() => H(n) || e), [a, C] = d(M), c = m(() => u === "system" ? a === "dark" ? o : f : u, [u, a, f, o]), g = m(() => i ? i(c) : A.has(c), [c, i]), [y, S] = d(b), p = k((r) => {
-    w(r), I(n, r);
-  }, [n]);
+  const [u, I] = S(k), [i, a] = S(() => T(r) || f), o = m(() => i === "system" ? u === "dark" ? d : c : i, [i, u, c, d]), h = m(() => s ? s(o) : C.has(o), [o, s]);
   l(() => {
-    typeof document > "u" || (document.documentElement.setAttribute("data-theme", c), requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
-        S(b());
-      });
-    }));
-  }, [c]), l(() => {
+    typeof document > "u" || document.documentElement.setAttribute("data-theme", o);
+  }, [o]), l(() => {
     if (typeof window > "u") return;
-    const r = window.matchMedia("(prefers-color-scheme: dark)"), s = (T) => {
-      C(T.matches ? "dark" : "light");
-    };
-    return r.addEventListener("change", s), () => r.removeEventListener("change", s);
+    const e = window.matchMedia("(prefers-color-scheme: dark)"), n = (x) => I(x.matches ? "dark" : "light");
+    return e.addEventListener("change", n), () => e.removeEventListener("change", n);
   }, []), l(() => {
-    if (!n || typeof window > "u") return;
-    const r = (s) => {
-      s.key === n && s.newValue && w(s.newValue);
+    if (!r || typeof window > "u") return;
+    const e = (n) => {
+      n.key === r && n.newValue && a(n.newValue);
     };
-    return window.addEventListener("storage", r), () => window.removeEventListener("storage", r);
-  }, [n]);
-  const x = m(() => ({
-    theme: u,
-    resolvedTheme: c,
-    isDark: g,
-    setTheme: p,
-    colors: y,
-    systemTheme: a
-  }), [u, c, g, p, y, a]);
-  return /* @__PURE__ */ E(h.Provider, { value: x, children: t });
+    return window.addEventListener("storage", e), () => window.removeEventListener("storage", e);
+  }, [r]);
+  const v = y((e) => {
+    a(e), b(r, e);
+  }, [r]), p = y(() => {
+    a((e) => {
+      const n = e === "system" ? u === "dark" ? d : c : e, E = (s ? s(n) : C.has(n)) ? c : d;
+      return b(r, E), E;
+    });
+  }, [u, c, d, s, r]), L = m(() => ({
+    theme: i,
+    resolvedTheme: o,
+    isDark: h,
+    setTheme: v,
+    toggleTheme: p,
+    systemTheme: u
+  }), [i, o, h, v, p, u]);
+  return /* @__PURE__ */ M(w.Provider, { value: L, children: t });
 }
-function R() {
-  const t = v(h);
+function j() {
+  const t = g(w);
   if (!t)
     throw new Error("useThemeContext must be used within a ThemeProvider");
   return t;
 }
-function j() {
-  return v(h) !== void 0;
+function q() {
+  return g(w) !== void 0;
 }
 export {
-  F as ThemeProvider,
-  j as useHasThemeProvider,
-  R as useThemeContext
+  V as ThemeProvider,
+  q as useHasThemeProvider,
+  j as useThemeContext
 };
 //# sourceMappingURL=ThemeProvider.js.map

package/dist/providers/ThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.js","sources":["../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react'\n\n// Common dark themes in DaisyUI\nconst DARK_THEMES = new Set([\n  'dark', 'synthwave', 'halloween', 'forest', 'black', 'luxury', 'dracula',\n  'business', 'night', 'coffee', 'dim', 'sunset'\n])\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode\n  /** Default theme. Use \"system\" to follow browser preference. */\n  defaultTheme?: string\n  /** localStorage key for persisting theme. Set to false to disable persistence. */\n  storageKey?: string | false\n  /** Light theme to use when system preference is light */\n  lightTheme?: string\n  /** Dark theme to use when system preference is dark */\n  darkTheme?: string\n  /** Custom function to determine if a theme is dark */\n  isDarkTheme?: (theme: string) => boolean\n}\n\nexport interface ThemeColors {\n  background: string\n  foreground: string\n  primary: string\n  primaryContent: string\n  secondary: string\n  accent: string\n  info: string\n  success: string\n  warning: string\n  error: string\n}\n\nexport interface ThemeContextValue {\n  /** The theme setting (what user selected: \"system\", \"light\", \"dark\", etc.) */\n  theme: string\n  /** The actual applied theme after resolving \"system\" */\n  resolvedTheme: string\n  /** Whether the resolved theme is dark */\n  isDark: boolean\n  /** Set the theme */\n  setTheme: (theme: string) => void\n  /** Computed theme colors as hex values (for canvas/non-CSS contexts) */\n  colors: ThemeColors\n  /** The system preference (\"light\" or \"dark\") */\n  systemTheme: 'light' | 'dark'\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\n// Convert any CSS color to hex\nfunction colorToHex(color: string): string {\n  if (typeof document === 'undefined') return '#000000'\n  const canvas = document.createElement('canvas')\n  canvas.width = canvas.height = 1\n  const ctx = canvas.getContext('2d')\n  if (!ctx) return '#000000'\n  ctx.fillStyle = color\n  ctx.fillRect(0, 0, 1, 1)\n  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data\n  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`\n}\n\nfunction getThemeColors(): ThemeColors {\n  if (typeof document === 'undefined') {\n    return {\n      background: '#ffffff',\n      foreground: '#000000',\n      primary: '#6366f1',\n      primaryContent: '#ffffff',\n      secondary: '#f000b8',\n      accent: '#37cdbe',\n      info: '#3abff8',\n      success: '#36d399',\n      warning: '#fbbd23',\n      error: '#f87272',\n    }\n  }\n\n  const style = getComputedStyle(document.documentElement)\n  const getColor = (varName: string, fallback: string): string => {\n    const value = style.getPropertyValue(varName).trim()\n    return value ? colorToHex(value) : fallback\n  }\n\n  return {\n    background: getColor('--color-base-100', '#ffffff'),\n    foreground: getColor('--color-base-content', '#000000'),\n    primary: getColor('--color-primary', '#6366f1'),\n    primaryContent: getColor('--color-primary-content', '#ffffff'),\n    secondary: getColor('--color-secondary', '#f000b8'),\n    accent: getColor('--color-accent', '#37cdbe'),\n    info: getColor('--color-info', '#3abff8'),\n    success: getColor('--color-success', '#36d399'),\n    warning: getColor('--color-warning', '#fbbd23'),\n    error: getColor('--color-error', '#f87272'),\n  }\n}\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(key: string | false): string | null {\n  if (!key || typeof window === 'undefined') return null\n  try {\n    return localStorage.getItem(key)\n  } catch {\n    return null\n  }\n}\n\nfunction storeTheme(key: string | false, theme: string): void {\n  if (!key || typeof window === 'undefined') return\n  try {\n    localStorage.setItem(key, theme)\n  } catch {\n    // Ignore storage errors\n  }\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'asterui-theme',\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  isDarkTheme,\n}: ThemeProviderProps) {\n  // Initialize theme from storage or default\n  const [theme, setThemeState] = useState<string>(() => {\n    const stored = getStoredTheme(storageKey)\n    return stored || defaultTheme\n  })\n\n  // Track system preference\n  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme)\n\n  // Resolve the actual theme\n  const resolvedTheme = useMemo(() => {\n    if (theme === 'system') {\n      return systemTheme === 'dark' ? darkTheme : lightTheme\n    }\n    return theme\n  }, [theme, systemTheme, lightTheme, darkTheme])\n\n  // Determine if dark\n  const isDark = useMemo(() => {\n    if (isDarkTheme) return isDarkTheme(resolvedTheme)\n    return DARK_THEMES.has(resolvedTheme)\n  }, [resolvedTheme, isDarkTheme])\n\n  // Track colors (updated after theme applies)\n  const [colors, setColors] = useState<ThemeColors>(getThemeColors)\n\n  // Set theme function\n  const setTheme = useCallback((newTheme: string) => {\n    setThemeState(newTheme)\n    storeTheme(storageKey, newTheme)\n  }, [storageKey])\n\n  // Apply theme to document\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n    document.documentElement.setAttribute('data-theme', resolvedTheme)\n\n    // Double RAF ensures CSS has fully recalculated after attribute change\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        setColors(getThemeColors())\n      })\n    })\n  }, [resolvedTheme])\n\n  // Listen for system preference changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    const handleChange = (e: MediaQueryListEvent) => {\n      setSystemTheme(e.matches ? 'dark' : 'light')\n    }\n\n    mediaQuery.addEventListener('change', handleChange)\n    return () => mediaQuery.removeEventListener('change', handleChange)\n  }, [])\n\n  // Listen for storage changes (cross-tab sync)\n  useEffect(() => {\n    if (!storageKey || typeof window === 'undefined') return\n\n    const handleStorage = (e: StorageEvent) => {\n      if (e.key === storageKey && e.newValue) {\n        setThemeState(e.newValue)\n      }\n    }\n\n    window.addEventListener('storage', handleStorage)\n    return () => window.removeEventListener('storage', handleStorage)\n  }, [storageKey])\n\n  const value = useMemo<ThemeContextValue>(() => ({\n    theme,\n    resolvedTheme,\n    isDark,\n    setTheme,\n    colors,\n    systemTheme,\n  }), [theme, resolvedTheme, isDark, setTheme, colors, systemTheme])\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Hook to access theme context.\n * Must be used within a ThemeProvider.\n */\nexport function useThemeContext(): ThemeContextValue {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n\n/**\n * Check if ThemeProvider is present in the tree.\n */\nexport function useHasThemeProvider(): boolean {\n  return useContext(ThemeContext) !== undefined\n}\n"],"names":["DARK_THEMES","ThemeContext","createContext","colorToHex","color","canvas","ctx","r","g","b","getThemeColors","style","getColor","varName","fallback","value","getSystemTheme","getStoredTheme","key","storeTheme","theme","ThemeProvider","children","defaultTheme","storageKey","lightTheme","darkTheme","isDarkTheme","setThemeState","useState","systemTheme","setSystemTheme","resolvedTheme","useMemo","isDark","colors","setColors","setTheme","useCallback","newTheme","useEffect","mediaQuery","handleChange","e","handleStorage","jsx","useThemeContext","context","useContext","useHasThemeProvider"],"mappings":"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"}
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/providers/ThemeProvider.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react'\n\n// Common dark themes in DaisyUI\nconst DARK_THEMES = new Set([\n  'dark', 'synthwave', 'halloween', 'forest', 'black', 'luxury', 'dracula',\n  'business', 'night', 'coffee', 'dim', 'sunset'\n])\n\nexport interface ThemeProviderProps {\n  children: React.ReactNode\n  /** Default theme. Use \"system\" to follow browser preference. */\n  defaultTheme?: string\n  /** localStorage key for persisting theme. Set to false to disable persistence. */\n  storageKey?: string | false\n  /** Light theme to use when system preference is light */\n  lightTheme?: string\n  /** Dark theme to use when system preference is dark */\n  darkTheme?: string\n  /** Custom function to determine if a theme is dark */\n  isDarkTheme?: (theme: string) => boolean\n}\n\nexport interface ThemeColors {\n  background: string\n  foreground: string\n  primary: string\n  primaryContent: string\n  secondary: string\n  accent: string\n  info: string\n  success: string\n  warning: string\n  error: string\n}\n\nexport interface ThemeContextValue {\n  /** The theme setting (what user selected: \"system\", \"light\", \"dark\", etc.) */\n  theme: string\n  /** The actual applied theme after resolving \"system\" */\n  resolvedTheme: string\n  /** Whether the resolved theme is dark */\n  isDark: boolean\n  /** Set the theme */\n  setTheme: (theme: string) => void\n  /** Toggle between light and dark */\n  toggleTheme: () => void\n  /** The system preference (\"light\" or \"dark\") */\n  systemTheme: 'light' | 'dark'\n}\n\nconst ThemeContext = createContext<ThemeContextValue | undefined>(undefined)\n\nfunction getSystemTheme(): 'light' | 'dark' {\n  if (typeof window === 'undefined') return 'light'\n  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'\n}\n\nfunction getStoredTheme(key: string | false): string | null {\n  if (!key || typeof window === 'undefined') return null\n  try {\n    return localStorage.getItem(key)\n  } catch {\n    return null\n  }\n}\n\nfunction storeTheme(key: string | false, theme: string): void {\n  if (!key || typeof window === 'undefined') return\n  try {\n    localStorage.setItem(key, theme)\n  } catch {\n    // Ignore storage errors\n  }\n}\n\nexport function ThemeProvider({\n  children,\n  defaultTheme = 'system',\n  storageKey = 'asterui-theme',\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  isDarkTheme,\n}: ThemeProviderProps) {\n  const [systemTheme, setSystemTheme] = useState<'light' | 'dark'>(getSystemTheme)\n\n  const [theme, setThemeState] = useState<string>(() => {\n    return getStoredTheme(storageKey) || defaultTheme\n  })\n\n  const resolvedTheme = useMemo(() => {\n    if (theme === 'system') {\n      return systemTheme === 'dark' ? darkTheme : lightTheme\n    }\n    return theme\n  }, [theme, systemTheme, lightTheme, darkTheme])\n\n  const isDark = useMemo(() => {\n    if (isDarkTheme) return isDarkTheme(resolvedTheme)\n    return DARK_THEMES.has(resolvedTheme)\n  }, [resolvedTheme, isDarkTheme])\n\n  // Set data-theme on <html>\n  useEffect(() => {\n    if (typeof document === 'undefined') return\n    document.documentElement.setAttribute('data-theme', resolvedTheme)\n  }, [resolvedTheme])\n\n  // Listen for system preference changes\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n    const mq = window.matchMedia('(prefers-color-scheme: dark)')\n    const handler = (e: MediaQueryListEvent) => setSystemTheme(e.matches ? 'dark' : 'light')\n    mq.addEventListener('change', handler)\n    return () => mq.removeEventListener('change', handler)\n  }, [])\n\n  // Listen for storage changes (cross-tab sync)\n  useEffect(() => {\n    if (!storageKey || typeof window === 'undefined') return\n    const handler = (e: StorageEvent) => {\n      if (e.key === storageKey && e.newValue) {\n        setThemeState(e.newValue)\n      }\n    }\n    window.addEventListener('storage', handler)\n    return () => window.removeEventListener('storage', handler)\n  }, [storageKey])\n\n  const setTheme = useCallback((t: string) => {\n    setThemeState(t)\n    storeTheme(storageKey, t)\n  }, [storageKey])\n\n  const toggleTheme = useCallback(() => {\n    setThemeState((current) => {\n      const resolved = current === 'system'\n        ? (systemTheme === 'dark' ? darkTheme : lightTheme)\n        : current\n      const currentIsDark = isDarkTheme ? isDarkTheme(resolved) : DARK_THEMES.has(resolved)\n      const next = currentIsDark ? lightTheme : darkTheme\n      storeTheme(storageKey, next)\n      return next\n    })\n  }, [systemTheme, lightTheme, darkTheme, isDarkTheme, storageKey])\n\n  const value = useMemo<ThemeContextValue>(() => ({\n    theme, resolvedTheme, isDark, setTheme, toggleTheme, systemTheme,\n  }), [theme, resolvedTheme, isDark, setTheme, toggleTheme, systemTheme])\n\n  return (\n    <ThemeContext.Provider value={value}>\n      {children}\n    </ThemeContext.Provider>\n  )\n}\n\n/**\n * Hook to access theme context.\n * Must be used within a ThemeProvider.\n */\nexport function useThemeContext(): ThemeContextValue {\n  const context = useContext(ThemeContext)\n  if (!context) {\n    throw new Error('useThemeContext must be used within a ThemeProvider')\n  }\n  return context\n}\n\n/**\n * Check if ThemeProvider is present in the tree.\n */\nexport function useHasThemeProvider(): boolean {\n  return useContext(ThemeContext) !== undefined\n}\n"],"names":["DARK_THEMES","ThemeContext","createContext","getSystemTheme","getStoredTheme","key","storeTheme","theme","ThemeProvider","children","defaultTheme","storageKey","lightTheme","darkTheme","isDarkTheme","systemTheme","setSystemTheme","useState","setThemeState","resolvedTheme","useMemo","isDark","useEffect","mq","handler","e","setTheme","useCallback","t","toggleTheme","current","resolved","next","value","jsx","useThemeContext","context","useContext","useHasThemeProvider"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aster-ui/prefixed",
-  "version": "0.12.87",
+  "version": "0.12.89",
   "description": "React UI component library with DaisyUI (prefixed classes)",
   "homepage": "https://asterui.com",
   "repository": {