@just-web/toolkits 1.0.0 → 2.1.0

package/dist/react/hooks/use-attribute.cjs

@@ -8,30 +8,30 @@ let react = require("react");
 * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
 *
 * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
-* @param element - The element to observe. Defaults to `document.documentElement` when omitted.
-* @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+* @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.
+* @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.
 *
 * @example
 * ```tsx
 * const [className, setClassName] = useAttribute('class')
 * const [theme, setTheme] = useAttribute('data-theme', myElement)
 * setTheme('dark')
-* setClassName(null) // removes class attribute
+* setClassName(undefined) // removes class attribute
 * ```
 */
 function useAttribute(attributeName, element = typeof document !== "undefined" ? document.documentElement : void 0) {
-	const [value, setValueState] = (0, react.useState)(() => element?.getAttribute(attributeName) ?? null);
+	const [value, setValueState] = (0, react.useState)(() => element?.getAttribute(attributeName) ?? void 0);
 	(0, react.useEffect)(() => {
 		if (!element) return;
-		setValueState(element.getAttribute(attributeName));
+		setValueState(element.getAttribute(attributeName) ?? void 0);
 		const observer = require_observe_attribute.observeAttributes({ [attributeName]: (next) => {
-			setValueState(next);
+			setValueState(next ?? void 0);
 		} }, element);
 		return () => observer.disconnect();
 	}, [element, attributeName]);
 	return [value, (0, react.useCallback)((next) => {
 		if (!element) return;
-		if (next === null) element.removeAttribute(attributeName);
+		if (next == null) element.removeAttribute(attributeName);
 		else element.setAttribute(attributeName, next);
 	}, [element, attributeName])];
 }

package/dist/react/hooks/use-attribute.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-attribute.cjs","names":["observeAttributes"],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe. Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(null) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | null, (value: string | null) => void] {\n\tconst [value, setValueState] = useState<string | null>(\n\t\t() => element?.getAttribute(attributeName) ?? null\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName))\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null) => {\n\t\t\tif (!element) return\n\t\t\tif (next === null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAA+B,OAAO,aAAa,cAChD,SAAS,kBACT,QAC+C;CAClD,MAAM,CAAC,OAAO,2CACP,SAAS,aAAa,cAAc,IAAI,KAC9C;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,CAAC;EAElD,MAAM,WAAWA,4CAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,KAAK;KAEpB,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,+BAXN,SAAwB;AACxB,MAAI,CAAC,QAAS;AACd,MAAI,SAAS,KACZ,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}
+{"version":3,"file":"use-attribute.cjs","names":["observeAttributes"],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(undefined) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | null | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | undefined, (value: string | null | undefined) => void] {\n\tconst [value, setValueState] = useState<string | undefined>(\n\t\t() => element?.getAttribute(attributeName) ?? undefined\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName) ?? undefined)\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next ?? undefined)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null | undefined) => {\n\t\t\tif (!element) return\n\t\t\tif (next == null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAAsC,OAAO,aAAa,cACvD,SAAS,kBACT,QACgE;CACnE,MAAM,CAAC,OAAO,2CACP,SAAS,aAAa,cAAc,IAAI,OAC9C;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,IAAI,OAAU;EAE/D,MAAM,WAAWA,4CAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,+BAXN,SAAoC;AACpC,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,KACX,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}

package/dist/react/hooks/use-attribute.d.cts

@@ -4,18 +4,18 @@
  * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
  *
  * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
- * @param element - The element to observe. Defaults to `document.documentElement` when omitted.
- * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+ * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.
+ * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.
  *
  * @example
  * ```tsx
  * const [className, setClassName] = useAttribute('class')
  * const [theme, setTheme] = useAttribute('data-theme', myElement)
  * setTheme('dark')
- * setClassName(null) // removes class attribute
+ * setClassName(undefined) // removes class attribute
  * ```
  */
-declare function useAttribute(attributeName: string, element?: Element | undefined): [string | null, (value: string | null) => void];
+declare function useAttribute(attributeName: string, element?: Element | null | undefined): [string | undefined, (value: string | null | undefined) => void];
 //#endregion
 export { useAttribute };
 //# sourceMappingURL=use-attribute.d.cts.map

package/dist/react/hooks/use-attribute.d.mts

@@ -4,18 +4,18 @@
  * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
  *
  * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
- * @param element - The element to observe. Defaults to `document.documentElement` when omitted.
- * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+ * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.
+ * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.
  *
  * @example
  * ```tsx
  * const [className, setClassName] = useAttribute('class')
  * const [theme, setTheme] = useAttribute('data-theme', myElement)
  * setTheme('dark')
- * setClassName(null) // removes class attribute
+ * setClassName(undefined) // removes class attribute
  * ```
  */
-declare function useAttribute(attributeName: string, element?: Element | undefined): [string | null, (value: string | null) => void];
+declare function useAttribute(attributeName: string, element?: Element | null | undefined): [string | undefined, (value: string | null | undefined) => void];
 //#endregion
 export { useAttribute };
 //# sourceMappingURL=use-attribute.d.mts.map

package/dist/react/hooks/use-attribute.mjs

@@ -7,30 +7,30 @@ import { useCallback, useEffect, useState } from "react";
 * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).
 *
 * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).
-* @param element - The element to observe. Defaults to `document.documentElement` when omitted.
-* @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.
+* @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.
+* @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.
 *
 * @example
 * ```tsx
 * const [className, setClassName] = useAttribute('class')
 * const [theme, setTheme] = useAttribute('data-theme', myElement)
 * setTheme('dark')
-* setClassName(null) // removes class attribute
+* setClassName(undefined) // removes class attribute
 * ```
 */
 function useAttribute(attributeName, element = typeof document !== "undefined" ? document.documentElement : void 0) {
-	const [value, setValueState] = useState(() => element?.getAttribute(attributeName) ?? null);
+	const [value, setValueState] = useState(() => element?.getAttribute(attributeName) ?? void 0);
 	useEffect(() => {
 		if (!element) return;
-		setValueState(element.getAttribute(attributeName));
+		setValueState(element.getAttribute(attributeName) ?? void 0);
 		const observer = observeAttributes({ [attributeName]: (next) => {
-			setValueState(next);
+			setValueState(next ?? void 0);
 		} }, element);
 		return () => observer.disconnect();
 	}, [element, attributeName]);
 	return [value, useCallback((next) => {
 		if (!element) return;
-		if (next === null) element.removeAttribute(attributeName);
+		if (next == null) element.removeAttribute(attributeName);
 		else element.setAttribute(attributeName, next);
 	}, [element, attributeName])];
 }

package/dist/react/hooks/use-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe. Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(null) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | null, (value: string | null) => void] {\n\tconst [value, setValueState] = useState<string | null>(\n\t\t() => element?.getAttribute(attributeName) ?? null\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName))\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null) => {\n\t\t\tif (!element) return\n\t\t\tif (next === null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAA+B,OAAO,aAAa,cAChD,SAAS,kBACT,QAC+C;CAClD,MAAM,CAAC,OAAO,iBAAiB,eACxB,SAAS,aAAa,cAAc,IAAI,KAC9C;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,CAAC;EAElD,MAAM,WAAW,kBAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,KAAK;KAEpB,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,OAZS,aACf,SAAwB;AACxB,MAAI,CAAC,QAAS;AACd,MAAI,SAAS,KACZ,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}
+{"version":3,"file":"use-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(undefined) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | null | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | undefined, (value: string | null | undefined) => void] {\n\tconst [value, setValueState] = useState<string | undefined>(\n\t\t() => element?.getAttribute(attributeName) ?? undefined\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName) ?? undefined)\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next ?? undefined)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null | undefined) => {\n\t\t\tif (!element) return\n\t\t\tif (next == null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAAsC,OAAO,aAAa,cACvD,SAAS,kBACT,QACgE;CACnE,MAAM,CAAC,OAAO,iBAAiB,eACxB,SAAS,aAAa,cAAc,IAAI,OAC9C;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,IAAI,OAAU;EAE/D,MAAM,WAAW,kBAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,OAZS,aACf,SAAoC;AACpC,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,KACX,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}

package/dist/react/hooks/use-theme-by-class-name.cjs

@@ -1,7 +1,6 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_observe_theme_from_stores = require('../../theme/_utils/observe-theme-from-stores.cjs');
 const require_set_theme_to_stores = require('../../theme/_utils/set-theme-to-stores.cjs');
-const require_resolve_theme_from_class_name = require('../../theme/class-name/resolve-theme-from-class-name.cjs');
 const require_theme_entry = require('../../theme/theme-entry.cjs');
 const require_class_name_theme_store = require('../../theme/theme-store/class-name-theme-store/class-name-theme-store.cjs');
 let react = require("react");
@@ -13,7 +12,7 @@ let react = require("react");
 *
 * @param themes - Record mapping theme keys to their class name values
 * @param options.theme - Fallback theme key when no matching class is found
-* @param options.element - Element to read/set theme on (defaults to document.documentElement)
+* @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
 * @returns Tuple of [currentTheme, setTheme]
 *
 * @example
@@ -34,10 +33,7 @@ function useThemeByClassName(themes, options) {
 	const element = options?.element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
 	const defaultTheme = options?.defaultTheme;
 	const store = (0, react.useMemo)(() => require_class_name_theme_store.classNameThemeStore(themes, { element }), [element, themes]);
-	const [theme, setThemeState] = (0, react.useState)(() => {
-		if (element) return require_resolve_theme_from_class_name.resolveThemeFromClassName(themes, element.className) ?? defaultTheme;
-		return defaultTheme;
-	});
+	const [theme, setThemeState] = (0, react.useState)(() => store.read()?.theme ?? defaultTheme);
 	(0, react.useEffect)(() => {
 		if (!element) return;
 		return require_observe_theme_from_stores.observeThemeFromStores([store], defaultTheme, setThemeState);

package/dist/react/hooks/use-theme-by-class-name.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-class-name.cjs","names":["classNameThemeStore","resolveThemeFromClassName","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { resolveThemeFromClassName } from '../../theme/class-name/resolve-theme-from-class-name.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element class) and a setter.\n * Subscribes to class changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their class name values\n * @param options.theme - Fallback theme key when no matching class is found\n * @param options.element - Element to read/set theme on (defaults to document.documentElement)\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions?.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options?.defaultTheme\n\n\tconst store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (element) {\n\t\t\tconst resolved = resolveThemeFromClassName(themes, element.className)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACf,QACA,SAI4D;CAC5D,MAAM,UACL,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CACnF,MAAM,eAAe,SAAS;CAE9B,MAAM,iCAAsBA,mDAAoB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC;CAExF,MAAM,CAAC,OAAO,2CAA0D;AACvE,MAAI,QAEH,QADiBC,gEAA0B,QAAQ,QAAQ,UAAU,IAClD;AAEpB,SAAO;GACN;AAEF,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,+BARN,aAA2B;AAC3B,MAAI,QACH,8CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}
+{"version":3,"file":"use-theme-by-class-name.cjs","names":["classNameThemeStore","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element class) and a setter.\n * Subscribes to class changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their class name values\n * @param options.theme - Fallback theme key when no matching class is found\n * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | null | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions?.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options?.defaultTheme\n\n\tconst store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(\n\t\t() => store.read()?.theme ?? defaultTheme\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,oBACf,QACA,SAI4D;CAC5D,MAAM,UACL,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CACnF,MAAM,eAAe,SAAS;CAE9B,MAAM,iCAAsBA,mDAAoB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC;CAExF,MAAM,CAAC,OAAO,2CACP,MAAM,MAAM,EAAE,SAAS,aAC7B;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,+BARN,aAA2B;AAC3B,MAAI,QACH,8CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}

package/dist/react/hooks/use-theme-by-class-name.d.cts

@@ -8,7 +8,7 @@ import { ThemeMap } from "../../theme/theme-map.types.cjs";
  *
  * @param themes - Record mapping theme keys to their class name values
  * @param options.theme - Fallback theme key when no matching class is found
- * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
  * @returns Tuple of [currentTheme, setTheme]
  *
  * @example
@@ -27,7 +27,7 @@ import { ThemeMap } from "../../theme/theme-map.types.cjs";
  */
 declare function useThemeByClassName<Themes extends ThemeMap>(themes: Themes, options?: {
   defaultTheme?: keyof Themes | undefined;
-  element?: Element | undefined;
+  element?: Element | null | undefined;
 }): [keyof Themes | undefined, (theme: keyof Themes) => void];
 //#endregion
 export { useThemeByClassName };

package/dist/react/hooks/use-theme-by-class-name.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-class-name.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;uBAEc;YACX;WAEF,kCAAkC"}
+{"version":3,"file":"use-theme-by-class-name.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":[],"mappings":";;;;;;AA8BA;;;;;;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;uBAEc;YACX;WAEF,kCAAkC"}

package/dist/react/hooks/use-theme-by-class-name.d.mts

@@ -8,7 +8,7 @@ import { ThemeMap } from "../../theme/theme-map.types.mjs";
  *
  * @param themes - Record mapping theme keys to their class name values
  * @param options.theme - Fallback theme key when no matching class is found
- * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
  * @returns Tuple of [currentTheme, setTheme]
  *
  * @example
@@ -27,7 +27,7 @@ import { ThemeMap } from "../../theme/theme-map.types.mjs";
  */
 declare function useThemeByClassName<Themes extends ThemeMap>(themes: Themes, options?: {
   defaultTheme?: keyof Themes | undefined;
-  element?: Element | undefined;
+  element?: Element | null | undefined;
 }): [keyof Themes | undefined, (theme: keyof Themes) => void];
 //#endregion
 export { useThemeByClassName };

package/dist/react/hooks/use-theme-by-class-name.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-class-name.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":[],"mappings":";;;;;;AA+BA;;;;;;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;uBAEc;YACX;WAEF,kCAAkC"}
+{"version":3,"file":"use-theme-by-class-name.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":[],"mappings":";;;;;;AA8BA;;;;;;;;;;;;;;;;;;;;;iBAAgB,mCAAmC,kBAC1C;uBAEc;YACX;WAEF,kCAAkC"}

package/dist/react/hooks/use-theme-by-class-name.mjs

@@ -1,6 +1,5 @@
 import { observeThemeFromStores } from "../../theme/_utils/observe-theme-from-stores.mjs";
 import { setThemeToStores } from "../../theme/_utils/set-theme-to-stores.mjs";
-import { resolveThemeFromClassName } from "../../theme/class-name/resolve-theme-from-class-name.mjs";
 import { themeEntry } from "../../theme/theme-entry.mjs";
 import { classNameThemeStore } from "../../theme/theme-store/class-name-theme-store/class-name-theme-store.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -12,7 +11,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 *
 * @param themes - Record mapping theme keys to their class name values
 * @param options.theme - Fallback theme key when no matching class is found
-* @param options.element - Element to read/set theme on (defaults to document.documentElement)
+* @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
 * @returns Tuple of [currentTheme, setTheme]
 *
 * @example
@@ -33,10 +32,7 @@ function useThemeByClassName(themes, options) {
 	const element = options?.element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
 	const defaultTheme = options?.defaultTheme;
 	const store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes]);
-	const [theme, setThemeState] = useState(() => {
-		if (element) return resolveThemeFromClassName(themes, element.className) ?? defaultTheme;
-		return defaultTheme;
-	});
+	const [theme, setThemeState] = useState(() => store.read()?.theme ?? defaultTheme);
 	useEffect(() => {
 		if (!element) return;
 		return observeThemeFromStores([store], defaultTheme, setThemeState);

package/dist/react/hooks/use-theme-by-class-name.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-class-name.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { resolveThemeFromClassName } from '../../theme/class-name/resolve-theme-from-class-name.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element class) and a setter.\n * Subscribes to class changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their class name values\n * @param options.theme - Fallback theme key when no matching class is found\n * @param options.element - Element to read/set theme on (defaults to document.documentElement)\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions?.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options?.defaultTheme\n\n\tconst store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (element) {\n\t\t\tconst resolved = resolveThemeFromClassName(themes, element.className)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,SAAgB,oBACf,QACA,SAI4D;CAC5D,MAAM,UACL,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CACnF,MAAM,eAAe,SAAS;CAE9B,MAAM,QAAQ,cAAc,oBAAoB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC;CAExF,MAAM,CAAC,OAAO,iBAAiB,eAAyC;AACvE,MAAI,QAEH,QADiB,0BAA0B,QAAQ,QAAQ,UAAU,IAClD;AAEpB,SAAO;GACN;AAEF,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,OATS,aACf,aAA2B;AAC3B,MAAI,QACH,kBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}
+{"version":3,"file":"use-theme-by-class-name.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-class-name.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element class) and a setter.\n * Subscribes to class changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their class name values\n * @param options.theme - Fallback theme key when no matching class is found\n * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByClassName(themes, { theme: 'light' })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions?: {\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | null | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions?.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options?.defaultTheme\n\n\tconst store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(\n\t\t() => store.read()?.theme ?? defaultTheme\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAgB,oBACf,QACA,SAI4D;CAC5D,MAAM,UACL,SAAS,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CACnF,MAAM,eAAe,SAAS;CAE9B,MAAM,QAAQ,cAAc,oBAAoB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,SAAS,OAAO,CAAC;CAExF,MAAM,CAAC,OAAO,iBAAiB,eACxB,MAAM,MAAM,EAAE,SAAS,aAC7B;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,OATS,aACf,aAA2B;AAC3B,MAAI,QACH,kBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}

package/dist/react/hooks/use-theme-by-data-attribute.cjs

@@ -1,9 +1,7 @@
 const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
-const require_get_data_attribute = require('../../attributes/get-data-attribute.cjs');
 const require_observe_theme_from_stores = require('../../theme/_utils/observe-theme-from-stores.cjs');
 const require_set_theme_to_stores = require('../../theme/_utils/set-theme-to-stores.cjs');
 const require_theme_entry = require('../../theme/theme-entry.cjs');
-const require_resolve_theme_from_data_attribute = require('../../theme/data-attribute/resolve-theme-from-data-attribute.cjs');
 const require_data_attribute_theme_store = require('../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.cjs');
 let react = require("react");
 
@@ -15,7 +13,7 @@ let react = require("react");
 * @param themes - Record mapping theme keys to their data attribute values
 * @param options.attributeName - Data attribute name (e.g. `data-theme`)
 * @param options.defaultTheme - Fallback theme key when no matching attribute value is found
-* @param options.element - Element to read/set theme on (defaults to document.documentElement)
+* @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
 * @returns Tuple of [currentTheme, setTheme]
 *
 * @example
@@ -47,10 +45,7 @@ function useThemeByDataAttribute(themes, options) {
 		themes,
 		attributeName
 	]);
-	const [theme, setThemeState] = (0, react.useState)(() => {
-		if (element) return require_resolve_theme_from_data_attribute.resolveThemeFromDataAttribute(themes, require_get_data_attribute.getDataAttribute(attributeName, element)) ?? defaultTheme;
-		return defaultTheme;
-	});
+	const [theme, setThemeState] = (0, react.useState)(() => store.read()?.theme ?? defaultTheme);
 	(0, react.useEffect)(() => {
 		if (!element) return;
 		return require_observe_theme_from_stores.observeThemeFromStores([store], defaultTheme, setThemeState);

package/dist/react/hooks/use-theme-by-data-attribute.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-data-attribute.cjs","names":["dataAttributeThemeStore","resolveThemeFromDataAttribute","getDataAttribute","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { getDataAttribute } from '../../attributes/get-data-attribute.ts'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { resolveThemeFromDataAttribute } from '../../theme/data-attribute/resolve-theme-from-data-attribute.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { dataAttributeThemeStore } from '../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element data attribute) and a setter.\n * Subscribes to data attribute changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their data attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.defaultTheme - Fallback theme key when no matching attribute value is found\n * @param options.element - Element to read/set theme on (defaults to document.documentElement)\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByDataAttribute(themes, {\n *   attributeName: 'data-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tattributeName: `data-${string}`\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options.defaultTheme\n\tconst attributeName = options.attributeName\n\n\tconst store = useMemo(\n\t\t() =>\n\t\t\tdataAttributeThemeStore(themes, {\n\t\t\t\tattributeName,\n\t\t\t\telement\n\t\t\t}),\n\t\t[element, themes, attributeName]\n\t)\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (element) {\n\t\t\tconst attrValue = getDataAttribute(attributeName, element)\n\t\t\tconst resolved = resolveThemeFromDataAttribute(themes, attrValue)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,wBACf,QACA,SAK4D;CAC5D,MAAM,UACL,QAAQ,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CAClF,MAAM,eAAe,QAAQ;CAC7B,MAAM,gBAAgB,QAAQ;CAE9B,MAAM,iCAEJA,2DAAwB,QAAQ;EAC/B;EACA;EACA,CAAC,EACH;EAAC;EAAS;EAAQ;EAAc,CAChC;CAED,MAAM,CAAC,OAAO,2CAA0D;AACvE,MAAI,QAGH,QADiBC,wEAA8B,QAD7BC,4CAAiB,eAAe,QAAQ,CACO,IAC9C;AAEpB,SAAO;GACN;AAEF,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,+BARN,aAA2B;AAC3B,MAAI,QACH,8CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}
+{"version":3,"file":"use-theme-by-data-attribute.cjs","names":["dataAttributeThemeStore","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { dataAttributeThemeStore } from '../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element data attribute) and a setter.\n * Subscribes to data attribute changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their data attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.defaultTheme - Fallback theme key when no matching attribute value is found\n * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByDataAttribute(themes, {\n *   attributeName: 'data-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tattributeName: `data-${string}`\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | null | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options.defaultTheme\n\tconst attributeName = options.attributeName\n\n\tconst store = useMemo(\n\t\t() =>\n\t\t\tdataAttributeThemeStore(themes, {\n\t\t\t\tattributeName,\n\t\t\t\telement\n\t\t\t}),\n\t\t[element, themes, attributeName]\n\t)\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(\n\t\t() => store.read()?.theme ?? defaultTheme\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,wBACf,QACA,SAK4D;CAC5D,MAAM,UACL,QAAQ,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CAClF,MAAM,eAAe,QAAQ;CAC7B,MAAM,gBAAgB,QAAQ;CAE9B,MAAM,iCAEJA,2DAAwB,QAAQ;EAC/B;EACA;EACA,CAAC,EACH;EAAC;EAAS;EAAQ;EAAc,CAChC;CAED,MAAM,CAAC,OAAO,2CACP,MAAM,MAAM,EAAE,SAAS,aAC7B;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,+BARN,aAA2B;AAC3B,MAAI,QACH,8CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}

package/dist/react/hooks/use-theme-by-data-attribute.d.cts

@@ -9,7 +9,7 @@ import { ThemeMap } from "../../theme/theme-map.types.cjs";
  * @param themes - Record mapping theme keys to their data attribute values
  * @param options.attributeName - Data attribute name (e.g. `data-theme`)
  * @param options.defaultTheme - Fallback theme key when no matching attribute value is found
- * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
  * @returns Tuple of [currentTheme, setTheme]
  *
  * @example
@@ -32,7 +32,7 @@ import { ThemeMap } from "../../theme/theme-map.types.cjs";
 declare function useThemeByDataAttribute<Themes extends ThemeMap>(themes: Themes, options: {
   attributeName: `data-${string}`;
   defaultTheme?: keyof Themes | undefined;
-  element?: Element | undefined;
+  element?: Element | null | undefined;
 }): [keyof Themes | undefined, (theme: keyof Themes) => void];
 //#endregion
 export { useThemeByDataAttribute };

package/dist/react/hooks/use-theme-by-data-attribute.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-data-attribute.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":[],"mappings":";;;;;;AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;uBAGc;YACX;WAEF,kCAAkC"}
+{"version":3,"file":"use-theme-by-data-attribute.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;uBAGc;YACX;WAEF,kCAAkC"}

package/dist/react/hooks/use-theme-by-data-attribute.d.mts

@@ -9,7 +9,7 @@ import { ThemeMap } from "../../theme/theme-map.types.mjs";
  * @param themes - Record mapping theme keys to their data attribute values
  * @param options.attributeName - Data attribute name (e.g. `data-theme`)
  * @param options.defaultTheme - Fallback theme key when no matching attribute value is found
- * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
  * @returns Tuple of [currentTheme, setTheme]
  *
  * @example
@@ -32,7 +32,7 @@ import { ThemeMap } from "../../theme/theme-map.types.mjs";
 declare function useThemeByDataAttribute<Themes extends ThemeMap>(themes: Themes, options: {
   attributeName: `data-${string}`;
   defaultTheme?: keyof Themes | undefined;
-  element?: Element | undefined;
+  element?: Element | null | undefined;
 }): [keyof Themes | undefined, (theme: keyof Themes) => void];
 //#endregion
 export { useThemeByDataAttribute };

package/dist/react/hooks/use-theme-by-data-attribute.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-data-attribute.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":[],"mappings":";;;;;;AAoCA;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;uBAGc;YACX;WAEF,kCAAkC"}
+{"version":3,"file":"use-theme-by-data-attribute.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,uCAAuC,kBAC9C;;uBAGc;YACX;WAEF,kCAAkC"}

package/dist/react/hooks/use-theme-by-data-attribute.mjs

@@ -1,8 +1,6 @@
-import { getDataAttribute } from "../../attributes/get-data-attribute.mjs";
 import { observeThemeFromStores } from "../../theme/_utils/observe-theme-from-stores.mjs";
 import { setThemeToStores } from "../../theme/_utils/set-theme-to-stores.mjs";
 import { themeEntry } from "../../theme/theme-entry.mjs";
-import { resolveThemeFromDataAttribute } from "../../theme/data-attribute/resolve-theme-from-data-attribute.mjs";
 import { dataAttributeThemeStore } from "../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -14,7 +12,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 * @param themes - Record mapping theme keys to their data attribute values
 * @param options.attributeName - Data attribute name (e.g. `data-theme`)
 * @param options.defaultTheme - Fallback theme key when no matching attribute value is found
-* @param options.element - Element to read/set theme on (defaults to document.documentElement)
+* @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
 * @returns Tuple of [currentTheme, setTheme]
 *
 * @example
@@ -46,10 +44,7 @@ function useThemeByDataAttribute(themes, options) {
 		themes,
 		attributeName
 	]);
-	const [theme, setThemeState] = useState(() => {
-		if (element) return resolveThemeFromDataAttribute(themes, getDataAttribute(attributeName, element)) ?? defaultTheme;
-		return defaultTheme;
-	});
+	const [theme, setThemeState] = useState(() => store.read()?.theme ?? defaultTheme);
 	useEffect(() => {
 		if (!element) return;
 		return observeThemeFromStores([store], defaultTheme, setThemeState);

package/dist/react/hooks/use-theme-by-data-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-data-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { getDataAttribute } from '../../attributes/get-data-attribute.ts'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { resolveThemeFromDataAttribute } from '../../theme/data-attribute/resolve-theme-from-data-attribute.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { dataAttributeThemeStore } from '../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element data attribute) and a setter.\n * Subscribes to data attribute changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their data attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.defaultTheme - Fallback theme key when no matching attribute value is found\n * @param options.element - Element to read/set theme on (defaults to document.documentElement)\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByDataAttribute(themes, {\n *   attributeName: 'data-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tattributeName: `data-${string}`\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options.defaultTheme\n\tconst attributeName = options.attributeName\n\n\tconst store = useMemo(\n\t\t() =>\n\t\t\tdataAttributeThemeStore(themes, {\n\t\t\t\tattributeName,\n\t\t\t\telement\n\t\t\t}),\n\t\t[element, themes, attributeName]\n\t)\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (element) {\n\t\t\tconst attrValue = getDataAttribute(attributeName, element)\n\t\t\tconst resolved = resolveThemeFromDataAttribute(themes, attrValue)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,SAAgB,wBACf,QACA,SAK4D;CAC5D,MAAM,UACL,QAAQ,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CAClF,MAAM,eAAe,QAAQ;CAC7B,MAAM,gBAAgB,QAAQ;CAE9B,MAAM,QAAQ,cAEZ,wBAAwB,QAAQ;EAC/B;EACA;EACA,CAAC,EACH;EAAC;EAAS;EAAQ;EAAc,CAChC;CAED,MAAM,CAAC,OAAO,iBAAiB,eAAyC;AACvE,MAAI,QAGH,QADiB,8BAA8B,QAD7B,iBAAiB,eAAe,QAAQ,CACO,IAC9C;AAEpB,SAAO;GACN;AAEF,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,OATS,aACf,aAA2B;AAC3B,MAAI,QACH,kBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}
+{"version":3,"file":"use-theme-by-data-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-data-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { dataAttributeThemeStore } from '../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from element data attribute) and a setter.\n * Subscribes to data attribute changes on the element so the returned theme stays in sync.\n *\n * @param themes - Record mapping theme keys to their data attribute values\n * @param options.attributeName - Data attribute name (e.g. `data-theme`)\n * @param options.defaultTheme - Fallback theme key when no matching attribute value is found\n * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByDataAttribute(themes, {\n *   attributeName: 'data-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tattributeName: `data-${string}`\n\t\tdefaultTheme?: keyof Themes | undefined\n\t\telement?: Element | null | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst element =\n\t\toptions.element ?? (typeof document !== 'undefined' ? document.documentElement : undefined)\n\tconst defaultTheme = options.defaultTheme\n\tconst attributeName = options.attributeName\n\n\tconst store = useMemo(\n\t\t() =>\n\t\t\tdataAttributeThemeStore(themes, {\n\t\t\t\tattributeName,\n\t\t\t\telement\n\t\t\t}),\n\t\t[element, themes, attributeName]\n\t)\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(\n\t\t() => store.read()?.theme ?? defaultTheme\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [element, store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tif (element) {\n\t\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t\t}\n\t\t},\n\t\t[element, store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,wBACf,QACA,SAK4D;CAC5D,MAAM,UACL,QAAQ,YAAY,OAAO,aAAa,cAAc,SAAS,kBAAkB;CAClF,MAAM,eAAe,QAAQ;CAC7B,MAAM,gBAAgB,QAAQ;CAE9B,MAAM,QAAQ,cAEZ,wBAAwB,QAAQ;EAC/B;EACA;EACA,CAAC,EACH;EAAC;EAAS;EAAQ;EAAc,CAChC;CAED,MAAM,CAAC,OAAO,iBAAiB,eACxB,MAAM,MAAM,EAAE,SAAS,aAC7B;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E;EAAC;EAAS;EAAO;EAAa,CAAC;AAWlC,QAAO,CAAC,OATS,aACf,aAA2B;AAC3B,MAAI,QACH,kBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAGzD;EAAC;EAAS;EAAO;EAAO,CACxB,CAEuB"}

package/dist/react/hooks/use-theme-by-local-storage.cjs

@@ -2,7 +2,6 @@ const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
 const require_observe_theme_from_stores = require('../../theme/_utils/observe-theme-from-stores.cjs');
 const require_set_theme_to_stores = require('../../theme/_utils/set-theme-to-stores.cjs');
 const require_theme_entry = require('../../theme/theme-entry.cjs');
-const require_parse_stored_theme = require('../../theme/_utils/parse-stored-theme.cjs');
 const require_local_storage_theme_store = require('../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.cjs');
 let react = require("react");
 
@@ -36,10 +35,7 @@ let react = require("react");
 function useThemeByLocalStorage(themes, options) {
 	const { storageKey, defaultTheme } = options;
 	const store = (0, react.useMemo)(() => require_local_storage_theme_store.localStorageThemeStore(themes, { storageKey }), [themes, storageKey]);
-	const [theme, setThemeState] = (0, react.useState)(() => {
-		if (typeof window !== "undefined" && window.localStorage) return require_parse_stored_theme.parseStoredTheme(themes, window.localStorage.getItem(storageKey)) ?? defaultTheme;
-		return defaultTheme;
-	});
+	const [theme, setThemeState] = (0, react.useState)(() => store.read()?.theme ?? defaultTheme);
 	(0, react.useEffect)(() => {
 		return require_observe_theme_from_stores.observeThemeFromStores([store], defaultTheme, setThemeState);
 	}, [store, defaultTheme]);

package/dist/react/hooks/use-theme-by-local-storage.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-local-storage.cjs","names":["localStorageThemeStore","parseStoredTheme","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { parseStoredTheme } from '../../theme/_utils/parse-stored-theme.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { localStorageThemeStore } from '../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from localStorage) and a setter.\n * Subscribes to storage changes so the returned theme stays in sync across tabs.\n *\n * @param themes - Record mapping theme keys to their values\n * @param options.storageKey - localStorage key to persist the theme\n * @param options.defaultTheme - Fallback theme key when no stored value is found\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByLocalStorage(themes, {\n *   storageKey: 'app-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByLocalStorage<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tstorageKey: string\n\t\tdefaultTheme?: keyof Themes | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { storageKey, defaultTheme } = options\n\n\tconst store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (typeof window !== 'undefined' && window.localStorage) {\n\t\t\tconst stored = window.localStorage.getItem(storageKey)\n\t\t\tconst resolved = parseStoredTheme(themes, stored)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t},\n\t\t[store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,uBACf,QACA,SAI4D;CAC5D,MAAM,EAAE,YAAY,iBAAiB;CAErC,MAAM,iCAAsBA,yDAAuB,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,WAAW,CAAC;CAEjG,MAAM,CAAC,OAAO,2CAA0D;AACvE,MAAI,OAAO,WAAW,eAAe,OAAO,aAG3C,QADiBC,4CAAiB,QADnB,OAAO,aAAa,QAAQ,WAAW,CACL,IAC9B;AAEpB,SAAO;GACN;AAEF,4BAAgB;AAEf,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E,CAAC,OAAO,aAAa,CAAC;AASzB,QAAO,CAAC,+BANN,aAA2B;AAC3B,+CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAExD,CAAC,OAAO,OAAO,CACf,CAEuB"}
+{"version":3,"file":"use-theme-by-local-storage.cjs","names":["localStorageThemeStore","observeThemeFromStores","themeEntry"],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { localStorageThemeStore } from '../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from localStorage) and a setter.\n * Subscribes to storage changes so the returned theme stays in sync across tabs.\n *\n * @param themes - Record mapping theme keys to their values\n * @param options.storageKey - localStorage key to persist the theme\n * @param options.defaultTheme - Fallback theme key when no stored value is found\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByLocalStorage(themes, {\n *   storageKey: 'app-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByLocalStorage<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tstorageKey: string\n\t\tdefaultTheme?: keyof Themes | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { storageKey, defaultTheme } = options\n\n\tconst store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(\n\t\t() => store.read()?.theme ?? defaultTheme\n\t)\n\n\tuseEffect(() => {\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t},\n\t\t[store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,uBACf,QACA,SAI4D;CAC5D,MAAM,EAAE,YAAY,iBAAiB;CAErC,MAAM,iCAAsBA,yDAAuB,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,WAAW,CAAC;CAEjG,MAAM,CAAC,OAAO,2CACP,MAAM,MAAM,EAAE,SAAS,aAC7B;AAED,4BAAgB;AAEf,SADkBC,yDAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E,CAAC,OAAO,aAAa,CAAC;AASzB,QAAO,CAAC,+BANN,aAA2B;AAC3B,+CAAiB,CAAC,MAAM,EAAEC,+BAAW,QAAQ,SAAS,CAAC;IAExD,CAAC,OAAO,OAAO,CACf,CAEuB"}

package/dist/react/hooks/use-theme-by-local-storage.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-local-storage.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C;;uBAGc;WAEb,kCAAkC"}
+{"version":3,"file":"use-theme-by-local-storage.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":[],"mappings":";;;;;;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C;;uBAGc;WAEb,kCAAkC"}

package/dist/react/hooks/use-theme-by-local-storage.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-local-storage.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":[],"mappings":";;;;;;AAkCA;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C;;uBAGc;WAEb,kCAAkC"}
+{"version":3,"file":"use-theme-by-local-storage.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":[],"mappings":";;;;;;AAiCA;;;;;;;;;;;;;;;;;;;;;;;;iBAAgB,sCAAsC,kBAC7C;;uBAGc;WAEb,kCAAkC"}

package/dist/react/hooks/use-theme-by-local-storage.mjs

@@ -1,7 +1,6 @@
 import { observeThemeFromStores } from "../../theme/_utils/observe-theme-from-stores.mjs";
 import { setThemeToStores } from "../../theme/_utils/set-theme-to-stores.mjs";
 import { themeEntry } from "../../theme/theme-entry.mjs";
-import { parseStoredTheme } from "../../theme/_utils/parse-stored-theme.mjs";
 import { localStorageThemeStore } from "../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.mjs";
 import { useCallback, useEffect, useMemo, useState } from "react";
 
@@ -35,10 +34,7 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 function useThemeByLocalStorage(themes, options) {
 	const { storageKey, defaultTheme } = options;
 	const store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey]);
-	const [theme, setThemeState] = useState(() => {
-		if (typeof window !== "undefined" && window.localStorage) return parseStoredTheme(themes, window.localStorage.getItem(storageKey)) ?? defaultTheme;
-		return defaultTheme;
-	});
+	const [theme, setThemeState] = useState(() => store.read()?.theme ?? defaultTheme);
 	useEffect(() => {
 		return observeThemeFromStores([store], defaultTheme, setThemeState);
 	}, [store, defaultTheme]);

package/dist/react/hooks/use-theme-by-local-storage.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-theme-by-local-storage.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { parseStoredTheme } from '../../theme/_utils/parse-stored-theme.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { localStorageThemeStore } from '../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from localStorage) and a setter.\n * Subscribes to storage changes so the returned theme stays in sync across tabs.\n *\n * @param themes - Record mapping theme keys to their values\n * @param options.storageKey - localStorage key to persist the theme\n * @param options.defaultTheme - Fallback theme key when no stored value is found\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByLocalStorage(themes, {\n *   storageKey: 'app-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByLocalStorage<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tstorageKey: string\n\t\tdefaultTheme?: keyof Themes | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { storageKey, defaultTheme } = options\n\n\tconst store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(() => {\n\t\tif (typeof window !== 'undefined' && window.localStorage) {\n\t\t\tconst stored = window.localStorage.getItem(storageKey)\n\t\t\tconst resolved = parseStoredTheme(themes, stored)\n\t\t\treturn resolved ?? defaultTheme\n\t\t}\n\t\treturn defaultTheme\n\t})\n\n\tuseEffect(() => {\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t},\n\t\t[store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,SAAgB,uBACf,QACA,SAI4D;CAC5D,MAAM,EAAE,YAAY,iBAAiB;CAErC,MAAM,QAAQ,cAAc,uBAAuB,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,WAAW,CAAC;CAEjG,MAAM,CAAC,OAAO,iBAAiB,eAAyC;AACvE,MAAI,OAAO,WAAW,eAAe,OAAO,aAG3C,QADiB,iBAAiB,QADnB,OAAO,aAAa,QAAQ,WAAW,CACL,IAC9B;AAEpB,SAAO;GACN;AAEF,iBAAgB;AAEf,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E,CAAC,OAAO,aAAa,CAAC;AASzB,QAAO,CAAC,OAPS,aACf,aAA2B;AAC3B,mBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAExD,CAAC,OAAO,OAAO,CACf,CAEuB"}
+{"version":3,"file":"use-theme-by-local-storage.mjs","names":[],"sources":["../../../src/react/hooks/use-theme-by-local-storage.ts"],"sourcesContent":["import { useCallback, useEffect, useMemo, useState } from 'react'\nimport { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'\nimport { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport { localStorageThemeStore } from '../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.ts'\n\n/**\n * React hook that returns the current theme (from localStorage) and a setter.\n * Subscribes to storage changes so the returned theme stays in sync across tabs.\n *\n * @param themes - Record mapping theme keys to their values\n * @param options.storageKey - localStorage key to persist the theme\n * @param options.defaultTheme - Fallback theme key when no stored value is found\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * const themes = { light: 'theme-light', dark: 'theme-dark' }\n * const [theme, setTheme] = useThemeByLocalStorage(themes, {\n *   storageKey: 'app-theme',\n *   defaultTheme: 'light'\n * })\n *\n * return (\n *   <>\n *     <span>Current: {theme}</span>\n *     <button onClick={() => setTheme('dark')}>Dark</button>\n *     <button onClick={() => setTheme('light')}>Light</button>\n *   </>\n * )\n * ```\n */\nexport function useThemeByLocalStorage<Themes extends ThemeMap>(\n\tthemes: Themes,\n\toptions: {\n\t\tstorageKey: string\n\t\tdefaultTheme?: keyof Themes | undefined\n\t}\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { storageKey, defaultTheme } = options\n\n\tconst store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey])\n\n\tconst [theme, setThemeState] = useState<keyof Themes | undefined>(\n\t\t() => store.read()?.theme ?? defaultTheme\n\t)\n\n\tuseEffect(() => {\n\t\tconst unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)\n\t\treturn unobserve\n\t}, [store, defaultTheme])\n\n\tconst setTheme = useCallback(\n\t\t(themeKey: keyof Themes) => {\n\t\t\tsetThemeToStores([store], themeEntry(themes, themeKey))\n\t\t},\n\t\t[store, themes]\n\t)\n\n\treturn [theme, setTheme]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiCA,SAAgB,uBACf,QACA,SAI4D;CAC5D,MAAM,EAAE,YAAY,iBAAiB;CAErC,MAAM,QAAQ,cAAc,uBAAuB,QAAQ,EAAE,YAAY,CAAC,EAAE,CAAC,QAAQ,WAAW,CAAC;CAEjG,MAAM,CAAC,OAAO,iBAAiB,eACxB,MAAM,MAAM,EAAE,SAAS,aAC7B;AAED,iBAAgB;AAEf,SADkB,uBAAuB,CAAC,MAAM,EAAE,cAAc,cAAc;IAE5E,CAAC,OAAO,aAAa,CAAC;AASzB,QAAO,CAAC,OAPS,aACf,aAA2B;AAC3B,mBAAiB,CAAC,MAAM,EAAE,WAAW,QAAQ,SAAS,CAAC;IAExD,CAAC,OAAO,OAAO,CACf,CAEuB"}