asterui 0.12.54 → 0.12.56

package/dist/components/ThemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeProvider.js","sources":["../../src/components/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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"}

package/dist/components/Watermark.js

@@ -1,120 +1,112 @@
-import { jsxs as z, jsx as R } from "react/jsx-runtime";
-import { useState as V, useMemo as P, useEffect as Y } from "react";
-const D = "asterui", O = 0.22, U = (t, c = O) => {
-  const r = `rgba(0,0,0,${c})`;
-  if (t && t.includes("var(--bc")) {
-    if (typeof window < "u") {
-      const a = getComputedStyle(document.documentElement).getPropertyValue("--bc").trim(), g = getComputedStyle(document.body).getPropertyValue("--bc").trim(), m = a || g;
-      if (m)
-        return t.replace(/var\(--bc\)/g, m);
-    }
-    return r;
-  }
-  if (t) return t;
-  if (typeof window > "u") return r;
-  const i = getComputedStyle(document.documentElement).getPropertyValue("--bc").trim(), d = getComputedStyle(document.body).getPropertyValue("--bc").trim(), s = i || d;
-  return s ? `hsl(${s} / ${c})` : r;
-}, M = (t, c) => {
-  const r = t?.fontSize ?? 16;
+import { jsxs as R, jsx as Y } from "react/jsx-runtime";
+import { useState as D, useMemo as A, useEffect as M } from "react";
+import { useTheme as U } from "../hooks/useTheme.js";
+const B = "asterui", X = 0.22;
+function _(r, l) {
+  const n = Math.round(l * 255).toString(16).padStart(2, "0");
+  return r + n;
+}
+const K = (r, l) => {
+  const n = r?.fontSize ?? 16;
   return {
-    color: c,
-    fontSize: r,
-    fontWeight: t?.fontWeight ?? 600,
-    fontStyle: t?.fontStyle ?? "normal",
-    fontFamily: t?.fontFamily ?? "sans-serif",
-    lineHeight: t?.lineHeight ?? r * 1.2
+    color: l,
+    fontSize: n,
+    fontWeight: r?.fontWeight ?? 600,
+    fontStyle: r?.fontStyle ?? "normal",
+    fontFamily: r?.fontFamily ?? "sans-serif",
+    lineHeight: r?.lineHeight ?? n * 1.2
   };
-}, X = ({
-  children: t,
-  className: c = "",
-  style: r,
-  content: i,
-  image: d,
-  width: s = 120,
-  height: a = 64,
-  gap: g,
-  offset: m,
-  rotate: T = -22,
-  zIndex: W = 1e3,
-  font: S,
-  ...A
+}, q = ({
+  children: r,
+  className: l = "",
+  style: n,
+  content: c,
+  image: v,
+  width: a = 120,
+  height: i = 64,
+  gap: E,
+  offset: k,
+  rotate: F = -22,
+  zIndex: I = 1e3,
+  font: y,
+  ...b
 }) => {
-  const [y, $] = V(null), u = g?.[0] ?? 120, f = g?.[1] ?? 120, B = m?.[0] ?? u / 2, F = m?.[1] ?? f / 2, E = P(
-    () => typeof i == "string" ? [i] : Array.isArray(i) ? i : [D],
-    [i]
-  ), k = U(S?.color), l = P(
-    () => M(S, k),
-    [S, k]
-  ), h = Math.PI / 180 * T, I = E.join("|");
-  Y(() => {
+  const [m, L] = D(null), d = E?.[0] ?? 120, f = E?.[1] ?? 120, H = k?.[0] ?? d / 2, N = k?.[1] ?? f / 2, { colors: P } = U(), h = A(
+    () => typeof c == "string" ? [c] : Array.isArray(c) ? c : [B],
+    [c]
+  ), W = y?.color ?? _(P.foreground, X), s = A(
+    () => K(y, W),
+    [y, W]
+  ), S = Math.PI / 180 * F, j = h.join("|");
+  M(() => {
     if (typeof window > "u") return;
-    let p = !1;
-    const n = window.devicePixelRatio || 1, w = s + u, C = a + f, v = document.createElement("canvas");
-    v.width = w * n, v.height = C * n;
-    const e = v.getContext("2d");
+    let u = !1;
+    const o = window.devicePixelRatio || 1, $ = a + d, T = i + f, g = document.createElement("canvas");
+    g.width = $ * o, g.height = T * o;
+    const e = g.getContext("2d");
     if (!e) return;
-    const L = () => {
-      const o = v.toDataURL();
-      p || $({ url: o, width: w, height: C });
-    }, N = () => {
-      e.save(), e.translate((u / 2 + s / 2) * n, (f / 2 + a / 2) * n), e.rotate(h), e.fillStyle = l.color, e.textAlign = "center", e.textBaseline = "middle", e.font = `${l.fontStyle} normal ${l.fontWeight} ${l.fontSize * n}px ${l.fontFamily}`;
-      const o = l.lineHeight * n, b = -((E.length - 1) * o) / 2;
-      E.forEach((x, j) => {
-        e.fillText(x, 0, b + j * o);
+    const w = () => {
+      const t = g.toDataURL();
+      u || L({ url: t, width: $, height: T });
+    }, C = () => {
+      e.save(), e.translate((d / 2 + a / 2) * o, (f / 2 + i / 2) * o), e.rotate(S), e.fillStyle = s.color, e.textAlign = "center", e.textBaseline = "middle", e.font = `${s.fontStyle} normal ${s.fontWeight} ${s.fontSize * o}px ${s.fontFamily}`;
+      const t = s.lineHeight * o, p = -((h.length - 1) * t) / 2;
+      h.forEach((x, O) => {
+        e.fillText(x, 0, p + O * t);
       }), e.restore();
     };
-    if (d) {
-      const o = new Image();
-      o.crossOrigin = "anonymous", o.referrerPolicy = "no-referrer";
-      const b = () => {
-        e.save(), e.translate((u / 2 + s / 2) * n, (f / 2 + a / 2) * n), e.rotate(h), e.drawImage(
-          o,
-          -s / 2 * n,
-          -a / 2 * n,
-          s * n,
-          a * n
-        ), e.restore(), L();
+    if (v) {
+      const t = new Image();
+      t.crossOrigin = "anonymous", t.referrerPolicy = "no-referrer";
+      const p = () => {
+        e.save(), e.translate((d / 2 + a / 2) * o, (f / 2 + i / 2) * o), e.rotate(S), e.drawImage(
+          t,
+          -a / 2 * o,
+          -i / 2 * o,
+          a * o,
+          i * o
+        ), e.restore(), w();
       }, x = () => {
-        p || $(null);
+        u || L(null);
       };
-      return o.addEventListener("load", b), o.addEventListener("error", x), o.src = d, () => {
-        p = !0, o.removeEventListener("load", b), o.removeEventListener("error", x);
+      return t.addEventListener("load", p), t.addEventListener("error", x), t.src = v, () => {
+        u = !0, t.removeEventListener("load", p), t.removeEventListener("error", x);
       };
     } else
-      N(), L();
+      C(), w();
     return () => {
-      p = !0;
+      u = !0;
     };
   }, [
-    l,
-    u,
-    f,
-    a,
+    s,
     d,
-    h,
-    I,
-    s
+    f,
+    i,
+    v,
+    S,
+    j,
+    a
   ]);
-  const H = ["relative", c].filter(Boolean).join(" ");
-  return /* @__PURE__ */ z(
+  const z = ["relative", l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ R(
     "div",
     {
-      className: H,
-      style: { position: r?.position ?? "relative", ...r },
-      ...A,
+      className: z,
+      style: { position: n?.position ?? "relative", ...n },
+      ...b,
       children: [
-        t,
-        y && /* @__PURE__ */ R(
+        r,
+        m && /* @__PURE__ */ Y(
           "div",
           {
             "aria-hidden": !0,
             className: "pointer-events-none absolute inset-0",
             style: {
-              zIndex: W,
-              backgroundImage: `url(${y.url})`,
+              zIndex: I,
+              backgroundImage: `url(${m.url})`,
               backgroundRepeat: "repeat",
-              backgroundSize: `${y.width}px ${y.height}px`,
-              backgroundPosition: `${B}px ${F}px`
+              backgroundSize: `${m.width}px ${m.height}px`,
+              backgroundPosition: `${H}px ${N}px`
             }
           }
         )
@@ -122,8 +114,8 @@ const D = "asterui", O = 0.22, U = (t, c = O) => {
     }
   );
 };
-X.displayName = "Watermark";
+q.displayName = "Watermark";
 export {
-  X as Watermark
+  q as Watermark
 };
 //# sourceMappingURL=Watermark.js.map

package/dist/components/Watermark.js.map

@@ -1 +1 @@
-{"version":3,"file":"Watermark.js","sources":["../../src/components/Watermark.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\n\nexport type WatermarkGap = [number, number]\nexport type WatermarkOffset = [number, number]\n\nexport interface WatermarkFontOptions {\n  /** Text color for watermark content */\n  color?: string\n  /** Font size in pixels */\n  fontSize?: number\n  /** Font weight for watermark text */\n  fontWeight?: number | 'normal' | 'bold' | 'bolder' | 'lighter'\n  /** Font style for watermark text */\n  fontStyle?: 'normal' | 'italic' | 'oblique'\n  /** Font family for watermark text */\n  fontFamily?: string\n  /** Line height in pixels for multi-line content */\n  lineHeight?: number\n}\n\nexport interface WatermarkProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** Text to render inside the watermark; falls back to \"asterui\" */\n  content?: string | string[]\n  /** Image source (URL or base64) to render instead of text */\n  image?: string\n  /** Width of a single watermark tile in pixels */\n  width?: number\n  /** Height of a single watermark tile in pixels */\n  height?: number\n  /** Horizontal/vertical gap between watermarks in pixels */\n  gap?: WatermarkGap\n  /** Offset for the first watermark tile from the top-left corner */\n  offset?: WatermarkOffset\n  /** Rotation angle in degrees */\n  rotate?: number\n  /** z-index for the overlay layer */\n  zIndex?: number\n  /** Font settings for text watermarks */\n  font?: WatermarkFontOptions\n  /** Content to protect with the watermark */\n  children?: React.ReactNode\n}\n\ntype WatermarkImage = {\n  url: string\n  width: number\n  height: number\n}\n\nconst DEFAULT_CONTENT = 'asterui'\nconst DEFAULT_OPACITY = 0.22\n\nconst resolveThemeColor = (requested?: string, opacity = DEFAULT_OPACITY) => {\n  const fallback = `rgba(0,0,0,${opacity})`\n\n  if (requested && requested.includes('var(--bc')) {\n    if (typeof window !== 'undefined') {\n      const docBase = getComputedStyle(document.documentElement).getPropertyValue('--bc').trim()\n      const bodyBase = getComputedStyle(document.body).getPropertyValue('--bc').trim()\n      const base = docBase || bodyBase\n      if (base) {\n        return requested.replace(/var\\(--bc\\)/g, base)\n      }\n    }\n    return fallback\n  }\n\n  if (requested) return requested\n\n  if (typeof window === 'undefined') return fallback\n\n  const docBase = getComputedStyle(document.documentElement).getPropertyValue('--bc').trim()\n  const bodyBase = getComputedStyle(document.body).getPropertyValue('--bc').trim()\n  const base = docBase || bodyBase\n\n  return base ? `hsl(${base} / ${opacity})` : fallback\n}\n\nconst getFontSettings = (font: WatermarkFontOptions | undefined, resolvedColor: string) => {\n  const fontSize = font?.fontSize ?? 16\n\n  return {\n    color: resolvedColor,\n    fontSize,\n    fontWeight: font?.fontWeight ?? 600,\n    fontStyle: font?.fontStyle ?? 'normal',\n    fontFamily: font?.fontFamily ?? 'sans-serif',\n    lineHeight: font?.lineHeight ?? fontSize * 1.2,\n  }\n}\n\nexport const Watermark: React.FC<WatermarkProps> = ({\n  children,\n  className = '',\n  style,\n  content,\n  image,\n  width = 120,\n  height = 64,\n  gap,\n  offset,\n  rotate = -22,\n  zIndex = 1000,\n  font,\n  ...rest\n}) => {\n  const [watermark, setWatermark] = useState<WatermarkImage | null>(null)\n\n  const gapX = gap?.[0] ?? 120\n  const gapY = gap?.[1] ?? 120\n  const offsetX = offset?.[0] ?? gapX / 2\n  const offsetY = offset?.[1] ?? gapY / 2\n  const textLines = useMemo(\n    () =>\n      typeof content === 'string'\n        ? [content]\n        : Array.isArray(content)\n          ? content\n          : [DEFAULT_CONTENT],\n    [content]\n  )\n  const resolvedColor = resolveThemeColor(font?.color)\n  const fontSettings = useMemo(\n    () => getFontSettings(font, resolvedColor),\n    [font, resolvedColor]\n  )\n  const rotationInRadians = (Math.PI / 180) * rotate\n  const textKey = textLines.join('|')\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    let cancelled = false\n    const ratio = window.devicePixelRatio || 1\n    const tileWidth = width + gapX\n    const tileHeight = height + gapY\n    const canvas = document.createElement('canvas')\n    canvas.width = tileWidth * ratio\n    canvas.height = tileHeight * ratio\n    const ctx = canvas.getContext('2d')\n\n    if (!ctx) return\n\n    const commitWatermark = () => {\n      const url = canvas.toDataURL()\n      if (!cancelled) {\n        setWatermark({ url, width: tileWidth, height: tileHeight })\n      }\n    }\n\n    const drawText = () => {\n      ctx.save()\n      ctx.translate((gapX / 2 + width / 2) * ratio, (gapY / 2 + height / 2) * ratio)\n      ctx.rotate(rotationInRadians)\n      ctx.fillStyle = fontSettings.color\n      ctx.textAlign = 'center'\n      ctx.textBaseline = 'middle'\n      ctx.font = `${fontSettings.fontStyle} normal ${fontSettings.fontWeight} ${fontSettings.fontSize * ratio}px ${fontSettings.fontFamily}`\n\n      const lineHeight = fontSettings.lineHeight * ratio\n      const startY = -((textLines.length - 1) * lineHeight) / 2\n\n      textLines.forEach((line, index) => {\n        ctx.fillText(line, 0, startY + index * lineHeight)\n      })\n\n      ctx.restore()\n    }\n\n    if (image) {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.referrerPolicy = 'no-referrer'\n\n      const handleLoad = () => {\n        ctx.save()\n        ctx.translate((gapX / 2 + width / 2) * ratio, (gapY / 2 + height / 2) * ratio)\n        ctx.rotate(rotationInRadians)\n        ctx.drawImage(\n          img,\n          (-width / 2) * ratio,\n          (-height / 2) * ratio,\n          width * ratio,\n          height * ratio\n        )\n        ctx.restore()\n        commitWatermark()\n      }\n\n      const handleError = () => {\n        if (!cancelled) setWatermark(null)\n      }\n\n      img.addEventListener('load', handleLoad)\n      img.addEventListener('error', handleError)\n      img.src = image\n\n      return () => {\n        cancelled = true\n        img.removeEventListener('load', handleLoad)\n        img.removeEventListener('error', handleError)\n      }\n    } else {\n      drawText()\n      commitWatermark()\n    }\n\n    return () => {\n      cancelled = true\n    }\n  }, [\n    fontSettings,\n    gapX,\n    gapY,\n    height,\n    image,\n    rotationInRadians,\n    textKey,\n    width,\n  ])\n\n  const classes = ['relative', className].filter(Boolean).join(' ')\n\n  return (\n    <div\n      className={classes}\n      style={{ position: style?.position ?? 'relative', ...style }}\n      {...rest}\n    >\n      {children}\n      {watermark && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0\"\n          style={{\n            zIndex,\n            backgroundImage: `url(${watermark.url})`,\n            backgroundRepeat: 'repeat',\n            backgroundSize: `${watermark.width}px ${watermark.height}px`,\n            backgroundPosition: `${offsetX}px ${offsetY}px`,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nWatermark.displayName = 'Watermark'\n"],"names":["DEFAULT_CONTENT","DEFAULT_OPACITY","resolveThemeColor","requested","opacity","fallback","docBase","bodyBase","base","getFontSettings","font","resolvedColor","fontSize","Watermark","children","className","style","content","image","width","height","gap","offset","rotate","zIndex","rest","watermark","setWatermark","useState","gapX","gapY","offsetX","offsetY","textLines","useMemo","fontSettings","rotationInRadians","textKey","useEffect","cancelled","ratio","tileWidth","tileHeight","canvas","ctx","commitWatermark","url","drawText","lineHeight","startY","line","index","img","handleLoad","handleError","classes","jsxs","jsx"],"mappings":"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"}
+{"version":3,"file":"Watermark.js","sources":["../../src/components/Watermark.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useState } from 'react'\nimport { useTheme } from '../hooks/useTheme'\n\nexport type WatermarkGap = [number, number]\nexport type WatermarkOffset = [number, number]\n\nexport interface WatermarkFontOptions {\n  /** Text color for watermark content */\n  color?: string\n  /** Font size in pixels */\n  fontSize?: number\n  /** Font weight for watermark text */\n  fontWeight?: number | 'normal' | 'bold' | 'bolder' | 'lighter'\n  /** Font style for watermark text */\n  fontStyle?: 'normal' | 'italic' | 'oblique'\n  /** Font family for watermark text */\n  fontFamily?: string\n  /** Line height in pixels for multi-line content */\n  lineHeight?: number\n}\n\nexport interface WatermarkProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'content'> {\n  /** Text to render inside the watermark; falls back to \"asterui\" */\n  content?: string | string[]\n  /** Image source (URL or base64) to render instead of text */\n  image?: string\n  /** Width of a single watermark tile in pixels */\n  width?: number\n  /** Height of a single watermark tile in pixels */\n  height?: number\n  /** Horizontal/vertical gap between watermarks in pixels */\n  gap?: WatermarkGap\n  /** Offset for the first watermark tile from the top-left corner */\n  offset?: WatermarkOffset\n  /** Rotation angle in degrees */\n  rotate?: number\n  /** z-index for the overlay layer */\n  zIndex?: number\n  /** Font settings for text watermarks */\n  font?: WatermarkFontOptions\n  /** Content to protect with the watermark */\n  children?: React.ReactNode\n}\n\ntype WatermarkImage = {\n  url: string\n  width: number\n  height: number\n}\n\nconst DEFAULT_CONTENT = 'asterui'\nconst DEFAULT_OPACITY = 0.22\n\n// Add opacity to a hex color (returns #rrggbbaa format)\nfunction hexWithOpacity(hex: string, opacity: number): string {\n  const alpha = Math.round(opacity * 255).toString(16).padStart(2, '0')\n  return hex + alpha\n}\n\nconst getFontSettings = (font: WatermarkFontOptions | undefined, resolvedColor: string) => {\n  const fontSize = font?.fontSize ?? 16\n\n  return {\n    color: resolvedColor,\n    fontSize,\n    fontWeight: font?.fontWeight ?? 600,\n    fontStyle: font?.fontStyle ?? 'normal',\n    fontFamily: font?.fontFamily ?? 'sans-serif',\n    lineHeight: font?.lineHeight ?? fontSize * 1.2,\n  }\n}\n\nexport const Watermark: React.FC<WatermarkProps> = ({\n  children,\n  className = '',\n  style,\n  content,\n  image,\n  width = 120,\n  height = 64,\n  gap,\n  offset,\n  rotate = -22,\n  zIndex = 1000,\n  font,\n  ...rest\n}) => {\n  const [watermark, setWatermark] = useState<WatermarkImage | null>(null)\n\n  const gapX = gap?.[0] ?? 120\n  const gapY = gap?.[1] ?? 120\n  const offsetX = offset?.[0] ?? gapX / 2\n  const offsetY = offset?.[1] ?? gapY / 2\n  const { colors } = useTheme()\n  const textLines = useMemo(\n    () =>\n      typeof content === 'string'\n        ? [content]\n        : Array.isArray(content)\n          ? content\n          : [DEFAULT_CONTENT],\n    [content]\n  )\n  // Use provided color or theme foreground with opacity\n  const resolvedColor = font?.color ?? hexWithOpacity(colors.foreground, DEFAULT_OPACITY)\n  const fontSettings = useMemo(\n    () => getFontSettings(font, resolvedColor),\n    [font, resolvedColor]\n  )\n  const rotationInRadians = (Math.PI / 180) * rotate\n  const textKey = textLines.join('|')\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return\n\n    let cancelled = false\n    const ratio = window.devicePixelRatio || 1\n    const tileWidth = width + gapX\n    const tileHeight = height + gapY\n    const canvas = document.createElement('canvas')\n    canvas.width = tileWidth * ratio\n    canvas.height = tileHeight * ratio\n    const ctx = canvas.getContext('2d')\n\n    if (!ctx) return\n\n    const commitWatermark = () => {\n      const url = canvas.toDataURL()\n      if (!cancelled) {\n        setWatermark({ url, width: tileWidth, height: tileHeight })\n      }\n    }\n\n    const drawText = () => {\n      ctx.save()\n      ctx.translate((gapX / 2 + width / 2) * ratio, (gapY / 2 + height / 2) * ratio)\n      ctx.rotate(rotationInRadians)\n      ctx.fillStyle = fontSettings.color\n      ctx.textAlign = 'center'\n      ctx.textBaseline = 'middle'\n      ctx.font = `${fontSettings.fontStyle} normal ${fontSettings.fontWeight} ${fontSettings.fontSize * ratio}px ${fontSettings.fontFamily}`\n\n      const lineHeight = fontSettings.lineHeight * ratio\n      const startY = -((textLines.length - 1) * lineHeight) / 2\n\n      textLines.forEach((line, index) => {\n        ctx.fillText(line, 0, startY + index * lineHeight)\n      })\n\n      ctx.restore()\n    }\n\n    if (image) {\n      const img = new Image()\n      img.crossOrigin = 'anonymous'\n      img.referrerPolicy = 'no-referrer'\n\n      const handleLoad = () => {\n        ctx.save()\n        ctx.translate((gapX / 2 + width / 2) * ratio, (gapY / 2 + height / 2) * ratio)\n        ctx.rotate(rotationInRadians)\n        ctx.drawImage(\n          img,\n          (-width / 2) * ratio,\n          (-height / 2) * ratio,\n          width * ratio,\n          height * ratio\n        )\n        ctx.restore()\n        commitWatermark()\n      }\n\n      const handleError = () => {\n        if (!cancelled) setWatermark(null)\n      }\n\n      img.addEventListener('load', handleLoad)\n      img.addEventListener('error', handleError)\n      img.src = image\n\n      return () => {\n        cancelled = true\n        img.removeEventListener('load', handleLoad)\n        img.removeEventListener('error', handleError)\n      }\n    } else {\n      drawText()\n      commitWatermark()\n    }\n\n    return () => {\n      cancelled = true\n    }\n  }, [\n    fontSettings,\n    gapX,\n    gapY,\n    height,\n    image,\n    rotationInRadians,\n    textKey,\n    width,\n  ])\n\n  const classes = ['relative', className].filter(Boolean).join(' ')\n\n  return (\n    <div\n      className={classes}\n      style={{ position: style?.position ?? 'relative', ...style }}\n      {...rest}\n    >\n      {children}\n      {watermark && (\n        <div\n          aria-hidden\n          className=\"pointer-events-none absolute inset-0\"\n          style={{\n            zIndex,\n            backgroundImage: `url(${watermark.url})`,\n            backgroundRepeat: 'repeat',\n            backgroundSize: `${watermark.width}px ${watermark.height}px`,\n            backgroundPosition: `${offsetX}px ${offsetY}px`,\n          }}\n        />\n      )}\n    </div>\n  )\n}\n\nWatermark.displayName = 'Watermark'\n"],"names":["DEFAULT_CONTENT","DEFAULT_OPACITY","hexWithOpacity","hex","opacity","alpha","getFontSettings","font","resolvedColor","fontSize","Watermark","children","className","style","content","image","width","height","gap","offset","rotate","zIndex","rest","watermark","setWatermark","useState","gapX","gapY","offsetX","offsetY","colors","useTheme","textLines","useMemo","fontSettings","rotationInRadians","textKey","useEffect","cancelled","ratio","tileWidth","tileHeight","canvas","ctx","commitWatermark","url","drawText","lineHeight","startY","line","index","img","handleLoad","handleError","classes","jsxs","jsx"],"mappings":"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"}

package/dist/contexts/SizeContext.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare const SizeContext: React.Context<Size | undefined>;
+export interface SizeProviderProps {
+    /** Size to provide to child components */
+    size: Size;
+    /** Child components */
+    children: React.ReactNode;
+}
+/**
+ * Provides size context to child components.
+ *
+ * Used by Button, CopyButton, and other sized components to transmit
+ * their size to child icons, allowing icons to automatically match
+ * the parent component's size.
+ */
+export declare function SizeProvider({ size, children }: SizeProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook to access the current size context.
+ * Returns undefined if not within a SizeProvider.
+ */
+export declare function useSize(): Size | undefined;

package/dist/contexts/SizeContext.js

@@ -0,0 +1,15 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as i, useContext as n } from "react";
+const e = i(void 0);
+function c({ size: t, children: o }) {
+  return /* @__PURE__ */ r(e.Provider, { value: t, children: o });
+}
+function f() {
+  return n(e);
+}
+export {
+  e as SizeContext,
+  c as SizeProvider,
+  f as useSize
+};
+//# sourceMappingURL=SizeContext.js.map

package/dist/contexts/SizeContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SizeContext.js","sources":["../../src/contexts/SizeContext.tsx"],"sourcesContent":["import React, { createContext, useContext } from 'react'\n\nexport type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\nexport const SizeContext = createContext<Size | undefined>(undefined)\n\nexport interface SizeProviderProps {\n  /** Size to provide to child components */\n  size: Size\n  /** Child components */\n  children: React.ReactNode\n}\n\n/**\n * Provides size context to child components.\n *\n * Used by Button, CopyButton, and other sized components to transmit\n * their size to child icons, allowing icons to automatically match\n * the parent component's size.\n */\nexport function SizeProvider({ size, children }: SizeProviderProps) {\n  return (\n    <SizeContext.Provider value={size}>\n      {children}\n    </SizeContext.Provider>\n  )\n}\n\n/**\n * Hook to access the current size context.\n * Returns undefined if not within a SizeProvider.\n */\nexport function useSize(): Size | undefined {\n  return useContext(SizeContext)\n}\n"],"names":["SizeContext","createContext","SizeProvider","size","children","useSize","useContext"],"mappings":";;AAIO,MAAMA,IAAcC,EAAgC,MAAS;AAgB7D,SAASC,EAAa,EAAE,MAAAC,GAAM,UAAAC,KAA+B;AAClE,2BACGJ,EAAY,UAAZ,EAAqB,OAAOG,GAC1B,UAAAC,GACH;AAEJ;AAMO,SAASC,IAA4B;AAC1C,SAAOC,EAAWN,CAAW;AAC/B;"}

package/dist/hooks/useTheme.d.ts

@@ -1,29 +1,39 @@
-export interface ThemeColors {
-    /** Base background color (--b1 / base-100) */
-    background: string;
-    /** Base content/text color (--bc / base-content) */
-    foreground: string;
-    /** Primary color (--p / primary) */
-    primary: string;
-    /** Primary content color (--pc / primary-content) */
-    primaryContent: string;
-}
+import { ThemeColors } from '../components/ThemeProvider';
+export type { ThemeColors };
 export interface UseThemeReturn {
+    /** The theme setting (what user selected). Only available with ThemeProvider. */
+    theme: string | undefined;
+    /** The actual applied theme. Only available with ThemeProvider. */
+    resolvedTheme: string | undefined;
     /** Whether dark mode is active */
     isDark: boolean;
+    /** Set the theme. Only available with ThemeProvider. */
+    setTheme: ((theme: string) => void) | undefined;
     /** Computed theme colors as hex values */
     colors: ThemeColors;
+    /** The system preference. Only available with ThemeProvider. */
+    systemTheme: 'light' | 'dark' | undefined;
 }
 /**
- * Hook to detect current theme and get computed colors
+ * Hook to detect current theme and get computed colors.
+ *
+ * When used within a ThemeProvider, returns full theme control including
+ * setTheme, theme selection, and resolved theme.
  *
- * Checks the `data-theme` attribute on the document root (for DaisyUI themes)
- * and falls back to system preference via `prefers-color-scheme`.
+ * When used standalone (without ThemeProvider), provides read-only access
+ * to isDark and colors based on the current data-theme attribute and
+ * system preference.
  *
- * Returns both the dark mode state and computed theme colors as hex values,
- * useful for canvas-based components that can't use CSS variables directly.
+ * @example
+ * // With ThemeProvider (full control)
+ * const { theme, setTheme, resolvedTheme, isDark, colors } = useTheme()
+ * setTheme('dark')
+ * setTheme('system')
  *
- * Automatically updates when theme changes.
+ * @example
+ * // Without ThemeProvider (read-only)
+ * const { isDark, colors } = useTheme()
+ * // colors.primary, colors.foreground, etc.
  */
 export declare function useTheme(): UseThemeReturn;
 export default useTheme;

package/dist/hooks/useTheme.js

@@ -1,56 +1,119 @@
-import { useState as m, useEffect as i } from "react";
-function c(t) {
-  const r = document.createElement("canvas");
-  r.width = r.height = 1;
-  const e = r.getContext("2d");
-  if (!e) return "#000000";
-  e.fillStyle = t, e.fillRect(0, 0, 1, 1);
-  const [o, n, a] = e.getImageData(0, 0, 1, 1).data;
-  return `#${((1 << 24) + (o << 16) + (n << 8) + a).toString(16).slice(1)}`;
+import { useState as i, useEffect as m, useMemo as u } from "react";
+import { useHasThemeProvider as d, useThemeContext as l } from "../components/ThemeProvider.js";
+const h = /* @__PURE__ */ new Set([
+  "dark",
+  "synthwave",
+  "halloween",
+  "forest",
+  "black",
+  "luxury",
+  "dracula",
+  "business",
+  "night",
+  "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)}`;
 }
-function u() {
-  const t = getComputedStyle(document.documentElement), r = t.getPropertyValue("--b1").trim(), e = t.getPropertyValue("--bc").trim(), o = t.getPropertyValue("--p").trim(), n = t.getPropertyValue("--pc").trim();
+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;
+  };
   return {
-    background: r ? c(`oklch(${r})`) : "#ffffff",
-    foreground: e ? c(`oklch(${e})`) : "#000000",
-    primary: o ? c(`oklch(${o})`) : "#6366f1",
-    primaryContent: n ? c(`oklch(${n})`) : "#ffffff"
+    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 d() {
-  const [t, r] = m({
+function y() {
+  return typeof window > "u" ? "light" : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function b() {
+  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 T() {
+  const [r, e] = i(() => ({
     isDark: !1,
-    colors: {
-      background: "#ffffff",
-      foreground: "#000000",
-      primary: "#6366f1",
-      primaryContent: "#ffffff"
-    }
-  });
-  return i(() => {
-    const e = () => {
-      const s = document.documentElement.getAttribute("data-theme"), f = s === "dark" || !s && window.matchMedia("(prefers-color-scheme: dark)").matches;
-      requestAnimationFrame(() => {
-        r({
-          isDark: f,
-          colors: u()
+    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()
+          });
         });
       });
     };
-    e();
-    const o = new MutationObserver(e);
-    o.observe(document.documentElement, {
+    t();
+    const n = new MutationObserver(t);
+    n.observe(document.documentElement, {
       attributes: !0,
       attributeFilter: ["data-theme", "class"]
     });
-    const n = window.matchMedia("(prefers-color-scheme: dark)");
-    return n.addEventListener("change", e), () => {
-      o.disconnect(), n.removeEventListener("change", e);
+    const o = window.matchMedia("(prefers-color-scheme: dark)");
+    return o.addEventListener("change", t), () => {
+      n.disconnect(), o.removeEventListener("change", t);
     };
-  }, []), t;
+  }, []), u(() => ({
+    theme: void 0,
+    resolvedTheme: void 0,
+    isDark: r.isDark,
+    setTheme: void 0,
+    colors: r.colors,
+    systemTheme: void 0
+  }), [r.isDark, r.colors]);
 }
 export {
-  d as default,
-  d as useTheme
+  k as default,
+  k 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 } from 'react'\n\nexport interface ThemeColors {\n  /** Base background color (--b1 / base-100) */\n  background: string\n  /** Base content/text color (--bc / base-content) */\n  foreground: string\n  /** Primary color (--p / primary) */\n  primary: string\n  /** Primary content color (--pc / primary-content) */\n  primaryContent: string\n}\n\nexport interface UseThemeReturn {\n  /** Whether dark mode is active */\n  isDark: boolean\n  /** Computed theme colors as hex values */\n  colors: ThemeColors\n}\n\n// Convert any CSS color to hex\nfunction colorToHex(color: string): string {\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  const style = getComputedStyle(document.documentElement)\n\n  // Get computed colors from CSS custom properties\n  const background = style.getPropertyValue('--b1').trim()\n  const foreground = style.getPropertyValue('--bc').trim()\n  const primary = style.getPropertyValue('--p').trim()\n  const primaryContent = style.getPropertyValue('--pc').trim()\n\n  // DaisyUI uses oklch, convert to hex for canvas compatibility\n  return {\n    background: background ? colorToHex(`oklch(${background})`) : '#ffffff',\n    foreground: foreground ? colorToHex(`oklch(${foreground})`) : '#000000',\n    primary: primary ? colorToHex(`oklch(${primary})`) : '#6366f1',\n    primaryContent: primaryContent ? colorToHex(`oklch(${primaryContent})`) : '#ffffff',\n  }\n}\n\n/**\n * Hook to detect current theme and get computed colors\n *\n * Checks the `data-theme` attribute on the document root (for DaisyUI themes)\n * and falls back to system preference via `prefers-color-scheme`.\n *\n * Returns both the dark mode state and computed theme colors as hex values,\n * useful for canvas-based components that can't use CSS variables directly.\n *\n * Automatically updates when theme changes.\n */\nexport function useTheme(): UseThemeReturn {\n  const [state, setState] = useState<UseThemeReturn>({\n    isDark: false,\n    colors: {\n      background: '#ffffff',\n      foreground: '#000000',\n      primary: '#6366f1',\n      primaryContent: '#ffffff',\n    }\n  })\n\n  useEffect(() => {\n    const checkTheme = () => {\n      const html = document.documentElement\n      const theme = html.getAttribute('data-theme')\n      // Check for explicit dark theme or system preference\n      const isDark = theme === 'dark' ||\n        (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)\n\n      // Small delay to ensure CSS variables are updated\n      requestAnimationFrame(() => {\n        setState({\n          isDark,\n          colors: getThemeColors()\n        })\n      })\n    }\n\n    checkTheme()\n\n    // Watch for theme changes via attribute mutation\n    const observer = new MutationObserver(checkTheme)\n    observer.observe(document.documentElement, {\n      attributes: true,\n      attributeFilter: ['data-theme', 'class']\n    })\n\n    // Also watch for system preference changes\n    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')\n    mediaQuery.addEventListener('change', checkTheme)\n\n    return () => {\n      observer.disconnect()\n      mediaQuery.removeEventListener('change', checkTheme)\n    }\n  }, [])\n\n  return state\n}\n\nexport default useTheme\n"],"names":["colorToHex","color","canvas","ctx","r","g","b","getThemeColors","style","background","foreground","primary","primaryContent","useTheme","state","setState","useState","useEffect","checkTheme","theme","isDark","observer","mediaQuery"],"mappings":";AAqBA,SAASA,EAAWC,GAAuB;AACzC,QAAMC,IAAS,SAAS,cAAc,QAAQ;AAC9C,EAAAA,EAAO,QAAQA,EAAO,SAAS;AAC/B,QAAMC,IAAMD,EAAO,WAAW,IAAI;AAClC,MAAI,CAACC,EAAK,QAAO;AACjB,EAAAA,EAAI,YAAYF,GAChBE,EAAI,SAAS,GAAG,GAAG,GAAG,CAAC;AACvB,QAAM,CAACC,GAAGC,GAAGC,CAAC,IAAIH,EAAI,aAAa,GAAG,GAAG,GAAG,CAAC,EAAE;AAC/C,SAAO,MAAM,KAAK,OAAOC,KAAK,OAAOC,KAAK,KAAKC,GAAG,SAAS,EAAE,EAAE,MAAM,CAAC,CAAC;AACzE;AAEA,SAASC,IAA8B;AACrC,QAAMC,IAAQ,iBAAiB,SAAS,eAAe,GAGjDC,IAAaD,EAAM,iBAAiB,MAAM,EAAE,KAAA,GAC5CE,IAAaF,EAAM,iBAAiB,MAAM,EAAE,KAAA,GAC5CG,IAAUH,EAAM,iBAAiB,KAAK,EAAE,KAAA,GACxCI,IAAiBJ,EAAM,iBAAiB,MAAM,EAAE,KAAA;AAGtD,SAAO;AAAA,IACL,YAAYC,IAAaT,EAAW,SAASS,CAAU,GAAG,IAAI;AAAA,IAC9D,YAAYC,IAAaV,EAAW,SAASU,CAAU,GAAG,IAAI;AAAA,IAC9D,SAASC,IAAUX,EAAW,SAASW,CAAO,GAAG,IAAI;AAAA,IACrD,gBAAgBC,IAAiBZ,EAAW,SAASY,CAAc,GAAG,IAAI;AAAA,EAAA;AAE9E;AAaO,SAASC,IAA2B;AACzC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAyB;AAAA,IACjD,QAAQ;AAAA,IACR,QAAQ;AAAA,MACN,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,gBAAgB;AAAA,IAAA;AAAA,EAClB,CACD;AAED,SAAAC,EAAU,MAAM;AACd,UAAMC,IAAa,MAAM;AAEvB,YAAMC,IADO,SAAS,gBACH,aAAa,YAAY,GAEtCC,IAASD,MAAU,UACtB,CAACA,KAAS,OAAO,WAAW,8BAA8B,EAAE;AAG/D,4BAAsB,MAAM;AAC1B,QAAAJ,EAAS;AAAA,UACP,QAAAK;AAAA,UACA,QAAQb,EAAA;AAAA,QAAe,CACxB;AAAA,MACH,CAAC;AAAA,IACH;AAEA,IAAAW,EAAA;AAGA,UAAMG,IAAW,IAAI,iBAAiBH,CAAU;AAChD,IAAAG,EAAS,QAAQ,SAAS,iBAAiB;AAAA,MACzC,YAAY;AAAA,MACZ,iBAAiB,CAAC,cAAc,OAAO;AAAA,IAAA,CACxC;AAGD,UAAMC,IAAa,OAAO,WAAW,8BAA8B;AACnE,WAAAA,EAAW,iBAAiB,UAAUJ,CAAU,GAEzC,MAAM;AACX,MAAAG,EAAS,WAAA,GACTC,EAAW,oBAAoB,UAAUJ,CAAU;AAAA,IACrD;AAAA,EACF,GAAG,CAAA,CAAE,GAEEJ;AACT;"}
+{"version":3,"file":"useTheme.js","sources":["../../src/hooks/useTheme.ts"],"sourcesContent":["import { useEffect, useState, useMemo } from 'react'\nimport { useHasThemeProvider, useThemeContext, type ThemeColors } from '../components/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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"}