asterui 0.12.62 → 0.12.63

package/dist/components/ThemeController.js

@@ -1,49 +1,52 @@
-import { jsx as r, jsxs as p } from "react/jsx-runtime";
-import { useState as b, useEffect as f, useId as $ } from "react";
-import { useConfig as S } from "../providers/ConfigProvider.js";
-import { useTheme as v } from "../hooks/useTheme.js";
-const C = "swap", D = "swap-rotate", M = "swap-off", Z = "swap-on", N = "dropdown", B = "dropdown-end", y = "dropdown-content", A = "btn", E = "btn-sm", I = "btn-block", O = "btn-ghost", z = "toggle", j = "toggle-xs", F = "toggle-sm", H = "toggle-md", L = "toggle-lg", V = "toggle-xl";
-function i() {
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { useState as v, useEffect as f, useId as S } from "react";
+import { useConfig as C } from "../providers/ConfigProvider.js";
+import { useTheme as x } from "../hooks/useTheme.js";
+const D = "swap", M = "swap-rotate", Z = "swap-off", N = "swap-on", B = "dropdown", y = "dropdown-end", E = "dropdown-content", A = "btn", O = "btn-sm", z = "btn-block", I = "btn-ghost", j = "toggle", F = "toggle-xs", H = "toggle-sm", L = "toggle-md", V = "toggle-lg", X = "toggle-xl";
+function g() {
   return document.documentElement.getAttribute("data-theme");
 }
-function x(n) {
-  document.documentElement.setAttribute("data-theme", n);
+function T(o) {
+  document.documentElement.setAttribute("data-theme", o);
 }
-function X({
-  lightTheme: n = "light",
-  darkTheme: o = "dark",
-  onChange: u,
-  className: m = ""
+function G({
+  lightTheme: o = "light",
+  darkTheme: c = "dark",
+  onChange: m,
+  className: h = "",
+  "data-testid": a
 }) {
-  const { setTheme: g, isDark: t } = v(), h = g ?? x, [c, d] = b(() => t !== void 0 ? t : i() === o);
+  const { setTheme: p, isDark: e } = x(), w = p ?? T, [d, u] = v(() => e !== void 0 ? e : g() === c);
   f(() => {
-    if (t !== void 0) {
-      d(t);
+    if (e !== void 0) {
+      u(e);
       return;
     }
-    const s = new MutationObserver(() => {
-      const e = i();
-      d(e === o);
+    const n = new MutationObserver(() => {
+      const t = g();
+      u(t === c);
     });
-    return s.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => s.disconnect();
-  }, [o, t]);
-  const l = (s) => {
-    const a = s.target.checked ? o : n;
-    h(a), u?.(a);
-  };
-  return /* @__PURE__ */ p("label", { className: `${C} ${D} ${m}`, children: [
+    return n.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => n.disconnect();
+  }, [c, e]);
+  const i = (n) => {
+    const s = n.target.checked ? c : o;
+    w(s), m?.(s);
+  }, l = (n) => a ? `${a}-${n}` : void 0;
+  return /* @__PURE__ */ b("label", { className: `${D} ${M} ${h}`, "data-testid": a, children: [
     /* @__PURE__ */ r(
       "input",
       {
         type: "checkbox",
-        checked: c,
-        onChange: l
+        checked: d,
+        onChange: i,
+        "data-testid": l("input")
       }
     ),
     /* @__PURE__ */ r(
       "svg",
       {
-        className: `${M} h-8 w-8 fill-current`,
+        className: `${Z} h-8 w-8 fill-current`,
+        "data-testid": l("icon-light"),
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         children: /* @__PURE__ */ r("path", { d: "M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" })
@@ -52,7 +55,8 @@ function X({
     /* @__PURE__ */ r(
       "svg",
       {
-        className: `${Z} h-8 w-8 fill-current`,
+        className: `${N} h-8 w-8 fill-current`,
+        "data-testid": l("icon-dark"),
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 24 24",
         children: /* @__PURE__ */ r("path", { d: "M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" })
@@ -60,33 +64,34 @@ function X({
     )
   ] });
 }
-function G({
-  themes: n,
-  defaultTheme: o,
-  onChange: u,
-  className: m = ""
+function R({
+  themes: o,
+  defaultTheme: c,
+  onChange: m,
+  className: h = "",
+  "data-testid": a
 }) {
-  const { setTheme: g, resolvedTheme: t } = v(), h = g ?? x, c = $(), [d, l] = b(() => {
-    if (t && n.includes(t)) return t;
-    const e = i();
-    return e && n.includes(e) ? e : o || n[0] || "light";
+  const { setTheme: p, resolvedTheme: e } = x(), w = p ?? T, d = S(), [u, i] = v(() => {
+    if (e && o.includes(e)) return e;
+    const t = g();
+    return t && o.includes(t) ? t : c || o[0] || "light";
   });
   f(() => {
-    if (t && n.includes(t)) {
-      l(t);
+    if (e && o.includes(e)) {
+      i(e);
       return;
     }
-    const e = new MutationObserver(() => {
-      const a = i();
-      a && n.includes(a) && l(a);
+    const t = new MutationObserver(() => {
+      const s = g();
+      s && o.includes(s) && i(s);
     });
-    return e.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => e.disconnect();
-  }, [n, t]);
-  const s = (e) => {
-    l(e), h(e), u?.(e);
-  };
-  return /* @__PURE__ */ p("div", { className: `${N} ${B} ${m}`, children: [
-    /* @__PURE__ */ p("div", { tabIndex: 0, role: "button", className: A, children: [
+    return t.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => t.disconnect();
+  }, [o, e]);
+  const l = (t) => {
+    i(t), w(t), m?.(t);
+  }, n = (t) => a ? `${a}-${t}` : void 0;
+  return /* @__PURE__ */ b("div", { className: `${B} ${y} ${h}`, "data-testid": a, children: [
+    /* @__PURE__ */ b("div", { tabIndex: 0, role: "button", className: A, "data-testid": n("trigger"), children: [
       "Theme",
       /* @__PURE__ */ r(
         "svg",
@@ -104,73 +109,77 @@ function G({
       "ul",
       {
         tabIndex: 0,
-        className: `${y} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`,
-        children: n.map((e) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
+        className: `${E} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`,
+        "data-testid": n("menu"),
+        children: o.map((t) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
           "input",
           {
             type: "radio",
-            name: c,
-            className: `${A} ${E} ${I} ${O} justify-start`,
-            "aria-label": e,
-            value: e,
-            checked: d === e,
-            onChange: () => s(e)
+            name: d,
+            className: `${A} ${O} ${z} ${I} justify-start`,
+            "aria-label": t,
+            value: t,
+            checked: u === t,
+            onChange: () => l(t),
+            "data-testid": n(`option-${t}`)
           }
-        ) }, e))
+        ) }, t))
       }
     )
   ] });
 }
-const R = {
-  xs: j,
-  sm: F,
-  md: H,
-  lg: L,
-  xl: V
+const q = {
+  xs: F,
+  sm: H,
+  md: L,
+  lg: V,
+  xl: X
 };
-function q({
-  lightTheme: n = "light",
-  darkTheme: o = "dark",
-  onChange: u,
-  size: m,
-  className: g = ""
+function J({
+  lightTheme: o = "light",
+  darkTheme: c = "dark",
+  onChange: m,
+  size: h,
+  className: a = "",
+  "data-testid": p
 }) {
-  const { componentSize: t } = S(), { setTheme: h, isDark: c } = v(), d = h ?? x, l = m ?? t ?? "md", [s, e] = b(() => c !== void 0 ? c : i() === o);
+  const { componentSize: e } = C(), { setTheme: w, isDark: d } = x(), u = w ?? T, i = h ?? e ?? "md", [l, n] = v(() => d !== void 0 ? d : g() === c);
   f(() => {
-    if (c !== void 0) {
-      e(c);
+    if (d !== void 0) {
+      n(d);
       return;
     }
-    const w = new MutationObserver(() => {
-      const T = i();
-      e(T === o);
+    const s = new MutationObserver(() => {
+      const $ = g();
+      n($ === c);
     });
-    return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => w.disconnect();
-  }, [o, c]);
-  const a = (w) => {
-    const k = w.target.checked ? o : n;
-    d(k), u?.(k);
+    return s.observe(document.documentElement, { attributes: !0, attributeFilter: ["data-theme"] }), () => s.disconnect();
+  }, [c, d]);
+  const t = (s) => {
+    const k = s.target.checked ? c : o;
+    u(k), m?.(k);
   };
   return /* @__PURE__ */ r(
     "input",
     {
       type: "checkbox",
-      className: `${z} ${R[l]} ${g}`,
-      checked: s,
-      onChange: a,
-      "aria-label": "Toggle theme"
+      className: `${j} ${q[i]} ${a}`,
+      checked: l,
+      onChange: t,
+      "aria-label": "Toggle theme",
+      "data-testid": p
     }
   );
 }
-const U = Object.assign(
+const W = Object.assign(
   {},
   {
-    Swap: X,
-    Dropdown: G,
-    Toggle: q
+    Swap: G,
+    Dropdown: R,
+    Toggle: J
   }
 );
 export {
-  U as ThemeController
+  W as ThemeController
 };
 //# sourceMappingURL=ThemeController.js.map

package/dist/components/ThemeController.js.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeController.js","sources":["../../src/components/ThemeController.tsx"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react'\nimport { useConfig } from '../providers/ConfigProvider'\nimport { useTheme } from '../hooks/useTheme'\n\n// DaisyUI classes\nconst dSwap = 'swap'\nconst dSwapRotate = 'swap-rotate'\nconst dSwapOff = 'swap-off'\nconst dSwapOn = 'swap-on'\nconst dDropdown = 'dropdown'\nconst dDropdownEnd = 'dropdown-end'\nconst dDropdownContent = 'dropdown-content'\nconst dBtn = 'btn'\nconst dBtnSm = 'btn-sm'\nconst dBtnBlock = 'btn-block'\nconst dBtnGhost = 'btn-ghost'\nconst dToggle = 'toggle'\nconst dToggleXs = 'toggle-xs'\nconst dToggleSm = 'toggle-sm'\nconst dToggleMd = 'toggle-md'\nconst dToggleLg = 'toggle-lg'\nconst dToggleXl = 'toggle-xl'\n\nexport interface ThemeControllerSwapProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerDropdownProps {\n  themes: string[]\n  defaultTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n}\n\nexport interface ThemeControllerToggleProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  className?: string\n}\n\n// Get current theme from document\nfunction getCurrentTheme(): string | null {\n  return document.documentElement.getAttribute('data-theme')\n}\n\n// Set theme directly on document (fallback when no ThemeProvider)\nfunction setThemeDirectly(theme: string) {\n  document.documentElement.setAttribute('data-theme', theme)\n}\n\nfunction ThemeControllerSwap({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  className = '',\n}: ThemeControllerSwapProps) {\n  const { setTheme: contextSetTheme, isDark: contextIsDark } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n\n  const [isDark, setIsDark] = useState(() => {\n    if (contextIsDark !== undefined) return contextIsDark\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (contextIsDark !== undefined) {\n      setIsDark(contextIsDark)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme, contextIsDark])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <label className={`${dSwap} ${dSwapRotate} ${className}`}>\n      <input\n        type=\"checkbox\"\n        checked={isDark}\n        onChange={handleChange}\n      />\n      {/* sun icon */}\n      <svg\n        className={`${dSwapOff} h-8 w-8 fill-current`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z\" />\n      </svg>\n      {/* moon icon */}\n      <svg\n        className={`${dSwapOn} h-8 w-8 fill-current`}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z\" />\n      </svg>\n    </label>\n  )\n}\n\nfunction ThemeControllerDropdown({\n  themes,\n  defaultTheme,\n  onChange,\n  className = '',\n}: ThemeControllerDropdownProps) {\n  const { setTheme: contextSetTheme, resolvedTheme } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n  const radioName = useId()\n\n  const [selectedTheme, setSelectedTheme] = useState(() => {\n    if (resolvedTheme && themes.includes(resolvedTheme)) return resolvedTheme\n    const current = getCurrentTheme()\n    if (current && themes.includes(current)) return current\n    return defaultTheme || themes[0] || 'light'\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (resolvedTheme && themes.includes(resolvedTheme)) {\n      setSelectedTheme(resolvedTheme)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      if (current && themes.includes(current)) {\n        setSelectedTheme(current)\n      }\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [themes, resolvedTheme])\n\n  const handleChange = (theme: string) => {\n    setSelectedTheme(theme)\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <div className={`${dDropdown} ${dDropdownEnd} ${className}`}>\n      <div tabIndex={0} role=\"button\" className={dBtn}>\n        Theme\n        <svg\n          width=\"12px\"\n          height=\"12px\"\n          className=\"inline-block h-2 w-2 fill-current opacity-60\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 2048 2048\"\n        >\n          <path d=\"M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z\"></path>\n        </svg>\n      </div>\n      <ul\n        tabIndex={0}\n        className={`${dDropdownContent} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`}\n      >\n        {themes.map((theme) => (\n          <li key={theme}>\n            <input\n              type=\"radio\"\n              name={radioName}\n              className={`${dBtn} ${dBtnSm} ${dBtnBlock} ${dBtnGhost} justify-start`}\n              aria-label={theme}\n              value={theme}\n              checked={selectedTheme === theme}\n              onChange={() => handleChange(theme)}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst sizeClasses: Record<string, string> = {\n  xs: dToggleXs,\n  sm: dToggleSm,\n  md: dToggleMd,\n  lg: dToggleLg,\n  xl: dToggleXl,\n}\n\nfunction ThemeControllerToggle({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  size,\n  className = '',\n}: ThemeControllerToggleProps) {\n  const { componentSize } = useConfig()\n  const { setTheme: contextSetTheme, isDark: contextIsDark } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n  const effectiveSize = size ?? componentSize ?? 'md'\n\n  const [isDark, setIsDark] = useState(() => {\n    if (contextIsDark !== undefined) return contextIsDark\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (contextIsDark !== undefined) {\n      setIsDark(contextIsDark)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme, contextIsDark])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <input\n      type=\"checkbox\"\n      className={`${dToggle} ${sizeClasses[effectiveSize]} ${className}`}\n      checked={isDark}\n      onChange={handleChange}\n      aria-label=\"Toggle theme\"\n    />\n  )\n}\n\nexport const ThemeController = Object.assign(\n  {},\n  {\n    Swap: ThemeControllerSwap,\n    Dropdown: ThemeControllerDropdown,\n    Toggle: ThemeControllerToggle,\n  }\n)\n"],"names":["dSwap","dSwapRotate","dSwapOff","dSwapOn","dDropdown","dDropdownEnd","dDropdownContent","dBtn","dBtnSm","dBtnBlock","dBtnGhost","dToggle","dToggleXs","dToggleSm","dToggleMd","dToggleLg","dToggleXl","getCurrentTheme","setThemeDirectly","theme","ThemeControllerSwap","lightTheme","darkTheme","onChange","className","contextSetTheme","contextIsDark","useTheme","setTheme","isDark","setIsDark","useState","useEffect","observer","current","handleChange","e","jsxs","jsx","ThemeControllerDropdown","themes","defaultTheme","resolvedTheme","radioName","useId","selectedTheme","setSelectedTheme","sizeClasses","ThemeControllerToggle","size","componentSize","useConfig","effectiveSize","ThemeController"],"mappings":"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"}
+{"version":3,"file":"ThemeController.js","sources":["../../src/components/ThemeController.tsx"],"sourcesContent":["import React, { useState, useEffect, useId } from 'react'\nimport { useConfig } from '../providers/ConfigProvider'\nimport { useTheme } from '../hooks/useTheme'\n\n// DaisyUI classes\nconst dSwap = 'swap'\nconst dSwapRotate = 'swap-rotate'\nconst dSwapOff = 'swap-off'\nconst dSwapOn = 'swap-on'\nconst dDropdown = 'dropdown'\nconst dDropdownEnd = 'dropdown-end'\nconst dDropdownContent = 'dropdown-content'\nconst dBtn = 'btn'\nconst dBtnSm = 'btn-sm'\nconst dBtnBlock = 'btn-block'\nconst dBtnGhost = 'btn-ghost'\nconst dToggle = 'toggle'\nconst dToggleXs = 'toggle-xs'\nconst dToggleSm = 'toggle-sm'\nconst dToggleMd = 'toggle-md'\nconst dToggleLg = 'toggle-lg'\nconst dToggleXl = 'toggle-xl'\n\nexport interface ThemeControllerSwapProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n  'data-testid'?: string\n}\n\nexport interface ThemeControllerDropdownProps {\n  themes: string[]\n  defaultTheme?: string\n  onChange?: (theme: string) => void\n  className?: string\n  'data-testid'?: string\n}\n\nexport interface ThemeControllerToggleProps {\n  lightTheme?: string\n  darkTheme?: string\n  onChange?: (theme: string) => void\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  className?: string\n  'data-testid'?: string\n}\n\n// Get current theme from document\nfunction getCurrentTheme(): string | null {\n  return document.documentElement.getAttribute('data-theme')\n}\n\n// Set theme directly on document (fallback when no ThemeProvider)\nfunction setThemeDirectly(theme: string) {\n  document.documentElement.setAttribute('data-theme', theme)\n}\n\nfunction ThemeControllerSwap({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  className = '',\n  'data-testid': testId,\n}: ThemeControllerSwapProps) {\n  const { setTheme: contextSetTheme, isDark: contextIsDark } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n\n  const [isDark, setIsDark] = useState(() => {\n    if (contextIsDark !== undefined) return contextIsDark\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (contextIsDark !== undefined) {\n      setIsDark(contextIsDark)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme, contextIsDark])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n  return (\n    <label className={`${dSwap} ${dSwapRotate} ${className}`} data-testid={testId}>\n      <input\n        type=\"checkbox\"\n        checked={isDark}\n        onChange={handleChange}\n        data-testid={getTestId('input')}\n      />\n      {/* sun icon */}\n      <svg\n        className={`${dSwapOff} h-8 w-8 fill-current`}\n        data-testid={getTestId('icon-light')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z\" />\n      </svg>\n      {/* moon icon */}\n      <svg\n        className={`${dSwapOn} h-8 w-8 fill-current`}\n        data-testid={getTestId('icon-dark')}\n        xmlns=\"http://www.w3.org/2000/svg\"\n        viewBox=\"0 0 24 24\"\n      >\n        <path d=\"M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z\" />\n      </svg>\n    </label>\n  )\n}\n\nfunction ThemeControllerDropdown({\n  themes,\n  defaultTheme,\n  onChange,\n  className = '',\n  'data-testid': testId,\n}: ThemeControllerDropdownProps) {\n  const { setTheme: contextSetTheme, resolvedTheme } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n  const radioName = useId()\n\n  const [selectedTheme, setSelectedTheme] = useState(() => {\n    if (resolvedTheme && themes.includes(resolvedTheme)) return resolvedTheme\n    const current = getCurrentTheme()\n    if (current && themes.includes(current)) return current\n    return defaultTheme || themes[0] || 'light'\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (resolvedTheme && themes.includes(resolvedTheme)) {\n      setSelectedTheme(resolvedTheme)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      if (current && themes.includes(current)) {\n        setSelectedTheme(current)\n      }\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [themes, resolvedTheme])\n\n  const handleChange = (theme: string) => {\n    setSelectedTheme(theme)\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  const getTestId = (suffix: string) => (testId ? `${testId}-${suffix}` : undefined)\n\n  return (\n    <div className={`${dDropdown} ${dDropdownEnd} ${className}`} data-testid={testId}>\n      <div tabIndex={0} role=\"button\" className={dBtn} data-testid={getTestId('trigger')}>\n        Theme\n        <svg\n          width=\"12px\"\n          height=\"12px\"\n          className=\"inline-block h-2 w-2 fill-current opacity-60\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 2048 2048\"\n        >\n          <path d=\"M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z\"></path>\n        </svg>\n      </div>\n      <ul\n        tabIndex={0}\n        className={`${dDropdownContent} bg-base-300 rounded-box z-[1] w-52 p-2 shadow-2xl max-h-96 overflow-y-auto`}\n        data-testid={getTestId('menu')}\n      >\n        {themes.map((theme) => (\n          <li key={theme}>\n            <input\n              type=\"radio\"\n              name={radioName}\n              className={`${dBtn} ${dBtnSm} ${dBtnBlock} ${dBtnGhost} justify-start`}\n              aria-label={theme}\n              value={theme}\n              checked={selectedTheme === theme}\n              onChange={() => handleChange(theme)}\n              data-testid={getTestId(`option-${theme}`)}\n            />\n          </li>\n        ))}\n      </ul>\n    </div>\n  )\n}\n\nconst sizeClasses: Record<string, string> = {\n  xs: dToggleXs,\n  sm: dToggleSm,\n  md: dToggleMd,\n  lg: dToggleLg,\n  xl: dToggleXl,\n}\n\nfunction ThemeControllerToggle({\n  lightTheme = 'light',\n  darkTheme = 'dark',\n  onChange,\n  size,\n  className = '',\n  'data-testid': testId,\n}: ThemeControllerToggleProps) {\n  const { componentSize } = useConfig()\n  const { setTheme: contextSetTheme, isDark: contextIsDark } = useTheme()\n  const setTheme = contextSetTheme ?? setThemeDirectly\n  const effectiveSize = size ?? componentSize ?? 'md'\n\n  const [isDark, setIsDark] = useState(() => {\n    if (contextIsDark !== undefined) return contextIsDark\n    const current = getCurrentTheme()\n    return current === darkTheme\n  })\n\n  // Sync with context or external theme changes\n  useEffect(() => {\n    if (contextIsDark !== undefined) {\n      setIsDark(contextIsDark)\n      return\n    }\n    const observer = new MutationObserver(() => {\n      const current = getCurrentTheme()\n      setIsDark(current === darkTheme)\n    })\n    observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] })\n    return () => observer.disconnect()\n  }, [darkTheme, contextIsDark])\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const checked = e.target.checked\n    const theme = checked ? darkTheme : lightTheme\n    setTheme(theme)\n    onChange?.(theme)\n  }\n\n  return (\n    <input\n      type=\"checkbox\"\n      className={`${dToggle} ${sizeClasses[effectiveSize]} ${className}`}\n      checked={isDark}\n      onChange={handleChange}\n      aria-label=\"Toggle theme\"\n      data-testid={testId}\n    />\n  )\n}\n\nexport const ThemeController = Object.assign(\n  {},\n  {\n    Swap: ThemeControllerSwap,\n    Dropdown: ThemeControllerDropdown,\n    Toggle: ThemeControllerToggle,\n  }\n)\n"],"names":["dSwap","dSwapRotate","dSwapOff","dSwapOn","dDropdown","dDropdownEnd","dDropdownContent","dBtn","dBtnSm","dBtnBlock","dBtnGhost","dToggle","dToggleXs","dToggleSm","dToggleMd","dToggleLg","dToggleXl","getCurrentTheme","setThemeDirectly","theme","ThemeControllerSwap","lightTheme","darkTheme","onChange","className","testId","contextSetTheme","contextIsDark","useTheme","setTheme","isDark","setIsDark","useState","useEffect","observer","current","handleChange","e","getTestId","suffix","jsxs","jsx","ThemeControllerDropdown","themes","defaultTheme","resolvedTheme","radioName","useId","selectedTheme","setSelectedTheme","sizeClasses","ThemeControllerToggle","size","componentSize","useConfig","effectiveSize","ThemeController"],"mappings":"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"}

package/dist/components/Typography.d.ts

@@ -4,12 +4,14 @@ export type TitleLevel = 1 | 2 | 3 | 4 | 5;
 export interface TypographyProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     size?: TypographySize;
+    'data-testid'?: string;
 }
 export interface TitleProps extends Omit<React.HTMLAttributes<HTMLHeadingElement>, 'title'> {
     level?: TitleLevel;
     children: React.ReactNode;
     copyable?: boolean;
     ellipsis?: boolean;
+    'data-testid'?: string;
 }
 export interface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
@@ -21,6 +23,7 @@ export interface ParagraphProps extends React.HTMLAttributes<HTMLDivElement> {
     copyable?: boolean;
     size?: TypographySize;
     align?: 'left' | 'center' | 'right';
+    'data-testid'?: string;
 }
 export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
     children: React.ReactNode;
@@ -32,18 +35,20 @@ export interface TextProps extends React.HTMLAttributes<HTMLSpanElement> {
     delete?: boolean;
     type?: 'default' | 'secondary' | 'success' | 'warning' | 'error';
     copyable?: boolean;
+    'data-testid'?: string;
 }
 export interface TypographyLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     href?: string;
     children: React.ReactNode;
     external?: boolean;
     size?: TypographySize;
+    'data-testid'?: string;
 }
-declare function TypographyRoot({ children, size, className, ...rest }: TypographyProps): import("react/jsx-runtime").JSX.Element;
-declare function Title({ level, children, copyable, ellipsis, className, id, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
-declare function Paragraph({ children, ellipsis, copyable, size, align, className, ...rest }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
-declare function Text({ children, code, mark, strong, italic, underline, delete: del, type, copyable, className, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
-declare function Link({ href, children, target, external, size, className, ...rest }: TypographyLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function TypographyRoot({ children, size, className, 'data-testid': testId, ...rest }: TypographyProps): import("react/jsx-runtime").JSX.Element;
+declare function Title({ level, children, copyable, ellipsis, className, id, 'data-testid': testId, ...rest }: TitleProps): import("react/jsx-runtime").JSX.Element;
+declare function Paragraph({ children, ellipsis, copyable, size, align, className, 'data-testid': testId, ...rest }: ParagraphProps): import("react/jsx-runtime").JSX.Element;
+declare function Text({ children, code, mark, strong, italic, underline, delete: del, type, copyable, className, 'data-testid': testId, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+declare function Link({ href, children, target, external, size, className, 'data-testid': testId, ...rest }: TypographyLinkProps): import("react/jsx-runtime").JSX.Element;
 export declare const Typography: typeof TypographyRoot & {
     Title: typeof Title;
     Paragraph: typeof Paragraph;