@just-web/toolkits 2.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

@@ -12,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

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

@@ -1 +1 @@
-{"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 (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\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"}
+{"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.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.mjs

@@ -11,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

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 { 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\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"}
+{"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

@@ -13,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

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

@@ -1 +1 @@
-{"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 (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\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"}
+{"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.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.mjs

@@ -12,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

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 { 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 (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\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"}
+{"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/theme/create-theme-hook.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-theme-hook.cjs","names":["lastTheme: keyof Themes | undefined","unobserve: () => void","themeEntry","composeThemeStores"],"sources":["../../../src/react/theme/create-theme-hook.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport type { Required } from 'type-plus'\nimport {\n\ttype ComposeThemeStoreEntry,\n\ttype ComposeThemeStoresOptions,\n\tcomposeThemeStores\n} from '../../theme/compose-theme-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeEntry } from '../../theme/theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport type { AsyncThemeStore } from '../../theme/theme-store/async-theme-store.types.ts'\nimport type { ThemeStoreFactory } from '../../theme/theme-store/theme-store-factory.types.ts'\n\n/**\n * Creates a React hook for theme selection that reads from and writes to composed theme stores.\n *\n * The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR\n * (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.\n * Channels are cached per store configuration and default theme for efficient reuse.\n *\n * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)\n * @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)\n * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR\n * @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple\n *\n * @example\n * ```ts\n * const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })\n * const [theme, setTheme] = useTheme()\n * setTheme('dark')\n * ```\n */\nexport function createThemeHook<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes>\n): (\n\toverrideDefaultTheme?: keyof Themes | undefined\n) => [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { defaultTheme } = options ?? {}\n\treturn function useTheme(overrideDefaultTheme?: keyof Themes | undefined) {\n\t\tconst effectiveDefault = overrideDefaultTheme ?? defaultTheme\n\t\tconst channel = getOrCreateChannel<Themes, A, B, C, D, E, F, G, H>(themes, stores, {\n\t\t\tdefaultTheme: effectiveDefault\n\t\t})\n\n\t\tconst theme = useSyncExternalStore<keyof Themes | undefined>(\n\t\t\tchannel.subscribe,\n\t\t\tchannel.getSnapshot,\n\t\t\tchannel.getServerSnapshot\n\t\t)\n\n\t\tconst setTheme = useCallback(\n\t\t\tasync (newTheme: keyof Themes) => {\n\t\t\t\tawait channel.setTheme(newTheme)\n\t\t\t},\n\t\t\t[channel]\n\t\t)\n\n\t\treturn [theme, setTheme]\n\t}\n}\n\n/**\n * Creates a subscription channel bridging a composed theme store to React's useSyncExternalStore.\n * Manages listeners, initial async read from store, and delegates setTheme to store.write.\n *\n * @internal\n */\nfunction createSharedChannel<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tcomposedStore: Required<AsyncThemeStore<Themes>>,\n\tdefaultTheme: keyof Themes | undefined\n) {\n\tlet lastTheme: keyof Themes | undefined = defaultTheme\n\tconst listeners = new Set<(theme: keyof Themes | undefined) => void>()\n\n\tconst notify = (theme: keyof Themes | undefined) => {\n\t\tlastTheme = theme\n\t\tfor (const fn of listeners) {\n\t\t\tfn(theme)\n\t\t}\n\t}\n\n\tconst handleStoreUpdate = (entry: ThemeEntry<Themes> | undefined | null) => {\n\t\tnotify(entry?.theme ?? defaultTheme)\n\t}\n\n\t// Initial read to populate lastTheme (compose store subscribe has no initial notify)\n\tvoid Promise.resolve(composedStore.read()).then(\n\t\t(entry: ThemeEntry<Themes> | undefined | null) => {\n\t\t\tnotify(entry?.theme ?? defaultTheme)\n\t\t}\n\t)\n\n\tlet unobserve: () => void = composedStore.subscribe(handleStoreUpdate)\n\tlet isSubscribedToStore = true\n\n\tconst subscribe = (listener: (theme: keyof Themes | undefined) => void) => {\n\t\tif (!isSubscribedToStore) {\n\t\t\tunobserve = composedStore.subscribe(handleStoreUpdate)\n\t\t\tisSubscribedToStore = true\n\t\t}\n\t\tlisteners.add(listener)\n\t\tlistener(lastTheme)\n\t\treturn () => {\n\t\t\tlisteners.delete(listener)\n\t\t\tif (listeners.size === 0) {\n\t\t\t\tunobserve()\n\t\t\t\tisSubscribedToStore = false\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getSnapshot = (): keyof Themes | undefined => lastTheme\n\tconst getServerSnapshot = (): keyof Themes | undefined => defaultTheme\n\n\treturn {\n\t\tsubscribe,\n\t\tgetSnapshot,\n\t\tgetServerSnapshot,\n\t\tsetTheme: (theme: keyof Themes) => composedStore.write(themeEntry(themes, theme))\n\t}\n}\n\nconst channelsByStores = new WeakMap<\n\tobject,\n\tMap<string | undefined, ReturnType<typeof createSharedChannel<any>>>\n>()\n\n/**\n * Returns a cached shared channel for the given themes, stores, and defaultTheme.\n * Channels are keyed by stores (WeakMap) and defaultTheme to avoid duplicate subscriptions.\n *\n * @internal\n */\nfunction getOrCreateChannel<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes> | undefined\n) {\n\tconst { defaultTheme } = options ?? {}\n\tconst storesKey = stores as unknown as object\n\tlet byDefault = channelsByStores.get(storesKey) as Map<\n\t\tkeyof Themes | undefined,\n\t\tReturnType<typeof createSharedChannel<Themes>>\n\t>\n\tif (!byDefault) {\n\t\tbyDefault = new Map<keyof Themes | undefined, ReturnType<typeof createSharedChannel<Themes>>>()\n\t\tchannelsByStores.set(storesKey, byDefault as any)\n\t}\n\tlet channel = byDefault.get(defaultTheme) as ReturnType<typeof createSharedChannel<Themes>>\n\tif (!channel) {\n\t\tconst composedStore = composeThemeStores(themes, stores, { defaultTheme })\n\t\tchannel = createSharedChannel<Themes>(themes, composedStore, defaultTheme)\n\t\tbyDefault.set(defaultTheme, channel)\n\t}\n\treturn channel\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,gBAWf,QACA,QAUA,SAG8D;CAC9D,MAAM,EAAE,iBAAiB,WAAW,EAAE;AACtC,QAAO,SAAS,SAAS,sBAAiD;EAEzE,MAAM,UAAU,mBAAmD,QAAQ,QAAQ,EAClF,cAFwB,wBAAwB,cAGhD,CAAC;AAeF,SAAO,iCAZN,QAAQ,WACR,QAAQ,aACR,QAAQ,kBACR,yBAGA,OAAO,aAA2B;AACjC,SAAM,QAAQ,SAAS,SAAS;KAEjC,CAAC,QAAQ,CACT,CAEuB;;;;;;;;;AAU1B,SAAS,oBACR,QACA,eACA,cACC;CACD,IAAIA,YAAsC;CAC1C,MAAM,4BAAY,IAAI,KAAgD;CAEtE,MAAM,UAAU,UAAoC;AACnD,cAAY;AACZ,OAAK,MAAM,MAAM,UAChB,IAAG,MAAM;;CAIX,MAAM,qBAAqB,UAAiD;AAC3E,SAAO,OAAO,SAAS,aAAa;;AAIrC,CAAK,QAAQ,QAAQ,cAAc,MAAM,CAAC,CAAC,MACzC,UAAiD;AACjD,SAAO,OAAO,SAAS,aAAa;GAErC;CAED,IAAIC,YAAwB,cAAc,UAAU,kBAAkB;CACtE,IAAI,sBAAsB;CAE1B,MAAM,aAAa,aAAwD;AAC1E,MAAI,CAAC,qBAAqB;AACzB,eAAY,cAAc,UAAU,kBAAkB;AACtD,yBAAsB;;AAEvB,YAAU,IAAI,SAAS;AACvB,WAAS,UAAU;AACnB,eAAa;AACZ,aAAU,OAAO,SAAS;AAC1B,OAAI,UAAU,SAAS,GAAG;AACzB,eAAW;AACX,0BAAsB;;;;CAKzB,MAAM,oBAA8C;CACpD,MAAM,0BAAoD;AAE1D,QAAO;EACN;EACA;EACA;EACA,WAAW,UAAwB,cAAc,MAAMC,+BAAW,QAAQ,MAAM,CAAC;EACjF;;AAGF,MAAM,mCAAmB,IAAI,SAG1B;;;;;;;AAQH,SAAS,mBAWR,QACA,QAUA,SACC;CACD,MAAM,EAAE,iBAAiB,WAAW,EAAE;CACtC,MAAM,YAAY;CAClB,IAAI,YAAY,iBAAiB,IAAI,UAAU;AAI/C,KAAI,CAAC,WAAW;AACf,8BAAY,IAAI,KAA+E;AAC/F,mBAAiB,IAAI,WAAW,UAAiB;;CAElD,IAAI,UAAU,UAAU,IAAI,aAAa;AACzC,KAAI,CAAC,SAAS;AAEb,YAAU,oBAA4B,QADhBC,gDAAmB,QAAQ,QAAQ,EAAE,cAAc,CAAC,EACb,aAAa;AAC1E,YAAU,IAAI,cAAc,QAAQ;;AAErC,QAAO"}
+{"version":3,"file":"create-theme-hook.cjs","names":["lastTheme: keyof Themes | undefined","unobserve: () => void","themeEntry","composeThemeStores"],"sources":["../../../src/react/theme/create-theme-hook.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport type { Required } from 'type-plus'\nimport {\n\ttype ComposeThemeStoreEntry,\n\ttype ComposeThemeStoresOptions,\n\tcomposeThemeStores\n} from '../../theme/compose-theme-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeEntry } from '../../theme/theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport type { AsyncThemeStore } from '../../theme/theme-store/async-theme-store.types.ts'\nimport type { ThemeStoreFactory } from '../../theme/theme-store/theme-store-factory.types.ts'\n\n/**\n * Creates a React hook for theme selection that reads from and writes to composed theme stores.\n *\n * The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR\n * (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.\n * Channels are cached per store configuration and default theme for efficient reuse.\n *\n * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)\n * @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)\n * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR\n * @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple\n *\n * @example\n * ```ts\n * const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })\n * const [theme, setTheme] = useTheme()\n * setTheme('dark')\n * ```\n */\nexport function createThemeHook<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes>\n): (\n\toverrideDefaultTheme?: keyof Themes | undefined\n) => [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { defaultTheme } = options ?? {}\n\treturn function useTheme(overrideDefaultTheme?: keyof Themes | undefined) {\n\t\tconst effectiveDefault = overrideDefaultTheme ?? defaultTheme\n\t\tconst channel = getOrCreateChannel<Themes, A, B, C, D, E, F, G, H>(themes, stores, {\n\t\t\tdefaultTheme: effectiveDefault\n\t\t})\n\n\t\tconst theme = useSyncExternalStore<keyof Themes | undefined>(\n\t\t\tchannel.subscribe,\n\t\t\tchannel.getSnapshot,\n\t\t\tchannel.getServerSnapshot\n\t\t)\n\n\t\tconst setTheme = useCallback(\n\t\t\tasync (newTheme: keyof Themes) => {\n\t\t\t\tawait channel.setTheme(newTheme)\n\t\t\t},\n\t\t\t[channel]\n\t\t)\n\n\t\treturn [theme, setTheme]\n\t}\n}\n\n/**\n * Creates a subscription channel bridging a composed theme store to React's useSyncExternalStore.\n * Manages listeners, initial async read from store, and delegates setTheme to store.write.\n *\n * @internal\n */\nfunction createSharedChannel<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tcomposedStore: Required<AsyncThemeStore<Themes>>,\n\tdefaultTheme: keyof Themes | undefined\n) {\n\tlet lastTheme: keyof Themes | undefined = defaultTheme\n\tconst listeners = new Set<(theme: keyof Themes | undefined) => void>()\n\n\tconst notify = (theme: keyof Themes | undefined) => {\n\t\tlastTheme = theme\n\t\tfor (const fn of listeners) {\n\t\t\tfn(theme)\n\t\t}\n\t}\n\n\tconst handleStoreUpdate = (entry: ThemeEntry<Themes> | undefined) => {\n\t\tnotify(entry?.theme ?? defaultTheme)\n\t}\n\n\t// Initial read to populate lastTheme (compose store subscribe has no initial notify)\n\tvoid Promise.resolve(composedStore.read()).then((entry: ThemeEntry<Themes> | undefined) => {\n\t\tnotify(entry?.theme ?? defaultTheme)\n\t})\n\n\tlet unobserve: () => void = composedStore.subscribe(handleStoreUpdate)\n\tlet isSubscribedToStore = true\n\n\tconst subscribe = (listener: (theme: keyof Themes | undefined) => void) => {\n\t\tif (!isSubscribedToStore) {\n\t\t\tunobserve = composedStore.subscribe(handleStoreUpdate)\n\t\t\tisSubscribedToStore = true\n\t\t}\n\t\tlisteners.add(listener)\n\t\tlistener(lastTheme)\n\t\treturn () => {\n\t\t\tlisteners.delete(listener)\n\t\t\tif (listeners.size === 0) {\n\t\t\t\tunobserve()\n\t\t\t\tisSubscribedToStore = false\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getSnapshot = (): keyof Themes | undefined => lastTheme\n\tconst getServerSnapshot = (): keyof Themes | undefined => defaultTheme\n\n\treturn {\n\t\tsubscribe,\n\t\tgetSnapshot,\n\t\tgetServerSnapshot,\n\t\tsetTheme: (theme: keyof Themes) => composedStore.write(themeEntry(themes, theme))\n\t}\n}\n\nconst channelsByStores = new WeakMap<\n\tobject,\n\tMap<string | undefined, ReturnType<typeof createSharedChannel<any>>>\n>()\n\n/**\n * Returns a cached shared channel for the given themes, stores, and defaultTheme.\n * Channels are keyed by stores (WeakMap) and defaultTheme to avoid duplicate subscriptions.\n *\n * @internal\n */\nfunction getOrCreateChannel<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes> | undefined\n) {\n\tconst { defaultTheme } = options ?? {}\n\tconst storesKey = stores as unknown as object\n\tlet byDefault = channelsByStores.get(storesKey) as Map<\n\t\tkeyof Themes | undefined,\n\t\tReturnType<typeof createSharedChannel<Themes>>\n\t>\n\tif (!byDefault) {\n\t\tbyDefault = new Map<keyof Themes | undefined, ReturnType<typeof createSharedChannel<Themes>>>()\n\t\tchannelsByStores.set(storesKey, byDefault as any)\n\t}\n\tlet channel = byDefault.get(defaultTheme) as ReturnType<typeof createSharedChannel<Themes>>\n\tif (!channel) {\n\t\tconst composedStore = composeThemeStores(themes, stores, { defaultTheme })\n\t\tchannel = createSharedChannel<Themes>(themes, composedStore, defaultTheme)\n\t\tbyDefault.set(defaultTheme, channel)\n\t}\n\treturn channel\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,gBAWf,QACA,QAUA,SAG8D;CAC9D,MAAM,EAAE,iBAAiB,WAAW,EAAE;AACtC,QAAO,SAAS,SAAS,sBAAiD;EAEzE,MAAM,UAAU,mBAAmD,QAAQ,QAAQ,EAClF,cAFwB,wBAAwB,cAGhD,CAAC;AAeF,SAAO,iCAZN,QAAQ,WACR,QAAQ,aACR,QAAQ,kBACR,yBAGA,OAAO,aAA2B;AACjC,SAAM,QAAQ,SAAS,SAAS;KAEjC,CAAC,QAAQ,CACT,CAEuB;;;;;;;;;AAU1B,SAAS,oBACR,QACA,eACA,cACC;CACD,IAAIA,YAAsC;CAC1C,MAAM,4BAAY,IAAI,KAAgD;CAEtE,MAAM,UAAU,UAAoC;AACnD,cAAY;AACZ,OAAK,MAAM,MAAM,UAChB,IAAG,MAAM;;CAIX,MAAM,qBAAqB,UAA0C;AACpE,SAAO,OAAO,SAAS,aAAa;;AAIrC,CAAK,QAAQ,QAAQ,cAAc,MAAM,CAAC,CAAC,MAAM,UAA0C;AAC1F,SAAO,OAAO,SAAS,aAAa;GACnC;CAEF,IAAIC,YAAwB,cAAc,UAAU,kBAAkB;CACtE,IAAI,sBAAsB;CAE1B,MAAM,aAAa,aAAwD;AAC1E,MAAI,CAAC,qBAAqB;AACzB,eAAY,cAAc,UAAU,kBAAkB;AACtD,yBAAsB;;AAEvB,YAAU,IAAI,SAAS;AACvB,WAAS,UAAU;AACnB,eAAa;AACZ,aAAU,OAAO,SAAS;AAC1B,OAAI,UAAU,SAAS,GAAG;AACzB,eAAW;AACX,0BAAsB;;;;CAKzB,MAAM,oBAA8C;CACpD,MAAM,0BAAoD;AAE1D,QAAO;EACN;EACA;EACA;EACA,WAAW,UAAwB,cAAc,MAAMC,+BAAW,QAAQ,MAAM,CAAC;EACjF;;AAGF,MAAM,mCAAmB,IAAI,SAG1B;;;;;;;AAQH,SAAS,mBAWR,QACA,QAUA,SACC;CACD,MAAM,EAAE,iBAAiB,WAAW,EAAE;CACtC,MAAM,YAAY;CAClB,IAAI,YAAY,iBAAiB,IAAI,UAAU;AAI/C,KAAI,CAAC,WAAW;AACf,8BAAY,IAAI,KAA+E;AAC/F,mBAAiB,IAAI,WAAW,UAAiB;;CAElD,IAAI,UAAU,UAAU,IAAI,aAAa;AACzC,KAAI,CAAC,SAAS;AAEb,YAAU,oBAA4B,QADhBC,gDAAmB,QAAQ,QAAQ,EAAE,cAAc,CAAC,EACb,aAAa;AAC1E,YAAU,IAAI,cAAc,QAAQ;;AAErC,QAAO"}

package/dist/react/theme/create-theme-hook.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"create-theme-hook.mjs","names":["lastTheme: keyof Themes | undefined","unobserve: () => void"],"sources":["../../../src/react/theme/create-theme-hook.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport type { Required } from 'type-plus'\nimport {\n\ttype ComposeThemeStoreEntry,\n\ttype ComposeThemeStoresOptions,\n\tcomposeThemeStores\n} from '../../theme/compose-theme-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeEntry } from '../../theme/theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport type { AsyncThemeStore } from '../../theme/theme-store/async-theme-store.types.ts'\nimport type { ThemeStoreFactory } from '../../theme/theme-store/theme-store-factory.types.ts'\n\n/**\n * Creates a React hook for theme selection that reads from and writes to composed theme stores.\n *\n * The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR\n * (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.\n * Channels are cached per store configuration and default theme for efficient reuse.\n *\n * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)\n * @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)\n * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR\n * @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple\n *\n * @example\n * ```ts\n * const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })\n * const [theme, setTheme] = useTheme()\n * setTheme('dark')\n * ```\n */\nexport function createThemeHook<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes>\n): (\n\toverrideDefaultTheme?: keyof Themes | undefined\n) => [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { defaultTheme } = options ?? {}\n\treturn function useTheme(overrideDefaultTheme?: keyof Themes | undefined) {\n\t\tconst effectiveDefault = overrideDefaultTheme ?? defaultTheme\n\t\tconst channel = getOrCreateChannel<Themes, A, B, C, D, E, F, G, H>(themes, stores, {\n\t\t\tdefaultTheme: effectiveDefault\n\t\t})\n\n\t\tconst theme = useSyncExternalStore<keyof Themes | undefined>(\n\t\t\tchannel.subscribe,\n\t\t\tchannel.getSnapshot,\n\t\t\tchannel.getServerSnapshot\n\t\t)\n\n\t\tconst setTheme = useCallback(\n\t\t\tasync (newTheme: keyof Themes) => {\n\t\t\t\tawait channel.setTheme(newTheme)\n\t\t\t},\n\t\t\t[channel]\n\t\t)\n\n\t\treturn [theme, setTheme]\n\t}\n}\n\n/**\n * Creates a subscription channel bridging a composed theme store to React's useSyncExternalStore.\n * Manages listeners, initial async read from store, and delegates setTheme to store.write.\n *\n * @internal\n */\nfunction createSharedChannel<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tcomposedStore: Required<AsyncThemeStore<Themes>>,\n\tdefaultTheme: keyof Themes | undefined\n) {\n\tlet lastTheme: keyof Themes | undefined = defaultTheme\n\tconst listeners = new Set<(theme: keyof Themes | undefined) => void>()\n\n\tconst notify = (theme: keyof Themes | undefined) => {\n\t\tlastTheme = theme\n\t\tfor (const fn of listeners) {\n\t\t\tfn(theme)\n\t\t}\n\t}\n\n\tconst handleStoreUpdate = (entry: ThemeEntry<Themes> | undefined | null) => {\n\t\tnotify(entry?.theme ?? defaultTheme)\n\t}\n\n\t// Initial read to populate lastTheme (compose store subscribe has no initial notify)\n\tvoid Promise.resolve(composedStore.read()).then(\n\t\t(entry: ThemeEntry<Themes> | undefined | null) => {\n\t\t\tnotify(entry?.theme ?? defaultTheme)\n\t\t}\n\t)\n\n\tlet unobserve: () => void = composedStore.subscribe(handleStoreUpdate)\n\tlet isSubscribedToStore = true\n\n\tconst subscribe = (listener: (theme: keyof Themes | undefined) => void) => {\n\t\tif (!isSubscribedToStore) {\n\t\t\tunobserve = composedStore.subscribe(handleStoreUpdate)\n\t\t\tisSubscribedToStore = true\n\t\t}\n\t\tlisteners.add(listener)\n\t\tlistener(lastTheme)\n\t\treturn () => {\n\t\t\tlisteners.delete(listener)\n\t\t\tif (listeners.size === 0) {\n\t\t\t\tunobserve()\n\t\t\t\tisSubscribedToStore = false\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getSnapshot = (): keyof Themes | undefined => lastTheme\n\tconst getServerSnapshot = (): keyof Themes | undefined => defaultTheme\n\n\treturn {\n\t\tsubscribe,\n\t\tgetSnapshot,\n\t\tgetServerSnapshot,\n\t\tsetTheme: (theme: keyof Themes) => composedStore.write(themeEntry(themes, theme))\n\t}\n}\n\nconst channelsByStores = new WeakMap<\n\tobject,\n\tMap<string | undefined, ReturnType<typeof createSharedChannel<any>>>\n>()\n\n/**\n * Returns a cached shared channel for the given themes, stores, and defaultTheme.\n * Channels are keyed by stores (WeakMap) and defaultTheme to avoid duplicate subscriptions.\n *\n * @internal\n */\nfunction getOrCreateChannel<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes> | undefined\n) {\n\tconst { defaultTheme } = options ?? {}\n\tconst storesKey = stores as unknown as object\n\tlet byDefault = channelsByStores.get(storesKey) as Map<\n\t\tkeyof Themes | undefined,\n\t\tReturnType<typeof createSharedChannel<Themes>>\n\t>\n\tif (!byDefault) {\n\t\tbyDefault = new Map<keyof Themes | undefined, ReturnType<typeof createSharedChannel<Themes>>>()\n\t\tchannelsByStores.set(storesKey, byDefault as any)\n\t}\n\tlet channel = byDefault.get(defaultTheme) as ReturnType<typeof createSharedChannel<Themes>>\n\tif (!channel) {\n\t\tconst composedStore = composeThemeStores(themes, stores, { defaultTheme })\n\t\tchannel = createSharedChannel<Themes>(themes, composedStore, defaultTheme)\n\t\tbyDefault.set(defaultTheme, channel)\n\t}\n\treturn channel\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,gBAWf,QACA,QAUA,SAG8D;CAC9D,MAAM,EAAE,iBAAiB,WAAW,EAAE;AACtC,QAAO,SAAS,SAAS,sBAAiD;EAEzE,MAAM,UAAU,mBAAmD,QAAQ,QAAQ,EAClF,cAFwB,wBAAwB,cAGhD,CAAC;AAeF,SAAO,CAbO,qBACb,QAAQ,WACR,QAAQ,aACR,QAAQ,kBACR,EAEgB,YAChB,OAAO,aAA2B;AACjC,SAAM,QAAQ,SAAS,SAAS;KAEjC,CAAC,QAAQ,CACT,CAEuB;;;;;;;;;AAU1B,SAAS,oBACR,QACA,eACA,cACC;CACD,IAAIA,YAAsC;CAC1C,MAAM,4BAAY,IAAI,KAAgD;CAEtE,MAAM,UAAU,UAAoC;AACnD,cAAY;AACZ,OAAK,MAAM,MAAM,UAChB,IAAG,MAAM;;CAIX,MAAM,qBAAqB,UAAiD;AAC3E,SAAO,OAAO,SAAS,aAAa;;AAIrC,CAAK,QAAQ,QAAQ,cAAc,MAAM,CAAC,CAAC,MACzC,UAAiD;AACjD,SAAO,OAAO,SAAS,aAAa;GAErC;CAED,IAAIC,YAAwB,cAAc,UAAU,kBAAkB;CACtE,IAAI,sBAAsB;CAE1B,MAAM,aAAa,aAAwD;AAC1E,MAAI,CAAC,qBAAqB;AACzB,eAAY,cAAc,UAAU,kBAAkB;AACtD,yBAAsB;;AAEvB,YAAU,IAAI,SAAS;AACvB,WAAS,UAAU;AACnB,eAAa;AACZ,aAAU,OAAO,SAAS;AAC1B,OAAI,UAAU,SAAS,GAAG;AACzB,eAAW;AACX,0BAAsB;;;;CAKzB,MAAM,oBAA8C;CACpD,MAAM,0BAAoD;AAE1D,QAAO;EACN;EACA;EACA;EACA,WAAW,UAAwB,cAAc,MAAM,WAAW,QAAQ,MAAM,CAAC;EACjF;;AAGF,MAAM,mCAAmB,IAAI,SAG1B;;;;;;;AAQH,SAAS,mBAWR,QACA,QAUA,SACC;CACD,MAAM,EAAE,iBAAiB,WAAW,EAAE;CACtC,MAAM,YAAY;CAClB,IAAI,YAAY,iBAAiB,IAAI,UAAU;AAI/C,KAAI,CAAC,WAAW;AACf,8BAAY,IAAI,KAA+E;AAC/F,mBAAiB,IAAI,WAAW,UAAiB;;CAElD,IAAI,UAAU,UAAU,IAAI,aAAa;AACzC,KAAI,CAAC,SAAS;AAEb,YAAU,oBAA4B,QADhB,mBAAmB,QAAQ,QAAQ,EAAE,cAAc,CAAC,EACb,aAAa;AAC1E,YAAU,IAAI,cAAc,QAAQ;;AAErC,QAAO"}
+{"version":3,"file":"create-theme-hook.mjs","names":["lastTheme: keyof Themes | undefined","unobserve: () => void"],"sources":["../../../src/react/theme/create-theme-hook.ts"],"sourcesContent":["import { useCallback, useSyncExternalStore } from 'react'\nimport type { Required } from 'type-plus'\nimport {\n\ttype ComposeThemeStoreEntry,\n\ttype ComposeThemeStoresOptions,\n\tcomposeThemeStores\n} from '../../theme/compose-theme-stores.ts'\nimport { themeEntry } from '../../theme/theme-entry.ts'\nimport type { ThemeEntry } from '../../theme/theme-entry.types.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport type { AsyncThemeStore } from '../../theme/theme-store/async-theme-store.types.ts'\nimport type { ThemeStoreFactory } from '../../theme/theme-store/theme-store-factory.types.ts'\n\n/**\n * Creates a React hook for theme selection that reads from and writes to composed theme stores.\n *\n * The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR\n * (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.\n * Channels are cached per store configuration and default theme for efficient reuse.\n *\n * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)\n * @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)\n * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR\n * @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple\n *\n * @example\n * ```ts\n * const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })\n * const [theme, setTheme] = useTheme()\n * setTheme('dark')\n * ```\n */\nexport function createThemeHook<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes>\n): (\n\toverrideDefaultTheme?: keyof Themes | undefined\n) => [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst { defaultTheme } = options ?? {}\n\treturn function useTheme(overrideDefaultTheme?: keyof Themes | undefined) {\n\t\tconst effectiveDefault = overrideDefaultTheme ?? defaultTheme\n\t\tconst channel = getOrCreateChannel<Themes, A, B, C, D, E, F, G, H>(themes, stores, {\n\t\t\tdefaultTheme: effectiveDefault\n\t\t})\n\n\t\tconst theme = useSyncExternalStore<keyof Themes | undefined>(\n\t\t\tchannel.subscribe,\n\t\t\tchannel.getSnapshot,\n\t\t\tchannel.getServerSnapshot\n\t\t)\n\n\t\tconst setTheme = useCallback(\n\t\t\tasync (newTheme: keyof Themes) => {\n\t\t\t\tawait channel.setTheme(newTheme)\n\t\t\t},\n\t\t\t[channel]\n\t\t)\n\n\t\treturn [theme, setTheme]\n\t}\n}\n\n/**\n * Creates a subscription channel bridging a composed theme store to React's useSyncExternalStore.\n * Manages listeners, initial async read from store, and delegates setTheme to store.write.\n *\n * @internal\n */\nfunction createSharedChannel<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tcomposedStore: Required<AsyncThemeStore<Themes>>,\n\tdefaultTheme: keyof Themes | undefined\n) {\n\tlet lastTheme: keyof Themes | undefined = defaultTheme\n\tconst listeners = new Set<(theme: keyof Themes | undefined) => void>()\n\n\tconst notify = (theme: keyof Themes | undefined) => {\n\t\tlastTheme = theme\n\t\tfor (const fn of listeners) {\n\t\t\tfn(theme)\n\t\t}\n\t}\n\n\tconst handleStoreUpdate = (entry: ThemeEntry<Themes> | undefined) => {\n\t\tnotify(entry?.theme ?? defaultTheme)\n\t}\n\n\t// Initial read to populate lastTheme (compose store subscribe has no initial notify)\n\tvoid Promise.resolve(composedStore.read()).then((entry: ThemeEntry<Themes> | undefined) => {\n\t\tnotify(entry?.theme ?? defaultTheme)\n\t})\n\n\tlet unobserve: () => void = composedStore.subscribe(handleStoreUpdate)\n\tlet isSubscribedToStore = true\n\n\tconst subscribe = (listener: (theme: keyof Themes | undefined) => void) => {\n\t\tif (!isSubscribedToStore) {\n\t\t\tunobserve = composedStore.subscribe(handleStoreUpdate)\n\t\t\tisSubscribedToStore = true\n\t\t}\n\t\tlisteners.add(listener)\n\t\tlistener(lastTheme)\n\t\treturn () => {\n\t\t\tlisteners.delete(listener)\n\t\t\tif (listeners.size === 0) {\n\t\t\t\tunobserve()\n\t\t\t\tisSubscribedToStore = false\n\t\t\t}\n\t\t}\n\t}\n\n\tconst getSnapshot = (): keyof Themes | undefined => lastTheme\n\tconst getServerSnapshot = (): keyof Themes | undefined => defaultTheme\n\n\treturn {\n\t\tsubscribe,\n\t\tgetSnapshot,\n\t\tgetServerSnapshot,\n\t\tsetTheme: (theme: keyof Themes) => composedStore.write(themeEntry(themes, theme))\n\t}\n}\n\nconst channelsByStores = new WeakMap<\n\tobject,\n\tMap<string | undefined, ReturnType<typeof createSharedChannel<any>>>\n>()\n\n/**\n * Returns a cached shared channel for the given themes, stores, and defaultTheme.\n * Channels are keyed by stores (WeakMap) and defaultTheme to avoid duplicate subscriptions.\n *\n * @internal\n */\nfunction getOrCreateChannel<\n\tThemes extends ThemeMap,\n\tA extends ThemeStoreFactory<Themes> = never,\n\tB extends ThemeStoreFactory<Themes> = never,\n\tC extends ThemeStoreFactory<Themes> = never,\n\tD extends ThemeStoreFactory<Themes> = never,\n\tE extends ThemeStoreFactory<Themes> = never,\n\tF extends ThemeStoreFactory<Themes> = never,\n\tG extends ThemeStoreFactory<Themes> = never,\n\tH extends ThemeStoreFactory<Themes> = never\n>(\n\tthemes: Themes,\n\tstores: readonly [\n\t\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\t\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\t\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\t\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\t\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\t\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\t\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\t\tstore8?: ComposeThemeStoreEntry<Themes, H>\n\t],\n\toptions?: ComposeThemeStoresOptions<Themes> | undefined\n) {\n\tconst { defaultTheme } = options ?? {}\n\tconst storesKey = stores as unknown as object\n\tlet byDefault = channelsByStores.get(storesKey) as Map<\n\t\tkeyof Themes | undefined,\n\t\tReturnType<typeof createSharedChannel<Themes>>\n\t>\n\tif (!byDefault) {\n\t\tbyDefault = new Map<keyof Themes | undefined, ReturnType<typeof createSharedChannel<Themes>>>()\n\t\tchannelsByStores.set(storesKey, byDefault as any)\n\t}\n\tlet channel = byDefault.get(defaultTheme) as ReturnType<typeof createSharedChannel<Themes>>\n\tif (!channel) {\n\t\tconst composedStore = composeThemeStores(themes, stores, { defaultTheme })\n\t\tchannel = createSharedChannel<Themes>(themes, composedStore, defaultTheme)\n\t\tbyDefault.set(defaultTheme, channel)\n\t}\n\treturn channel\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAgB,gBAWf,QACA,QAUA,SAG8D;CAC9D,MAAM,EAAE,iBAAiB,WAAW,EAAE;AACtC,QAAO,SAAS,SAAS,sBAAiD;EAEzE,MAAM,UAAU,mBAAmD,QAAQ,QAAQ,EAClF,cAFwB,wBAAwB,cAGhD,CAAC;AAeF,SAAO,CAbO,qBACb,QAAQ,WACR,QAAQ,aACR,QAAQ,kBACR,EAEgB,YAChB,OAAO,aAA2B;AACjC,SAAM,QAAQ,SAAS,SAAS;KAEjC,CAAC,QAAQ,CACT,CAEuB;;;;;;;;;AAU1B,SAAS,oBACR,QACA,eACA,cACC;CACD,IAAIA,YAAsC;CAC1C,MAAM,4BAAY,IAAI,KAAgD;CAEtE,MAAM,UAAU,UAAoC;AACnD,cAAY;AACZ,OAAK,MAAM,MAAM,UAChB,IAAG,MAAM;;CAIX,MAAM,qBAAqB,UAA0C;AACpE,SAAO,OAAO,SAAS,aAAa;;AAIrC,CAAK,QAAQ,QAAQ,cAAc,MAAM,CAAC,CAAC,MAAM,UAA0C;AAC1F,SAAO,OAAO,SAAS,aAAa;GACnC;CAEF,IAAIC,YAAwB,cAAc,UAAU,kBAAkB;CACtE,IAAI,sBAAsB;CAE1B,MAAM,aAAa,aAAwD;AAC1E,MAAI,CAAC,qBAAqB;AACzB,eAAY,cAAc,UAAU,kBAAkB;AACtD,yBAAsB;;AAEvB,YAAU,IAAI,SAAS;AACvB,WAAS,UAAU;AACnB,eAAa;AACZ,aAAU,OAAO,SAAS;AAC1B,OAAI,UAAU,SAAS,GAAG;AACzB,eAAW;AACX,0BAAsB;;;;CAKzB,MAAM,oBAA8C;CACpD,MAAM,0BAAoD;AAE1D,QAAO;EACN;EACA;EACA;EACA,WAAW,UAAwB,cAAc,MAAM,WAAW,QAAQ,MAAM,CAAC;EACjF;;AAGF,MAAM,mCAAmB,IAAI,SAG1B;;;;;;;AAQH,SAAS,mBAWR,QACA,QAUA,SACC;CACD,MAAM,EAAE,iBAAiB,WAAW,EAAE;CACtC,MAAM,YAAY;CAClB,IAAI,YAAY,iBAAiB,IAAI,UAAU;AAI/C,KAAI,CAAC,WAAW;AACf,8BAAY,IAAI,KAA+E;AAC/F,mBAAiB,IAAI,WAAW,UAAiB;;CAElD,IAAI,UAAU,UAAU,IAAI,aAAa;AACzC,KAAI,CAAC,SAAS;AAEb,YAAU,oBAA4B,QADhB,mBAAmB,QAAQ,QAAQ,EAAE,cAAc,CAAC,EACb,aAAa;AAC1E,YAAU,IAAI,cAAc,QAAQ;;AAErC,QAAO"}

package/dist/theme/_utils/parse-stored-theme.cjs

@@ -52,7 +52,7 @@ function getCanonicalShapeAndComparable(v) {
 * returns { theme, value: stored.value }. Else returns undefined.
 *
 * @param themes - Record of valid theme keys and values (required for validation)
-* @param value - Raw string from localStorage/sessionStorage/cookie
+* @param value - Raw string from localStorage/sessionStorage/cookie (accepts null)
 * @returns ThemeEntry when valid, otherwise undefined
 */
 function parseStoredTheme(themes, value) {

package/dist/theme/_utils/parse-stored-theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"parse-stored-theme.cjs","names":["isReadonlyStringArray","tryParseJSON"],"sources":["../../../src/theme/_utils/parse-stored-theme.ts"],"sourcesContent":["import { tryParseJSON } from '../../_internal/utils/try-parse-json.ts'\nimport type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap, ThemeMapValue } from '../theme-map.types.ts'\nimport { isReadonlyStringArray } from './resolve-theme-map-value.ts'\n\ntype Shape = 'string' | 'array' | 'object-string' | 'object-array'\n\nfunction getShapeAndComparable(\n\tv: unknown\n): { shape: Shape; comparable: string | undefined } | null {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (Array.isArray(v)) return { shape: 'array', comparable: v[0] }\n\tif (v !== null && typeof v === 'object' && 'themeValue' in v) {\n\t\tconst tv = (v as { themeValue: string | string[] }).themeValue\n\t\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\t\tif (Array.isArray(tv)) return { shape: 'object-array', comparable: tv[0] }\n\t}\n\treturn null\n}\n\nfunction getCanonicalShapeAndComparable(v: ThemeMapValue): {\n\tshape: Shape\n\tcomparable: string | undefined\n} {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (isReadonlyStringArray(v)) return { shape: 'array', comparable: v[0] }\n\tconst tv = v.themeValue\n\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\treturn { shape: 'object-array', comparable: tv[0] }\n}\n\n/**\n * Parses stored JSON theme and validates against theme map with strict shape and comparable matching.\n *\n * Expects stored shape: { theme: string, value?: unknown }\n *\n * When shape matches AND comparable value (string or [0]) matches themes[theme]:\n * returns { theme, value: stored.value }. Else returns undefined.\n *\n * @param themes - Record of valid theme keys and values (required for validation)\n * @param value - Raw string from localStorage/sessionStorage/cookie\n * @returns ThemeEntry when valid, otherwise undefined\n */\nexport function parseStoredTheme<Themes extends ThemeMap>(\n\tthemes: Themes | undefined,\n\tvalue: string | undefined\n): ThemeEntry<Themes> | undefined {\n\tconst parsed = tryParseJSON<{ theme: string; value?: unknown }>(value ?? null)\n\tif (!parsed?.theme || typeof parsed.theme !== 'string') return undefined\n\tif (!themes || !(parsed.theme in themes)) return undefined\n\tif (parsed.value === undefined) return undefined\n\n\tconst storedInfo = getShapeAndComparable(parsed.value)\n\tif (!storedInfo) return undefined\n\n\tconst canonical = getCanonicalShapeAndComparable(themes[parsed.theme] as ThemeMapValue)\n\tif (storedInfo.shape !== canonical.shape) return undefined\n\tif (storedInfo.comparable !== canonical.comparable) return undefined\n\n\treturn { theme: parsed.theme as keyof Themes, value: parsed.value as Themes[keyof Themes] }\n}\n"],"mappings":";;;;AAOA,SAAS,sBACR,GAC0D;AAC1D,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAI,MAAM,QAAQ,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;AACjE,KAAI,MAAM,QAAQ,OAAO,MAAM,YAAY,gBAAgB,GAAG;EAC7D,MAAM,KAAM,EAAwC;AACpD,MAAI,OAAO,OAAO,SAAU,QAAO;GAAE,OAAO;GAAiB,YAAY;GAAI;AAC7E,MAAI,MAAM,QAAQ,GAAG,CAAE,QAAO;GAAE,OAAO;GAAgB,YAAY,GAAG;GAAI;;AAE3E,QAAO;;AAGR,SAAS,+BAA+B,GAGtC;AACD,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAIA,sDAAsB,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;CACzE,MAAM,KAAK,EAAE;AACb,KAAI,OAAO,OAAO,SAAU,QAAO;EAAE,OAAO;EAAiB,YAAY;EAAI;AAC7E,QAAO;EAAE,OAAO;EAAgB,YAAY,GAAG;EAAI;;;;;;;;;;;;;;AAepD,SAAgB,iBACf,QACA,OACiC;CACjC,MAAM,SAASC,oCAAiD,SAAS,KAAK;AAC9E,KAAI,CAAC,QAAQ,SAAS,OAAO,OAAO,UAAU,SAAU,QAAO;AAC/D,KAAI,CAAC,UAAU,EAAE,OAAO,SAAS,QAAS,QAAO;AACjD,KAAI,OAAO,UAAU,OAAW,QAAO;CAEvC,MAAM,aAAa,sBAAsB,OAAO,MAAM;AACtD,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,YAAY,+BAA+B,OAAO,OAAO,OAAwB;AACvF,KAAI,WAAW,UAAU,UAAU,MAAO,QAAO;AACjD,KAAI,WAAW,eAAe,UAAU,WAAY,QAAO;AAE3D,QAAO;EAAE,OAAO,OAAO;EAAuB,OAAO,OAAO;EAA+B"}
+{"version":3,"file":"parse-stored-theme.cjs","names":["isReadonlyStringArray","tryParseJSON"],"sources":["../../../src/theme/_utils/parse-stored-theme.ts"],"sourcesContent":["import { tryParseJSON } from '../../_internal/utils/try-parse-json.ts'\nimport type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap, ThemeMapValue } from '../theme-map.types.ts'\nimport { isReadonlyStringArray } from './resolve-theme-map-value.ts'\n\ntype Shape = 'string' | 'array' | 'object-string' | 'object-array'\n\nfunction getShapeAndComparable(\n\tv: unknown\n): { shape: Shape; comparable: string | undefined } | null {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (Array.isArray(v)) return { shape: 'array', comparable: v[0] }\n\tif (v !== null && typeof v === 'object' && 'themeValue' in v) {\n\t\tconst tv = (v as { themeValue: string | string[] }).themeValue\n\t\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\t\tif (Array.isArray(tv)) return { shape: 'object-array', comparable: tv[0] }\n\t}\n\treturn null\n}\n\nfunction getCanonicalShapeAndComparable(v: ThemeMapValue): {\n\tshape: Shape\n\tcomparable: string | undefined\n} {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (isReadonlyStringArray(v)) return { shape: 'array', comparable: v[0] }\n\tconst tv = v.themeValue\n\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\treturn { shape: 'object-array', comparable: tv[0] }\n}\n\n/**\n * Parses stored JSON theme and validates against theme map with strict shape and comparable matching.\n *\n * Expects stored shape: { theme: string, value?: unknown }\n *\n * When shape matches AND comparable value (string or [0]) matches themes[theme]:\n * returns { theme, value: stored.value }. Else returns undefined.\n *\n * @param themes - Record of valid theme keys and values (required for validation)\n * @param value - Raw string from localStorage/sessionStorage/cookie (accepts null)\n * @returns ThemeEntry when valid, otherwise undefined\n */\nexport function parseStoredTheme<Themes extends ThemeMap>(\n\tthemes: Themes | undefined,\n\tvalue: string | null | undefined\n): ThemeEntry<Themes> | undefined {\n\tconst parsed = tryParseJSON<{ theme: string; value?: unknown }>(value ?? null)\n\tif (!parsed?.theme || typeof parsed.theme !== 'string') return undefined\n\tif (!themes || !(parsed.theme in themes)) return undefined\n\tif (parsed.value === undefined) return undefined\n\n\tconst storedInfo = getShapeAndComparable(parsed.value)\n\tif (!storedInfo) return undefined\n\n\tconst canonical = getCanonicalShapeAndComparable(themes[parsed.theme] as ThemeMapValue)\n\tif (storedInfo.shape !== canonical.shape) return undefined\n\tif (storedInfo.comparable !== canonical.comparable) return undefined\n\n\treturn { theme: parsed.theme as keyof Themes, value: parsed.value as Themes[keyof Themes] }\n}\n"],"mappings":";;;;AAOA,SAAS,sBACR,GAC0D;AAC1D,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAI,MAAM,QAAQ,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;AACjE,KAAI,MAAM,QAAQ,OAAO,MAAM,YAAY,gBAAgB,GAAG;EAC7D,MAAM,KAAM,EAAwC;AACpD,MAAI,OAAO,OAAO,SAAU,QAAO;GAAE,OAAO;GAAiB,YAAY;GAAI;AAC7E,MAAI,MAAM,QAAQ,GAAG,CAAE,QAAO;GAAE,OAAO;GAAgB,YAAY,GAAG;GAAI;;AAE3E,QAAO;;AAGR,SAAS,+BAA+B,GAGtC;AACD,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAIA,sDAAsB,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;CACzE,MAAM,KAAK,EAAE;AACb,KAAI,OAAO,OAAO,SAAU,QAAO;EAAE,OAAO;EAAiB,YAAY;EAAI;AAC7E,QAAO;EAAE,OAAO;EAAgB,YAAY,GAAG;EAAI;;;;;;;;;;;;;;AAepD,SAAgB,iBACf,QACA,OACiC;CACjC,MAAM,SAASC,oCAAiD,SAAS,KAAK;AAC9E,KAAI,CAAC,QAAQ,SAAS,OAAO,OAAO,UAAU,SAAU,QAAO;AAC/D,KAAI,CAAC,UAAU,EAAE,OAAO,SAAS,QAAS,QAAO;AACjD,KAAI,OAAO,UAAU,OAAW,QAAO;CAEvC,MAAM,aAAa,sBAAsB,OAAO,MAAM;AACtD,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,YAAY,+BAA+B,OAAO,OAAO,OAAwB;AACvF,KAAI,WAAW,UAAU,UAAU,MAAO,QAAO;AACjD,KAAI,WAAW,eAAe,UAAU,WAAY,QAAO;AAE3D,QAAO;EAAE,OAAO,OAAO;EAAuB,OAAO,OAAO;EAA+B"}

package/dist/theme/_utils/parse-stored-theme.mjs

@@ -52,7 +52,7 @@ function getCanonicalShapeAndComparable(v) {
 * returns { theme, value: stored.value }. Else returns undefined.
 *
 * @param themes - Record of valid theme keys and values (required for validation)
-* @param value - Raw string from localStorage/sessionStorage/cookie
+* @param value - Raw string from localStorage/sessionStorage/cookie (accepts null)
 * @returns ThemeEntry when valid, otherwise undefined
 */
 function parseStoredTheme(themes, value) {

package/dist/theme/_utils/parse-stored-theme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"parse-stored-theme.mjs","names":[],"sources":["../../../src/theme/_utils/parse-stored-theme.ts"],"sourcesContent":["import { tryParseJSON } from '../../_internal/utils/try-parse-json.ts'\nimport type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap, ThemeMapValue } from '../theme-map.types.ts'\nimport { isReadonlyStringArray } from './resolve-theme-map-value.ts'\n\ntype Shape = 'string' | 'array' | 'object-string' | 'object-array'\n\nfunction getShapeAndComparable(\n\tv: unknown\n): { shape: Shape; comparable: string | undefined } | null {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (Array.isArray(v)) return { shape: 'array', comparable: v[0] }\n\tif (v !== null && typeof v === 'object' && 'themeValue' in v) {\n\t\tconst tv = (v as { themeValue: string | string[] }).themeValue\n\t\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\t\tif (Array.isArray(tv)) return { shape: 'object-array', comparable: tv[0] }\n\t}\n\treturn null\n}\n\nfunction getCanonicalShapeAndComparable(v: ThemeMapValue): {\n\tshape: Shape\n\tcomparable: string | undefined\n} {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (isReadonlyStringArray(v)) return { shape: 'array', comparable: v[0] }\n\tconst tv = v.themeValue\n\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\treturn { shape: 'object-array', comparable: tv[0] }\n}\n\n/**\n * Parses stored JSON theme and validates against theme map with strict shape and comparable matching.\n *\n * Expects stored shape: { theme: string, value?: unknown }\n *\n * When shape matches AND comparable value (string or [0]) matches themes[theme]:\n * returns { theme, value: stored.value }. Else returns undefined.\n *\n * @param themes - Record of valid theme keys and values (required for validation)\n * @param value - Raw string from localStorage/sessionStorage/cookie\n * @returns ThemeEntry when valid, otherwise undefined\n */\nexport function parseStoredTheme<Themes extends ThemeMap>(\n\tthemes: Themes | undefined,\n\tvalue: string | undefined\n): ThemeEntry<Themes> | undefined {\n\tconst parsed = tryParseJSON<{ theme: string; value?: unknown }>(value ?? null)\n\tif (!parsed?.theme || typeof parsed.theme !== 'string') return undefined\n\tif (!themes || !(parsed.theme in themes)) return undefined\n\tif (parsed.value === undefined) return undefined\n\n\tconst storedInfo = getShapeAndComparable(parsed.value)\n\tif (!storedInfo) return undefined\n\n\tconst canonical = getCanonicalShapeAndComparable(themes[parsed.theme] as ThemeMapValue)\n\tif (storedInfo.shape !== canonical.shape) return undefined\n\tif (storedInfo.comparable !== canonical.comparable) return undefined\n\n\treturn { theme: parsed.theme as keyof Themes, value: parsed.value as Themes[keyof Themes] }\n}\n"],"mappings":";;;;AAOA,SAAS,sBACR,GAC0D;AAC1D,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAI,MAAM,QAAQ,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;AACjE,KAAI,MAAM,QAAQ,OAAO,MAAM,YAAY,gBAAgB,GAAG;EAC7D,MAAM,KAAM,EAAwC;AACpD,MAAI,OAAO,OAAO,SAAU,QAAO;GAAE,OAAO;GAAiB,YAAY;GAAI;AAC7E,MAAI,MAAM,QAAQ,GAAG,CAAE,QAAO;GAAE,OAAO;GAAgB,YAAY,GAAG;GAAI;;AAE3E,QAAO;;AAGR,SAAS,+BAA+B,GAGtC;AACD,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAI,sBAAsB,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;CACzE,MAAM,KAAK,EAAE;AACb,KAAI,OAAO,OAAO,SAAU,QAAO;EAAE,OAAO;EAAiB,YAAY;EAAI;AAC7E,QAAO;EAAE,OAAO;EAAgB,YAAY,GAAG;EAAI;;;;;;;;;;;;;;AAepD,SAAgB,iBACf,QACA,OACiC;CACjC,MAAM,SAAS,aAAiD,SAAS,KAAK;AAC9E,KAAI,CAAC,QAAQ,SAAS,OAAO,OAAO,UAAU,SAAU,QAAO;AAC/D,KAAI,CAAC,UAAU,EAAE,OAAO,SAAS,QAAS,QAAO;AACjD,KAAI,OAAO,UAAU,OAAW,QAAO;CAEvC,MAAM,aAAa,sBAAsB,OAAO,MAAM;AACtD,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,YAAY,+BAA+B,OAAO,OAAO,OAAwB;AACvF,KAAI,WAAW,UAAU,UAAU,MAAO,QAAO;AACjD,KAAI,WAAW,eAAe,UAAU,WAAY,QAAO;AAE3D,QAAO;EAAE,OAAO,OAAO;EAAuB,OAAO,OAAO;EAA+B"}
+{"version":3,"file":"parse-stored-theme.mjs","names":[],"sources":["../../../src/theme/_utils/parse-stored-theme.ts"],"sourcesContent":["import { tryParseJSON } from '../../_internal/utils/try-parse-json.ts'\nimport type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap, ThemeMapValue } from '../theme-map.types.ts'\nimport { isReadonlyStringArray } from './resolve-theme-map-value.ts'\n\ntype Shape = 'string' | 'array' | 'object-string' | 'object-array'\n\nfunction getShapeAndComparable(\n\tv: unknown\n): { shape: Shape; comparable: string | undefined } | null {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (Array.isArray(v)) return { shape: 'array', comparable: v[0] }\n\tif (v !== null && typeof v === 'object' && 'themeValue' in v) {\n\t\tconst tv = (v as { themeValue: string | string[] }).themeValue\n\t\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\t\tif (Array.isArray(tv)) return { shape: 'object-array', comparable: tv[0] }\n\t}\n\treturn null\n}\n\nfunction getCanonicalShapeAndComparable(v: ThemeMapValue): {\n\tshape: Shape\n\tcomparable: string | undefined\n} {\n\tif (typeof v === 'string') return { shape: 'string', comparable: v }\n\tif (isReadonlyStringArray(v)) return { shape: 'array', comparable: v[0] }\n\tconst tv = v.themeValue\n\tif (typeof tv === 'string') return { shape: 'object-string', comparable: tv }\n\treturn { shape: 'object-array', comparable: tv[0] }\n}\n\n/**\n * Parses stored JSON theme and validates against theme map with strict shape and comparable matching.\n *\n * Expects stored shape: { theme: string, value?: unknown }\n *\n * When shape matches AND comparable value (string or [0]) matches themes[theme]:\n * returns { theme, value: stored.value }. Else returns undefined.\n *\n * @param themes - Record of valid theme keys and values (required for validation)\n * @param value - Raw string from localStorage/sessionStorage/cookie (accepts null)\n * @returns ThemeEntry when valid, otherwise undefined\n */\nexport function parseStoredTheme<Themes extends ThemeMap>(\n\tthemes: Themes | undefined,\n\tvalue: string | null | undefined\n): ThemeEntry<Themes> | undefined {\n\tconst parsed = tryParseJSON<{ theme: string; value?: unknown }>(value ?? null)\n\tif (!parsed?.theme || typeof parsed.theme !== 'string') return undefined\n\tif (!themes || !(parsed.theme in themes)) return undefined\n\tif (parsed.value === undefined) return undefined\n\n\tconst storedInfo = getShapeAndComparable(parsed.value)\n\tif (!storedInfo) return undefined\n\n\tconst canonical = getCanonicalShapeAndComparable(themes[parsed.theme] as ThemeMapValue)\n\tif (storedInfo.shape !== canonical.shape) return undefined\n\tif (storedInfo.comparable !== canonical.comparable) return undefined\n\n\treturn { theme: parsed.theme as keyof Themes, value: parsed.value as Themes[keyof Themes] }\n}\n"],"mappings":";;;;AAOA,SAAS,sBACR,GAC0D;AAC1D,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAI,MAAM,QAAQ,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;AACjE,KAAI,MAAM,QAAQ,OAAO,MAAM,YAAY,gBAAgB,GAAG;EAC7D,MAAM,KAAM,EAAwC;AACpD,MAAI,OAAO,OAAO,SAAU,QAAO;GAAE,OAAO;GAAiB,YAAY;GAAI;AAC7E,MAAI,MAAM,QAAQ,GAAG,CAAE,QAAO;GAAE,OAAO;GAAgB,YAAY,GAAG;GAAI;;AAE3E,QAAO;;AAGR,SAAS,+BAA+B,GAGtC;AACD,KAAI,OAAO,MAAM,SAAU,QAAO;EAAE,OAAO;EAAU,YAAY;EAAG;AACpE,KAAI,sBAAsB,EAAE,CAAE,QAAO;EAAE,OAAO;EAAS,YAAY,EAAE;EAAI;CACzE,MAAM,KAAK,EAAE;AACb,KAAI,OAAO,OAAO,SAAU,QAAO;EAAE,OAAO;EAAiB,YAAY;EAAI;AAC7E,QAAO;EAAE,OAAO;EAAgB,YAAY,GAAG;EAAI;;;;;;;;;;;;;;AAepD,SAAgB,iBACf,QACA,OACiC;CACjC,MAAM,SAAS,aAAiD,SAAS,KAAK;AAC9E,KAAI,CAAC,QAAQ,SAAS,OAAO,OAAO,UAAU,SAAU,QAAO;AAC/D,KAAI,CAAC,UAAU,EAAE,OAAO,SAAS,QAAS,QAAO;AACjD,KAAI,OAAO,UAAU,OAAW,QAAO;CAEvC,MAAM,aAAa,sBAAsB,OAAO,MAAM;AACtD,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,YAAY,+BAA+B,OAAO,OAAO,OAAwB;AACvF,KAAI,WAAW,UAAU,UAAU,MAAO,QAAO;AACjD,KAAI,WAAW,eAAe,UAAU,WAAY,QAAO;AAE3D,QAAO;EAAE,OAAO,OAAO;EAAuB,OAAO,OAAO;EAA+B"}

package/dist/theme/_utils/set-theme-to-stores.cjs

@@ -4,7 +4,7 @@
 * Writes theme entry to all stores that have a write method.
 *
 * @param stores - Array of theme stores
-* @param entry - Theme entry to write, or undefined to clear
+* @param entry - Theme entry to write, or null/undefined to clear
 */
 async function setThemeToStores(stores, entry) {
 	const withWrite = stores.filter((s) => typeof s.write === "function");

package/dist/theme/_utils/set-theme-to-stores.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme-to-stores.cjs","names":[],"sources":["../../../src/theme/_utils/set-theme-to-stores.ts"],"sourcesContent":["import type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport type { AsyncThemeStore } from '../theme-store/async-theme-store.types.ts'\nimport type { ThemeStore } from '../theme-store/theme-store.types.ts'\n\ntype StoreWithWrite<Themes extends ThemeMap> = (ThemeStore<Themes> | AsyncThemeStore<Themes>) & {\n\twrite: (entry: ThemeEntry<Themes> | undefined) => void | Promise<void>\n}\n\n/**\n * Writes theme entry to all stores that have a write method.\n *\n * @param stores - Array of theme stores\n * @param entry - Theme entry to write, or undefined to clear\n */\nexport async function setThemeToStores<Themes extends ThemeMap>(\n\tstores: (ThemeStore<Themes> | AsyncThemeStore<Themes>)[],\n\tentry: ThemeEntry<Themes> | undefined\n): Promise<void> {\n\tconst withWrite = stores.filter((s): s is StoreWithWrite<Themes> => typeof s.write === 'function')\n\n\tawait Promise.all(withWrite.map((store) => Promise.resolve(store.write!(entry))))\n}\n"],"mappings":";;;;;;;;AAeA,eAAsB,iBACrB,QACA,OACgB;CAChB,MAAM,YAAY,OAAO,QAAQ,MAAmC,OAAO,EAAE,UAAU,WAAW;AAElG,OAAM,QAAQ,IAAI,UAAU,KAAK,UAAU,QAAQ,QAAQ,MAAM,MAAO,MAAM,CAAC,CAAC,CAAC"}
+{"version":3,"file":"set-theme-to-stores.cjs","names":[],"sources":["../../../src/theme/_utils/set-theme-to-stores.ts"],"sourcesContent":["import type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport type { AsyncThemeStore } from '../theme-store/async-theme-store.types.ts'\nimport type { ThemeStore } from '../theme-store/theme-store.types.ts'\n\ntype StoreWithWrite<Themes extends ThemeMap> = (ThemeStore<Themes> | AsyncThemeStore<Themes>) & {\n\twrite: (entry: ThemeEntry<Themes> | null | undefined) => void | Promise<void>\n}\n\n/**\n * Writes theme entry to all stores that have a write method.\n *\n * @param stores - Array of theme stores\n * @param entry - Theme entry to write, or null/undefined to clear\n */\nexport async function setThemeToStores<Themes extends ThemeMap>(\n\tstores: (ThemeStore<Themes> | AsyncThemeStore<Themes>)[],\n\tentry: ThemeEntry<Themes> | null | undefined\n): Promise<void> {\n\tconst withWrite = stores.filter((s): s is StoreWithWrite<Themes> => typeof s.write === 'function')\n\n\tawait Promise.all(withWrite.map((store) => Promise.resolve(store.write!(entry))))\n}\n"],"mappings":";;;;;;;;AAeA,eAAsB,iBACrB,QACA,OACgB;CAChB,MAAM,YAAY,OAAO,QAAQ,MAAmC,OAAO,EAAE,UAAU,WAAW;AAElG,OAAM,QAAQ,IAAI,UAAU,KAAK,UAAU,QAAQ,QAAQ,MAAM,MAAO,MAAM,CAAC,CAAC,CAAC"}

package/dist/theme/_utils/set-theme-to-stores.mjs

@@ -3,7 +3,7 @@
 * Writes theme entry to all stores that have a write method.
 *
 * @param stores - Array of theme stores
-* @param entry - Theme entry to write, or undefined to clear
+* @param entry - Theme entry to write, or null/undefined to clear
 */
 async function setThemeToStores(stores, entry) {
 	const withWrite = stores.filter((s) => typeof s.write === "function");

package/dist/theme/_utils/set-theme-to-stores.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"set-theme-to-stores.mjs","names":[],"sources":["../../../src/theme/_utils/set-theme-to-stores.ts"],"sourcesContent":["import type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport type { AsyncThemeStore } from '../theme-store/async-theme-store.types.ts'\nimport type { ThemeStore } from '../theme-store/theme-store.types.ts'\n\ntype StoreWithWrite<Themes extends ThemeMap> = (ThemeStore<Themes> | AsyncThemeStore<Themes>) & {\n\twrite: (entry: ThemeEntry<Themes> | undefined) => void | Promise<void>\n}\n\n/**\n * Writes theme entry to all stores that have a write method.\n *\n * @param stores - Array of theme stores\n * @param entry - Theme entry to write, or undefined to clear\n */\nexport async function setThemeToStores<Themes extends ThemeMap>(\n\tstores: (ThemeStore<Themes> | AsyncThemeStore<Themes>)[],\n\tentry: ThemeEntry<Themes> | undefined\n): Promise<void> {\n\tconst withWrite = stores.filter((s): s is StoreWithWrite<Themes> => typeof s.write === 'function')\n\n\tawait Promise.all(withWrite.map((store) => Promise.resolve(store.write!(entry))))\n}\n"],"mappings":";;;;;;;AAeA,eAAsB,iBACrB,QACA,OACgB;CAChB,MAAM,YAAY,OAAO,QAAQ,MAAmC,OAAO,EAAE,UAAU,WAAW;AAElG,OAAM,QAAQ,IAAI,UAAU,KAAK,UAAU,QAAQ,QAAQ,MAAM,MAAO,MAAM,CAAC,CAAC,CAAC"}
+{"version":3,"file":"set-theme-to-stores.mjs","names":[],"sources":["../../../src/theme/_utils/set-theme-to-stores.ts"],"sourcesContent":["import type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport type { AsyncThemeStore } from '../theme-store/async-theme-store.types.ts'\nimport type { ThemeStore } from '../theme-store/theme-store.types.ts'\n\ntype StoreWithWrite<Themes extends ThemeMap> = (ThemeStore<Themes> | AsyncThemeStore<Themes>) & {\n\twrite: (entry: ThemeEntry<Themes> | null | undefined) => void | Promise<void>\n}\n\n/**\n * Writes theme entry to all stores that have a write method.\n *\n * @param stores - Array of theme stores\n * @param entry - Theme entry to write, or null/undefined to clear\n */\nexport async function setThemeToStores<Themes extends ThemeMap>(\n\tstores: (ThemeStore<Themes> | AsyncThemeStore<Themes>)[],\n\tentry: ThemeEntry<Themes> | null | undefined\n): Promise<void> {\n\tconst withWrite = stores.filter((s): s is StoreWithWrite<Themes> => typeof s.write === 'function')\n\n\tawait Promise.all(withWrite.map((store) => Promise.resolve(store.write!(entry))))\n}\n"],"mappings":";;;;;;;AAeA,eAAsB,iBACrB,QACA,OACgB;CAChB,MAAM,YAAY,OAAO,QAAQ,MAAmC,OAAO,EAAE,UAAU,WAAW;AAElG,OAAM,QAAQ,IAAI,UAAU,KAAK,UAAU,QAAQ,QAAQ,MAAM,MAAO,MAAM,CAAC,CAAC,CAAC"}

package/dist/theme/class-name/parse-class-name.cjs

@@ -12,7 +12,7 @@ let type_plus = require("type-plus");
 * Arrays in theme map use first value for matching.
 *
 * @param themes - Record mapping theme keys to class name(s)
-* @param className - Raw class attribute value (e.g. from element.className)
+* @param className - Raw class attribute value (e.g. from element.className; accepts null)
 * @returns ThemeEntry if a match is found, otherwise undefined
 */
 function parseClassName(themes, className) {

package/dist/theme/class-name/parse-class-name.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"parse-class-name.cjs","names":["resolveThemeMapValue","themeEntry"],"sources":["../../../src/theme/class-name/parse-class-name.ts"],"sourcesContent":["import { findKey } from 'type-plus'\nimport { resolveThemeMapValue } from '../_utils/resolve-theme-map-value.ts'\nimport { themeEntry } from '../theme-entry.ts'\nimport type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\n\n/**\n * Parses a class name string into a ThemeEntry.\n *\n * Pure function: no DOM access. Matches class strings by checking if any theme\n * class is included in the className (e.g. `className.includes(themeClass)`).\n * Arrays in theme map use first value for matching.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param className - Raw class attribute value (e.g. from element.className)\n * @returns ThemeEntry if a match is found, otherwise undefined\n */\nexport function parseClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tclassName: string | undefined\n): ThemeEntry<Themes> | undefined {\n\tconst cls = className ?? ''\n\tconst theme = findKey(themes, (key) => {\n\t\tconst value = themes[key]\n\t\tif (value === undefined) return false\n\t\tconst resolved = resolveThemeMapValue(value)\n\t\tconst v = Array.isArray(resolved) ? resolved[0] : resolved\n\t\treturn !!v && cls.includes(v)\n\t})\n\treturn theme !== undefined ? themeEntry(themes, theme) : undefined\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,eACf,QACA,WACiC;CACjC,MAAM,MAAM,aAAa;CACzB,MAAM,+BAAgB,SAAS,QAAQ;EACtC,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OAAW,QAAO;EAChC,MAAM,WAAWA,qDAAqB,MAAM;EAC5C,MAAM,IAAI,MAAM,QAAQ,SAAS,GAAG,SAAS,KAAK;AAClD,SAAO,CAAC,CAAC,KAAK,IAAI,SAAS,EAAE;GAC5B;AACF,QAAO,UAAU,SAAYC,+BAAW,QAAQ,MAAM,GAAG"}
+{"version":3,"file":"parse-class-name.cjs","names":["resolveThemeMapValue","themeEntry"],"sources":["../../../src/theme/class-name/parse-class-name.ts"],"sourcesContent":["import { findKey } from 'type-plus'\nimport { resolveThemeMapValue } from '../_utils/resolve-theme-map-value.ts'\nimport { themeEntry } from '../theme-entry.ts'\nimport type { ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\n\n/**\n * Parses a class name string into a ThemeEntry.\n *\n * Pure function: no DOM access. Matches class strings by checking if any theme\n * class is included in the className (e.g. `className.includes(themeClass)`).\n * Arrays in theme map use first value for matching.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param className - Raw class attribute value (e.g. from element.className; accepts null)\n * @returns ThemeEntry if a match is found, otherwise undefined\n */\nexport function parseClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tclassName: string | null | undefined\n): ThemeEntry<Themes> | undefined {\n\tconst cls = className ?? ''\n\tconst theme = findKey(themes, (key) => {\n\t\tconst value = themes[key]\n\t\tif (value === undefined) return false\n\t\tconst resolved = resolveThemeMapValue(value)\n\t\tconst v = Array.isArray(resolved) ? resolved[0] : resolved\n\t\treturn !!v && cls.includes(v)\n\t})\n\treturn theme !== undefined ? themeEntry(themes, theme) : undefined\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,eACf,QACA,WACiC;CACjC,MAAM,MAAM,aAAa;CACzB,MAAM,+BAAgB,SAAS,QAAQ;EACtC,MAAM,QAAQ,OAAO;AACrB,MAAI,UAAU,OAAW,QAAO;EAChC,MAAM,WAAWA,qDAAqB,MAAM;EAC5C,MAAM,IAAI,MAAM,QAAQ,SAAS,GAAG,SAAS,KAAK;AAClD,SAAO,CAAC,CAAC,KAAK,IAAI,SAAS,EAAE;GAC5B;AACF,QAAO,UAAU,SAAYC,+BAAW,QAAQ,MAAM,GAAG"}