@just-web/toolkits 1.0.0

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

@@ -0,0 +1,39 @@
+import { createThemeHook } from "../theme/create-theme-hook.mjs";
+import { useMemo } from "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 createThemeHook(themes, useMemo(() => typeof stores === "function" ? stores() : stores, []), options)(options?.defaultTheme);
+}
+
+//#endregion
+export { useThemeStores };
+//# sourceMappingURL=use-theme-stores.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-theme-stores.mjs","names":[],"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,QADiB,gBAAgD,QAL1C,cACf,OAAO,WAAW,aAAa,QAAQ,GAAG,QAEjD,EAAE,CACF,EACwF,QAAQ,CACjF,SAAS,aAAa"}

package/dist/react/theme/create-theme-hook.cjs

@@ -0,0 +1,105 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_theme_entry = require('../../theme/theme-entry.cjs');
+const require_compose_theme_stores = require('../../theme/compose-theme-stores.cjs');
+let react = require("react");
+
+//#region src/react/theme/create-theme-hook.ts
+/**
+* Creates a React hook for theme selection that reads from and writes to composed theme stores.
+*
+* The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR
+* (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.
+* Channels are cached per store configuration and default theme for efficient reuse.
+*
+* @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+* @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)
+* @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+* @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple
+*
+* @example
+* ```ts
+* const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })
+* const [theme, setTheme] = useTheme()
+* setTheme('dark')
+* ```
+*/
+function createThemeHook(themes, stores, options) {
+	const { defaultTheme } = options ?? {};
+	return function useTheme(overrideDefaultTheme) {
+		const channel = getOrCreateChannel(themes, stores, { defaultTheme: overrideDefaultTheme ?? defaultTheme });
+		return [(0, react.useSyncExternalStore)(channel.subscribe, channel.getSnapshot, channel.getServerSnapshot), (0, react.useCallback)(async (newTheme) => {
+			await channel.setTheme(newTheme);
+		}, [channel])];
+	};
+}
+/**
+* Creates a subscription channel bridging a composed theme store to React's useSyncExternalStore.
+* Manages listeners, initial async read from store, and delegates setTheme to store.write.
+*
+* @internal
+*/
+function createSharedChannel(themes, composedStore, defaultTheme) {
+	let lastTheme = defaultTheme;
+	const listeners = /* @__PURE__ */ new Set();
+	const notify = (theme) => {
+		lastTheme = theme;
+		for (const fn of listeners) fn(theme);
+	};
+	const handleStoreUpdate = (entry) => {
+		notify(entry?.theme ?? defaultTheme);
+	};
+	Promise.resolve(composedStore.read()).then((entry) => {
+		notify(entry?.theme ?? defaultTheme);
+	});
+	let unobserve = composedStore.subscribe(handleStoreUpdate);
+	let isSubscribedToStore = true;
+	const subscribe = (listener) => {
+		if (!isSubscribedToStore) {
+			unobserve = composedStore.subscribe(handleStoreUpdate);
+			isSubscribedToStore = true;
+		}
+		listeners.add(listener);
+		listener(lastTheme);
+		return () => {
+			listeners.delete(listener);
+			if (listeners.size === 0) {
+				unobserve();
+				isSubscribedToStore = false;
+			}
+		};
+	};
+	const getSnapshot = () => lastTheme;
+	const getServerSnapshot = () => defaultTheme;
+	return {
+		subscribe,
+		getSnapshot,
+		getServerSnapshot,
+		setTheme: (theme) => composedStore.write(require_theme_entry.themeEntry(themes, theme))
+	};
+}
+const channelsByStores = /* @__PURE__ */ new WeakMap();
+/**
+* Returns a cached shared channel for the given themes, stores, and defaultTheme.
+* Channels are keyed by stores (WeakMap) and defaultTheme to avoid duplicate subscriptions.
+*
+* @internal
+*/
+function getOrCreateChannel(themes, stores, options) {
+	const { defaultTheme } = options ?? {};
+	const storesKey = stores;
+	let byDefault = channelsByStores.get(storesKey);
+	if (!byDefault) {
+		byDefault = /* @__PURE__ */ new Map();
+		channelsByStores.set(storesKey, byDefault);
+	}
+	let channel = byDefault.get(defaultTheme);
+	if (!channel) {
+		channel = createSharedChannel(themes, require_compose_theme_stores.composeThemeStores(themes, stores, { defaultTheme }), defaultTheme);
+		byDefault.set(defaultTheme, channel);
+	}
+	return channel;
+}
+
+//#endregion
+exports.createThemeHook = createThemeHook;
+//# sourceMappingURL=create-theme-hook.cjs.map

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

@@ -0,0 +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"}

package/dist/react/theme/create-theme-hook.d.cts

@@ -0,0 +1,29 @@
+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/theme/create-theme-hook.d.ts
+
+/**
+ * Creates a React hook for theme selection that reads from and writes to composed theme stores.
+ *
+ * The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR
+ * (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.
+ * Channels are cached per store configuration and default theme for efficient reuse.
+ *
+ * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+ * @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)
+ * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+ * @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple
+ *
+ * @example
+ * ```ts
+ * const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })
+ * const [theme, setTheme] = useTheme()
+ * setTheme('dark')
+ * ```
+ */
+declare function createThemeHook<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: 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>], options?: ComposeThemeStoresOptions<Themes>): (overrideDefaultTheme?: keyof Themes | undefined) => [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { createThemeHook };
+//# sourceMappingURL=create-theme-hook.d.cts.map

package/dist/react/theme/create-theme-hook.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme-hook.d.cts","names":[],"sources":["../../../src/react/theme/create-theme-hook.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAgCA;;;;;;;;;;;;;;;;;AASW,iBATK,eASL,CAAA,eARK,QAQL,EAAA,UAPA,iBAOA,CAPkB,MAOlB,CAAA,GAAA,KAAA,EAAA,UANA,iBAMA,CANkB,MAMlB,CAAA,GAAA,KAAA,EAAA,UALA,iBAKA,CALkB,MAKlB,CAAA,GAAA,KAAA,EAAA,UAJA,iBAIA,CAJkB,MAIlB,CAAA,GAAA,KAAA,EAAA,UAHA,iBAGA,CAHkB,MAGlB,CAAA,GAAA,KAAA,EAAA,UAFA,iBAEA,CAFkB,MAElB,CAAA,GAAA,KAAA,EAAA,UADA,iBACA,CADkB,MAClB,CAAA,GAAA,KAAA,EAAA,UAAA,iBAAA,CAAkB,MAAlB,CAAA,GAAA,KAAA,CAAA,CAAA,MAAA,EAEF,MAFE,EAAA,MAAA,EAAA,SAAA,CAEF,MAAA,EAEC,sBAFD,CAEwB,MAFxB,EAEgC,CAFhC,CAAA,EAEwB,MAAA,GACtB,sBADsB,CACC,MADD,EACS,CADT,CAAA,EAAQ,MAAA,GAE9B,sBAF8B,CAEP,MAFO,EAEC,CAFD,CAAA,EAA/B,MAAA,GAGC,sBAHD,CAGwB,MAHxB,EAGgC,CAHhC,CAAA,EACwB,MAAA,GAGvB,sBAHuB,CAGA,MAHA,EAGQ,CAHR,CAAA,EAAQ,MAAA,GAI/B,sBAJ+B,CAIR,MAJQ,EAIA,CAJA,CAAA,EAA/B,MAAA,GAKA,sBALA,CAKuB,MALvB,EAK+B,CAL/B,CAAA,EACuB,MAAA,GAKvB,sBALuB,CAKA,MALA,EAKQ,CALR,CAAA,CAAQ,EAAA,OAAA,CAAA,EAO/B,yBAP+B,CAOL,MAPK,CAAA,CAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,MASZ,MATY,GAAA,SAAA,EAAA,GAAA,CAAA,MAU9B,MAV8B,GAAA,SAAA,EAAA,CAAA,KAAA,EAAA,MAUI,MAVJ,EAAA,GAAA,IAAA,CAAA"}

package/dist/react/theme/create-theme-hook.d.mts

@@ -0,0 +1,29 @@
+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/theme/create-theme-hook.d.ts
+
+/**
+ * Creates a React hook for theme selection that reads from and writes to composed theme stores.
+ *
+ * The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR
+ * (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.
+ * Channels are cached per store configuration and default theme for efficient reuse.
+ *
+ * @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+ * @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)
+ * @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+ * @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple
+ *
+ * @example
+ * ```ts
+ * const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })
+ * const [theme, setTheme] = useTheme()
+ * setTheme('dark')
+ * ```
+ */
+declare function createThemeHook<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: 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>], options?: ComposeThemeStoresOptions<Themes>): (overrideDefaultTheme?: keyof Themes | undefined) => [keyof Themes | undefined, (theme: keyof Themes) => void];
+//#endregion
+export { createThemeHook };
+//# sourceMappingURL=create-theme-hook.d.mts.map

package/dist/react/theme/create-theme-hook.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme-hook.d.mts","names":[],"sources":["../../../src/react/theme/create-theme-hook.ts"],"sourcesContent":[],"mappings":";;;;;;;;AAgCA;;;;;;;;;;;;;;;;;AASW,iBATK,eASL,CAAA,eARK,QAQL,EAAA,UAPA,iBAOA,CAPkB,MAOlB,CAAA,GAAA,KAAA,EAAA,UANA,iBAMA,CANkB,MAMlB,CAAA,GAAA,KAAA,EAAA,UALA,iBAKA,CALkB,MAKlB,CAAA,GAAA,KAAA,EAAA,UAJA,iBAIA,CAJkB,MAIlB,CAAA,GAAA,KAAA,EAAA,UAHA,iBAGA,CAHkB,MAGlB,CAAA,GAAA,KAAA,EAAA,UAFA,iBAEA,CAFkB,MAElB,CAAA,GAAA,KAAA,EAAA,UADA,iBACA,CADkB,MAClB,CAAA,GAAA,KAAA,EAAA,UAAA,iBAAA,CAAkB,MAAlB,CAAA,GAAA,KAAA,CAAA,CAAA,MAAA,EAEF,MAFE,EAAA,MAAA,EAAA,SAAA,CAEF,MAAA,EAEC,sBAFD,CAEwB,MAFxB,EAEgC,CAFhC,CAAA,EAEwB,MAAA,GACtB,sBADsB,CACC,MADD,EACS,CADT,CAAA,EAAQ,MAAA,GAE9B,sBAF8B,CAEP,MAFO,EAEC,CAFD,CAAA,EAA/B,MAAA,GAGC,sBAHD,CAGwB,MAHxB,EAGgC,CAHhC,CAAA,EACwB,MAAA,GAGvB,sBAHuB,CAGA,MAHA,EAGQ,CAHR,CAAA,EAAQ,MAAA,GAI/B,sBAJ+B,CAIR,MAJQ,EAIA,CAJA,CAAA,EAA/B,MAAA,GAKA,sBALA,CAKuB,MALvB,EAK+B,CAL/B,CAAA,EACuB,MAAA,GAKvB,sBALuB,CAKA,MALA,EAKQ,CALR,CAAA,CAAQ,EAAA,OAAA,CAAA,EAO/B,yBAP+B,CAOL,MAPK,CAAA,CAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,MASZ,MATY,GAAA,SAAA,EAAA,GAAA,CAAA,MAU9B,MAV8B,GAAA,SAAA,EAAA,CAAA,KAAA,EAAA,MAUI,MAVJ,EAAA,GAAA,IAAA,CAAA"}

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

@@ -0,0 +1,104 @@
+import { themeEntry } from "../../theme/theme-entry.mjs";
+import { composeThemeStores } from "../../theme/compose-theme-stores.mjs";
+import { useCallback, useSyncExternalStore } from "react";
+
+//#region src/react/theme/create-theme-hook.ts
+/**
+* Creates a React hook for theme selection that reads from and writes to composed theme stores.
+*
+* The returned hook subscribes to store changes via `useSyncExternalStore`, supports SSR
+* (uses `defaultTheme` for server snapshot), and returns a `[theme, setTheme]` tuple.
+* Channels are cached per store configuration and default theme for efficient reuse.
+*
+* @param themes - ThemeMap mapping theme keys to their values (e.g. CSS class names)
+* @param stores - Array of 1–8 theme stores or factory configs (see ComposeThemeStoreEntry)
+* @param options.defaultTheme - Fallback theme key when stores return empty; also used for SSR
+* @returns A `useTheme` hook that returns `[currentTheme, setTheme]` tuple
+*
+* @example
+* ```ts
+* const useTheme = createThemeHook(themes, [localStorageStore], { defaultTheme: 'light' })
+* const [theme, setTheme] = useTheme()
+* setTheme('dark')
+* ```
+*/
+function createThemeHook(themes, stores, options) {
+	const { defaultTheme } = options ?? {};
+	return function useTheme(overrideDefaultTheme) {
+		const channel = getOrCreateChannel(themes, stores, { defaultTheme: overrideDefaultTheme ?? defaultTheme });
+		return [useSyncExternalStore(channel.subscribe, channel.getSnapshot, channel.getServerSnapshot), useCallback(async (newTheme) => {
+			await channel.setTheme(newTheme);
+		}, [channel])];
+	};
+}
+/**
+* Creates a subscription channel bridging a composed theme store to React's useSyncExternalStore.
+* Manages listeners, initial async read from store, and delegates setTheme to store.write.
+*
+* @internal
+*/
+function createSharedChannel(themes, composedStore, defaultTheme) {
+	let lastTheme = defaultTheme;
+	const listeners = /* @__PURE__ */ new Set();
+	const notify = (theme) => {
+		lastTheme = theme;
+		for (const fn of listeners) fn(theme);
+	};
+	const handleStoreUpdate = (entry) => {
+		notify(entry?.theme ?? defaultTheme);
+	};
+	Promise.resolve(composedStore.read()).then((entry) => {
+		notify(entry?.theme ?? defaultTheme);
+	});
+	let unobserve = composedStore.subscribe(handleStoreUpdate);
+	let isSubscribedToStore = true;
+	const subscribe = (listener) => {
+		if (!isSubscribedToStore) {
+			unobserve = composedStore.subscribe(handleStoreUpdate);
+			isSubscribedToStore = true;
+		}
+		listeners.add(listener);
+		listener(lastTheme);
+		return () => {
+			listeners.delete(listener);
+			if (listeners.size === 0) {
+				unobserve();
+				isSubscribedToStore = false;
+			}
+		};
+	};
+	const getSnapshot = () => lastTheme;
+	const getServerSnapshot = () => defaultTheme;
+	return {
+		subscribe,
+		getSnapshot,
+		getServerSnapshot,
+		setTheme: (theme) => composedStore.write(themeEntry(themes, theme))
+	};
+}
+const channelsByStores = /* @__PURE__ */ new WeakMap();
+/**
+* Returns a cached shared channel for the given themes, stores, and defaultTheme.
+* Channels are keyed by stores (WeakMap) and defaultTheme to avoid duplicate subscriptions.
+*
+* @internal
+*/
+function getOrCreateChannel(themes, stores, options) {
+	const { defaultTheme } = options ?? {};
+	const storesKey = stores;
+	let byDefault = channelsByStores.get(storesKey);
+	if (!byDefault) {
+		byDefault = /* @__PURE__ */ new Map();
+		channelsByStores.set(storesKey, byDefault);
+	}
+	let channel = byDefault.get(defaultTheme);
+	if (!channel) {
+		channel = createSharedChannel(themes, composeThemeStores(themes, stores, { defaultTheme }), defaultTheme);
+		byDefault.set(defaultTheme, channel);
+	}
+	return channel;
+}
+
+//#endregion
+export { createThemeHook };
+//# sourceMappingURL=create-theme-hook.mjs.map

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

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

package/dist/react.cjs

@@ -0,0 +1,15 @@
+const require_use_attribute = require('./react/hooks/use-attribute.cjs');
+const require_use_prefers_color_scheme = require('./react/hooks/use-prefers-color-scheme.cjs');
+const require_use_theme_by_class_name = require('./react/hooks/use-theme-by-class-name.cjs');
+const require_use_theme_by_data_attribute = require('./react/hooks/use-theme-by-data-attribute.cjs');
+const require_use_theme_by_local_storage = require('./react/hooks/use-theme-by-local-storage.cjs');
+const require_create_theme_hook = require('./react/theme/create-theme-hook.cjs');
+const require_use_theme_stores = require('./react/hooks/use-theme-stores.cjs');
+
+exports.createThemeHook = require_create_theme_hook.createThemeHook;
+exports.useAttribute = require_use_attribute.useAttribute;
+exports.usePrefersColorScheme = require_use_prefers_color_scheme.usePrefersColorScheme;
+exports.useThemeByClassName = require_use_theme_by_class_name.useThemeByClassName;
+exports.useThemeByDataAttribute = require_use_theme_by_data_attribute.useThemeByDataAttribute;
+exports.useThemeByLocalStorage = require_use_theme_by_local_storage.useThemeByLocalStorage;
+exports.useThemeStores = require_use_theme_stores.useThemeStores;

package/dist/react.d.cts

@@ -0,0 +1,8 @@
+import { useAttribute } from "./react/hooks/use-attribute.cjs";
+import { usePrefersColorScheme } from "./react/hooks/use-prefers-color-scheme.cjs";
+import { useThemeByClassName } from "./react/hooks/use-theme-by-class-name.cjs";
+import { useThemeByDataAttribute } from "./react/hooks/use-theme-by-data-attribute.cjs";
+import { useThemeByLocalStorage } from "./react/hooks/use-theme-by-local-storage.cjs";
+import { useThemeStores } from "./react/hooks/use-theme-stores.cjs";
+import { createThemeHook } from "./react/theme/create-theme-hook.cjs";
+export { createThemeHook, useAttribute, usePrefersColorScheme, useThemeByClassName, useThemeByDataAttribute, useThemeByLocalStorage, useThemeStores };

package/dist/react.d.mts

@@ -0,0 +1,8 @@
+import { useAttribute } from "./react/hooks/use-attribute.mjs";
+import { usePrefersColorScheme } from "./react/hooks/use-prefers-color-scheme.mjs";
+import { useThemeByClassName } from "./react/hooks/use-theme-by-class-name.mjs";
+import { useThemeByDataAttribute } from "./react/hooks/use-theme-by-data-attribute.mjs";
+import { useThemeByLocalStorage } from "./react/hooks/use-theme-by-local-storage.mjs";
+import { useThemeStores } from "./react/hooks/use-theme-stores.mjs";
+import { createThemeHook } from "./react/theme/create-theme-hook.mjs";
+export { createThemeHook, useAttribute, usePrefersColorScheme, useThemeByClassName, useThemeByDataAttribute, useThemeByLocalStorage, useThemeStores };

package/dist/react.mjs

@@ -0,0 +1,9 @@
+import { useAttribute } from "./react/hooks/use-attribute.mjs";
+import { usePrefersColorScheme } from "./react/hooks/use-prefers-color-scheme.mjs";
+import { useThemeByClassName } from "./react/hooks/use-theme-by-class-name.mjs";
+import { useThemeByDataAttribute } from "./react/hooks/use-theme-by-data-attribute.mjs";
+import { useThemeByLocalStorage } from "./react/hooks/use-theme-by-local-storage.mjs";
+import { createThemeHook } from "./react/theme/create-theme-hook.mjs";
+import { useThemeStores } from "./react/hooks/use-theme-stores.mjs";
+
+export { createThemeHook, useAttribute, usePrefersColorScheme, useThemeByClassName, useThemeByDataAttribute, useThemeByLocalStorage, useThemeStores };

package/dist/style/css-properties.d.cts

@@ -0,0 +1,20 @@
+import { Properties } from "csstype";
+
+//#region src/style/css-properties.d.ts
+declare module 'csstype' {
+  interface Properties<TLength = (string & {}) | 0, TTime = string & {}> extends CustomProperties {}
+}
+/** Custom CSS properties (variables) with `--` prefix. */
+interface CustomProperties {
+  [k: `--${string}`]: string;
+}
+/**
+ * Widens CSS properties to support custom properties.
+ * Allows for string or number values for standard properties,
+ * and string values for custom properties with '--' prefix.
+ * Defined as a union so plain Properties (e.g. from React) are assignable.
+ */
+interface CSSProperties<TLength = string | number, TTime = string & {}> extends Properties<TLength, TTime>, CustomProperties {}
+//#endregion
+export { CSSProperties };
+//# sourceMappingURL=css-properties.d.cts.map

package/dist/style/css-properties.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-properties.d.cts","names":[],"sources":["../../src/style/css-properties.ts"],"sourcesContent":[],"mappings":";;;;iFAGgF,kBAHvC;;;UAO/B,gBAAA,CAJsF;EAAA,CAAA,CAAA,EAAA,KAAA,MAAA,EAAA,CAAA,EAAA,MAAA;AAAA;AAchG;;;;;;UAAiB,sEACR,WAAW,SAAS,QAC3B"}

package/dist/style/css-properties.d.mts

@@ -0,0 +1,20 @@
+import { Properties } from "csstype";
+
+//#region src/style/css-properties.d.ts
+declare module 'csstype' {
+  interface Properties<TLength = (string & {}) | 0, TTime = string & {}> extends CustomProperties {}
+}
+/** Custom CSS properties (variables) with `--` prefix. */
+interface CustomProperties {
+  [k: `--${string}`]: string;
+}
+/**
+ * Widens CSS properties to support custom properties.
+ * Allows for string or number values for standard properties,
+ * and string values for custom properties with '--' prefix.
+ * Defined as a union so plain Properties (e.g. from React) are assignable.
+ */
+interface CSSProperties<TLength = string | number, TTime = string & {}> extends Properties<TLength, TTime>, CustomProperties {}
+//#endregion
+export { CSSProperties };
+//# sourceMappingURL=css-properties.d.mts.map

package/dist/style/css-properties.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-properties.d.mts","names":[],"sources":["../../src/style/css-properties.ts"],"sourcesContent":[],"mappings":";;;;iFAGgF,kBAHvC;;;UAO/B,gBAAA,CAJsF;EAAA,CAAA,CAAA,EAAA,KAAA,MAAA,EAAA,CAAA,EAAA,MAAA;AAAA;AAchG;;;;;;UAAiB,sEACR,WAAW,SAAS,QAC3B"}

package/dist/style/define-css-properties.cjs

@@ -0,0 +1,25 @@
+
+//#region src/style/define-css-properties.ts
+/**
+* Defines CSS properties including custom properties.
+* This function is used to properly type CSS properties when defining styles,
+* especially when using CSS custom properties (variables).
+*
+* @param style - CSS properties object that can include both standard and custom properties
+* @returns The same style object with proper typing
+*
+* @example
+* ```ts
+* defineCSSProperties({
+*   color: 'red',
+*   '--custom-color': '#ff0000'
+* })
+* ```
+*/
+function defineCSSProperties(style) {
+	return style;
+}
+
+//#endregion
+exports.defineCSSProperties = defineCSSProperties;
+//# sourceMappingURL=define-css-properties.cjs.map

package/dist/style/define-css-properties.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-css-properties.cjs","names":[],"sources":["../../src/style/define-css-properties.ts"],"sourcesContent":["import type { CSSProperties } from './css-properties.ts'\n\n/**\n * Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n *\n * @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n *\n * @example\n * ```ts\n * defineCSSProperties({\n *   color: 'red',\n *   '--custom-color': '#ff0000'\n * })\n * ```\n */\nexport function defineCSSProperties<TLength = 0 | (string & {}), TTime = string & {}>(\n\tstyle: CSSProperties<TLength, TTime>\n) {\n\treturn style as CSSProperties\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,SAAgB,oBACf,OACC;AACD,QAAO"}

package/dist/style/define-css-properties.d.cts

@@ -0,0 +1,24 @@
+import { CSSProperties } from "./css-properties.cjs";
+
+//#region src/style/define-css-properties.d.ts
+
+/**
+ * Defines CSS properties including custom properties.
+ * This function is used to properly type CSS properties when defining styles,
+ * especially when using CSS custom properties (variables).
+ *
+ * @param style - CSS properties object that can include both standard and custom properties
+ * @returns The same style object with proper typing
+ *
+ * @example
+ * ```ts
+ * defineCSSProperties({
+ *   color: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * ```
+ */
+declare function defineCSSProperties<TLength = 0 | (string & {}), TTime = string & {}>(style: CSSProperties<TLength, TTime>): CSSProperties;
+//#endregion
+export { defineCSSProperties };
+//# sourceMappingURL=define-css-properties.d.cts.map

package/dist/style/define-css-properties.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-css-properties.d.cts","names":[],"sources":["../../src/style/define-css-properties.ts"],"sourcesContent":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;iBAAgB,6EACR,cAAc,SAAS,SAEd"}

package/dist/style/define-css-properties.d.mts

@@ -0,0 +1,24 @@
+import { CSSProperties } from "./css-properties.mjs";
+
+//#region src/style/define-css-properties.d.ts
+
+/**
+ * Defines CSS properties including custom properties.
+ * This function is used to properly type CSS properties when defining styles,
+ * especially when using CSS custom properties (variables).
+ *
+ * @param style - CSS properties object that can include both standard and custom properties
+ * @returns The same style object with proper typing
+ *
+ * @example
+ * ```ts
+ * defineCSSProperties({
+ *   color: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * ```
+ */
+declare function defineCSSProperties<TLength = 0 | (string & {}), TTime = string & {}>(style: CSSProperties<TLength, TTime>): CSSProperties;
+//#endregion
+export { defineCSSProperties };
+//# sourceMappingURL=define-css-properties.d.mts.map

package/dist/style/define-css-properties.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-css-properties.d.mts","names":[],"sources":["../../src/style/define-css-properties.ts"],"sourcesContent":[],"mappings":";;;;;;AAkBA;;;;;;;;;;;;;;iBAAgB,6EACR,cAAc,SAAS,SAEd"}

package/dist/style/define-css-properties.mjs

@@ -0,0 +1,24 @@
+//#region src/style/define-css-properties.ts
+/**
+* Defines CSS properties including custom properties.
+* This function is used to properly type CSS properties when defining styles,
+* especially when using CSS custom properties (variables).
+*
+* @param style - CSS properties object that can include both standard and custom properties
+* @returns The same style object with proper typing
+*
+* @example
+* ```ts
+* defineCSSProperties({
+*   color: 'red',
+*   '--custom-color': '#ff0000'
+* })
+* ```
+*/
+function defineCSSProperties(style) {
+	return style;
+}
+
+//#endregion
+export { defineCSSProperties };
+//# sourceMappingURL=define-css-properties.mjs.map

package/dist/style/define-css-properties.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-css-properties.mjs","names":[],"sources":["../../src/style/define-css-properties.ts"],"sourcesContent":["import type { CSSProperties } from './css-properties.ts'\n\n/**\n * Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n *\n * @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n *\n * @example\n * ```ts\n * defineCSSProperties({\n *   color: 'red',\n *   '--custom-color': '#ff0000'\n * })\n * ```\n */\nexport function defineCSSProperties<TLength = 0 | (string & {}), TTime = string & {}>(\n\tstyle: CSSProperties<TLength, TTime>\n) {\n\treturn style as CSSProperties\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAkBA,SAAgB,oBACf,OACC;AACD,QAAO"}

package/dist/style/get-css-variable-value.cjs

@@ -0,0 +1,11 @@
+
+//#region src/style/get-css-variable-value.ts
+function getCSSVariableValue(element, ...props) {
+	if (typeof element === "string") return getCSSVariableValue(globalThis.document.body, element, ...props);
+	const style = globalThis.getComputedStyle(element);
+	return props.map((v) => style.getPropertyValue(v));
+}
+
+//#endregion
+exports.getCSSVariableValue = getCSSVariableValue;
+//# sourceMappingURL=get-css-variable-value.cjs.map

package/dist/style/get-css-variable-value.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-css-variable-value.cjs","names":[],"sources":["../../src/style/get-css-variable-value.ts"],"sourcesContent":["import type { CreateTuple } from 'type-plus'\n\n/**\n * Retrieves CSS custom property values from the specified element.\n *\n * @param element - The HTML element to get property values from\n * @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n */\nexport function getCSSVariableValue<Props extends Array<`--${string}`>>(\n\telement: HTMLElement,\n\t...props: Props\n): CreateTuple<Props['length'], string>\n/**\n * Retrieves CSS custom property values from `document.body`.\n *\n * @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n */\nexport function getCSSVariableValue<Props extends Array<`--${string}`>>(\n\t...props: Props\n): CreateTuple<Props['length'], string>\nexport function getCSSVariableValue<Props extends Array<`--${string}`>>(\n\telement: unknown,\n\t...props: Props\n) {\n\tif (typeof element === 'string') {\n\t\treturn getCSSVariableValue(globalThis.document.body, element as `--${string}`, ...props)\n\t}\n\tconst style = globalThis.getComputedStyle(element as HTMLElement)\n\treturn props.map((v) => style.getPropertyValue(v)) as any\n}\n"],"mappings":";;AAsBA,SAAgB,oBACf,SACA,GAAG,OACF;AACD,KAAI,OAAO,YAAY,SACtB,QAAO,oBAAoB,WAAW,SAAS,MAAM,SAA0B,GAAG,MAAM;CAEzF,MAAM,QAAQ,WAAW,iBAAiB,QAAuB;AACjE,QAAO,MAAM,KAAK,MAAM,MAAM,iBAAiB,EAAE,CAAC"}