@aster-ui/prefixed 0.12.88 → 0.12.89

package/dist/hooks/useTheme.d.ts

@@ -11,7 +11,7 @@ export interface UseThemeReturn {
     setTheme: ((theme: string) => void) | undefined;
     /** Toggle between light and dark. Only available with ThemeProvider. */
     toggleTheme: (() => void) | undefined;
-    /** Computed theme colors as hex values. Lazy — only computed when accessed. */
+    /** Computed theme colors as hex values. Computed asynchronously after theme changes. */
     colors: ThemeColors;
     /** The system preference. Only available with ThemeProvider. */
     systemTheme: 'light' | 'dark' | undefined;
@@ -26,8 +26,8 @@ export interface UseThemeReturn {
  * to isDark and colors based on the current data-theme attribute and
  * system preference.
  *
- * Colors are lazy — only computed (via canvas) when you access them.
- * Components that only need isDark/setTheme pay no cost for color computation.
+ * Colors are computed asynchronously after mount and theme changes,
+ * using DOM-based color conversion (no canvas).
  *
  * @example
  * // With ThemeProvider (full control)

package/dist/hooks/useTheme.js

@@ -1,6 +1,6 @@
-import { useMemo as i, useState as d, useEffect as l } from "react";
-import { useHasThemeProvider as h, useThemeContext as y } from "../providers/ThemeProvider.js";
-const g = /* @__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,120 +13,106 @@ const g = /* @__PURE__ */ new Set([
   "coffee",
   "dim",
   "sunset"
-]);
-function b(o) {
-  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 = o, t.fillRect(0, 0, 1, 1);
-  const [r, n, s] = t.getImageData(0, 0, 1, 1).data;
-  return `#${((1 << 24) + (r << 16) + (n << 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 o = getComputedStyle(document.documentElement), e = (t, r) => {
-    const n = o.getPropertyValue(t).trim();
-    return n ? b(n) : r;
+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 T() {
+function k() {
   return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function f() {
+function C() {
   return typeof document > "u" ? null : document.documentElement.getAttribute("data-theme");
 }
-function u(o) {
-  let e = null;
-  return new Proxy({}, {
-    get(t, r) {
-      return e || (e = a()), e[r];
-    },
-    ownKeys() {
-      return e || (e = a()), Object.keys(e);
-    },
-    getOwnPropertyDescriptor(t, r) {
-      if (e || (e = a()), r in e)
-        return { configurable: !0, enumerable: !0, value: e[r] };
-    }
-  });
+function x() {
+  return b() ? S() : E();
 }
-function k() {
-  if (h()) {
-    const e = y(), t = i(() => u(e.resolvedTheme), [e.resolvedTheme]);
-    return {
-      theme: e.theme,
-      resolvedTheme: e.resolvedTheme,
-      isDark: e.isDark,
-      setTheme: e.setTheme,
-      toggleTheme: e.toggleTheme,
-      colors: t,
-      systemTheme: e.systemTheme
-    };
-  }
-  return v();
+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 v() {
-  const [o, e] = d(() => ({
-    isDark: !1,
-    themeKey: f()
-  }));
-  return l(() => {
-    const t = () => {
-      const s = f(), m = T();
-      let c = !1;
-      s ? c = g.has(s) : c = m === "dark", e({ isDark: c, themeKey: s });
+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 r = new MutationObserver(t);
-    r.observe(document.documentElement, {
+    r();
+    const c = new MutationObserver(r);
+    c.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme", "class"]
     });
-    const n = window.matchMedia("(prefers-color-scheme: dark)");
-    return n.addEventListener("change", t), () => {
-      r.disconnect(), n.removeEventListener("change", t);
-    };
-  }, []), i(() => {
-    const t = u(o.themeKey);
-    return {
-      theme: void 0,
-      resolvedTheme: void 0,
-      isDark: o.isDark,
-      setTheme: void 0,
-      toggleTheme: void 0,
-      colors: t,
-      systemTheme: void 0
+    const m = window.matchMedia("(prefers-color-scheme: dark)");
+    return m.addEventListener("change", r), () => {
+      c.disconnect(), m.removeEventListener("change", r);
     };
-  }, [o.isDark, o.themeKey]);
+  }, []), l(() => ({
+    theme: void 0,
+    resolvedTheme: void 0,
+    isDark: e,
+    setTheme: void 0,
+    toggleTheme: void 0,
+    colors: s,
+    systemTheme: void 0
+  }), [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  /** Toggle between light and dark. Only available with ThemeProvider. */\n  toggleTheme: (() => void) | undefined\n  /** Computed theme colors as hex values. Lazy — only computed when accessed. */\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 via canvas\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 * Create a lazy colors object that only computes hex values when accessed.\n * Returns a new object each time so referential identity tracks the dep key.\n */\nfunction createLazyColors(depKey: unknown): ThemeColors {\n  let cached: ThemeColors | null = null\n  // depKey is used only to invalidate the closure identity\n  void depKey\n  return new Proxy({} as ThemeColors, {\n    get(_target, prop: string) {\n      if (!cached) cached = getThemeColors()\n      return cached[prop as keyof ThemeColors]\n    },\n    ownKeys() {\n      if (!cached) cached = getThemeColors()\n      return Object.keys(cached)\n    },\n    getOwnPropertyDescriptor(_target, prop) {\n      if (!cached) cached = getThemeColors()\n      if (prop in cached) {\n        return { configurable: true, enumerable: true, value: cached[prop as keyof ThemeColors] }\n      }\n    },\n  })\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 lazy — only computed (via canvas) when you access them.\n * Components that only need isDark/setTheme pay no cost for color computation.\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    const context = useThemeContext()\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    const lazyColors = useMemo(() => createLazyColors(context.resolvedTheme), [context.resolvedTheme])\n    return {\n      theme: context.theme,\n      resolvedTheme: context.resolvedTheme,\n      isDark: context.isDark,\n      setTheme: context.setTheme,\n      toggleTheme: context.toggleTheme,\n      colors: lazyColors,\n      systemTheme: context.systemTheme,\n    }\n  }\n\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; themeKey: string | null }>(() => ({\n    isDark: false,\n    themeKey: getCurrentTheme(),\n  }))\n\n  useEffect(() => {\n    const updateTheme = () => {\n      const currentTheme = getCurrentTheme()\n      const systemTheme = getSystemTheme()\n\n      let isDark = false\n      if (currentTheme) {\n        isDark = DARK_THEMES.has(currentTheme)\n      } else {\n        isDark = systemTheme === 'dark'\n      }\n\n      setState({ isDark, themeKey: currentTheme })\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    const lazyColors = createLazyColors(state.themeKey)\n    return {\n      theme: undefined,\n      resolvedTheme: undefined,\n      isDark: state.isDark,\n      setTheme: undefined,\n      toggleTheme: undefined,\n      colors: lazyColors,\n      systemTheme: undefined,\n    }\n  }, [state.isDark, state.themeKey])\n}\n\nexport default useTheme\n"],"names":["DARK_THEMES","colorToHex","color","canvas","ctx","g","b","getThemeColors","style","getColor","varName","fallback","value","getSystemTheme","getCurrentTheme","createLazyColors","depKey","cached","_target","prop","useTheme","useHasThemeProvider","context","useThemeContext","lazyColors","useMemo","useThemeStandalone","state","setState","useState","useEffect","updateTheme","currentTheme","systemTheme","isDark","observer","mediaQuery"],"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/package.json

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