@just-web/toolkits 2.1.0 → 3.1.0

package/dist/attributes/observe-attribute.cjs

@@ -5,21 +5,24 @@
 *
 * @param handlers - An object mapping attribute names to handler functions.
 * @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.
+* @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
 *
 * @example
 * ```ts
-* const observer = observeAttributes({
-*   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
-*   'class': (attr, value) => console.log(`class changed to: ${value}`)
+* const unsubscribe = observeAttributes({
+*   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+*   'class': (value) => console.log(`class changed to: ${value}`)
 * });
 *
 * // Later, to stop observing:
-* observer.disconnect();
+* unsubscribe();
 * ```
 */
 function observeAttributes(handlers, element) {
-	element = element ?? globalThis.document.documentElement;
+	/* c8 ignore start */
+	if (typeof document === "undefined") return () => {};
+	/* c8 ignore end */
+	element = element ?? document.documentElement;
 	const observer = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
 			const attribute = mutation.attributeName;
@@ -32,7 +35,7 @@ function observeAttributes(handlers, element) {
 		attributes: true,
 		attributeFilter: Object.keys(handlers)
 	});
-	return observer;
+	return () => observer.disconnect();
 }
 
 //#endregion

package/dist/attributes/observe-attribute.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"observe-attribute.cjs","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":["/**\n * Observes attributes changes on an element and calls corresponding handlers.\n *\n * @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`.\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.\n *\n * @example\n * ```ts\n * const observer = observeAttributes({\n *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),\n *   'class': (attr, value) => console.log(`class changed to: ${value}`)\n * });\n *\n * // Later, to stop observing:\n * observer.disconnect();\n * ```\n */\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T | null) => void>,\n\telement?: Element | null | undefined\n) {\n\telement = element ?? globalThis.document.documentElement\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName\n\t\t\tif (!attribute) continue\n\t\t\tconst value = element.getAttribute(attribute) as T | null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers)\n\t})\n\treturn observer\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,kBACf,UACA,SACC;AACD,WAAU,WAAW,WAAW,SAAS;CACzC,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACpD,OAAK,MAAM,YAAY,WAAW;GACjC,MAAM,YAAY,SAAS;AAC3B,OAAI,CAAC,UAAW;GAChB,MAAM,QAAQ,QAAQ,aAAa,UAAU;AAC7C,YAAS,aAAa,MAAM;;GAE5B;AACF,UAAS,QAAQ,SAAS;EACzB,YAAY;EACZ,iBAAiB,OAAO,KAAK,SAAS;EACtC,CAAC;AACF,QAAO"}
+{"version":3,"file":"observe-attribute.cjs","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":["/**\n * Observes attributes changes on an element and calls corresponding handlers.\n *\n * @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`.\n * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.\n *\n * @example\n * ```ts\n * const unsubscribe = observeAttributes({\n *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n *   'class': (value) => console.log(`class changed to: ${value}`)\n * });\n *\n * // Later, to stop observing:\n * unsubscribe();\n * ```\n */\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T | null) => void>,\n\telement?: Element | null | undefined\n): () => void {\n\t/* c8 ignore start */\n\tif (typeof document === 'undefined') {\n\t\treturn () => {}\n\t}\n\t/* c8 ignore end */\n\telement = element ?? document.documentElement\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName\n\t\t\tif (!attribute) continue\n\t\t\tconst value = element.getAttribute(attribute) as T | null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers)\n\t})\n\treturn () => observer.disconnect()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,kBACf,UACA,SACa;;AAEb,KAAI,OAAO,aAAa,YACvB,cAAa;;AAGd,WAAU,WAAW,SAAS;CAC9B,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACpD,OAAK,MAAM,YAAY,WAAW;GACjC,MAAM,YAAY,SAAS;AAC3B,OAAI,CAAC,UAAW;GAChB,MAAM,QAAQ,QAAQ,aAAa,UAAU;AAC7C,YAAS,aAAa,MAAM;;GAE5B;AACF,UAAS,QAAQ,SAAS;EACzB,YAAY;EACZ,iBAAiB,OAAO,KAAK,SAAS;EACtC,CAAC;AACF,cAAa,SAAS,YAAY"}

package/dist/attributes/observe-attribute.d.cts

@@ -4,20 +4,20 @@
  *
  * @param handlers - An object mapping attribute names to handler functions.
  * @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.
+ * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
  *
  * @example
  * ```ts
- * const observer = observeAttributes({
- *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
- *   'class': (attr, value) => console.log(`class changed to: ${value}`)
+ * const unsubscribe = observeAttributes({
+ *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *   'class': (value) => console.log(`class changed to: ${value}`)
  * });
  *
  * // Later, to stop observing:
- * observer.disconnect();
+ * unsubscribe();
  * ```
  */
-declare function observeAttributes<T extends string>(handlers: Record<string, (value: T | null) => void>, element?: Element | null | undefined): MutationObserver;
+declare function observeAttributes<T extends string>(handlers: Record<string, (value: T | null) => void>, element?: Element | null | undefined): () => void;
 //#endregion
 export { observeAttributes };
 //# sourceMappingURL=observe-attribute.d.cts.map

package/dist/attributes/observe-attribute.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"observe-attribute.d.cts","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":[],"mappings":";;AAkBA;;;;;;;;;;;;;;;;;iBAAgB,8CACL,uBAAuB,8BACvB,6BAA0B"}
+{"version":3,"file":"observe-attribute.d.cts","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":[],"mappings":";;AAkBA;;;;;;;;;;;;;;;;;iBAAgB,8CACL,uBAAuB,8BACvB"}

package/dist/attributes/observe-attribute.d.mts

@@ -4,20 +4,20 @@
  *
  * @param handlers - An object mapping attribute names to handler functions.
  * @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.
+ * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
  *
  * @example
  * ```ts
- * const observer = observeAttributes({
- *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
- *   'class': (attr, value) => console.log(`class changed to: ${value}`)
+ * const unsubscribe = observeAttributes({
+ *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *   'class': (value) => console.log(`class changed to: ${value}`)
  * });
  *
  * // Later, to stop observing:
- * observer.disconnect();
+ * unsubscribe();
  * ```
  */
-declare function observeAttributes<T extends string>(handlers: Record<string, (value: T | null) => void>, element?: Element | null | undefined): MutationObserver;
+declare function observeAttributes<T extends string>(handlers: Record<string, (value: T | null) => void>, element?: Element | null | undefined): () => void;
 //#endregion
 export { observeAttributes };
 //# sourceMappingURL=observe-attribute.d.mts.map

package/dist/attributes/observe-attribute.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"observe-attribute.d.mts","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":[],"mappings":";;AAkBA;;;;;;;;;;;;;;;;;iBAAgB,8CACL,uBAAuB,8BACvB,6BAA0B"}
+{"version":3,"file":"observe-attribute.d.mts","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":[],"mappings":";;AAkBA;;;;;;;;;;;;;;;;;iBAAgB,8CACL,uBAAuB,8BACvB"}

package/dist/attributes/observe-attribute.mjs

@@ -4,21 +4,24 @@
 *
 * @param handlers - An object mapping attribute names to handler functions.
 * @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.
+* @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
 *
 * @example
 * ```ts
-* const observer = observeAttributes({
-*   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
-*   'class': (attr, value) => console.log(`class changed to: ${value}`)
+* const unsubscribe = observeAttributes({
+*   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+*   'class': (value) => console.log(`class changed to: ${value}`)
 * });
 *
 * // Later, to stop observing:
-* observer.disconnect();
+* unsubscribe();
 * ```
 */
 function observeAttributes(handlers, element) {
-	element = element ?? globalThis.document.documentElement;
+	/* c8 ignore start */
+	if (typeof document === "undefined") return () => {};
+	/* c8 ignore end */
+	element = element ?? document.documentElement;
 	const observer = new MutationObserver((mutations) => {
 		for (const mutation of mutations) {
 			const attribute = mutation.attributeName;
@@ -31,7 +34,7 @@ function observeAttributes(handlers, element) {
 		attributes: true,
 		attributeFilter: Object.keys(handlers)
 	});
-	return observer;
+	return () => observer.disconnect();
 }
 
 //#endregion

package/dist/attributes/observe-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"observe-attribute.mjs","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":["/**\n * Observes attributes changes on an element and calls corresponding handlers.\n *\n * @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`.\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.\n *\n * @example\n * ```ts\n * const observer = observeAttributes({\n *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),\n *   'class': (attr, value) => console.log(`class changed to: ${value}`)\n * });\n *\n * // Later, to stop observing:\n * observer.disconnect();\n * ```\n */\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T | null) => void>,\n\telement?: Element | null | undefined\n) {\n\telement = element ?? globalThis.document.documentElement\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName\n\t\t\tif (!attribute) continue\n\t\t\tconst value = element.getAttribute(attribute) as T | null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers)\n\t})\n\treturn observer\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,kBACf,UACA,SACC;AACD,WAAU,WAAW,WAAW,SAAS;CACzC,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACpD,OAAK,MAAM,YAAY,WAAW;GACjC,MAAM,YAAY,SAAS;AAC3B,OAAI,CAAC,UAAW;GAChB,MAAM,QAAQ,QAAQ,aAAa,UAAU;AAC7C,YAAS,aAAa,MAAM;;GAE5B;AACF,UAAS,QAAQ,SAAS;EACzB,YAAY;EACZ,iBAAiB,OAAO,KAAK,SAAS;EACtC,CAAC;AACF,QAAO"}
+{"version":3,"file":"observe-attribute.mjs","names":[],"sources":["../../src/attributes/observe-attribute.ts"],"sourcesContent":["/**\n * Observes attributes changes on an element and calls corresponding handlers.\n *\n * @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`.\n * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.\n *\n * @example\n * ```ts\n * const unsubscribe = observeAttributes({\n *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n *   'class': (value) => console.log(`class changed to: ${value}`)\n * });\n *\n * // Later, to stop observing:\n * unsubscribe();\n * ```\n */\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T | null) => void>,\n\telement?: Element | null | undefined\n): () => void {\n\t/* c8 ignore start */\n\tif (typeof document === 'undefined') {\n\t\treturn () => {}\n\t}\n\t/* c8 ignore end */\n\telement = element ?? document.documentElement\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName\n\t\t\tif (!attribute) continue\n\t\t\tconst value = element.getAttribute(attribute) as T | null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers)\n\t})\n\treturn () => observer.disconnect()\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAkBA,SAAgB,kBACf,UACA,SACa;;AAEb,KAAI,OAAO,aAAa,YACvB,cAAa;;AAGd,WAAU,WAAW,SAAS;CAC9B,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACpD,OAAK,MAAM,YAAY,WAAW;GACjC,MAAM,YAAY,SAAS;AAC3B,OAAI,CAAC,UAAW;GAChB,MAAM,QAAQ,QAAQ,aAAa,UAAU;AAC7C,YAAS,aAAa,MAAM;;GAE5B;AACF,UAAS,QAAQ,SAAS;EACzB,YAAY;EACZ,iBAAiB,OAAO,KAAK,SAAS;EACtC,CAAC;AACF,cAAa,SAAS,YAAY"}

package/dist/attributes/observe-data-attribute.cjs

@@ -4,22 +4,19 @@ const require_observe_attribute = require('./observe-attribute.cjs');
 /**
 * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
 *
-* @param options - Configuration options
-* @param options.handlers - An object mapping `data-*` attribute names to handler functions.
-* @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
+* @param handlers - An object mapping `data-*` attribute names to handler functions.
+* @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
+* @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
 *
 * @example
 * ```ts
-* const observer = observeDataAttributes({
-*   handlers: {
-*     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
-*     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
-*   }
+* const unsubscribe = observeDataAttributes({
+*   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+*   'data-mode': (value) => console.log(`Mode changed to: ${value}`)
 * });
 *
 * // Later, to stop observing:
-* observer.disconnect();
+* unsubscribe();
 * ```
 */
 function observeDataAttributes(handlers, element) {

package/dist/attributes/observe-data-attribute.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"observe-data-attribute.cjs","names":["observeAttributes"],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":["import { observeAttributes } from './observe-attribute.ts'\n\n/**\n * Observes changes to `data-*` attributes on an element and calls corresponding handlers.\n *\n * @param options - Configuration options\n * @param options.handlers - An object mapping `data-*` attribute names to handler functions.\n * @param options.element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer\n *\n * @example\n * ```ts\n * const observer = observeDataAttributes({\n *   handlers: {\n *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n *   }\n * });\n *\n * // Later, to stop observing:\n * observer.disconnect();\n * ```\n */\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T | null) => void>,\n\telement?: Element | null | undefined\n) {\n\treturn observeAttributes(handlers, element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,sBACf,UACA,SACC;AACD,QAAOA,4CAAkB,UAAU,QAAQ"}
+{"version":3,"file":"observe-data-attribute.cjs","names":["observeAttributes"],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":["import { observeAttributes } from './observe-attribute.ts'\n\n/**\n * Observes changes to `data-*` attributes on an element and calls corresponding handlers.\n *\n * @param handlers - An object mapping `data-*` attribute names to handler functions.\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`\n * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.\n *\n * @example\n * ```ts\n * const unsubscribe = observeDataAttributes({\n *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n *   'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n * });\n *\n * // Later, to stop observing:\n * unsubscribe();\n * ```\n */\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T | null) => void>,\n\telement?: Element | null | undefined\n) {\n\treturn observeAttributes(handlers, element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,sBACf,UACA,SACC;AACD,QAAOA,4CAAkB,UAAU,QAAQ"}

package/dist/attributes/observe-data-attribute.d.cts

@@ -2,25 +2,22 @@
 /**
  * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
  *
- * @param options - Configuration options
- * @param options.handlers - An object mapping `data-*` attribute names to handler functions.
- * @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
+ * @param handlers - An object mapping `data-*` attribute names to handler functions.
+ * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
+ * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
  *
  * @example
  * ```ts
- * const observer = observeDataAttributes({
- *   handlers: {
- *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
- *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
- *   }
+ * const unsubscribe = observeDataAttributes({
+ *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *   'data-mode': (value) => console.log(`Mode changed to: ${value}`)
  * });
  *
  * // Later, to stop observing:
- * observer.disconnect();
+ * unsubscribe();
  * ```
  */
-declare function observeDataAttributes<T extends string, K extends `data-${string}`>(handlers: Record<K, (value: T | null) => void>, element?: Element | null | undefined): MutationObserver;
+declare function observeDataAttributes<T extends string, K extends `data-${string}`>(handlers: Record<K, (value: T | null) => void>, element?: Element | null | undefined): () => void;
 //#endregion
 export { observeDataAttributes };
 //# sourceMappingURL=observe-data-attribute.d.cts.map

package/dist/attributes/observe-data-attribute.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"observe-data-attribute.d.cts","names":[],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":[],"mappings":";;AAuBA;;;;;;;;;;;;;;;;;;;;iBAAgB,8EACL,OAAO,WAAW,8BAClB,6BAA0B"}
+{"version":3,"file":"observe-data-attribute.d.cts","names":[],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":[],"mappings":";;AAoBA;;;;;;;;;;;;;;;;;iBAAgB,8EACL,OAAO,WAAW,8BAClB"}

package/dist/attributes/observe-data-attribute.d.mts

@@ -2,25 +2,22 @@
 /**
  * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
  *
- * @param options - Configuration options
- * @param options.handlers - An object mapping `data-*` attribute names to handler functions.
- * @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
+ * @param handlers - An object mapping `data-*` attribute names to handler functions.
+ * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
+ * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
  *
  * @example
  * ```ts
- * const observer = observeDataAttributes({
- *   handlers: {
- *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
- *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
- *   }
+ * const unsubscribe = observeDataAttributes({
+ *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *   'data-mode': (value) => console.log(`Mode changed to: ${value}`)
  * });
  *
  * // Later, to stop observing:
- * observer.disconnect();
+ * unsubscribe();
  * ```
  */
-declare function observeDataAttributes<T extends string, K extends `data-${string}`>(handlers: Record<K, (value: T | null) => void>, element?: Element | null | undefined): MutationObserver;
+declare function observeDataAttributes<T extends string, K extends `data-${string}`>(handlers: Record<K, (value: T | null) => void>, element?: Element | null | undefined): () => void;
 //#endregion
 export { observeDataAttributes };
 //# sourceMappingURL=observe-data-attribute.d.mts.map

package/dist/attributes/observe-data-attribute.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"observe-data-attribute.d.mts","names":[],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":[],"mappings":";;AAuBA;;;;;;;;;;;;;;;;;;;;iBAAgB,8EACL,OAAO,WAAW,8BAClB,6BAA0B"}
+{"version":3,"file":"observe-data-attribute.d.mts","names":[],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":[],"mappings":";;AAoBA;;;;;;;;;;;;;;;;;iBAAgB,8EACL,OAAO,WAAW,8BAClB"}

package/dist/attributes/observe-data-attribute.mjs

@@ -4,22 +4,19 @@ import { observeAttributes } from "./observe-attribute.mjs";
 /**
 * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
 *
-* @param options - Configuration options
-* @param options.handlers - An object mapping `data-*` attribute names to handler functions.
-* @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
+* @param handlers - An object mapping `data-*` attribute names to handler functions.
+* @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`
+* @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.
 *
 * @example
 * ```ts
-* const observer = observeDataAttributes({
-*   handlers: {
-*     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
-*     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
-*   }
+* const unsubscribe = observeDataAttributes({
+*   'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+*   'data-mode': (value) => console.log(`Mode changed to: ${value}`)
 * });
 *
 * // Later, to stop observing:
-* observer.disconnect();
+* unsubscribe();
 * ```
 */
 function observeDataAttributes(handlers, element) {

package/dist/attributes/observe-data-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"observe-data-attribute.mjs","names":[],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":["import { observeAttributes } from './observe-attribute.ts'\n\n/**\n * Observes changes to `data-*` attributes on an element and calls corresponding handlers.\n *\n * @param options - Configuration options\n * @param options.handlers - An object mapping `data-*` attribute names to handler functions.\n * @param options.element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer\n *\n * @example\n * ```ts\n * const observer = observeDataAttributes({\n *   handlers: {\n *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n *   }\n * });\n *\n * // Later, to stop observing:\n * observer.disconnect();\n * ```\n */\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T | null) => void>,\n\telement?: Element | null | undefined\n) {\n\treturn observeAttributes(handlers, element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAgB,sBACf,UACA,SACC;AACD,QAAO,kBAAkB,UAAU,QAAQ"}
+{"version":3,"file":"observe-data-attribute.mjs","names":[],"sources":["../../src/attributes/observe-data-attribute.ts"],"sourcesContent":["import { observeAttributes } from './observe-attribute.ts'\n\n/**\n * Observes changes to `data-*` attributes on an element and calls corresponding handlers.\n *\n * @param handlers - An object mapping `data-*` attribute names to handler functions.\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement`\n * @returns An unsubscribe function to stop observing. Returns a no-op function in SSR environments.\n *\n * @example\n * ```ts\n * const unsubscribe = observeDataAttributes({\n *   'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n *   'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n * });\n *\n * // Later, to stop observing:\n * unsubscribe();\n * ```\n */\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T | null) => void>,\n\telement?: Element | null | undefined\n) {\n\treturn observeAttributes(handlers, element)\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,sBACf,UACA,SACC;AACD,QAAO,kBAAkB,UAAU,QAAQ"}

package/dist/index.cjs

@@ -13,7 +13,12 @@ const require_get_css_variable_value = require('./style/get-css-variable-value.c
 const require_resolve_style = require('./style/resolve-style.cjs');
 const require_to_dom_style = require('./style/to-dom-style.cjs');
 const require_get_rem_to_px_scale = require('./units/get-rem-to-px-scale.cjs');
-const require_px_2_num = require('./units/px-2-num.cjs');
+const require_parse_css_value = require('./units/parse-css-value.cjs');
+const require_convert_css_unit = require('./units/convert-css-unit.cjs');
+const require_create_css_unit_converter = require('./units/create-css-unit-converter.cjs');
+const require_get_css_unit = require('./units/get-css-unit.cjs');
+const require_parse_css_number = require('./units/parse-css-number.cjs');
+const require_is_effectively_zero = require('./units/is-effectively-zero.cjs');
 const require_px_2_rem = require('./units/px-2-rem.cjs');
 const require_rem_2_px = require('./units/rem-2-px.cjs');
 const require_append_id = require('./utils/append-id.cjs');
@@ -21,16 +26,22 @@ let clsx = require("clsx");
 
 exports.appendId = require_append_id.appendId;
 exports.clsx = clsx.default;
+exports.convertCssUnit = require_convert_css_unit.convertCssUnit;
+exports.createCssUnitConverter = require_create_css_unit_converter.createCssUnitConverter;
 exports.defineCSSProperties = require_define_css_properties.defineCSSProperties;
 exports.getAttribute = require_get_attribute.getAttribute;
 exports.getCSSVariableValue = require_get_css_variable_value.getCSSVariableValue;
+exports.getCssUnit = require_get_css_unit.getCssUnit;
 exports.getDataAttribute = require_get_data_attribute.getDataAttribute;
 exports.getPrefersColorScheme = require_get_prefers_color_scheme.getPrefersColorScheme;
 exports.getRemToPxScale = require_get_rem_to_px_scale.getRemToPxScale;
+exports.isEffectivelyZero = require_is_effectively_zero.isEffectivelyZero;
 exports.observeAttributes = require_observe_attribute.observeAttributes;
 exports.observeDataAttributes = require_observe_data_attribute.observeDataAttributes;
 exports.observePrefersColorScheme = require_observe_prefers_color_scheme.observePrefersColorScheme;
-exports.px2num = require_px_2_num.px2num;
+exports.parseCssNumber = require_parse_css_number.parseCssNumber;
+exports.parseCssValue = require_parse_css_value.parseCssValue;
+exports.px2num = require_parse_css_number.parseCssNumber;
 exports.px2rem = require_px_2_rem.px2rem;
 exports.rem2px = require_rem_2_px.rem2px;
 exports.resolveChildren = require_resolve_children.resolveChildren;

package/dist/index.d.cts

@@ -19,9 +19,15 @@ import { JustStyle, JustStyleFnProps, JustStyleProps } from "./style/just-style.
 import { resolveStyle } from "./style/resolve-style.cjs";
 import { StyleProps } from "./style/style-props.cjs";
 import { toDomStyle } from "./style/to-dom-style.cjs";
+import { ConvertCssUnitOptions, CssLengthUnit, CssUnitConverterContext } from "./units/css-unit-converter.types.cjs";
+import { convertCssUnit } from "./units/convert-css-unit.cjs";
+import { createCssUnitConverter } from "./units/create-css-unit-converter.cjs";
+import { getCssUnit } from "./units/get-css-unit.cjs";
 import { getRemToPxScale } from "./units/get-rem-to-px-scale.cjs";
-import { px2num } from "./units/px-2-num.cjs";
+import { isEffectivelyZero } from "./units/is-effectively-zero.cjs";
+import { parseCssNumber } from "./units/parse-css-number.cjs";
+import { parseCssValue } from "./units/parse-css-value.cjs";
 import { px2rem } from "./units/px-2-rem.cjs";
 import { rem2px } from "./units/rem-2-px.cjs";
 import { appendId } from "./utils/append-id.cjs";
-export { CSSProperties, ClassNameProps, ColorScheme, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };
+export { CSSProperties, ClassNameProps, ColorScheme, ConvertCssUnitOptions, CssLengthUnit, CssUnitConverterContext, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, convertCssUnit, createCssUnitConverter, defineCSSProperties, getAttribute, getCSSVariableValue, getCssUnit, getDataAttribute, getPrefersColorScheme, getRemToPxScale, isEffectivelyZero, observeAttributes, observeDataAttributes, observePrefersColorScheme, parseCssNumber, parseCssValue, parseCssNumber as px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

package/dist/index.d.mts

@@ -19,9 +19,15 @@ import { JustStyle, JustStyleFnProps, JustStyleProps } from "./style/just-style.
 import { resolveStyle } from "./style/resolve-style.mjs";
 import { StyleProps } from "./style/style-props.mjs";
 import { toDomStyle } from "./style/to-dom-style.mjs";
+import { ConvertCssUnitOptions, CssLengthUnit, CssUnitConverterContext } from "./units/css-unit-converter.types.mjs";
+import { convertCssUnit } from "./units/convert-css-unit.mjs";
+import { createCssUnitConverter } from "./units/create-css-unit-converter.mjs";
+import { getCssUnit } from "./units/get-css-unit.mjs";
 import { getRemToPxScale } from "./units/get-rem-to-px-scale.mjs";
-import { px2num } from "./units/px-2-num.mjs";
+import { isEffectivelyZero } from "./units/is-effectively-zero.mjs";
+import { parseCssNumber } from "./units/parse-css-number.mjs";
+import { parseCssValue } from "./units/parse-css-value.mjs";
 import { px2rem } from "./units/px-2-rem.mjs";
 import { rem2px } from "./units/rem-2-px.mjs";
 import { appendId } from "./utils/append-id.mjs";
-export { CSSProperties, ClassNameProps, ColorScheme, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };
+export { CSSProperties, ClassNameProps, ColorScheme, ConvertCssUnitOptions, CssLengthUnit, CssUnitConverterContext, DataAttribute, JustChildren, JustChildrenFnProps, JustChildrenProps, JustClassName, JustClassNameFnProps, JustClassNameProps, JustStyle, JustStyleFnProps, JustStyleProps, StyleProps, appendId, clsx, convertCssUnit, createCssUnitConverter, defineCSSProperties, getAttribute, getCSSVariableValue, getCssUnit, getDataAttribute, getPrefersColorScheme, getRemToPxScale, isEffectivelyZero, observeAttributes, observeDataAttributes, observePrefersColorScheme, parseCssNumber, parseCssValue, parseCssNumber as px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

package/dist/index.mjs

@@ -12,9 +12,14 @@ import { getCSSVariableValue } from "./style/get-css-variable-value.mjs";
 import { resolveStyle } from "./style/resolve-style.mjs";
 import { toDomStyle } from "./style/to-dom-style.mjs";
 import { getRemToPxScale } from "./units/get-rem-to-px-scale.mjs";
-import { px2num } from "./units/px-2-num.mjs";
+import { parseCssValue } from "./units/parse-css-value.mjs";
+import { convertCssUnit } from "./units/convert-css-unit.mjs";
+import { createCssUnitConverter } from "./units/create-css-unit-converter.mjs";
+import { getCssUnit } from "./units/get-css-unit.mjs";
+import { parseCssNumber } from "./units/parse-css-number.mjs";
+import { isEffectivelyZero } from "./units/is-effectively-zero.mjs";
 import { px2rem } from "./units/px-2-rem.mjs";
 import { rem2px } from "./units/rem-2-px.mjs";
 import { appendId } from "./utils/append-id.mjs";
 
-export { appendId, clsx, defineCSSProperties, getAttribute, getCSSVariableValue, getDataAttribute, getPrefersColorScheme, getRemToPxScale, observeAttributes, observeDataAttributes, observePrefersColorScheme, px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };
+export { appendId, clsx, convertCssUnit, createCssUnitConverter, defineCSSProperties, getAttribute, getCSSVariableValue, getCssUnit, getDataAttribute, getPrefersColorScheme, getRemToPxScale, isEffectivelyZero, observeAttributes, observeDataAttributes, observePrefersColorScheme, parseCssNumber, parseCssValue, parseCssNumber as px2num, px2rem, rem2px, resolveChildren, resolveClassName, resolveStyle, toDomStyle };

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

@@ -24,10 +24,9 @@ function useAttribute(attributeName, element = typeof document !== "undefined" ?
 	(0, react.useEffect)(() => {
 		if (!element) return;
 		setValueState(element.getAttribute(attributeName) ?? void 0);
-		const observer = require_observe_attribute.observeAttributes({ [attributeName]: (next) => {
+		return require_observe_attribute.observeAttributes({ [attributeName]: (next) => {
 			setValueState(next ?? void 0);
 		} }, element);
-		return () => observer.disconnect();
 	}, [element, attributeName]);
 	return [value, (0, react.useCallback)((next) => {
 		if (!element) return;

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

@@ -1 +1 @@
-{"version":3,"file":"use-attribute.cjs","names":["observeAttributes"],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(undefined) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | null | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | undefined, (value: string | null | undefined) => void] {\n\tconst [value, setValueState] = useState<string | undefined>(\n\t\t() => element?.getAttribute(attributeName) ?? undefined\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName) ?? undefined)\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next ?? undefined)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null | undefined) => {\n\t\t\tif (!element) return\n\t\t\tif (next == null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAAsC,OAAO,aAAa,cACvD,SAAS,kBACT,QACgE;CACnE,MAAM,CAAC,OAAO,2CACP,SAAS,aAAa,cAAc,IAAI,OAC9C;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,IAAI,OAAU;EAE/D,MAAM,WAAWA,4CAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,+BAXN,SAAoC;AACpC,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,KACX,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}
+{"version":3,"file":"use-attribute.cjs","names":["observeAttributes"],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(undefined) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | null | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | undefined, (value: string | null | undefined) => void] {\n\tconst [value, setValueState] = useState<string | undefined>(\n\t\t() => element?.getAttribute(attributeName) ?? undefined\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName) ?? undefined)\n\n\t\treturn observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next ?? undefined)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null | undefined) => {\n\t\t\tif (!element) return\n\t\t\tif (next == null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAAsC,OAAO,aAAa,cACvD,SAAS,kBACT,QACgE;CACnE,MAAM,CAAC,OAAO,2CACP,SAAS,aAAa,cAAc,IAAI,OAC9C;AAED,4BAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,IAAI,OAAU;AAE/D,SAAOA,4CACN,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;IACC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,+BAXN,SAAoC;AACpC,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,KACX,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}

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

@@ -23,10 +23,9 @@ function useAttribute(attributeName, element = typeof document !== "undefined" ?
 	useEffect(() => {
 		if (!element) return;
 		setValueState(element.getAttribute(attributeName) ?? void 0);
-		const observer = observeAttributes({ [attributeName]: (next) => {
+		return observeAttributes({ [attributeName]: (next) => {
 			setValueState(next ?? void 0);
 		} }, element);
-		return () => observer.disconnect();
 	}, [element, attributeName]);
 	return [value, useCallback((next) => {
 		if (!element) return;

package/dist/react/hooks/use-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(undefined) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | null | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | undefined, (value: string | null | undefined) => void] {\n\tconst [value, setValueState] = useState<string | undefined>(\n\t\t() => element?.getAttribute(attributeName) ?? undefined\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName) ?? undefined)\n\n\t\tconst observer = observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next ?? undefined)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t\treturn () => observer.disconnect()\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null | undefined) => {\n\t\t\tif (!element) return\n\t\t\tif (next == null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAAsC,OAAO,aAAa,cACvD,SAAS,kBACT,QACgE;CACnE,MAAM,CAAC,OAAO,iBAAiB,eACxB,SAAS,aAAa,cAAc,IAAI,OAC9C;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,IAAI,OAAU;EAE/D,MAAM,WAAW,kBAChB,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;AACD,eAAa,SAAS,YAAY;IAChC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,OAZS,aACf,SAAoC;AACpC,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,KACX,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}
+{"version":3,"file":"use-attribute.mjs","names":[],"sources":["../../../src/react/hooks/use-attribute.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { observeAttributes } from '../../attributes/observe-attribute.ts'\n\n/**\n * React hook that returns the current value of an attribute on a target element\n * and a setter to update it. Stays in sync when the attribute changes (e.g. from elsewhere).\n *\n * @param attributeName - The attribute to observe (e.g. `'class'`, `'data-theme'`).\n * @param element - The element to observe (accepts null e.g. from refs). Defaults to `document.documentElement` when omitted.\n * @returns Tuple of [value, setValue]. Pass null or undefined to setValue to remove the attribute.\n *\n * @example\n * ```tsx\n * const [className, setClassName] = useAttribute('class')\n * const [theme, setTheme] = useAttribute('data-theme', myElement)\n * setTheme('dark')\n * setClassName(undefined) // removes class attribute\n * ```\n */\nexport function useAttribute(\n\tattributeName: string,\n\telement: Element | null | undefined = typeof document !== 'undefined'\n\t\t? document.documentElement\n\t\t: undefined\n): [string | undefined, (value: string | null | undefined) => void] {\n\tconst [value, setValueState] = useState<string | undefined>(\n\t\t() => element?.getAttribute(attributeName) ?? undefined\n\t)\n\n\tuseEffect(() => {\n\t\tif (!element) return\n\n\t\tsetValueState(element.getAttribute(attributeName) ?? undefined)\n\n\t\treturn observeAttributes(\n\t\t\t{\n\t\t\t\t[attributeName]: (next) => {\n\t\t\t\t\tsetValueState(next ?? undefined)\n\t\t\t\t}\n\t\t\t},\n\t\t\telement\n\t\t)\n\t}, [element, attributeName])\n\n\tconst setValue = useCallback(\n\t\t(next: string | null | undefined) => {\n\t\t\tif (!element) return\n\t\t\tif (next == null) {\n\t\t\t\telement.removeAttribute(attributeName)\n\t\t\t} else {\n\t\t\t\telement.setAttribute(attributeName, next)\n\t\t\t}\n\t\t},\n\t\t[element, attributeName]\n\t)\n\n\treturn [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBA,SAAgB,aACf,eACA,UAAsC,OAAO,aAAa,cACvD,SAAS,kBACT,QACgE;CACnE,MAAM,CAAC,OAAO,iBAAiB,eACxB,SAAS,aAAa,cAAc,IAAI,OAC9C;AAED,iBAAgB;AACf,MAAI,CAAC,QAAS;AAEd,gBAAc,QAAQ,aAAa,cAAc,IAAI,OAAU;AAE/D,SAAO,kBACN,GACE,iBAAiB,SAAS;AAC1B,iBAAc,QAAQ,OAAU;KAEjC,EACD,QACA;IACC,CAAC,SAAS,cAAc,CAAC;AAc5B,QAAO,CAAC,OAZS,aACf,SAAoC;AACpC,MAAI,CAAC,QAAS;AACd,MAAI,QAAQ,KACX,SAAQ,gBAAgB,cAAc;MAEtC,SAAQ,aAAa,eAAe,KAAK;IAG3C,CAAC,SAAS,cAAc,CACxB,CAEuB"}

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

@@ -12,7 +12,8 @@ interface CustomProperties {
  * 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.
+ *
+ * Note that `React.CSSProperties` (using `csstype`) is augmented so you can use it directly without this type.
  */
 interface CSSProperties<TLength = string | number, TTime = string & {}> extends Properties<TLength, TTime>, CustomProperties {}
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"css-properties.d.cts","names":[],"sources":["../../src/style/css-properties.ts"],"sourcesContent":[],"mappings":";;;;iFAIgF,kBAJvC;;;UAQ/B,gBAAA,CAJsF;EAAA,CAAA,CAAA,EAAA,KAAA,MAAA,EAAA,CAAA,EAAA,MAAA;AAAA;AAehG;;;;;;;UAAiB,sEACR,WAAW,SAAS,QAC3B"}

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

@@ -12,7 +12,8 @@ interface CustomProperties {
  * 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.
+ *
+ * Note that `React.CSSProperties` (using `csstype`) is augmented so you can use it directly without this type.
  */
 interface CSSProperties<TLength = string | number, TTime = string & {}> extends Properties<TLength, TTime>, CustomProperties {}
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"css-properties.d.mts","names":[],"sources":["../../src/style/css-properties.ts"],"sourcesContent":[],"mappings":";;;;iFAIgF,kBAJvC;;;UAQ/B,gBAAA,CAJsF;EAAA,CAAA,CAAA,EAAA,KAAA,MAAA,EAAA,CAAA,EAAA,MAAA;AAAA;AAehG;;;;;;;UAAiB,sEACR,WAAW,SAAS,QAC3B"}

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

@@ -16,14 +16,13 @@ function subscribeClassName(themes, handler, options) {
 	if (!element) return () => {};
 	const parse = options?.parse ?? require_parse_class_name.parseClassName;
 	let lastEmitted = null;
-	const observer = require_observe_attribute.observeAttributes({ class: (value) => {
+	return require_observe_attribute.observeAttributes({ class: (value) => {
 		const entry = parse(themes, value ?? void 0);
 		const key = entry?.theme ?? void 0;
 		if (lastEmitted === key) return;
 		lastEmitted = key;
 		handler(entry);
 	} }, element);
-	return () => observer.disconnect();
 }
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"subscribe-class-name.cjs","names":["parseClassName","lastEmitted: keyof Themes | undefined | null","observeAttributes"],"sources":["../../../src/theme/class-name/subscribe-class-name.ts"],"sourcesContent":["import { observeAttributes } from '../../attributes/observe-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { parseClassName } from './parse-class-name.ts'\n\n/**\n * Subscribes to changes on the class attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param handler - Callback invoked when the class attribute changes\n * @param options.element - Element to observe (accepts null e.g. from refs). Defaults to document.documentElement.\n * @param options.parse - Custom parser (default: parseClassName)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\thandler: (entry: ThemeEntry<Themes> | undefined) => void,\n\toptions?:\n\t\t| { element?: Element | null | undefined; parse?: ParseStoredTheme<Themes> | undefined }\n\t\t| undefined\n): () => void {\n\tconst element = options?.element ?? document?.documentElement\n\tif (!element) return () => {}\n\tconst parse = options?.parse ?? parseClassName\n\tlet lastEmitted: keyof Themes | undefined | null = null\n\tconst observer = observeAttributes(\n\t\t{\n\t\t\tclass: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\n\t\t\t\tconst key = entry?.theme ?? undefined\n\t\t\t\tif (lastEmitted === key) return\n\t\t\t\tlastEmitted = key\n\t\t\t\thandler(entry)\n\t\t\t}\n\t\t},\n\t\telement\n\t)\n\treturn () => observer.disconnect()\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,mBACf,QACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QAAQ,SAAS,SAASA;CAChC,IAAIC,cAA+C;CACnD,MAAM,WAAWC,4CAChB,EACC,QAAQ,UAAU;EACjB,MAAM,QAAQ,MAAM,QAAQ,SAAS,OAAU;EAC/C,MAAM,MAAM,OAAO,SAAS;AAC5B,MAAI,gBAAgB,IAAK;AACzB,gBAAc;AACd,UAAQ,MAAM;IAEf,EACD,QACA;AACD,cAAa,SAAS,YAAY"}
+{"version":3,"file":"subscribe-class-name.cjs","names":["parseClassName","lastEmitted: keyof Themes | undefined | null","observeAttributes"],"sources":["../../../src/theme/class-name/subscribe-class-name.ts"],"sourcesContent":["import { observeAttributes } from '../../attributes/observe-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { parseClassName } from './parse-class-name.ts'\n\n/**\n * Subscribes to changes on the class attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param handler - Callback invoked when the class attribute changes\n * @param options.element - Element to observe (accepts null e.g. from refs). Defaults to document.documentElement.\n * @param options.parse - Custom parser (default: parseClassName)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\thandler: (entry: ThemeEntry<Themes> | undefined) => void,\n\toptions?:\n\t\t| { element?: Element | null | undefined; parse?: ParseStoredTheme<Themes> | undefined }\n\t\t| undefined\n): () => void {\n\tconst element = options?.element ?? document?.documentElement\n\tif (!element) return () => {}\n\tconst parse = options?.parse ?? parseClassName\n\tlet lastEmitted: keyof Themes | undefined | null = null\n\treturn observeAttributes(\n\t\t{\n\t\t\tclass: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\n\t\t\t\tconst key = entry?.theme ?? undefined\n\t\t\t\tif (lastEmitted === key) return\n\t\t\t\tlastEmitted = key\n\t\t\t\thandler(entry)\n\t\t\t}\n\t\t},\n\t\telement\n\t)\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,mBACf,QACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QAAQ,SAAS,SAASA;CAChC,IAAIC,cAA+C;AACnD,QAAOC,4CACN,EACC,QAAQ,UAAU;EACjB,MAAM,QAAQ,MAAM,QAAQ,SAAS,OAAU;EAC/C,MAAM,MAAM,OAAO,SAAS;AAC5B,MAAI,gBAAgB,IAAK;AACzB,gBAAc;AACd,UAAQ,MAAM;IAEf,EACD,QACA"}

package/dist/theme/class-name/subscribe-class-name.mjs

@@ -16,14 +16,13 @@ function subscribeClassName(themes, handler, options) {
 	if (!element) return () => {};
 	const parse = options?.parse ?? parseClassName;
 	let lastEmitted = null;
-	const observer = observeAttributes({ class: (value) => {
+	return observeAttributes({ class: (value) => {
 		const entry = parse(themes, value ?? void 0);
 		const key = entry?.theme ?? void 0;
 		if (lastEmitted === key) return;
 		lastEmitted = key;
 		handler(entry);
 	} }, element);
-	return () => observer.disconnect();
 }
 
 //#endregion

package/dist/theme/class-name/subscribe-class-name.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"subscribe-class-name.mjs","names":["lastEmitted: keyof Themes | undefined | null"],"sources":["../../../src/theme/class-name/subscribe-class-name.ts"],"sourcesContent":["import { observeAttributes } from '../../attributes/observe-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { parseClassName } from './parse-class-name.ts'\n\n/**\n * Subscribes to changes on the class attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param handler - Callback invoked when the class attribute changes\n * @param options.element - Element to observe (accepts null e.g. from refs). Defaults to document.documentElement.\n * @param options.parse - Custom parser (default: parseClassName)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\thandler: (entry: ThemeEntry<Themes> | undefined) => void,\n\toptions?:\n\t\t| { element?: Element | null | undefined; parse?: ParseStoredTheme<Themes> | undefined }\n\t\t| undefined\n): () => void {\n\tconst element = options?.element ?? document?.documentElement\n\tif (!element) return () => {}\n\tconst parse = options?.parse ?? parseClassName\n\tlet lastEmitted: keyof Themes | undefined | null = null\n\tconst observer = observeAttributes(\n\t\t{\n\t\t\tclass: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\n\t\t\t\tconst key = entry?.theme ?? undefined\n\t\t\t\tif (lastEmitted === key) return\n\t\t\t\tlastEmitted = key\n\t\t\t\thandler(entry)\n\t\t\t}\n\t\t},\n\t\telement\n\t)\n\treturn () => observer.disconnect()\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,mBACf,QACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QAAQ,SAAS,SAAS;CAChC,IAAIA,cAA+C;CACnD,MAAM,WAAW,kBAChB,EACC,QAAQ,UAAU;EACjB,MAAM,QAAQ,MAAM,QAAQ,SAAS,OAAU;EAC/C,MAAM,MAAM,OAAO,SAAS;AAC5B,MAAI,gBAAgB,IAAK;AACzB,gBAAc;AACd,UAAQ,MAAM;IAEf,EACD,QACA;AACD,cAAa,SAAS,YAAY"}
+{"version":3,"file":"subscribe-class-name.mjs","names":["lastEmitted: keyof Themes | undefined | null"],"sources":["../../../src/theme/class-name/subscribe-class-name.ts"],"sourcesContent":["import { observeAttributes } from '../../attributes/observe-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { parseClassName } from './parse-class-name.ts'\n\n/**\n * Subscribes to changes on the class attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to class name(s)\n * @param handler - Callback invoked when the class attribute changes\n * @param options.element - Element to observe (accepts null e.g. from refs). Defaults to document.documentElement.\n * @param options.parse - Custom parser (default: parseClassName)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeClassName<Themes extends ThemeMap>(\n\tthemes: Themes,\n\thandler: (entry: ThemeEntry<Themes> | undefined) => void,\n\toptions?:\n\t\t| { element?: Element | null | undefined; parse?: ParseStoredTheme<Themes> | undefined }\n\t\t| undefined\n): () => void {\n\tconst element = options?.element ?? document?.documentElement\n\tif (!element) return () => {}\n\tconst parse = options?.parse ?? parseClassName\n\tlet lastEmitted: keyof Themes | undefined | null = null\n\treturn observeAttributes(\n\t\t{\n\t\t\tclass: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\n\t\t\t\tconst key = entry?.theme ?? undefined\n\t\t\t\tif (lastEmitted === key) return\n\t\t\t\tlastEmitted = key\n\t\t\t\thandler(entry)\n\t\t\t}\n\t\t},\n\t\telement\n\t)\n}\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAgB,mBACf,QACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QAAQ,SAAS,SAAS;CAChC,IAAIA,cAA+C;AACnD,QAAO,kBACN,EACC,QAAQ,UAAU;EACjB,MAAM,QAAQ,MAAM,QAAQ,SAAS,OAAU;EAC/C,MAAM,MAAM,OAAO,SAAS;AAC5B,MAAI,gBAAgB,IAAK;AACzB,gBAAc;AACd,UAAQ,MAAM;IAEf,EACD,QACA"}