@just-web/css 0.1.0

package/esm/class-name.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Note that `className` could be specific to ReactJS.
+ * So this type may be misplaced in this package.
+ */
+/**
+ * Interface for component props that include a className property.
+ * The className property accepts a string value for CSS class names.
+ */
+export interface ClassNameProps {
+    className?: string | undefined;
+}
+//# sourceMappingURL=class-name.d.ts.map

package/esm/class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../src/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC9B,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC9B"}

package/esm/class-name.js

@@ -0,0 +1,6 @@
+/**
+ * Note that `className` could be specific to ReactJS.
+ * So this type may be misplaced in this package.
+ */
+export {};
+//# sourceMappingURL=class-name.js.map

package/esm/class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.js","sourceRoot":"","sources":["../src/class-name.ts"],"names":[],"mappings":"AAAA;;;GAGG"}

package/esm/css-properties.d.ts

@@ -0,0 +1,10 @@
+import type { Properties } from 'csstype';
+/**
+ * Extends CSS properties to include custom properties.
+ * Allows for string or number values for standard properties,
+ * and string values for custom properties with '--' prefix.
+ */
+export interface CSSProperties extends Properties<string | number> {
+    [k: `--${string}`]: string;
+}
+//# sourceMappingURL=css-properties.d.ts.map

package/esm/css-properties.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-properties.d.ts","sourceRoot":"","sources":["../src/css-properties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEzC;;;;GAIG;AACH,MAAM,WAAW,aAAc,SAAQ,UAAU,CAAC,MAAM,GAAG,MAAM,CAAC;IACjE,CAAC,CAAC,EAAE,KAAK,MAAM,EAAE,GAAG,MAAM,CAAA;CAC1B"}

package/esm/css-properties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=css-properties.js.map

package/esm/css-properties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-properties.js","sourceRoot":"","sources":["../src/css-properties.ts"],"names":[],"mappings":""}

package/esm/globals.ctx.d.ts

@@ -0,0 +1,6 @@
+export declare const ctx: {
+    matchMedia(query: string): MediaQueryList;
+    getDocumentElement(): HTMLElement;
+    _reset(): void;
+};
+//# sourceMappingURL=globals.ctx.d.ts.map

package/esm/globals.ctx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"globals.ctx.d.ts","sourceRoot":"","sources":["../src/globals.ctx.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,GAAG;sBACG,MAAM;;;CAUxB,CAAA"}

package/esm/globals.ctx.js

@@ -0,0 +1,13 @@
+export const ctx = {
+    matchMedia(query) {
+        return globalThis.matchMedia(query);
+    },
+    getDocumentElement() {
+        return globalThis.document.documentElement;
+    },
+    _reset() {
+        this.matchMedia = globalThis.matchMedia;
+        this.getDocumentElement = () => globalThis.document.documentElement;
+    },
+};
+//# sourceMappingURL=globals.ctx.js.map

package/esm/globals.ctx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globals.ctx.js","sourceRoot":"","sources":["../src/globals.ctx.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,GAAG,GAAG;IAClB,UAAU,CAAC,KAAa;QACvB,OAAO,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IACpC,CAAC;IACD,kBAAkB;QACjB,OAAO,UAAU,CAAC,QAAQ,CAAC,eAAe,CAAA;IAC3C,CAAC;IACD,MAAM;QACL,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,UAAU,CAAA;QACvC,IAAI,CAAC,kBAAkB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,eAAe,CAAA;IACpE,CAAC;CACD,CAAA"}

package/esm/index.d.ts

@@ -0,0 +1,9 @@
+export * from './class-name.ts';
+export * from './css-properties.ts';
+export * from './style.ts';
+export * from './theme/class-name.ts';
+export * from './theme/data-attribute.ts';
+export * from './utils/attribute.ts';
+export * from './utils/data-attribute.ts';
+export * from './utils/prefers-color-scheme.ts';
+//# sourceMappingURL=index.d.ts.map

package/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA"}

package/esm/index.js

@@ -0,0 +1,9 @@
+export * from "./class-name.js";
+export * from "./css-properties.js";
+export * from "./style.js";
+export * from "./theme/class-name.js";
+export * from "./theme/data-attribute.js";
+export * from "./utils/attribute.js";
+export * from "./utils/data-attribute.js";
+export * from "./utils/prefers-color-scheme.js";
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAA;AAC/B,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,iCAAiC,CAAA"}

package/esm/style.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from './css-properties.ts';
+/**
+ * Interface for component props that include a style property.
+ */
+export interface StyleProps {
+    style?: CSSProperties | undefined;
+}
+//# sourceMappingURL=style.d.ts.map

package/esm/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAA;CACjC"}

package/esm/style.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=style.js.map

package/esm/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../src/style.ts"],"names":[],"mappings":""}

package/esm/testing/log-panel.d.ts

@@ -0,0 +1,5 @@
+export declare function LogPanel({ title, log }: {
+    title: string;
+    log: string[];
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=log-panel.d.ts.map

package/esm/testing/log-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-panel.d.ts","sourceRoot":"","sources":["../../src/testing/log-panel.tsx"],"names":[],"mappings":"AAAA,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,EAAE,CAAA;CAAE,2CAWxE"}

package/esm/testing/log-panel.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function LogPanel({ title, log }) {
+    return (_jsxs("div", { className: "bg-neutral-100 p-4 rounded overflow-y-auto", children: [_jsx("h4", { className: "mb-2", children: title }), log.map((entry, i) => (_jsx("pre", { className: "font-mono", children: entry }, i)))] }));
+}
+//# sourceMappingURL=log-panel.js.map

package/esm/testing/log-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-panel.js","sourceRoot":"","sources":["../../src/testing/log-panel.tsx"],"names":[],"mappings":";AAAA,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,EAAoC;IACxE,OAAO,CACN,eAAK,SAAS,EAAC,4CAA4C,aAC1D,aAAI,SAAS,EAAC,MAAM,YAAE,KAAK,GAAM,EAChC,GAAG,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CACtB,cAAa,SAAS,EAAC,WAAW,YAChC,KAAK,IADG,CAAC,CAEL,CACN,CAAC,IACG,CACN,CAAA;AACF,CAAC"}

package/esm/testing/toggle-attribute-button.d.ts

@@ -0,0 +1,5 @@
+export declare const ToggleAttributeButton: import("react").ForwardRefExoticComponent<{
+    attribute: string;
+    values?: string[];
+} & import("react").RefAttributes<HTMLElement>>;
+//# sourceMappingURL=toggle-attribute-button.d.ts.map

package/esm/testing/toggle-attribute-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-attribute-button.d.ts","sourceRoot":"","sources":["../../src/testing/toggle-attribute-button.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB;eAAwC,MAAM;aAAW,MAAM,EAAE;+CA6BlG,CAAA"}

package/esm/testing/toggle-attribute-button.js

@@ -0,0 +1,19 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useCallback } from 'react';
+export const ToggleAttributeButton = forwardRef(({ attribute, values = ['test-value'] }, ref) => {
+    const handleAttributeChange = useCallback((attr) => {
+        // Handle both RefObject and function ref cases
+        const target = (ref && 'current' in ref ? ref.current : null) ?? document.documentElement;
+        const currentValue = target.getAttribute(attr);
+        const nextIndex = currentValue ? values.indexOf(currentValue) + 1 : 0;
+        const newValue = nextIndex < values.length ? values[nextIndex] : null;
+        if (newValue === null) {
+            target.removeAttribute(attr);
+        }
+        else {
+            target.setAttribute(attr, newValue);
+        }
+    }, [ref, values]);
+    return (_jsxs("button", { className: "bg-cyan-700 text-white px-4 py-2 rounded-md shadow-md active:bg-cyan-800", onClick: () => handleAttributeChange(attribute), children: ["Toggle ", attribute] }, attribute));
+});
+//# sourceMappingURL=toggle-attribute-button.js.map

package/esm/testing/toggle-attribute-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-attribute-button.js","sourceRoot":"","sources":["../../src/testing/toggle-attribute-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAE/C,MAAM,CAAC,MAAM,qBAAqB,GAAG,UAAU,CAC9C,CAAC,EAAE,SAAS,EAAE,MAAM,GAAG,CAAC,YAAY,CAAC,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,qBAAqB,GAAG,WAAW,CACxC,CAAC,IAAY,EAAE,EAAE;QAChB,+CAA+C;QAC/C,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,SAAS,IAAI,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,QAAQ,CAAC,eAAe,CAAA;QACzF,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;QAC9C,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACrE,MAAM,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,CAAE,CAAC,CAAC,CAAC,IAAI,CAAA;QAEtE,IAAI,QAAQ,KAAK,IAAI,EAAE,CAAC;YACvB,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC;aAAM,CAAC;YACP,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;QACpC,CAAC;IACF,CAAC,EACD,CAAC,GAAG,EAAE,MAAM,CAAC,CACb,CAAA;IAED,OAAO,CACN,kBAEC,SAAS,EAAC,0EAA0E,EACpF,OAAO,EAAE,GAAG,EAAE,CAAC,qBAAqB,CAAC,SAAS,CAAC,wBAEvC,SAAS,KAJZ,SAAS,CAKN,CACT,CAAA;AACF,CAAC,CACD,CAAA"}

package/esm/theme/class-name.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Gets the current theme by checking element class names against a themes map.
+ *
+ * @param options - Configuration options
+ * @param options.themes - Record mapping theme keys to their class name values
+ * @param options.defaultTheme - Fallback theme key if no matching class is found
+ * @param options.element - Element to check classes on (defaults to document.documentElement)
+ * @returns The matching theme key or defaultTheme if no match found
+ *
+ * @example
+ * ```ts
+ * const themes = {
+ *   light: 'theme-light',
+ *   dark: 'theme-dark'
+ * }
+ *
+ * // Get current theme from document.documentElement
+ * const theme = getThemeByClassName({
+ *   themes,
+ *   defaultTheme: 'light'
+ * })
+ *
+ * // Get theme from specific element
+ * const theme = getThemeByClassName({
+ *   themes,
+ *   element: myElement,
+ *   defaultTheme: 'light'
+ * })
+ * ```
+ */
+export declare function getThemeByClassName<Themes extends Record<string, string>>(options: {
+    themes: Themes;
+    defaultTheme?: keyof Themes | undefined;
+    element?: Element | undefined;
+}): keyof Themes | undefined;
+export declare function observeThemeByClassName<Themes extends Record<string, string>>(options: {
+    themes: Themes;
+    handler: (value: string | undefined) => void;
+    defaultTheme?: keyof Themes | undefined;
+    element?: Element | undefined;
+}): MutationObserver;
+//# sourceMappingURL=class-name.d.ts.map

package/esm/theme/class-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.d.ts","sourceRoot":"","sources":["../../src/theme/class-name.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,mBAAmB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE;IACnF,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,GAAG,MAAM,MAAM,GAAG,SAAS,CAK3B;AAED,wBAAgB,uBAAuB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE;IACvF,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAA;IAC5C,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,oBAmBA"}

package/esm/theme/class-name.js

@@ -0,0 +1,56 @@
+import { findKey } from 'type-plus';
+import { ctx } from "../globals.ctx.js";
+import { observeAttributes } from "../utils/attribute.js";
+/**
+ * Gets the current theme by checking element class names against a themes map.
+ *
+ * @param options - Configuration options
+ * @param options.themes - Record mapping theme keys to their class name values
+ * @param options.defaultTheme - Fallback theme key if no matching class is found
+ * @param options.element - Element to check classes on (defaults to document.documentElement)
+ * @returns The matching theme key or defaultTheme if no match found
+ *
+ * @example
+ * ```ts
+ * const themes = {
+ *   light: 'theme-light',
+ *   dark: 'theme-dark'
+ * }
+ *
+ * // Get current theme from document.documentElement
+ * const theme = getThemeByClassName({
+ *   themes,
+ *   defaultTheme: 'light'
+ * })
+ *
+ * // Get theme from specific element
+ * const theme = getThemeByClassName({
+ *   themes,
+ *   element: myElement,
+ *   defaultTheme: 'light'
+ * })
+ * ```
+ */
+export function getThemeByClassName(options) {
+    const element = options.element ?? ctx.getDocumentElement();
+    const className = element.className;
+    const theme = findKey(options.themes, (theme) => className.includes(options.themes[theme]));
+    return theme ?? options.defaultTheme;
+}
+export function observeThemeByClassName(options) {
+    return observeAttributes({
+        class: (value) => {
+            if (value === null) {
+                options.handler(options.defaultTheme);
+                return;
+            }
+            for (const name in options.themes) {
+                if (value.includes(options.themes[name])) {
+                    options.handler(name);
+                    break;
+                }
+            }
+        },
+    }, options.element);
+}
+//# sourceMappingURL=class-name.js.map

package/esm/theme/class-name.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"class-name.js","sourceRoot":"","sources":["../../src/theme/class-name.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AAEzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,UAAU,mBAAmB,CAAwC,OAI1E;IACA,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,GAAG,CAAC,kBAAkB,EAAE,CAAA;IAC3D,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,CAAA;IACnC,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAE,CAAC,CAAC,CAAA;IAC5F,OAAO,KAAK,IAAI,OAAO,CAAC,YAAY,CAAA;AACrC,CAAC;AAED,MAAM,UAAU,uBAAuB,CAAwC,OAK9E;IACA,OAAO,iBAAiB,CACvB;QACC,KAAK,EAAE,CAAC,KAAoB,EAAE,EAAE;YAC/B,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAC,OAAO,CAAC,YAAsB,CAAC,CAAA;gBAC/C,OAAM;YACP,CAAC;YAED,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;gBACnC,IAAI,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAE,CAAC,EAAE,CAAC;oBAC3C,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;oBACrB,MAAK;gBACN,CAAC;YACF,CAAC;QACF,CAAC;KACD,EACD,OAAO,CAAC,OAAO,CACf,CAAA;AACF,CAAC"}

package/esm/theme/data-attribute.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Gets the theme based on a data attribute value.
+ *
+ * @param options - Configuration options
+ * @param options.themes - Record mapping theme keys to their data attribute values
+ * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme
+ * @param options.attributeName - Name of the data attribute to check (must start with 'data-')
+ * @returns The matching theme key, or defaultTheme if no match found
+ *
+ * @example
+ * ```ts
+ * const themes = {
+ *   light: 'light',
+ *   dark: 'dark',
+ *   system: 'system'
+ * }
+ *
+ * // Get theme from data-theme attribute
+ * const theme = getThemeByDataAttribute({
+ *   themes,
+ *   defaultTheme: 'system',
+ *   attributeName: 'data-theme'
+ * })
+ * ```
+ */
+export declare function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
+    themes: Themes;
+    defaultTheme?: keyof Themes | undefined;
+    attributeName: `data-${string}`;
+    element?: Element | undefined;
+}): keyof Themes | undefined;
+/**
+ * Observes changes to a theme data attribute and calls a handler when it changes.
+ *
+ * @param options - Configuration options
+ * @param options.themes - Record mapping theme keys to their data attribute values
+ * @param options.handler - Callback function called with the new theme value or null when removed
+ * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme
+ * @param options.attributeName - Name of the data attribute to observe (must start with 'data-')
+ * @returns A MutationObserver that can be disconnected to stop observing
+ *
+ * @example
+ * ```ts
+ * const themes = {
+ *   light: 'light',
+ *   dark: 'dark'
+ * }
+ *
+ * // Observe data-theme attribute changes
+ * const observer = observeThemeByDataAttributes({
+ *   themes,
+ *   handler: (theme) => console.log('Theme changed to:', theme),
+ *   defaultTheme: 'light',
+ *   attributeName: 'data-theme'
+ * })
+ *
+ * // Stop observing
+ * observer.disconnect()
+ * ```
+ */
+export declare function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {
+    attributeName: `data-${string}`;
+    themes: Themes;
+    handler: (value: string | null) => void;
+    defaultTheme?: keyof Themes | undefined;
+    element?: Element | undefined;
+}): MutationObserver;
+//# sourceMappingURL=data-attribute.d.ts.map

package/esm/theme/data-attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-attribute.d.ts","sourceRoot":"","sources":["../../src/theme/data-attribute.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE;IACvF,MAAM,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,aAAa,EAAE,QAAQ,MAAM,EAAE,CAAA;IAC/B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,GAAG,MAAM,MAAM,GAAG,SAAS,CAM3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,wBAAgB,4BAA4B,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE;IAC5F,aAAa,EAAE,QAAQ,MAAM,EAAE,CAAA;IAC/B,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAA;IACvC,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,oBAmBA"}

package/esm/theme/data-attribute.js

@@ -0,0 +1,78 @@
+import { findKey } from 'type-plus';
+import { getDataAttribute, observeDataAttributes } from "../utils/data-attribute.js";
+/**
+ * Gets the theme based on a data attribute value.
+ *
+ * @param options - Configuration options
+ * @param options.themes - Record mapping theme keys to their data attribute values
+ * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme
+ * @param options.attributeName - Name of the data attribute to check (must start with 'data-')
+ * @returns The matching theme key, or defaultTheme if no match found
+ *
+ * @example
+ * ```ts
+ * const themes = {
+ *   light: 'light',
+ *   dark: 'dark',
+ *   system: 'system'
+ * }
+ *
+ * // Get theme from data-theme attribute
+ * const theme = getThemeByDataAttribute({
+ *   themes,
+ *   defaultTheme: 'system',
+ *   attributeName: 'data-theme'
+ * })
+ * ```
+ */
+export function getThemeByDataAttribute(options) {
+    const value = getDataAttribute(options.attributeName, options.element);
+    const theme = findKey(options.themes, (theme) => options.themes[theme] === value);
+    return theme ?? options.defaultTheme;
+}
+/**
+ * Observes changes to a theme data attribute and calls a handler when it changes.
+ *
+ * @param options - Configuration options
+ * @param options.themes - Record mapping theme keys to their data attribute values
+ * @param options.handler - Callback function called with the new theme value or null when removed
+ * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme
+ * @param options.attributeName - Name of the data attribute to observe (must start with 'data-')
+ * @returns A MutationObserver that can be disconnected to stop observing
+ *
+ * @example
+ * ```ts
+ * const themes = {
+ *   light: 'light',
+ *   dark: 'dark'
+ * }
+ *
+ * // Observe data-theme attribute changes
+ * const observer = observeThemeByDataAttributes({
+ *   themes,
+ *   handler: (theme) => console.log('Theme changed to:', theme),
+ *   defaultTheme: 'light',
+ *   attributeName: 'data-theme'
+ * })
+ *
+ * // Stop observing
+ * observer.disconnect()
+ * ```
+ */
+export function observeThemeByDataAttributes(options) {
+    return observeDataAttributes({
+        [options.attributeName]: (value) => {
+            if (value === null) {
+                options.handler(options.defaultTheme ?? null);
+                return;
+            }
+            for (const name in options.themes) {
+                if (options.themes[name] === value) {
+                    options.handler(name);
+                    break;
+                }
+            }
+        },
+    }, options.element);
+}
+//# sourceMappingURL=data-attribute.js.map

package/esm/theme/data-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-attribute.js","sourceRoot":"","sources":["../../src/theme/data-attribute.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAA;AACnC,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAA;AAEpF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,UAAU,uBAAuB,CAAwC,OAK9E;IACA,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,OAAO,CAAC,CAAA;IAEtE,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,KAAK,CAAC,CAAA;IAEjF,OAAO,KAAK,IAAI,OAAO,CAAC,YAAY,CAAA;AACrC,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,UAAU,4BAA4B,CAAwC,OAMnF;IACA,OAAO,qBAAqB,CAC3B;QACC,CAAC,OAAO,CAAC,aAAa,CAAC,EAAE,CAAC,KAAoB,EAAE,EAAE;YACjD,IAAI,KAAK,KAAK,IAAI,EAAE,CAAC;gBACpB,OAAO,CAAC,OAAO,CAAE,OAAO,CAAC,YAAuB,IAAI,IAAI,CAAC,CAAA;gBACzD,OAAM;YACP,CAAC;YAED,KAAK,MAAM,IAAI,IAAI,OAAO,CAAC,MAAM,EAAE,CAAC;gBACnC,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,KAAK,EAAE,CAAC;oBACpC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;oBACrB,MAAK;gBACN,CAAC;YACF,CAAC;QACF,CAAC;KACD,EACD,OAAO,CAAC,OAAO,CACf,CAAA;AACF,CAAC"}

package/esm/utils/attribute.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Gets the value of an attribute from an element.
+ *
+ * @param qualifiedName - The name of the attribute to get
+ * @param element - The element to get the attribute from. Defaults to `document.documentElement`
+ * @returns The attribute value cast to type T, or null if the attribute doesn't exist
+ *
+ * @example
+ * ```ts
+ * // Get theme from document root
+ * const theme = getAttribute('data-theme')
+ *
+ * // Get data-testid from a specific element
+ * const testId = getAttribute('data-testid', element)
+ * ```
+ */
+export declare function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined): T | null;
+/**
+ * Observes attributes changes on an element and calls corresponding handlers.
+ *
+ * @param handlers - An object mapping attribute names to handler functions.
+ * @param element - The element to observe. Defaults to `document.documentElement`.
+ * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.
+ *
+ * @example
+ * ```ts
+ * const observer = observeAttributes({
+ *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
+ *   'class': (attr, value) => console.log(`class changed to: ${value}`)
+ * });
+ *
+ * // Later, to stop observing:
+ * observer.disconnect();
+ * ```
+ */
+export declare function observeAttributes<T extends string>(handlers: Record<string, (value: T | null) => void>, element?: Element | undefined): MutationObserver;
+//# sourceMappingURL=attribute.d.ts.map

package/esm/utils/attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute.d.ts","sourceRoot":"","sources":["../../src/utils/attribute.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,MAAM,EAC5C,aAAa,EAAE,CAAC,EAChB,OAAO,GAAE,OAAO,GAAG,SAAoC,GAER,CAAC,GAAG,IAAI,CACvD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,iBAAiB,CAAC,CAAC,SAAS,MAAM,EACjD,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,EACnD,OAAO,GAAE,OAAO,GAAG,SAAoC,oBAcvD"}

package/esm/utils/attribute.js

@@ -0,0 +1,53 @@
+import { ctx } from "../globals.ctx.js";
+/**
+ * Gets the value of an attribute from an element.
+ *
+ * @param qualifiedName - The name of the attribute to get
+ * @param element - The element to get the attribute from. Defaults to `document.documentElement`
+ * @returns The attribute value cast to type T, or null if the attribute doesn't exist
+ *
+ * @example
+ * ```ts
+ * // Get theme from document root
+ * const theme = getAttribute('data-theme')
+ *
+ * // Get data-testid from a specific element
+ * const testId = getAttribute('data-testid', element)
+ * ```
+ */
+export function getAttribute(qualifiedName, element = ctx.getDocumentElement()) {
+    return element?.getAttribute(qualifiedName);
+}
+/**
+ * Observes attributes changes on an element and calls corresponding handlers.
+ *
+ * @param handlers - An object mapping attribute names to handler functions.
+ * @param element - The element to observe. Defaults to `document.documentElement`.
+ * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.
+ *
+ * @example
+ * ```ts
+ * const observer = observeAttributes({
+ *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
+ *   'class': (attr, value) => console.log(`class changed to: ${value}`)
+ * });
+ *
+ * // Later, to stop observing:
+ * observer.disconnect();
+ * ```
+ */
+export function observeAttributes(handlers, element = ctx.getDocumentElement()) {
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            const attribute = mutation.attributeName;
+            const value = element.getAttribute(attribute);
+            handlers[attribute]?.(value);
+        }
+    });
+    observer.observe(element, {
+        attributes: true,
+        attributeFilter: Object.keys(handlers),
+    });
+    return observer;
+}
+//# sourceMappingURL=attribute.js.map

package/esm/utils/attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attribute.js","sourceRoot":"","sources":["../../src/utils/attribute.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAEvC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,YAAY,CAC3B,aAAgB,EAChB,UAA+B,GAAG,CAAC,kBAAkB,EAAE;IAEvD,OAAO,OAAO,EAAE,YAAY,CAAC,aAAa,CAAa,CAAA;AACxD,CAAC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,iBAAiB,CAChC,QAAmD,EACnD,UAA+B,GAAG,CAAC,kBAAkB,EAAE;IAEvD,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;QACnD,KAAK,MAAM,QAAQ,IAAI,SAAS,EAAE,CAAC;YAClC,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAc,CAAA;YACzC,MAAM,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,SAAS,CAAa,CAAA;YACzD,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,CAAC,CAAA;QAC7B,CAAC;IACF,CAAC,CAAC,CAAA;IACF,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE;QACzB,UAAU,EAAE,IAAI;QAChB,eAAe,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC;KACtC,CAAC,CAAA;IACF,OAAO,QAAQ,CAAA;AAChB,CAAC"}

package/esm/utils/data-attribute.d.ts

@@ -0,0 +1,24 @@
+export declare function getDataAttribute<T extends `data-${string}`>(qualifiedName: T, element?: Element | undefined): T | null;
+/**
+ * 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. Defaults to `document.documentElement`
+ * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer
+ *
+ * @example
+ * ```ts
+ * const observer = observeDataAttributes({
+ *   handlers: {
+ *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
+ *   }
+ * });
+ *
+ * // Later, to stop observing:
+ * observer.disconnect();
+ * ```
+ */
+export declare function observeDataAttributes<T extends string, K extends `data-${string}`>(handlers: Record<K, (value: T | null) => void>, element?: Element | undefined): MutationObserver;
+//# sourceMappingURL=data-attribute.d.ts.map

package/esm/utils/data-attribute.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-attribute.d.ts","sourceRoot":"","sources":["../../src/utils/data-attribute.ts"],"names":[],"mappings":"AAGA,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,QAAQ,MAAM,EAAE,EAC1D,aAAa,EAAE,CAAC,EAChB,OAAO,GAAE,OAAO,GAAG,SAAoC,YAGvD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,qBAAqB,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,QAAQ,MAAM,EAAE,EACjF,QAAQ,EAAE,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC,EAC9C,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,oBAG7B"}

package/esm/utils/data-attribute.js

@@ -0,0 +1,30 @@
+import { ctx } from "../globals.ctx.js";
+import { getAttribute, observeAttributes } from "./attribute.js";
+export function getDataAttribute(qualifiedName, element = ctx.getDocumentElement()) {
+    return getAttribute(qualifiedName, element);
+}
+/**
+ * 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. Defaults to `document.documentElement`
+ * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer
+ *
+ * @example
+ * ```ts
+ * const observer = observeDataAttributes({
+ *   handlers: {
+ *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
+ *   }
+ * });
+ *
+ * // Later, to stop observing:
+ * observer.disconnect();
+ * ```
+ */
+export function observeDataAttributes(handlers, element) {
+    return observeAttributes(handlers, element);
+}
+//# sourceMappingURL=data-attribute.js.map

package/esm/utils/data-attribute.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-attribute.js","sourceRoot":"","sources":["../../src/utils/data-attribute.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AACvC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAEhE,MAAM,UAAU,gBAAgB,CAC/B,aAAgB,EAChB,UAA+B,GAAG,CAAC,kBAAkB,EAAE;IAEvD,OAAO,YAAY,CAAC,aAAa,EAAE,OAAO,CAAC,CAAA;AAC5C,CAAC;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,UAAU,qBAAqB,CACpC,QAA8C,EAC9C,OAA6B;IAE7B,OAAO,iBAAiB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAA;AAC5C,CAAC"}