@just-web/toolkits 2.1.0 → 3.0.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/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/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"}

package/dist/theme/data-attribute/subscribe-data-attribute.cjs

@@ -17,10 +17,9 @@ function subscribeDataAttribute(themes, attributeName, handler, options) {
 	const element = options?.element ?? document?.documentElement;
 	if (!element) return () => {};
 	const parse = options?.parse ?? ((t, v) => require_parse_data_attribute.parseDataAttribute(t, v, { separator: require__constant.SEPARATOR_SPACE }));
-	const observer = require_observe_data_attribute.observeDataAttributes({ [attributeName]: (value) => {
+	return require_observe_data_attribute.observeDataAttributes({ [attributeName]: (value) => {
 		handler(parse(themes, value ?? void 0));
 	} }, element);
-	return () => observer.disconnect();
 }
 
 //#endregion

package/dist/theme/data-attribute/subscribe-data-attribute.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"subscribe-data-attribute.cjs","names":["parseDataAttribute","SEPARATOR_SPACE","observeDataAttributes"],"sources":["../../../src/theme/data-attribute/subscribe-data-attribute.ts"],"sourcesContent":["import { observeDataAttributes } from '../../attributes/observe-data-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { SEPARATOR_SPACE } from './_constant.ts'\nimport { parseDataAttribute } from './parse-data-attribute.ts'\n\n/**\n * Subscribes to changes on a data attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param attributeName - Data attribute name (e.g. `data-theme`)\n * @param handler - Callback invoked when the 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: parseDataAttribute with space separator)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tattributeName: `data-${string}`,\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 =\n\t\toptions?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))\n\tconst observer = observeDataAttributes<string, `data-${string}`>(\n\t\t{\n\t\t\t[attributeName]: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\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":";;;;;;;;;;;;;;;AAgBA,SAAgB,uBACf,QACA,eACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QACL,SAAS,WAAW,GAAG,MAAMA,gDAAmB,GAAG,GAAG,EAAE,WAAWC,mCAAiB,CAAC;CACtF,MAAM,WAAWC,qDAChB,GACE,iBAAiB,UAAU;AAE3B,UADc,MAAM,QAAQ,SAAS,OAAU,CACjC;IAEf,EACD,QACA;AACD,cAAa,SAAS,YAAY"}
+{"version":3,"file":"subscribe-data-attribute.cjs","names":["parseDataAttribute","SEPARATOR_SPACE","observeDataAttributes"],"sources":["../../../src/theme/data-attribute/subscribe-data-attribute.ts"],"sourcesContent":["import { observeDataAttributes } from '../../attributes/observe-data-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { SEPARATOR_SPACE } from './_constant.ts'\nimport { parseDataAttribute } from './parse-data-attribute.ts'\n\n/**\n * Subscribes to changes on a data attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param attributeName - Data attribute name (e.g. `data-theme`)\n * @param handler - Callback invoked when the 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: parseDataAttribute with space separator)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tattributeName: `data-${string}`,\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 =\n\t\toptions?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))\n\treturn observeDataAttributes<string, `data-${string}`>(\n\t\t{\n\t\t\t[attributeName]: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\n\t\t\t\thandler(entry)\n\t\t\t}\n\t\t},\n\t\telement\n\t)\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,SAAgB,uBACf,QACA,eACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QACL,SAAS,WAAW,GAAG,MAAMA,gDAAmB,GAAG,GAAG,EAAE,WAAWC,mCAAiB,CAAC;AACtF,QAAOC,qDACN,GACE,iBAAiB,UAAU;AAE3B,UADc,MAAM,QAAQ,SAAS,OAAU,CACjC;IAEf,EACD,QACA"}

package/dist/theme/data-attribute/subscribe-data-attribute.mjs

@@ -17,10 +17,9 @@ function subscribeDataAttribute(themes, attributeName, handler, options) {
 	const element = options?.element ?? document?.documentElement;
 	if (!element) return () => {};
 	const parse = options?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }));
-	const observer = observeDataAttributes({ [attributeName]: (value) => {
+	return observeDataAttributes({ [attributeName]: (value) => {
 		handler(parse(themes, value ?? void 0));
 	} }, element);
-	return () => observer.disconnect();
 }
 
 //#endregion

package/dist/theme/data-attribute/subscribe-data-attribute.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"subscribe-data-attribute.mjs","names":[],"sources":["../../../src/theme/data-attribute/subscribe-data-attribute.ts"],"sourcesContent":["import { observeDataAttributes } from '../../attributes/observe-data-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { SEPARATOR_SPACE } from './_constant.ts'\nimport { parseDataAttribute } from './parse-data-attribute.ts'\n\n/**\n * Subscribes to changes on a data attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param attributeName - Data attribute name (e.g. `data-theme`)\n * @param handler - Callback invoked when the 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: parseDataAttribute with space separator)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tattributeName: `data-${string}`,\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 =\n\t\toptions?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))\n\tconst observer = observeDataAttributes<string, `data-${string}`>(\n\t\t{\n\t\t\t[attributeName]: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\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":";;;;;;;;;;;;;;;AAgBA,SAAgB,uBACf,QACA,eACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QACL,SAAS,WAAW,GAAG,MAAM,mBAAmB,GAAG,GAAG,EAAE,WAAW,iBAAiB,CAAC;CACtF,MAAM,WAAW,sBAChB,GACE,iBAAiB,UAAU;AAE3B,UADc,MAAM,QAAQ,SAAS,OAAU,CACjC;IAEf,EACD,QACA;AACD,cAAa,SAAS,YAAY"}
+{"version":3,"file":"subscribe-data-attribute.mjs","names":[],"sources":["../../../src/theme/data-attribute/subscribe-data-attribute.ts"],"sourcesContent":["import { observeDataAttributes } from '../../attributes/observe-data-attribute.ts'\nimport type { ParseStoredTheme, ThemeEntry } from '../theme-entry.types.ts'\nimport type { ThemeMap } from '../theme-map.types.ts'\nimport { SEPARATOR_SPACE } from './_constant.ts'\nimport { parseDataAttribute } from './parse-data-attribute.ts'\n\n/**\n * Subscribes to changes on a data attribute and invokes the handler with parsed theme entries.\n *\n * @param themes - Record mapping theme keys to attribute values\n * @param attributeName - Data attribute name (e.g. `data-theme`)\n * @param handler - Callback invoked when the 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: parseDataAttribute with space separator)\n * @returns Unsubscribe function. Returns a no-op function when element is not available (e.g. SSR).\n */\nexport function subscribeDataAttribute<Themes extends ThemeMap>(\n\tthemes: Themes,\n\tattributeName: `data-${string}`,\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 =\n\t\toptions?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))\n\treturn observeDataAttributes<string, `data-${string}`>(\n\t\t{\n\t\t\t[attributeName]: (value) => {\n\t\t\t\tconst entry = parse(themes, value ?? undefined)\n\t\t\t\thandler(entry)\n\t\t\t}\n\t\t},\n\t\telement\n\t)\n}\n"],"mappings":";;;;;;;;;;;;;;;AAgBA,SAAgB,uBACf,QACA,eACA,SACA,SAGa;CACb,MAAM,UAAU,SAAS,WAAW,UAAU;AAC9C,KAAI,CAAC,QAAS,cAAa;CAC3B,MAAM,QACL,SAAS,WAAW,GAAG,MAAM,mBAAmB,GAAG,GAAG,EAAE,WAAW,iBAAiB,CAAC;AACtF,QAAO,sBACN,GACE,iBAAiB,UAAU;AAE3B,UADc,MAAM,QAAQ,SAAS,OAAU,CACjC;IAEf,EACD,QACA"}

package/package.json

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

package/src/attributes/observe-attribute.ts

@@ -3,24 +3,29 @@
  *
  * @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();
  * ```
  */
 export function observeAttributes<T extends string>(
 	handlers: Record<string, (value: T | null) => void>,
 	element?: Element | null | undefined
-) {
-	element = element ?? globalThis.document.documentElement
+): () => void {
+	/* 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
@@ -33,5 +38,5 @@ export function observeAttributes<T extends string>(
 		attributes: true,
 		attributeFilter: Object.keys(handlers)
 	})
-	return observer
+	return () => observer.disconnect()
 }

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

@@ -3,22 +3,19 @@ import { observeAttributes } from './observe-attribute.ts'
 /**
  * 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();
  * ```
  */
 export function observeDataAttributes<T extends string, K extends `data-${string}`>(

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

@@ -32,7 +32,7 @@ export function useAttribute(
 
 		setValueState(element.getAttribute(attributeName) ?? undefined)
 
-		const observer = observeAttributes(
+		return observeAttributes(
 			{
 				[attributeName]: (next) => {
 					setValueState(next ?? undefined)
@@ -40,7 +40,6 @@ export function useAttribute(
 			},
 			element
 		)
-		return () => observer.disconnect()
 	}, [element, attributeName])
 
 	const setValue = useCallback(

package/src/theme/class-name/subscribe-class-name.ts

@@ -23,7 +23,7 @@ export function subscribeClassName<Themes extends ThemeMap>(
 	if (!element) return () => {}
 	const parse = options?.parse ?? parseClassName
 	let lastEmitted: keyof Themes | undefined | null = null
-	const observer = observeAttributes(
+	return observeAttributes(
 		{
 			class: (value) => {
 				const entry = parse(themes, value ?? undefined)
@@ -35,5 +35,4 @@ export function subscribeClassName<Themes extends ThemeMap>(
 		},
 		element
 	)
-	return () => observer.disconnect()
 }

package/src/theme/data-attribute/subscribe-data-attribute.ts

@@ -26,7 +26,7 @@ export function subscribeDataAttribute<Themes extends ThemeMap>(
 	if (!element) return () => {}
 	const parse =
 		options?.parse ?? ((t, v) => parseDataAttribute(t, v, { separator: SEPARATOR_SPACE }))
-	const observer = observeDataAttributes<string, `data-${string}`>(
+	return observeDataAttributes<string, `data-${string}`>(
 		{
 			[attributeName]: (value) => {
 				const entry = parse(themes, value ?? undefined)
@@ -35,5 +35,4 @@ export function subscribeDataAttribute<Themes extends ThemeMap>(
 		},
 		element
 	)
-	return () => observer.disconnect()
 }