@just-web/toolkits 2.0.0 → 3.0.0

package/dist/color-scheme/get-prefers-color-scheme.d.mts

@@ -1,16 +1,21 @@
+import { ColorScheme } from "./color-scheme.types.mjs";
+
 //#region src/color-scheme/get-prefers-color-scheme.d.ts
+
 /**
  * Gets the current preferred color scheme.
  * It can only be 'light' or 'dark'.
  *
- * Even if the browser preference is 'auto'/'device', it will return 'light' or 'dark'.
+ * Per {@link https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme Media Queries Level 5},
+ * the `prefers-color-scheme` media feature has only two valid values. Even if the browser
+ * preference is 'auto'/'device', it will return 'light' or 'dark'.
  *
  * When `matchMedia` is unavailable (e.g. SSR), returns `defaultColorScheme`.
  *
  * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)
  * @returns 'light' or 'dark'
  */
-declare function getPrefersColorScheme(defaultColorScheme?: 'light' | 'dark'): 'light' | 'dark';
+declare function getPrefersColorScheme(defaultColorScheme?: ColorScheme): ColorScheme;
 //#endregion
 export { getPrefersColorScheme };
 //# sourceMappingURL=get-prefers-color-scheme.d.mts.map

package/dist/color-scheme/get-prefers-color-scheme.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"get-prefers-color-scheme.d.mts","names":[],"sources":["../../src/color-scheme/get-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;AAWA;;;;;;;;;;iBAAgB,qBAAA"}
+{"version":3,"file":"get-prefers-color-scheme.d.mts","names":[],"sources":["../../src/color-scheme/get-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;;;;;AAeA;;;;;;;;;;;iBAAgB,qBAAA,sBAA0C,cAAwB"}

package/dist/color-scheme/get-prefers-color-scheme.mjs

@@ -3,7 +3,9 @@
 * Gets the current preferred color scheme.
 * It can only be 'light' or 'dark'.
 *
-* Even if the browser preference is 'auto'/'device', it will return 'light' or 'dark'.
+* Per {@link https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme Media Queries Level 5},
+* the `prefers-color-scheme` media feature has only two valid values. Even if the browser
+* preference is 'auto'/'device', it will return 'light' or 'dark'.
 *
 * When `matchMedia` is unavailable (e.g. SSR), returns `defaultColorScheme`.
 *

package/dist/color-scheme/get-prefers-color-scheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"get-prefers-color-scheme.mjs","names":[],"sources":["../../src/color-scheme/get-prefers-color-scheme.ts"],"sourcesContent":["/**\n * Gets the current preferred color scheme.\n * It can only be 'light' or 'dark'.\n *\n * Even if the browser preference is 'auto'/'device', it will return 'light' or 'dark'.\n *\n * When `matchMedia` is unavailable (e.g. SSR), returns `defaultColorScheme`.\n *\n * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)\n * @returns 'light' or 'dark'\n */\nexport function getPrefersColorScheme(\n\tdefaultColorScheme: 'light' | 'dark' = 'light'\n): 'light' | 'dark' {\n\tif (typeof matchMedia === 'undefined') return defaultColorScheme\n\treturn matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'\n}\n"],"mappings":";;;;;;;;;;;;AAWA,SAAgB,sBACf,qBAAuC,SACpB;AACnB,KAAI,OAAO,eAAe,YAAa,QAAO;AAC9C,QAAO,WAAW,gCAAgC,CAAC,UAAU,UAAU"}
+{"version":3,"file":"get-prefers-color-scheme.mjs","names":[],"sources":["../../src/color-scheme/get-prefers-color-scheme.ts"],"sourcesContent":["import type { ColorScheme } from './color-scheme.types.ts'\n\n/**\n * Gets the current preferred color scheme.\n * It can only be 'light' or 'dark'.\n *\n * Per {@link https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme Media Queries Level 5},\n * the `prefers-color-scheme` media feature has only two valid values. Even if the browser\n * preference is 'auto'/'device', it will return 'light' or 'dark'.\n *\n * When `matchMedia` is unavailable (e.g. SSR), returns `defaultColorScheme`.\n *\n * @param defaultColorScheme - Fallback when `matchMedia` is unavailable (default: `'light'`)\n * @returns 'light' or 'dark'\n */\nexport function getPrefersColorScheme(defaultColorScheme: ColorScheme = 'light'): ColorScheme {\n\tif (typeof matchMedia === 'undefined') return defaultColorScheme\n\treturn matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'\n}\n"],"mappings":";;;;;;;;;;;;;;AAeA,SAAgB,sBAAsB,qBAAkC,SAAsB;AAC7F,KAAI,OAAO,eAAe,YAAa,QAAO;AAC9C,QAAO,WAAW,gCAAgC,CAAC,UAAU,UAAU"}

package/dist/color-scheme/observe-prefers-color-scheme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"observe-prefers-color-scheme.cjs","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":["/**\n * Observes system color scheme preference changes and calls handlers when they occur.\n *\n * @param handler - A function that is called when the color scheme preference changes\n * @returns A cleanup function that removes all event listeners\n *\n * @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme((value) => console.log('Color scheme changed to:', value))\n *\n * // Later, to stop observing:\n * cleanup()\n * ```\n */\nexport function observePrefersColorScheme(handler: (value: 'light' | 'dark') => void) {\n\tconst m = globalThis.matchMedia('(prefers-color-scheme: light)')\n\tconst listener = (event: MediaQueryListEvent) => {\n\t\thandler(event.matches ? 'light' : 'dark')\n\t}\n\n\tm.addEventListener('change', listener)\n\treturn () => m.removeEventListener('change', listener)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAeA,SAAgB,0BAA0B,SAA4C;CACrF,MAAM,IAAI,WAAW,WAAW,gCAAgC;CAChE,MAAM,YAAY,UAA+B;AAChD,UAAQ,MAAM,UAAU,UAAU,OAAO;;AAG1C,GAAE,iBAAiB,UAAU,SAAS;AACtC,cAAa,EAAE,oBAAoB,UAAU,SAAS"}
+{"version":3,"file":"observe-prefers-color-scheme.cjs","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":["import type { ColorScheme } from './color-scheme.types.ts'\n\n/**\n * Observes system color scheme preference changes and calls handlers when they occur.\n *\n * @param handler - A function that is called when the color scheme preference changes\n * @returns A cleanup function that removes all event listeners\n *\n * @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme((value) => console.log('Color scheme changed to:', value))\n *\n * // Later, to stop observing:\n * cleanup()\n * ```\n */\nexport function observePrefersColorScheme(handler: (value: ColorScheme) => void) {\n\tconst m = globalThis.matchMedia('(prefers-color-scheme: light)')\n\tconst listener = (event: MediaQueryListEvent) => {\n\t\thandler(event.matches ? 'light' : 'dark')\n\t}\n\n\tm.addEventListener('change', listener)\n\treturn () => m.removeEventListener('change', listener)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAiBA,SAAgB,0BAA0B,SAAuC;CAChF,MAAM,IAAI,WAAW,WAAW,gCAAgC;CAChE,MAAM,YAAY,UAA+B;AAChD,UAAQ,MAAM,UAAU,UAAU,OAAO;;AAG1C,GAAE,iBAAiB,UAAU,SAAS;AACtC,cAAa,EAAE,oBAAoB,UAAU,SAAS"}

package/dist/color-scheme/observe-prefers-color-scheme.d.cts

@@ -1,4 +1,7 @@
+import { ColorScheme } from "./color-scheme.types.cjs";
+
 //#region src/color-scheme/observe-prefers-color-scheme.d.ts
+
 /**
  * Observes system color scheme preference changes and calls handlers when they occur.
  *
@@ -14,7 +17,7 @@
  * cleanup()
  * ```
  */
-declare function observePrefersColorScheme(handler: (value: 'light' | 'dark') => void): () => void;
+declare function observePrefersColorScheme(handler: (value: ColorScheme) => void): () => void;
 //#endregion
 export { observePrefersColorScheme };
 //# sourceMappingURL=observe-prefers-color-scheme.d.cts.map

package/dist/color-scheme/observe-prefers-color-scheme.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"observe-prefers-color-scheme.d.cts","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;AAeA;;;;;;;;;;;;;;iBAAgB,yBAAA"}
+{"version":3,"file":"observe-prefers-color-scheme.d.cts","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;;;;;AAiBA;;;;;;;;;;;;;iBAAgB,yBAAA,kBAA2C"}

package/dist/color-scheme/observe-prefers-color-scheme.d.mts

@@ -1,4 +1,7 @@
+import { ColorScheme } from "./color-scheme.types.mjs";
+
 //#region src/color-scheme/observe-prefers-color-scheme.d.ts
+
 /**
  * Observes system color scheme preference changes and calls handlers when they occur.
  *
@@ -14,7 +17,7 @@
  * cleanup()
  * ```
  */
-declare function observePrefersColorScheme(handler: (value: 'light' | 'dark') => void): () => void;
+declare function observePrefersColorScheme(handler: (value: ColorScheme) => void): () => void;
 //#endregion
 export { observePrefersColorScheme };
 //# sourceMappingURL=observe-prefers-color-scheme.d.mts.map

package/dist/color-scheme/observe-prefers-color-scheme.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"observe-prefers-color-scheme.d.mts","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;AAeA;;;;;;;;;;;;;;iBAAgB,yBAAA"}
+{"version":3,"file":"observe-prefers-color-scheme.d.mts","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;;;;;AAiBA;;;;;;;;;;;;;iBAAgB,yBAAA,kBAA2C"}

package/dist/color-scheme/observe-prefers-color-scheme.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"observe-prefers-color-scheme.mjs","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":["/**\n * Observes system color scheme preference changes and calls handlers when they occur.\n *\n * @param handler - A function that is called when the color scheme preference changes\n * @returns A cleanup function that removes all event listeners\n *\n * @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme((value) => console.log('Color scheme changed to:', value))\n *\n * // Later, to stop observing:\n * cleanup()\n * ```\n */\nexport function observePrefersColorScheme(handler: (value: 'light' | 'dark') => void) {\n\tconst m = globalThis.matchMedia('(prefers-color-scheme: light)')\n\tconst listener = (event: MediaQueryListEvent) => {\n\t\thandler(event.matches ? 'light' : 'dark')\n\t}\n\n\tm.addEventListener('change', listener)\n\treturn () => m.removeEventListener('change', listener)\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAeA,SAAgB,0BAA0B,SAA4C;CACrF,MAAM,IAAI,WAAW,WAAW,gCAAgC;CAChE,MAAM,YAAY,UAA+B;AAChD,UAAQ,MAAM,UAAU,UAAU,OAAO;;AAG1C,GAAE,iBAAiB,UAAU,SAAS;AACtC,cAAa,EAAE,oBAAoB,UAAU,SAAS"}
+{"version":3,"file":"observe-prefers-color-scheme.mjs","names":[],"sources":["../../src/color-scheme/observe-prefers-color-scheme.ts"],"sourcesContent":["import type { ColorScheme } from './color-scheme.types.ts'\n\n/**\n * Observes system color scheme preference changes and calls handlers when they occur.\n *\n * @param handler - A function that is called when the color scheme preference changes\n * @returns A cleanup function that removes all event listeners\n *\n * @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme((value) => console.log('Color scheme changed to:', value))\n *\n * // Later, to stop observing:\n * cleanup()\n * ```\n */\nexport function observePrefersColorScheme(handler: (value: ColorScheme) => void) {\n\tconst m = globalThis.matchMedia('(prefers-color-scheme: light)')\n\tconst listener = (event: MediaQueryListEvent) => {\n\t\thandler(event.matches ? 'light' : 'dark')\n\t}\n\n\tm.addEventListener('change', listener)\n\treturn () => m.removeEventListener('change', listener)\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAiBA,SAAgB,0BAA0B,SAAuC;CAChF,MAAM,IAAI,WAAW,WAAW,gCAAgC;CAChE,MAAM,YAAY,UAA+B;AAChD,UAAQ,MAAM,UAAU,UAAU,OAAO;;AAG1C,GAAE,iBAAiB,UAAU,SAAS;AACtC,cAAa,EAAE,oBAAoB,UAAU,SAAS"}

package/dist/index.d.cts

@@ -9,6 +9,7 @@ import { ClassNameProps } from "./class-name/class-name-props.cjs";
 import { clsx } from "./class-name/clsx.cjs";
 import { JustClassName, JustClassNameFnProps, JustClassNameProps } from "./class-name/just-class-name.cjs";
 import { resolveClassName } from "./class-name/resolve-class-name.cjs";
+import { ColorScheme } from "./color-scheme/color-scheme.types.cjs";
 import { getPrefersColorScheme } from "./color-scheme/get-prefers-color-scheme.cjs";
 import { observePrefersColorScheme } from "./color-scheme/observe-prefers-color-scheme.cjs";
 import { CSSProperties } from "./style/css-properties.cjs";
@@ -23,4 +24,4 @@ import { px2num } from "./units/px-2-num.cjs";
 import { px2rem } from "./units/px-2-rem.cjs";
 import { rem2px } from "./units/rem-2-px.cjs";
 import { appendId } from "./utils/append-id.cjs";
-export { CSSProperties, ClassNameProps, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };
+export { CSSProperties, ClassNameProps, ColorScheme, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

package/dist/index.d.mts

@@ -9,6 +9,7 @@ import { ClassNameProps } from "./class-name/class-name-props.mjs";
 import { clsx } from "./class-name/clsx.mjs";
 import { JustClassName, JustClassNameFnProps, JustClassNameProps } from "./class-name/just-class-name.mjs";
 import { resolveClassName } from "./class-name/resolve-class-name.mjs";
+import { ColorScheme } from "./color-scheme/color-scheme.types.mjs";
 import { getPrefersColorScheme } from "./color-scheme/get-prefers-color-scheme.mjs";
 import { observePrefersColorScheme } from "./color-scheme/observe-prefers-color-scheme.mjs";
 import { CSSProperties } from "./style/css-properties.mjs";
@@ -23,4 +24,4 @@ import { px2num } from "./units/px-2-num.mjs";
 import { px2rem } from "./units/px-2-rem.mjs";
 import { rem2px } from "./units/rem-2-px.mjs";
 import { appendId } from "./utils/append-id.mjs";
-export { CSSProperties, ClassNameProps, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };
+export { CSSProperties, ClassNameProps, ColorScheme, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

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

@@ -8,30 +8,29 @@ 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));
-		const observer = require_observe_attribute.observeAttributes({ [attributeName]: (next) => {
-			setValueState(next);
+		setValueState(element.getAttribute(attributeName) ?? void 0);
+		return require_observe_attribute.observeAttributes({ [attributeName]: (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\treturn 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}, [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;AAE/D,SAAOA,4CACN,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;IACC,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,29 @@ 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));
-		const observer = observeAttributes({ [attributeName]: (next) => {
-			setValueState(next);
+		setValueState(element.getAttribute(attributeName) ?? void 0);
+		return observeAttributes({ [attributeName]: (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\treturn 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}, [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;AAE/D,SAAO,kBACN,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;IACC,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"}