@just-web/toolkits 1.0.0

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

@@ -0,0 +1,73 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_get_data_attribute = require('../../attributes/get-data-attribute.cjs');
+const require_observe_theme_from_stores = require('../../theme/_utils/observe-theme-from-stores.cjs');
+const require_set_theme_to_stores = require('../../theme/_utils/set-theme-to-stores.cjs');
+const require_theme_entry = require('../../theme/theme-entry.cjs');
+const require_resolve_theme_from_data_attribute = require('../../theme/data-attribute/resolve-theme-from-data-attribute.cjs');
+const require_data_attribute_theme_store = require('../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.cjs');
+let react = require("react");
+
+//#region src/react/hooks/use-theme-by-data-attribute.ts
+/**
+* React hook that returns the current theme (from element data attribute) and a setter.
+* Subscribes to data attribute changes on the element so the returned theme stays in sync.
+*
+* @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)
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* const themes = { light: 'theme-light', dark: 'theme-dark' }
+* const [theme, setTheme] = useThemeByDataAttribute(themes, {
+*   attributeName: 'data-theme',
+*   defaultTheme: 'light'
+* })
+*
+* return (
+*   <>
+*     <span>Current: {theme}</span>
+*     <button onClick={() => setTheme('dark')}>Dark</button>
+*     <button onClick={() => setTheme('light')}>Light</button>
+*   </>
+* )
+* ```
+*/
+function useThemeByDataAttribute(themes, options) {
+	const element = options.element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
+	const defaultTheme = options.defaultTheme;
+	const attributeName = options.attributeName;
+	const store = (0, react.useMemo)(() => require_data_attribute_theme_store.dataAttributeThemeStore(themes, {
+		attributeName,
+		element
+	}), [
+		element,
+		themes,
+		attributeName
+	]);
+	const [theme, setThemeState] = (0, react.useState)(() => {
+		if (element) return require_resolve_theme_from_data_attribute.resolveThemeFromDataAttribute(themes, require_get_data_attribute.getDataAttribute(attributeName, element)) ?? defaultTheme;
+		return defaultTheme;
+	});
+	(0, react.useEffect)(() => {
+		if (!element) return;
+		return require_observe_theme_from_stores.observeThemeFromStores([store], defaultTheme, setThemeState);
+	}, [
+		element,
+		store,
+		defaultTheme
+	]);
+	return [theme, (0, react.useCallback)((themeKey) => {
+		if (element) require_set_theme_to_stores.setThemeToStores([store], require_theme_entry.themeEntry(themes, themeKey));
+	}, [
+		element,
+		store,
+		themes
+	])];
+}
+
+//#endregion
+exports.useThemeByDataAttribute = useThemeByDataAttribute;
+//# sourceMappingURL=use-theme-by-data-attribute.cjs.map

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

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

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

@@ -0,0 +1,39 @@
+import { ThemeMap } from "../../theme/theme-map.types.cjs";
+
+//#region src/react/hooks/use-theme-by-data-attribute.d.ts
+
+/**
+ * React hook that returns the current theme (from element data attribute) and a setter.
+ * Subscribes to data attribute changes on the element so the returned theme stays in sync.
+ *
+ * @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)
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * const themes = { light: 'theme-light', dark: 'theme-dark' }
+ * const [theme, setTheme] = useThemeByDataAttribute(themes, {
+ *   attributeName: 'data-theme',
+ *   defaultTheme: 'light'
+ * })
+ *
+ * return (
+ *   <>
+ *     <span>Current: {theme}</span>
+ *     <button onClick={() => setTheme('dark')}>Dark</button>
+ *     <button onClick={() => setTheme('light')}>Light</button>
+ *   </>
+ * )
+ * ```
+ */
+declare function useThemeByDataAttribute<Themes extends ThemeMap>(themes: Themes, options: {
+  attributeName: `data-${string}`;
+  defaultTheme?: keyof Themes | undefined;
+  element?: Element | undefined;
+}): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeByDataAttribute };
+//# sourceMappingURL=use-theme-by-data-attribute.d.cts.map

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

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

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

@@ -0,0 +1,39 @@
+import { ThemeMap } from "../../theme/theme-map.types.mjs";
+
+//#region src/react/hooks/use-theme-by-data-attribute.d.ts
+
+/**
+ * React hook that returns the current theme (from element data attribute) and a setter.
+ * Subscribes to data attribute changes on the element so the returned theme stays in sync.
+ *
+ * @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)
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * const themes = { light: 'theme-light', dark: 'theme-dark' }
+ * const [theme, setTheme] = useThemeByDataAttribute(themes, {
+ *   attributeName: 'data-theme',
+ *   defaultTheme: 'light'
+ * })
+ *
+ * return (
+ *   <>
+ *     <span>Current: {theme}</span>
+ *     <button onClick={() => setTheme('dark')}>Dark</button>
+ *     <button onClick={() => setTheme('light')}>Light</button>
+ *   </>
+ * )
+ * ```
+ */
+declare function useThemeByDataAttribute<Themes extends ThemeMap>(themes: Themes, options: {
+  attributeName: `data-${string}`;
+  defaultTheme?: keyof Themes | undefined;
+  element?: Element | undefined;
+}): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeByDataAttribute };
+//# sourceMappingURL=use-theme-by-data-attribute.d.mts.map

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

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

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

@@ -0,0 +1,72 @@
+import { getDataAttribute } from "../../attributes/get-data-attribute.mjs";
+import { observeThemeFromStores } from "../../theme/_utils/observe-theme-from-stores.mjs";
+import { setThemeToStores } from "../../theme/_utils/set-theme-to-stores.mjs";
+import { themeEntry } from "../../theme/theme-entry.mjs";
+import { resolveThemeFromDataAttribute } from "../../theme/data-attribute/resolve-theme-from-data-attribute.mjs";
+import { dataAttributeThemeStore } from "../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+//#region src/react/hooks/use-theme-by-data-attribute.ts
+/**
+* React hook that returns the current theme (from element data attribute) and a setter.
+* Subscribes to data attribute changes on the element so the returned theme stays in sync.
+*
+* @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)
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* const themes = { light: 'theme-light', dark: 'theme-dark' }
+* const [theme, setTheme] = useThemeByDataAttribute(themes, {
+*   attributeName: 'data-theme',
+*   defaultTheme: 'light'
+* })
+*
+* return (
+*   <>
+*     <span>Current: {theme}</span>
+*     <button onClick={() => setTheme('dark')}>Dark</button>
+*     <button onClick={() => setTheme('light')}>Light</button>
+*   </>
+* )
+* ```
+*/
+function useThemeByDataAttribute(themes, options) {
+	const element = options.element ?? (typeof document !== "undefined" ? document.documentElement : void 0);
+	const defaultTheme = options.defaultTheme;
+	const attributeName = options.attributeName;
+	const store = useMemo(() => dataAttributeThemeStore(themes, {
+		attributeName,
+		element
+	}), [
+		element,
+		themes,
+		attributeName
+	]);
+	const [theme, setThemeState] = useState(() => {
+		if (element) return resolveThemeFromDataAttribute(themes, getDataAttribute(attributeName, element)) ?? defaultTheme;
+		return defaultTheme;
+	});
+	useEffect(() => {
+		if (!element) return;
+		return observeThemeFromStores([store], defaultTheme, setThemeState);
+	}, [
+		element,
+		store,
+		defaultTheme
+	]);
+	return [theme, useCallback((themeKey) => {
+		if (element) setThemeToStores([store], themeEntry(themes, themeKey));
+	}, [
+		element,
+		store,
+		themes
+	])];
+}
+
+//#endregion
+export { useThemeByDataAttribute };
+//# sourceMappingURL=use-theme-by-data-attribute.mjs.map

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

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

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

@@ -0,0 +1,53 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_observe_theme_from_stores = require('../../theme/_utils/observe-theme-from-stores.cjs');
+const require_set_theme_to_stores = require('../../theme/_utils/set-theme-to-stores.cjs');
+const require_theme_entry = require('../../theme/theme-entry.cjs');
+const require_parse_stored_theme = require('../../theme/_utils/parse-stored-theme.cjs');
+const require_local_storage_theme_store = require('../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.cjs');
+let react = require("react");
+
+//#region src/react/hooks/use-theme-by-local-storage.ts
+/**
+* React hook that returns the current theme (from localStorage) and a setter.
+* Subscribes to storage changes so the returned theme stays in sync across tabs.
+*
+* @param themes - Record mapping theme keys to their values
+* @param options.storageKey - localStorage key to persist the theme
+* @param options.defaultTheme - Fallback theme key when no stored value is found
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* const themes = { light: 'theme-light', dark: 'theme-dark' }
+* const [theme, setTheme] = useThemeByLocalStorage(themes, {
+*   storageKey: 'app-theme',
+*   defaultTheme: 'light'
+* })
+*
+* return (
+*   <>
+*     <span>Current: {theme}</span>
+*     <button onClick={() => setTheme('dark')}>Dark</button>
+*     <button onClick={() => setTheme('light')}>Light</button>
+*   </>
+* )
+* ```
+*/
+function useThemeByLocalStorage(themes, options) {
+	const { storageKey, defaultTheme } = options;
+	const store = (0, react.useMemo)(() => require_local_storage_theme_store.localStorageThemeStore(themes, { storageKey }), [themes, storageKey]);
+	const [theme, setThemeState] = (0, react.useState)(() => {
+		if (typeof window !== "undefined" && window.localStorage) return require_parse_stored_theme.parseStoredTheme(themes, window.localStorage.getItem(storageKey)) ?? defaultTheme;
+		return defaultTheme;
+	});
+	(0, react.useEffect)(() => {
+		return require_observe_theme_from_stores.observeThemeFromStores([store], defaultTheme, setThemeState);
+	}, [store, defaultTheme]);
+	return [theme, (0, react.useCallback)((themeKey) => {
+		require_set_theme_to_stores.setThemeToStores([store], require_theme_entry.themeEntry(themes, themeKey));
+	}, [store, themes])];
+}
+
+//#endregion
+exports.useThemeByLocalStorage = useThemeByLocalStorage;
+//# sourceMappingURL=use-theme-by-local-storage.cjs.map

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

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

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

@@ -0,0 +1,37 @@
+import { ThemeMap } from "../../theme/theme-map.types.cjs";
+
+//#region src/react/hooks/use-theme-by-local-storage.d.ts
+
+/**
+ * React hook that returns the current theme (from localStorage) and a setter.
+ * Subscribes to storage changes so the returned theme stays in sync across tabs.
+ *
+ * @param themes - Record mapping theme keys to their values
+ * @param options.storageKey - localStorage key to persist the theme
+ * @param options.defaultTheme - Fallback theme key when no stored value is found
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * const themes = { light: 'theme-light', dark: 'theme-dark' }
+ * const [theme, setTheme] = useThemeByLocalStorage(themes, {
+ *   storageKey: 'app-theme',
+ *   defaultTheme: 'light'
+ * })
+ *
+ * return (
+ *   <>
+ *     <span>Current: {theme}</span>
+ *     <button onClick={() => setTheme('dark')}>Dark</button>
+ *     <button onClick={() => setTheme('light')}>Light</button>
+ *   </>
+ * )
+ * ```
+ */
+declare function useThemeByLocalStorage<Themes extends ThemeMap>(themes: Themes, options: {
+  storageKey: string;
+  defaultTheme?: keyof Themes | undefined;
+}): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeByLocalStorage };
+//# sourceMappingURL=use-theme-by-local-storage.d.cts.map

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

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

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

@@ -0,0 +1,37 @@
+import { ThemeMap } from "../../theme/theme-map.types.mjs";
+
+//#region src/react/hooks/use-theme-by-local-storage.d.ts
+
+/**
+ * React hook that returns the current theme (from localStorage) and a setter.
+ * Subscribes to storage changes so the returned theme stays in sync across tabs.
+ *
+ * @param themes - Record mapping theme keys to their values
+ * @param options.storageKey - localStorage key to persist the theme
+ * @param options.defaultTheme - Fallback theme key when no stored value is found
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * const themes = { light: 'theme-light', dark: 'theme-dark' }
+ * const [theme, setTheme] = useThemeByLocalStorage(themes, {
+ *   storageKey: 'app-theme',
+ *   defaultTheme: 'light'
+ * })
+ *
+ * return (
+ *   <>
+ *     <span>Current: {theme}</span>
+ *     <button onClick={() => setTheme('dark')}>Dark</button>
+ *     <button onClick={() => setTheme('light')}>Light</button>
+ *   </>
+ * )
+ * ```
+ */
+declare function useThemeByLocalStorage<Themes extends ThemeMap>(themes: Themes, options: {
+  storageKey: string;
+  defaultTheme?: keyof Themes | undefined;
+}): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeByLocalStorage };
+//# sourceMappingURL=use-theme-by-local-storage.d.mts.map

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

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

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

@@ -0,0 +1,52 @@
+import { observeThemeFromStores } from "../../theme/_utils/observe-theme-from-stores.mjs";
+import { setThemeToStores } from "../../theme/_utils/set-theme-to-stores.mjs";
+import { themeEntry } from "../../theme/theme-entry.mjs";
+import { parseStoredTheme } from "../../theme/_utils/parse-stored-theme.mjs";
+import { localStorageThemeStore } from "../../theme/theme-store/local-storage-theme-store/local-storage-theme-store.mjs";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+//#region src/react/hooks/use-theme-by-local-storage.ts
+/**
+* React hook that returns the current theme (from localStorage) and a setter.
+* Subscribes to storage changes so the returned theme stays in sync across tabs.
+*
+* @param themes - Record mapping theme keys to their values
+* @param options.storageKey - localStorage key to persist the theme
+* @param options.defaultTheme - Fallback theme key when no stored value is found
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* const themes = { light: 'theme-light', dark: 'theme-dark' }
+* const [theme, setTheme] = useThemeByLocalStorage(themes, {
+*   storageKey: 'app-theme',
+*   defaultTheme: 'light'
+* })
+*
+* return (
+*   <>
+*     <span>Current: {theme}</span>
+*     <button onClick={() => setTheme('dark')}>Dark</button>
+*     <button onClick={() => setTheme('light')}>Light</button>
+*   </>
+* )
+* ```
+*/
+function useThemeByLocalStorage(themes, options) {
+	const { storageKey, defaultTheme } = options;
+	const store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey]);
+	const [theme, setThemeState] = useState(() => {
+		if (typeof window !== "undefined" && window.localStorage) return parseStoredTheme(themes, window.localStorage.getItem(storageKey)) ?? defaultTheme;
+		return defaultTheme;
+	});
+	useEffect(() => {
+		return observeThemeFromStores([store], defaultTheme, setThemeState);
+	}, [store, defaultTheme]);
+	return [theme, useCallback((themeKey) => {
+		setThemeToStores([store], themeEntry(themes, themeKey));
+	}, [store, themes])];
+}
+
+//#endregion
+export { useThemeByLocalStorage };
+//# sourceMappingURL=use-theme-by-local-storage.mjs.map

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

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

package/dist/react/hooks/use-theme-stores.cjs

@@ -0,0 +1,40 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_create_theme_hook = require('../theme/create-theme-hook.cjs');
+let react = require("react");
+
+//#region src/react/hooks/use-theme-stores.ts
+/**
+* React hook that returns the current theme and a setter for composed theme stores.
+* Delegates to createThemeHook internally.
+*
+* Accepts `stores` in two forms:
+* - **Factory (recommended):** `() => [store1, store2, ...]` — run once on mount; no memoization needed.
+* - **Array:** `[store1, store2, ...]` — must be memoized or ref-stable; recreating the array each render breaks subscriptions.
+*
+* @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+* @param stores - Array or factory returning 1–8 theme stores (see ComposeThemeStoreEntry)
+* @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+* @returns Tuple of [currentTheme, setTheme]
+*
+* @example
+* ```tsx
+* // Factory form — no memoization needed
+* const [theme, setTheme] = useThemeStores(
+*   themes,
+*   () => [inMemoryThemeStore(themes)],
+*   { defaultTheme: 'light' }
+* )
+*
+* // Array form — must be memoized
+* const stores = useMemo(() => [localStorageStore], [])
+* const [theme, setTheme] = useThemeStores(themes, stores, { defaultTheme: 'light' })
+* setTheme('dark')
+* ```
+*/
+function useThemeStores(themes, stores, options) {
+	return require_create_theme_hook.createThemeHook(themes, (0, react.useMemo)(() => typeof stores === "function" ? stores() : stores, []), options)(options?.defaultTheme);
+}
+
+//#endregion
+exports.useThemeStores = useThemeStores;
+//# sourceMappingURL=use-theme-stores.cjs.map

package/dist/react/hooks/use-theme-stores.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-stores.cjs","names":["createThemeHook"],"sources":["../../../src/react/hooks/use-theme-stores.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type {\n\tComposeThemeStoreEntry,\n\tComposeThemeStoresOptions\n} from '../../theme/compose-theme-stores.ts'\nimport type { ThemeMap } from '../../theme/theme-map.types.ts'\nimport type { ThemeStoreFactory } from '../../theme/theme-store/theme-store-factory.types.ts'\nimport { createThemeHook } from '../theme/create-theme-hook.ts'\n\ntype ThemeStoresTuple<\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> = readonly [\n\tstore1: ComposeThemeStoreEntry<Themes, A>,\n\tstore2?: ComposeThemeStoreEntry<Themes, B>,\n\tstore3?: ComposeThemeStoreEntry<Themes, C>,\n\tstore4?: ComposeThemeStoreEntry<Themes, D>,\n\tstore5?: ComposeThemeStoreEntry<Themes, E>,\n\tstore6?: ComposeThemeStoreEntry<Themes, F>,\n\tstore7?: ComposeThemeStoreEntry<Themes, G>,\n\tstore8?: ComposeThemeStoreEntry<Themes, H>\n]\n\n/**\n * React hook that returns the current theme and a setter for composed theme stores.\n * Delegates to createThemeHook internally.\n *\n * Accepts `stores` in two forms:\n * - **Factory (recommended):** `() => [store1, store2, ...]` — run once on mount; no memoization needed.\n * - **Array:** `[store1, store2, ...]` — must be memoized or ref-stable; recreating the array each render breaks subscriptions.\n *\n * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)\n * @param stores - Array or factory returning 1–8 theme stores (see ComposeThemeStoreEntry)\n * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR\n * @returns Tuple of [currentTheme, setTheme]\n *\n * @example\n * ```tsx\n * // Factory form — no memoization needed\n * const [theme, setTheme] = useThemeStores(\n *   themes,\n *   () => [inMemoryThemeStore(themes)],\n *   { defaultTheme: 'light' }\n * )\n *\n * // Array form — must be memoized\n * const stores = useMemo(() => [localStorageStore], [])\n * const [theme, setTheme] = useThemeStores(themes, stores, { defaultTheme: 'light' })\n * setTheme('dark')\n * ```\n */\nexport function useThemeStores<\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:\n\t\t| ThemeStoresTuple<Themes, A, B, C, D, E, F, G, H>\n\t\t| (() => ThemeStoresTuple<Themes, A, B, C, D, E, F, G, H>),\n\toptions?: ComposeThemeStoresOptions<Themes>\n): [keyof Themes | undefined, (theme: keyof Themes) => void] {\n\tconst resolvedStores = useMemo(\n\t\t() => (typeof stores === 'function' ? stores() : stores),\n\t\t// Empty deps: factory runs once on mount; array form must be ref-stable (user memoizes)\n\t\t[]\n\t)\n\tconst useTheme = createThemeHook<Themes, A, B, C, D, E, F, G, H>(themes, resolvedStores, options)\n\treturn useTheme(options?.defaultTheme)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0DA,SAAgB,eAWf,QACA,QAGA,SAC4D;AAO5D,QADiBA,0CAAgD,iCAJzD,OAAO,WAAW,aAAa,QAAQ,GAAG,QAEjD,EAAE,CACF,EACwF,QAAQ,CACjF,SAAS,aAAa"}

package/dist/react/hooks/use-theme-stores.d.cts

@@ -0,0 +1,38 @@
+import { ThemeMap } from "../../theme/theme-map.types.cjs";
+import { ThemeStoreFactory } from "../../theme/theme-store/theme-store-factory.types.cjs";
+import { ComposeThemeStoreEntry, ComposeThemeStoresOptions } from "../../theme/compose-theme-stores.cjs";
+
+//#region src/react/hooks/use-theme-stores.d.ts
+type ThemeStoresTuple<Themes extends ThemeMap, A extends ThemeStoreFactory<Themes> = never, B extends ThemeStoreFactory<Themes> = never, C extends ThemeStoreFactory<Themes> = never, D extends ThemeStoreFactory<Themes> = never, E extends ThemeStoreFactory<Themes> = never, F extends ThemeStoreFactory<Themes> = never, G extends ThemeStoreFactory<Themes> = never, H extends ThemeStoreFactory<Themes> = never> = readonly [store1: ComposeThemeStoreEntry<Themes, A>, store2?: ComposeThemeStoreEntry<Themes, B>, store3?: ComposeThemeStoreEntry<Themes, C>, store4?: ComposeThemeStoreEntry<Themes, D>, store5?: ComposeThemeStoreEntry<Themes, E>, store6?: ComposeThemeStoreEntry<Themes, F>, store7?: ComposeThemeStoreEntry<Themes, G>, store8?: ComposeThemeStoreEntry<Themes, H>];
+/**
+ * React hook that returns the current theme and a setter for composed theme stores.
+ * Delegates to createThemeHook internally.
+ *
+ * Accepts `stores` in two forms:
+ * - **Factory (recommended):** `() => [store1, store2, ...]` — run once on mount; no memoization needed.
+ * - **Array:** `[store1, store2, ...]` — must be memoized or ref-stable; recreating the array each render breaks subscriptions.
+ *
+ * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+ * @param stores - Array or factory returning 1–8 theme stores (see ComposeThemeStoreEntry)
+ * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * // Factory form — no memoization needed
+ * const [theme, setTheme] = useThemeStores(
+ *   themes,
+ *   () => [inMemoryThemeStore(themes)],
+ *   { defaultTheme: 'light' }
+ * )
+ *
+ * // Array form — must be memoized
+ * const stores = useMemo(() => [localStorageStore], [])
+ * const [theme, setTheme] = useThemeStores(themes, stores, { defaultTheme: 'light' })
+ * setTheme('dark')
+ * ```
+ */
+declare function useThemeStores<Themes extends ThemeMap, A extends ThemeStoreFactory<Themes> = never, B extends ThemeStoreFactory<Themes> = never, C extends ThemeStoreFactory<Themes> = never, D extends ThemeStoreFactory<Themes> = never, E extends ThemeStoreFactory<Themes> = never, F extends ThemeStoreFactory<Themes> = never, G extends ThemeStoreFactory<Themes> = never, H extends ThemeStoreFactory<Themes> = never>(themes: Themes, stores: ThemeStoresTuple<Themes, A, B, C, D, E, F, G, H> | (() => ThemeStoresTuple<Themes, A, B, C, D, E, F, G, H>), options?: ComposeThemeStoresOptions<Themes>): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeStores };
+//# sourceMappingURL=use-theme-stores.d.cts.map

package/dist/react/hooks/use-theme-stores.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-stores.d.cts","names":[],"sources":["../../../src/react/hooks/use-theme-stores.ts"],"sourcesContent":[],"mappings":";;;;;KASK,gCACW,oBACL,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,qCAEpB,uBAAuB,QAAQ,IAXnC,MAAA,GAYK,sBAZW,CAYY,MAZZ,EAYoB,CAZpB,CAAA,EACL,MAAA,GAYN,sBAZM,CAYiB,MAZjB,EAYyB,CAZzB,CAAA,EACa,MAAA,GAYnB,sBAZmB,CAYI,MAZJ,EAYY,CAZZ,CAAA,EAAlB,MAAA,GAaD,sBAbC,CAasB,MAbtB,EAa8B,CAb9B,CAAA,EACkB,MAAA,GAanB,sBAbmB,CAaI,MAbJ,EAaY,CAbZ,CAAA,EAAlB,MAAA,GAcD,sBAdC,CAcsB,MAdtB,EAc8B,CAd9B,CAAA,EACkB,MAAA,GAcnB,sBAdmB,CAcI,MAdJ,EAcY,CAdZ,CAAA,CAAlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAasB,iBAgCjB,cAhCiB,CAAA,eAiCjB,QAjCiB,EAAA,UAkCtB,iBAlCsB,CAkCJ,MAlCI,CAAA,GAAA,KAAA,EAAA,UAmCtB,iBAnCsB,CAmCJ,MAnCI,CAAA,GAAA,KAAA,EAAA,UAoCtB,iBApCsB,CAoCJ,MApCI,CAAA,GAAA,KAAA,EAAA,UAqCtB,iBArCsB,CAqCJ,MArCI,CAAA,GAAA,KAAA,EAAA,UAsCtB,iBAtCsB,CAsCJ,MAtCI,CAAA,GAAA,KAAA,EAAA,UAuCtB,iBAvCsB,CAuCJ,MAvCI,CAAA,GAAA,KAAA,EAAA,UAwCtB,iBAxCsB,CAwCJ,MAxCI,CAAA,GAAA,KAAA,EAAA,UAyCtB,iBAzCsB,CAyCJ,MAzCI,CAAA,GAAA,KAAA,CAAA,CAAA,MAAA,EA2CxB,MA3CwB,EAAA,MAAA,EA6C7B,gBA7C6B,CA6CZ,MA7CY,EA6CJ,CA7CI,EA6CD,CA7CC,EA6CE,CA7CF,EA6CK,CA7CL,EA6CQ,CA7CR,EA6CW,CA7CX,EA6Cc,CA7Cd,EA6CiB,CA7CjB,CAAA,GAAA,CAAA,GAAA,GA8CtB,gBA9CsB,CA8CL,MA9CK,EA8CG,CA9CH,EA8CM,CA9CN,EA8CS,CA9CT,EA8CY,CA9CZ,EA8Ce,CA9Cf,EA8CkB,CA9ClB,EA8CqB,CA9CrB,EA8CwB,CA9CxB,CAAA,CAAA,EAAA,OAAA,CAAA,EA+CtB,yBA/CsB,CA+CI,MA/CJ,CAAA,CAAA,EAAA,CAAA,MAgDvB,MAhDuB,GAAA,SAAA,EAAA,CAAA,KAAA,EAAA,MAgDW,MAhDX,EAAA,GAAA,IAAA,CAAA"}

package/dist/react/hooks/use-theme-stores.d.mts

@@ -0,0 +1,38 @@
+import { ThemeMap } from "../../theme/theme-map.types.mjs";
+import { ThemeStoreFactory } from "../../theme/theme-store/theme-store-factory.types.mjs";
+import { ComposeThemeStoreEntry, ComposeThemeStoresOptions } from "../../theme/compose-theme-stores.mjs";
+
+//#region src/react/hooks/use-theme-stores.d.ts
+type ThemeStoresTuple<Themes extends ThemeMap, A extends ThemeStoreFactory<Themes> = never, B extends ThemeStoreFactory<Themes> = never, C extends ThemeStoreFactory<Themes> = never, D extends ThemeStoreFactory<Themes> = never, E extends ThemeStoreFactory<Themes> = never, F extends ThemeStoreFactory<Themes> = never, G extends ThemeStoreFactory<Themes> = never, H extends ThemeStoreFactory<Themes> = never> = readonly [store1: ComposeThemeStoreEntry<Themes, A>, store2?: ComposeThemeStoreEntry<Themes, B>, store3?: ComposeThemeStoreEntry<Themes, C>, store4?: ComposeThemeStoreEntry<Themes, D>, store5?: ComposeThemeStoreEntry<Themes, E>, store6?: ComposeThemeStoreEntry<Themes, F>, store7?: ComposeThemeStoreEntry<Themes, G>, store8?: ComposeThemeStoreEntry<Themes, H>];
+/**
+ * React hook that returns the current theme and a setter for composed theme stores.
+ * Delegates to createThemeHook internally.
+ *
+ * Accepts `stores` in two forms:
+ * - **Factory (recommended):** `() => [store1, store2, ...]` — run once on mount; no memoization needed.
+ * - **Array:** `[store1, store2, ...]` — must be memoized or ref-stable; recreating the array each render breaks subscriptions.
+ *
+ * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+ * @param stores - Array or factory returning 1–8 theme stores (see ComposeThemeStoreEntry)
+ * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+ * @returns Tuple of [currentTheme, setTheme]
+ *
+ * @example
+ * ```tsx
+ * // Factory form — no memoization needed
+ * const [theme, setTheme] = useThemeStores(
+ *   themes,
+ *   () => [inMemoryThemeStore(themes)],
+ *   { defaultTheme: 'light' }
+ * )
+ *
+ * // Array form — must be memoized
+ * const stores = useMemo(() => [localStorageStore], [])
+ * const [theme, setTheme] = useThemeStores(themes, stores, { defaultTheme: 'light' })
+ * setTheme('dark')
+ * ```
+ */
+declare function useThemeStores<Themes extends ThemeMap, A extends ThemeStoreFactory<Themes> = never, B extends ThemeStoreFactory<Themes> = never, C extends ThemeStoreFactory<Themes> = never, D extends ThemeStoreFactory<Themes> = never, E extends ThemeStoreFactory<Themes> = never, F extends ThemeStoreFactory<Themes> = never, G extends ThemeStoreFactory<Themes> = never, H extends ThemeStoreFactory<Themes> = never>(themes: Themes, stores: ThemeStoresTuple<Themes, A, B, C, D, E, F, G, H> | (() => ThemeStoresTuple<Themes, A, B, C, D, E, F, G, H>), options?: ComposeThemeStoresOptions<Themes>): [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { useThemeStores };
+//# sourceMappingURL=use-theme-stores.d.mts.map

package/dist/react/hooks/use-theme-stores.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-stores.d.mts","names":[],"sources":["../../../src/react/hooks/use-theme-stores.ts"],"sourcesContent":[],"mappings":";;;;;KASK,gCACW,oBACL,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,2BAClB,kBAAkB,qCAEpB,uBAAuB,QAAQ,IAXnC,MAAA,GAYK,sBAZW,CAYY,MAZZ,EAYoB,CAZpB,CAAA,EACL,MAAA,GAYN,sBAZM,CAYiB,MAZjB,EAYyB,CAZzB,CAAA,EACa,MAAA,GAYnB,sBAZmB,CAYI,MAZJ,EAYY,CAZZ,CAAA,EAAlB,MAAA,GAaD,sBAbC,CAasB,MAbtB,EAa8B,CAb9B,CAAA,EACkB,MAAA,GAanB,sBAbmB,CAaI,MAbJ,EAaY,CAbZ,CAAA,EAAlB,MAAA,GAcD,sBAdC,CAcsB,MAdtB,EAc8B,CAd9B,CAAA,EACkB,MAAA,GAcnB,sBAdmB,CAcI,MAdJ,EAcY,CAdZ,CAAA,CAAlB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAasB,iBAgCjB,cAhCiB,CAAA,eAiCjB,QAjCiB,EAAA,UAkCtB,iBAlCsB,CAkCJ,MAlCI,CAAA,GAAA,KAAA,EAAA,UAmCtB,iBAnCsB,CAmCJ,MAnCI,CAAA,GAAA,KAAA,EAAA,UAoCtB,iBApCsB,CAoCJ,MApCI,CAAA,GAAA,KAAA,EAAA,UAqCtB,iBArCsB,CAqCJ,MArCI,CAAA,GAAA,KAAA,EAAA,UAsCtB,iBAtCsB,CAsCJ,MAtCI,CAAA,GAAA,KAAA,EAAA,UAuCtB,iBAvCsB,CAuCJ,MAvCI,CAAA,GAAA,KAAA,EAAA,UAwCtB,iBAxCsB,CAwCJ,MAxCI,CAAA,GAAA,KAAA,EAAA,UAyCtB,iBAzCsB,CAyCJ,MAzCI,CAAA,GAAA,KAAA,CAAA,CAAA,MAAA,EA2CxB,MA3CwB,EAAA,MAAA,EA6C7B,gBA7C6B,CA6CZ,MA7CY,EA6CJ,CA7CI,EA6CD,CA7CC,EA6CE,CA7CF,EA6CK,CA7CL,EA6CQ,CA7CR,EA6CW,CA7CX,EA6Cc,CA7Cd,EA6CiB,CA7CjB,CAAA,GAAA,CAAA,GAAA,GA8CtB,gBA9CsB,CA8CL,MA9CK,EA8CG,CA9CH,EA8CM,CA9CN,EA8CS,CA9CT,EA8CY,CA9CZ,EA8Ce,CA9Cf,EA8CkB,CA9ClB,EA8CqB,CA9CrB,EA8CwB,CA9CxB,CAAA,CAAA,EAAA,OAAA,CAAA,EA+CtB,yBA/CsB,CA+CI,MA/CJ,CAAA,CAAA,EAAA,CAAA,MAgDvB,MAhDuB,GAAA,SAAA,EAAA,CAAA,KAAA,EAAA,MAgDW,MAhDX,EAAA,GAAA,IAAA,CAAA"}