@just-web/toolkits 1.0.0 → 2.1.0

package/dist/theme.cjs

@@ -1,8 +1,28 @@
 const require_theme_entry = require('./theme/theme-entry.cjs');
+const require_parse_class_name = require('./theme/class-name/parse-class-name.cjs');
+const require_read_class_name = require('./theme/class-name/read-class-name.cjs');
+const require_stringify_class_name = require('./theme/class-name/stringify-class-name.cjs');
+const require_subscribe_class_name = require('./theme/class-name/subscribe-class-name.cjs');
+const require_write_class_name = require('./theme/class-name/write-class-name.cjs');
 const require_class_name_theme_store = require('./theme/theme-store/class-name-theme-store/class-name-theme-store.cjs');
+const require_parse_data_attribute = require('./theme/data-attribute/parse-data-attribute.cjs');
+const require_read_data_attribute = require('./theme/data-attribute/read-data-attribute.cjs');
+const require_stringify_data_attribute = require('./theme/data-attribute/stringify-data-attribute.cjs');
+const require_subscribe_data_attribute = require('./theme/data-attribute/subscribe-data-attribute.cjs');
+const require_write_data_attribute = require('./theme/data-attribute/write-data-attribute.cjs');
 const require_data_attribute_theme_store = require('./theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.cjs');
+const require_read_web_storage = require('./theme/web-storage/read-web-storage.cjs');
+const require_read_local_storage = require('./theme/local-storage/read-local-storage.cjs');
+const require_write_web_storage = require('./theme/web-storage/write-web-storage.cjs');
+const require_write_local_storage = require('./theme/local-storage/write-local-storage.cjs');
 const require_local_storage_theme_store = require('./theme/theme-store/local-storage-theme-store/local-storage-theme-store.cjs');
 const require_compose_theme_stores = require('./theme/compose-theme-stores.cjs');
+const require_read_cookie_theme = require('./theme/cookie/read-cookie-theme.cjs');
+const require_write_cookie_theme = require('./theme/cookie/write-cookie-theme.cjs');
+const require_read_prefers_color_scheme_theme = require('./theme/prefers-color-scheme-theme/read-prefers-color-scheme-theme.cjs');
+const require_subscribe_prefers_color_scheme_theme = require('./theme/prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.cjs');
+const require_read_session_storage = require('./theme/session-storage/read-session-storage.cjs');
+const require_write_session_storage = require('./theme/session-storage/write-session-storage.cjs');
 const require_cookie_theme_store = require('./theme/theme-store/cookie-theme-store/cookie-theme-store.cjs');
 const require_in_memory_theme_store = require('./theme/theme-store/in-memory-theme-store/in-memory-theme-store.cjs');
 const require_prefers_color_scheme_theme_store = require('./theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.cjs');
@@ -15,6 +35,26 @@ exports.dataAttributeThemeStore = require_data_attribute_theme_store.dataAttribu
 exports.getThemeFromCookie = require_cookie_theme_store.getThemeFromCookie;
 exports.inMemoryThemeStore = require_in_memory_theme_store.inMemoryThemeStore;
 exports.localStorageThemeStore = require_local_storage_theme_store.localStorageThemeStore;
+exports.parseClassName = require_parse_class_name.parseClassName;
+exports.parseDataAttribute = require_parse_data_attribute.parseDataAttribute;
 exports.prefersColorSchemeThemeStore = require_prefers_color_scheme_theme_store.prefersColorSchemeThemeStore;
+exports.readClassName = require_read_class_name.readClassName;
+exports.readCookieTheme = require_read_cookie_theme.readCookieTheme;
+exports.readDataAttribute = require_read_data_attribute.readDataAttribute;
+exports.readLocalStorage = require_read_local_storage.readLocalStorage;
+exports.readPrefersColorSchemeTheme = require_read_prefers_color_scheme_theme.readPrefersColorSchemeTheme;
+exports.readSessionStorage = require_read_session_storage.readSessionStorage;
+exports.readWebStorage = require_read_web_storage.readWebStorage;
 exports.sessionStorageThemeStore = require_session_storage_theme_store.sessionStorageThemeStore;
-exports.themeEntry = require_theme_entry.themeEntry;
+exports.stringifyClassName = require_stringify_class_name.stringifyClassName;
+exports.stringifyDataAttribute = require_stringify_data_attribute.stringifyDataAttribute;
+exports.subscribeClassName = require_subscribe_class_name.subscribeClassName;
+exports.subscribeDataAttribute = require_subscribe_data_attribute.subscribeDataAttribute;
+exports.subscribePrefersColorSchemeTheme = require_subscribe_prefers_color_scheme_theme.subscribePrefersColorSchemeTheme;
+exports.themeEntry = require_theme_entry.themeEntry;
+exports.writeClassName = require_write_class_name.writeClassName;
+exports.writeCookieTheme = require_write_cookie_theme.writeCookieTheme;
+exports.writeDataAttribute = require_write_data_attribute.writeDataAttribute;
+exports.writeLocalStorage = require_write_local_storage.writeLocalStorage;
+exports.writeSessionStorage = require_write_session_storage.writeSessionStorage;
+exports.writeWebStorage = require_write_web_storage.writeWebStorage;

package/dist/theme.d.cts

@@ -1,9 +1,27 @@
-import { ThemeMap } from "./theme/theme-map.types.cjs";
-import { ThemeEntry } from "./theme/theme-entry.types.cjs";
+import { ThemeMap, ThemeMapValue } from "./theme/theme-map.types.cjs";
+import { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } from "./theme/theme-entry.types.cjs";
 import { AsyncThemeStore } from "./theme/theme-store/async-theme-store.types.cjs";
 import { ThemeStore } from "./theme/theme-store/theme-store.types.cjs";
 import { ThemeStoreFactory } from "./theme/theme-store/theme-store-factory.types.cjs";
 import { ComposeThemeStoreEntry, ComposeThemeStoresOptions, composeThemeStores } from "./theme/compose-theme-stores.cjs";
+import { parseClassName } from "./theme/class-name/parse-class-name.cjs";
+import { readClassName } from "./theme/class-name/read-class-name.cjs";
+import { stringifyClassName } from "./theme/class-name/stringify-class-name.cjs";
+import { subscribeClassName } from "./theme/class-name/subscribe-class-name.cjs";
+import { writeClassName } from "./theme/class-name/write-class-name.cjs";
+import { ReadCookieThemeOptions, readCookieTheme } from "./theme/cookie/read-cookie-theme.cjs";
+import { WriteCookieThemeOptions, writeCookieTheme } from "./theme/cookie/write-cookie-theme.cjs";
+import { parseDataAttribute } from "./theme/data-attribute/parse-data-attribute.cjs";
+import { readDataAttribute } from "./theme/data-attribute/read-data-attribute.cjs";
+import { stringifyDataAttribute } from "./theme/data-attribute/stringify-data-attribute.cjs";
+import { subscribeDataAttribute } from "./theme/data-attribute/subscribe-data-attribute.cjs";
+import { writeDataAttribute } from "./theme/data-attribute/write-data-attribute.cjs";
+import { readLocalStorage } from "./theme/local-storage/read-local-storage.cjs";
+import { writeLocalStorage } from "./theme/local-storage/write-local-storage.cjs";
+import { ReadPrefersColorSchemeThemeOptions, readPrefersColorSchemeTheme } from "./theme/prefers-color-scheme-theme/read-prefers-color-scheme-theme.cjs";
+import { subscribePrefersColorSchemeTheme } from "./theme/prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.cjs";
+import { readSessionStorage } from "./theme/session-storage/read-session-storage.cjs";
+import { writeSessionStorage } from "./theme/session-storage/write-session-storage.cjs";
 import { themeEntry } from "./theme/theme-entry.cjs";
 import { classNameThemeStore } from "./theme/theme-store/class-name-theme-store/class-name-theme-store.cjs";
 import { CookieThemeStoreOptions, cookieThemeStore, getThemeFromCookie } from "./theme/theme-store/cookie-theme-store/cookie-theme-store.cjs";
@@ -12,4 +30,6 @@ import { inMemoryThemeStore } from "./theme/theme-store/in-memory-theme-store/in
 import { localStorageThemeStore } from "./theme/theme-store/local-storage-theme-store/local-storage-theme-store.cjs";
 import { prefersColorSchemeThemeStore } from "./theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.cjs";
 import { sessionStorageThemeStore } from "./theme/theme-store/session-storage-theme-store/session-storage-theme-store.cjs";
-export { AsyncThemeStore, ComposeThemeStoreEntry, ComposeThemeStoresOptions, CookieThemeStoreOptions, ThemeEntry, ThemeMap, ThemeStore, ThemeStoreFactory, classNameThemeStore, composeThemeStores, cookieThemeStore, dataAttributeThemeStore, getThemeFromCookie, inMemoryThemeStore, localStorageThemeStore, prefersColorSchemeThemeStore, sessionStorageThemeStore, themeEntry };
+import { readWebStorage } from "./theme/web-storage/read-web-storage.cjs";
+import { writeWebStorage } from "./theme/web-storage/write-web-storage.cjs";
+export { AsyncThemeStore, ComposeThemeStoreEntry, ComposeThemeStoresOptions, CookieThemeStoreOptions, ParseStoredTheme, ReadCookieThemeOptions, ReadPrefersColorSchemeThemeOptions, StringifyStoredTheme, ThemeEntry, ThemeMap, ThemeMapValue, ThemeStore, ThemeStoreFactory, WriteCookieThemeOptions, classNameThemeStore, composeThemeStores, cookieThemeStore, dataAttributeThemeStore, getThemeFromCookie, inMemoryThemeStore, localStorageThemeStore, parseClassName, parseDataAttribute, prefersColorSchemeThemeStore, readClassName, readCookieTheme, readDataAttribute, readLocalStorage, readPrefersColorSchemeTheme, readSessionStorage, readWebStorage, sessionStorageThemeStore, stringifyClassName, stringifyDataAttribute, subscribeClassName, subscribeDataAttribute, subscribePrefersColorSchemeTheme, themeEntry, writeClassName, writeCookieTheme, writeDataAttribute, writeLocalStorage, writeSessionStorage, writeWebStorage };

package/dist/theme.d.mts

@@ -1,9 +1,27 @@
-import { ThemeMap } from "./theme/theme-map.types.mjs";
-import { ThemeEntry } from "./theme/theme-entry.types.mjs";
+import { ThemeMap, ThemeMapValue } from "./theme/theme-map.types.mjs";
+import { ParseStoredTheme, StringifyStoredTheme, ThemeEntry } from "./theme/theme-entry.types.mjs";
 import { AsyncThemeStore } from "./theme/theme-store/async-theme-store.types.mjs";
 import { ThemeStore } from "./theme/theme-store/theme-store.types.mjs";
 import { ThemeStoreFactory } from "./theme/theme-store/theme-store-factory.types.mjs";
 import { ComposeThemeStoreEntry, ComposeThemeStoresOptions, composeThemeStores } from "./theme/compose-theme-stores.mjs";
+import { parseClassName } from "./theme/class-name/parse-class-name.mjs";
+import { readClassName } from "./theme/class-name/read-class-name.mjs";
+import { stringifyClassName } from "./theme/class-name/stringify-class-name.mjs";
+import { subscribeClassName } from "./theme/class-name/subscribe-class-name.mjs";
+import { writeClassName } from "./theme/class-name/write-class-name.mjs";
+import { ReadCookieThemeOptions, readCookieTheme } from "./theme/cookie/read-cookie-theme.mjs";
+import { WriteCookieThemeOptions, writeCookieTheme } from "./theme/cookie/write-cookie-theme.mjs";
+import { parseDataAttribute } from "./theme/data-attribute/parse-data-attribute.mjs";
+import { readDataAttribute } from "./theme/data-attribute/read-data-attribute.mjs";
+import { stringifyDataAttribute } from "./theme/data-attribute/stringify-data-attribute.mjs";
+import { subscribeDataAttribute } from "./theme/data-attribute/subscribe-data-attribute.mjs";
+import { writeDataAttribute } from "./theme/data-attribute/write-data-attribute.mjs";
+import { readLocalStorage } from "./theme/local-storage/read-local-storage.mjs";
+import { writeLocalStorage } from "./theme/local-storage/write-local-storage.mjs";
+import { ReadPrefersColorSchemeThemeOptions, readPrefersColorSchemeTheme } from "./theme/prefers-color-scheme-theme/read-prefers-color-scheme-theme.mjs";
+import { subscribePrefersColorSchemeTheme } from "./theme/prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.mjs";
+import { readSessionStorage } from "./theme/session-storage/read-session-storage.mjs";
+import { writeSessionStorage } from "./theme/session-storage/write-session-storage.mjs";
 import { themeEntry } from "./theme/theme-entry.mjs";
 import { classNameThemeStore } from "./theme/theme-store/class-name-theme-store/class-name-theme-store.mjs";
 import { CookieThemeStoreOptions, cookieThemeStore, getThemeFromCookie } from "./theme/theme-store/cookie-theme-store/cookie-theme-store.mjs";
@@ -12,4 +30,6 @@ import { inMemoryThemeStore } from "./theme/theme-store/in-memory-theme-store/in
 import { localStorageThemeStore } from "./theme/theme-store/local-storage-theme-store/local-storage-theme-store.mjs";
 import { prefersColorSchemeThemeStore } from "./theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.mjs";
 import { sessionStorageThemeStore } from "./theme/theme-store/session-storage-theme-store/session-storage-theme-store.mjs";
-export { AsyncThemeStore, ComposeThemeStoreEntry, ComposeThemeStoresOptions, CookieThemeStoreOptions, ThemeEntry, ThemeMap, ThemeStore, ThemeStoreFactory, classNameThemeStore, composeThemeStores, cookieThemeStore, dataAttributeThemeStore, getThemeFromCookie, inMemoryThemeStore, localStorageThemeStore, prefersColorSchemeThemeStore, sessionStorageThemeStore, themeEntry };
+import { readWebStorage } from "./theme/web-storage/read-web-storage.mjs";
+import { writeWebStorage } from "./theme/web-storage/write-web-storage.mjs";
+export { AsyncThemeStore, ComposeThemeStoreEntry, ComposeThemeStoresOptions, CookieThemeStoreOptions, ParseStoredTheme, ReadCookieThemeOptions, ReadPrefersColorSchemeThemeOptions, StringifyStoredTheme, ThemeEntry, ThemeMap, ThemeMapValue, ThemeStore, ThemeStoreFactory, WriteCookieThemeOptions, classNameThemeStore, composeThemeStores, cookieThemeStore, dataAttributeThemeStore, getThemeFromCookie, inMemoryThemeStore, localStorageThemeStore, parseClassName, parseDataAttribute, prefersColorSchemeThemeStore, readClassName, readCookieTheme, readDataAttribute, readLocalStorage, readPrefersColorSchemeTheme, readSessionStorage, readWebStorage, sessionStorageThemeStore, stringifyClassName, stringifyDataAttribute, subscribeClassName, subscribeDataAttribute, subscribePrefersColorSchemeTheme, themeEntry, writeClassName, writeCookieTheme, writeDataAttribute, writeLocalStorage, writeSessionStorage, writeWebStorage };

package/dist/theme.mjs

@@ -1,11 +1,31 @@
 import { themeEntry } from "./theme/theme-entry.mjs";
+import { parseClassName } from "./theme/class-name/parse-class-name.mjs";
+import { readClassName } from "./theme/class-name/read-class-name.mjs";
+import { stringifyClassName } from "./theme/class-name/stringify-class-name.mjs";
+import { subscribeClassName } from "./theme/class-name/subscribe-class-name.mjs";
+import { writeClassName } from "./theme/class-name/write-class-name.mjs";
 import { classNameThemeStore } from "./theme/theme-store/class-name-theme-store/class-name-theme-store.mjs";
+import { parseDataAttribute } from "./theme/data-attribute/parse-data-attribute.mjs";
+import { readDataAttribute } from "./theme/data-attribute/read-data-attribute.mjs";
+import { stringifyDataAttribute } from "./theme/data-attribute/stringify-data-attribute.mjs";
+import { subscribeDataAttribute } from "./theme/data-attribute/subscribe-data-attribute.mjs";
+import { writeDataAttribute } from "./theme/data-attribute/write-data-attribute.mjs";
 import { dataAttributeThemeStore } from "./theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.mjs";
+import { readWebStorage } from "./theme/web-storage/read-web-storage.mjs";
+import { readLocalStorage } from "./theme/local-storage/read-local-storage.mjs";
+import { writeWebStorage } from "./theme/web-storage/write-web-storage.mjs";
+import { writeLocalStorage } from "./theme/local-storage/write-local-storage.mjs";
 import { localStorageThemeStore } from "./theme/theme-store/local-storage-theme-store/local-storage-theme-store.mjs";
 import { composeThemeStores } from "./theme/compose-theme-stores.mjs";
+import { readCookieTheme } from "./theme/cookie/read-cookie-theme.mjs";
+import { writeCookieTheme } from "./theme/cookie/write-cookie-theme.mjs";
+import { readPrefersColorSchemeTheme } from "./theme/prefers-color-scheme-theme/read-prefers-color-scheme-theme.mjs";
+import { subscribePrefersColorSchemeTheme } from "./theme/prefers-color-scheme-theme/subscribe-prefers-color-scheme-theme.mjs";
+import { readSessionStorage } from "./theme/session-storage/read-session-storage.mjs";
+import { writeSessionStorage } from "./theme/session-storage/write-session-storage.mjs";
 import { cookieThemeStore, getThemeFromCookie } from "./theme/theme-store/cookie-theme-store/cookie-theme-store.mjs";
 import { inMemoryThemeStore } from "./theme/theme-store/in-memory-theme-store/in-memory-theme-store.mjs";
 import { prefersColorSchemeThemeStore } from "./theme/theme-store/prefers-color-scheme-theme-store/prefers-color-scheme-theme-store.mjs";
 import { sessionStorageThemeStore } from "./theme/theme-store/session-storage-theme-store/session-storage-theme-store.mjs";
 
-export { classNameThemeStore, composeThemeStores, cookieThemeStore, dataAttributeThemeStore, getThemeFromCookie, inMemoryThemeStore, localStorageThemeStore, prefersColorSchemeThemeStore, sessionStorageThemeStore, themeEntry };
+export { classNameThemeStore, composeThemeStores, cookieThemeStore, dataAttributeThemeStore, getThemeFromCookie, inMemoryThemeStore, localStorageThemeStore, parseClassName, parseDataAttribute, prefersColorSchemeThemeStore, readClassName, readCookieTheme, readDataAttribute, readLocalStorage, readPrefersColorSchemeTheme, readSessionStorage, readWebStorage, sessionStorageThemeStore, stringifyClassName, stringifyDataAttribute, subscribeClassName, subscribeDataAttribute, subscribePrefersColorSchemeTheme, themeEntry, writeClassName, writeCookieTheme, writeDataAttribute, writeLocalStorage, writeSessionStorage, writeWebStorage };

package/dist/utils/append-id.cjs

@@ -3,9 +3,9 @@
 /**
 * Appends a suffix to an ID if the ID is defined.
 *
-* @param id - The ID to append the suffix to.
+* @param id - The ID to append the suffix to (accepts null e.g. from getAttribute).
 * @param suffix - The suffix to append to the ID.
-* @returns The ID with the suffix appended, or undefined if the ID is undefined.
+* @returns The ID with the suffix appended, or undefined if the ID is null/undefined.
 */
 function appendId(id, suffix) {
 	return id ? `${id}-${suffix}` : void 0;

package/dist/utils/append-id.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"append-id.cjs","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":["/**\n * Appends a suffix to an ID if the ID is defined.\n *\n * @param id - The ID to append the suffix to.\n * @param suffix - The suffix to append to the ID.\n * @returns The ID with the suffix appended, or undefined if the ID is undefined.\n */\nexport function appendId(id: string | undefined, suffix: string): string | undefined {\n\treturn id ? `${id}-${suffix}` : undefined\n}\n"],"mappings":";;;;;;;;;AAOA,SAAgB,SAAS,IAAwB,QAAoC;AACpF,QAAO,KAAK,GAAG,GAAG,GAAG,WAAW"}
+{"version":3,"file":"append-id.cjs","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":["/**\n * Appends a suffix to an ID if the ID is defined.\n *\n * @param id - The ID to append the suffix to (accepts null e.g. from getAttribute).\n * @param suffix - The suffix to append to the ID.\n * @returns The ID with the suffix appended, or undefined if the ID is null/undefined.\n */\nexport function appendId(id: string | null | undefined, suffix: string): string | undefined {\n\treturn id ? `${id}-${suffix}` : undefined\n}\n"],"mappings":";;;;;;;;;AAOA,SAAgB,SAAS,IAA+B,QAAoC;AAC3F,QAAO,KAAK,GAAG,GAAG,GAAG,WAAW"}

package/dist/utils/append-id.d.cts

@@ -2,11 +2,11 @@
 /**
  * Appends a suffix to an ID if the ID is defined.
  *
- * @param id - The ID to append the suffix to.
+ * @param id - The ID to append the suffix to (accepts null e.g. from getAttribute).
  * @param suffix - The suffix to append to the ID.
- * @returns The ID with the suffix appended, or undefined if the ID is undefined.
+ * @returns The ID with the suffix appended, or undefined if the ID is null/undefined.
  */
-declare function appendId(id: string | undefined, suffix: string): string | undefined;
+declare function appendId(id: string | null | undefined, suffix: string): string | undefined;
 //#endregion
 export { appendId };
 //# sourceMappingURL=append-id.d.cts.map

package/dist/utils/append-id.d.mts

@@ -2,11 +2,11 @@
 /**
  * Appends a suffix to an ID if the ID is defined.
  *
- * @param id - The ID to append the suffix to.
+ * @param id - The ID to append the suffix to (accepts null e.g. from getAttribute).
  * @param suffix - The suffix to append to the ID.
- * @returns The ID with the suffix appended, or undefined if the ID is undefined.
+ * @returns The ID with the suffix appended, or undefined if the ID is null/undefined.
  */
-declare function appendId(id: string | undefined, suffix: string): string | undefined;
+declare function appendId(id: string | null | undefined, suffix: string): string | undefined;
 //#endregion
 export { appendId };
 //# sourceMappingURL=append-id.d.mts.map

package/dist/utils/append-id.mjs

@@ -2,9 +2,9 @@
 /**
 * Appends a suffix to an ID if the ID is defined.
 *
-* @param id - The ID to append the suffix to.
+* @param id - The ID to append the suffix to (accepts null e.g. from getAttribute).
 * @param suffix - The suffix to append to the ID.
-* @returns The ID with the suffix appended, or undefined if the ID is undefined.
+* @returns The ID with the suffix appended, or undefined if the ID is null/undefined.
 */
 function appendId(id, suffix) {
 	return id ? `${id}-${suffix}` : void 0;

package/dist/utils/append-id.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"append-id.mjs","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":["/**\n * Appends a suffix to an ID if the ID is defined.\n *\n * @param id - The ID to append the suffix to.\n * @param suffix - The suffix to append to the ID.\n * @returns The ID with the suffix appended, or undefined if the ID is undefined.\n */\nexport function appendId(id: string | undefined, suffix: string): string | undefined {\n\treturn id ? `${id}-${suffix}` : undefined\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,SAAS,IAAwB,QAAoC;AACpF,QAAO,KAAK,GAAG,GAAG,GAAG,WAAW"}
+{"version":3,"file":"append-id.mjs","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":["/**\n * Appends a suffix to an ID if the ID is defined.\n *\n * @param id - The ID to append the suffix to (accepts null e.g. from getAttribute).\n * @param suffix - The suffix to append to the ID.\n * @returns The ID with the suffix appended, or undefined if the ID is null/undefined.\n */\nexport function appendId(id: string | null | undefined, suffix: string): string | undefined {\n\treturn id ? `${id}-${suffix}` : undefined\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,SAAS,IAA+B,QAAoC;AAC3F,QAAO,KAAK,GAAG,GAAG,GAAG,WAAW"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/toolkits",
-  "version": "1.0.0",
+  "version": "2.1.0",
   "description": "Toolkits for web applications",
   "homepage": "https://github.com/justland/just-web-foundation/tree/main/libs/toolkits",
   "repository": {

package/src/attributes/get-attribute.ts

@@ -2,7 +2,7 @@
  * Gets the value of an attribute from an element.
  *
  * @param qualifiedName - The name of the attribute to get
- * @param element - The element to get the attribute from. Defaults to `document.documentElement`
+ * @param element - The element to get the attribute from (accepts null e.g. from refs). Defaults to `document.documentElement`
  * @returns The attribute value cast to type T, or null if the attribute doesn't exist
  *
  * @example
@@ -14,7 +14,10 @@
  * const testId = getAttribute('data-testid', element)
  * ```
  */
-export function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined) {
+export function getAttribute<T extends string>(
+	qualifiedName: T,
+	element?: Element | null | undefined
+) {
 	element = element ?? globalThis.document.documentElement
 	return element.getAttribute(qualifiedName)
 }

package/src/attributes/get-data-attribute.ts

@@ -5,11 +5,14 @@ import { getAttribute } from './get-attribute.ts'
  * Gets the value of a data attribute from an element.
  *
  * @param qualifiedName - The name of the data attribute to get
- * @param element - The element to get the data attribute from. Defaults to `document.documentElement`
+ * @param element - The element to get the data attribute from (accepts null e.g. from refs). Defaults to `document.documentElement`
  * @returns The data attribute value, or null if the attribute doesn't exist
  *
  * @example
  */
-export function getDataAttribute(qualifiedName: DataAttribute, element?: Element | undefined) {
+export function getDataAttribute(
+	qualifiedName: DataAttribute,
+	element?: Element | null | undefined
+) {
 	return getAttribute(qualifiedName, element)
 }

package/src/attributes/observe-attribute.ts

@@ -2,7 +2,7 @@
  * Observes attributes changes on an element and calls corresponding handlers.
  *
  * @param handlers - An object mapping attribute names to handler functions.
- * @param element - The element to observe. Defaults to `document.documentElement`.
+ * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`.
  * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.
  *
  * @example
@@ -18,7 +18,7 @@
  */
 export function observeAttributes<T extends string>(
 	handlers: Record<string, (value: T | null) => void>,
-	element?: Element | undefined
+	element?: Element | null | undefined
 ) {
 	element = element ?? globalThis.document.documentElement
 	const observer = new MutationObserver((mutations) => {

package/src/attributes/observe-data-attribute.ts

@@ -5,7 +5,7 @@ import { observeAttributes } from './observe-attribute.ts'
  *
  * @param options - Configuration options
  * @param options.handlers - An object mapping `data-*` attribute names to handler functions.
- * @param options.element - The element to observe. Defaults to `document.documentElement`
+ * @param options.element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
  * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer
  *
  * @example
@@ -23,7 +23,7 @@ import { observeAttributes } from './observe-attribute.ts'
  */
 export function observeDataAttributes<T extends string, K extends `data-${string}`>(
 	handlers: Record<K, (value: T | null) => void>,
-	element?: Element | undefined
+	element?: Element | null | undefined
 ) {
 	return observeAttributes(handlers, element)
 }

package/src/color-scheme/color-scheme.types.ts

@@ -0,0 +1,7 @@
+/**
+ * The color scheme of the system.
+ *
+ * Per {@link https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme Media Queries Level 5 § prefers-color-scheme},
+ * these are the only valid values exposed by the `prefers-color-scheme` media feature.
+ */
+export type ColorScheme = 'light' | 'dark'

package/src/color-scheme/get-prefers-color-scheme.ts

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

package/src/color-scheme/observe-prefers-color-scheme.ts

@@ -1,3 +1,5 @@
+import type { ColorScheme } from './color-scheme.types.ts'
+
 /**
  * Observes system color scheme preference changes and calls handlers when they occur.
  *
@@ -13,7 +15,7 @@
  * cleanup()
  * ```
  */
-export function observePrefersColorScheme(handler: (value: 'light' | 'dark') => void) {
+export function observePrefersColorScheme(handler: (value: ColorScheme) => void) {
 	const m = globalThis.matchMedia('(prefers-color-scheme: light)')
 	const listener = (event: MediaQueryListEvent) => {
 		handler(event.matches ? 'light' : 'dark')

package/src/index.ts

@@ -9,6 +9,7 @@ export * from './class-name/class-name-props.ts'
 export * from './class-name/clsx.ts'
 export * from './class-name/just-class-name.ts'
 export * from './class-name/resolve-class-name.ts'
+export * from './color-scheme/color-scheme.types.ts'
 export * from './color-scheme/get-prefers-color-scheme.ts'
 export * from './color-scheme/observe-prefers-color-scheme.ts'
 export * from './style/css-properties.ts'

package/src/react/hooks/use-attribute.ts

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

package/src/react/hooks/use-theme-by-class-name.ts

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'
 import { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'
-import { resolveThemeFromClassName } from '../../theme/class-name/resolve-theme-from-class-name.ts'
 import { themeEntry } from '../../theme/theme-entry.ts'
 import type { ThemeMap } from '../../theme/theme-map.types.ts'
 import { classNameThemeStore } from '../../theme/theme-store/class-name-theme-store/class-name-theme-store.ts'
@@ -12,7 +11,7 @@ import { classNameThemeStore } from '../../theme/theme-store/class-name-theme-st
  *
  * @param themes - Record mapping theme keys to their class name values
  * @param options.theme - Fallback theme key when no matching class is found
- * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
  * @returns Tuple of [currentTheme, setTheme]
  *
  * @example
@@ -33,7 +32,7 @@ export function useThemeByClassName<Themes extends ThemeMap>(
 	themes: Themes,
 	options?: {
 		defaultTheme?: keyof Themes | undefined
-		element?: Element | undefined
+		element?: Element | null | undefined
 	}
 ): [keyof Themes | undefined, (theme: keyof Themes) => void] {
 	const element =
@@ -42,13 +41,9 @@ export function useThemeByClassName<Themes extends ThemeMap>(
 
 	const store = useMemo(() => classNameThemeStore(themes, { element }), [element, themes])
 
-	const [theme, setThemeState] = useState<keyof Themes | undefined>(() => {
-		if (element) {
-			const resolved = resolveThemeFromClassName(themes, element.className)
-			return resolved ?? defaultTheme
-		}
-		return defaultTheme
-	})
+	const [theme, setThemeState] = useState<keyof Themes | undefined>(
+		() => store.read()?.theme ?? defaultTheme
+	)
 
 	useEffect(() => {
 		if (!element) return

package/src/react/hooks/use-theme-by-data-attribute.ts

@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
-import { getDataAttribute } from '../../attributes/get-data-attribute.ts'
 import { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'
 import { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'
-import { resolveThemeFromDataAttribute } from '../../theme/data-attribute/resolve-theme-from-data-attribute.ts'
 import { themeEntry } from '../../theme/theme-entry.ts'
 import type { ThemeMap } from '../../theme/theme-map.types.ts'
 import { dataAttributeThemeStore } from '../../theme/theme-store/data-attribute-theme-store/data-attribute-theme-store.ts'
@@ -14,7 +12,7 @@ import { dataAttributeThemeStore } from '../../theme/theme-store/data-attribute-
  * @param themes - Record mapping theme keys to their data attribute values
  * @param options.attributeName - Data attribute name (e.g. `data-theme`)
  * @param options.defaultTheme - Fallback theme key when no matching attribute value is found
- * @param options.element - Element to read/set theme on (defaults to document.documentElement)
+ * @param options.element - Element to read/set theme on (accepts null e.g. from refs). Defaults to document.documentElement.
  * @returns Tuple of [currentTheme, setTheme]
  *
  * @example
@@ -39,7 +37,7 @@ export function useThemeByDataAttribute<Themes extends ThemeMap>(
 	options: {
 		attributeName: `data-${string}`
 		defaultTheme?: keyof Themes | undefined
-		element?: Element | undefined
+		element?: Element | null | undefined
 	}
 ): [keyof Themes | undefined, (theme: keyof Themes) => void] {
 	const element =
@@ -56,14 +54,9 @@ export function useThemeByDataAttribute<Themes extends ThemeMap>(
 		[element, themes, attributeName]
 	)
 
-	const [theme, setThemeState] = useState<keyof Themes | undefined>(() => {
-		if (element) {
-			const attrValue = getDataAttribute(attributeName, element)
-			const resolved = resolveThemeFromDataAttribute(themes, attrValue)
-			return resolved ?? defaultTheme
-		}
-		return defaultTheme
-	})
+	const [theme, setThemeState] = useState<keyof Themes | undefined>(
+		() => store.read()?.theme ?? defaultTheme
+	)
 
 	useEffect(() => {
 		if (!element) return

package/src/react/hooks/use-theme-by-local-storage.ts

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { observeThemeFromStores } from '../../theme/_utils/observe-theme-from-stores.ts'
-import { parseStoredTheme } from '../../theme/_utils/parse-stored-theme.ts'
 import { setThemeToStores } from '../../theme/_utils/set-theme-to-stores.ts'
 import { themeEntry } from '../../theme/theme-entry.ts'
 import type { ThemeMap } from '../../theme/theme-map.types.ts'
@@ -43,14 +42,9 @@ export function useThemeByLocalStorage<Themes extends ThemeMap>(
 
 	const store = useMemo(() => localStorageThemeStore(themes, { storageKey }), [themes, storageKey])
 
-	const [theme, setThemeState] = useState<keyof Themes | undefined>(() => {
-		if (typeof window !== 'undefined' && window.localStorage) {
-			const stored = window.localStorage.getItem(storageKey)
-			const resolved = parseStoredTheme(themes, stored)
-			return resolved ?? defaultTheme
-		}
-		return defaultTheme
-	})
+	const [theme, setThemeState] = useState<keyof Themes | undefined>(
+		() => store.read()?.theme ?? defaultTheme
+	)
 
 	useEffect(() => {
 		const unobserve = observeThemeFromStores([store], defaultTheme, setThemeState)

package/src/react/theme/create-theme-hook.ts

@@ -101,16 +101,14 @@ function createSharedChannel<Themes extends ThemeMap>(
 		}
 	}
 
-	const handleStoreUpdate = (entry: ThemeEntry<Themes> | undefined | null) => {
+	const handleStoreUpdate = (entry: ThemeEntry<Themes> | undefined) => {
 		notify(entry?.theme ?? defaultTheme)
 	}
 
 	// Initial read to populate lastTheme (compose store subscribe has no initial notify)
-	void Promise.resolve(composedStore.read()).then(
-		(entry: ThemeEntry<Themes> | undefined | null) => {
-			notify(entry?.theme ?? defaultTheme)
-		}
-	)
+	void Promise.resolve(composedStore.read()).then((entry: ThemeEntry<Themes> | undefined) => {
+		notify(entry?.theme ?? defaultTheme)
+	})
 
 	let unobserve: () => void = composedStore.subscribe(handleStoreUpdate)
 	let isSubscribedToStore = true

package/src/testing/theme/theme-result-card.tsx

@@ -16,6 +16,7 @@ function formatValue(value: unknown): string {
 	if (value === null) return '(missing)'
 	if (value === '') return '(empty)'
 	if (Array.isArray(value)) return `[${value.join(', ')}]`
+	if (typeof value === 'object' && value !== null) return JSON.stringify(value)
 	return String(value)
 }