@just-web/css 0.3.0 → 0.5.0

package/cjs/css-properties/to_dom_style.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from './css-properties.ts';
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export declare function toDOMStyle(style: CSSProperties | undefined): Partial<CSSStyleDeclaration> | undefined;

package/cjs/css-properties/to_dom_style.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toDOMStyle = toDOMStyle;
+function toDOMStyle(style) {
+  if (style === void 0) return void 0;
+  const result = {};
+  for (const [key, value] of Object.entries(style)) {
+    result[key.startsWith("--") ? key : key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)] = value;
+  }
+  return result;
+}

package/cjs/index.d.ts

@@ -1,4 +1,5 @@
 export * from './css-properties/css-properties.ts';
+export * from './css-properties/to_dom_style.ts';
 export * from './props/class-name.ts';
 export * from './props/style.ts';
 export * from './theme/class-name.ts';

package/cjs/index.js

@@ -14,6 +14,17 @@ Object.keys(_cssProperties).forEach(function (key) {
     }
   });
 });
+var _to_dom_style = require("./css-properties/to_dom_style.ts");
+Object.keys(_to_dom_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _to_dom_style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _to_dom_style[key];
+    }
+  });
+});
 var _className = require("./props/class-name.ts");
 Object.keys(_className).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -5,6 +5,7 @@
  * @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-')
+ * @param options.allowCustom - Whether to allow custom themes value
  * @returns The matching theme key, or defaultTheme if no match found
  *
  * @example
@@ -24,11 +25,18 @@
  * ```
  */
 export declare function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
-    themes: Themes;
-    defaultTheme?: keyof Themes | undefined;
     attributeName: `data-${string}`;
+    defaultTheme?: keyof Themes | undefined;
+    themes: Themes;
     element?: Element | undefined;
 }): keyof Themes | undefined;
+export declare function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
+    attributeName: `data-${string}`;
+    allowCustom: true | undefined;
+    defaultTheme?: keyof Themes | undefined;
+    themes: Themes;
+    element?: Element | undefined;
+}): string | undefined;
 /**
  * Observes changes to a theme data attribute and calls a handler when it changes.
  *
@@ -65,3 +73,11 @@ export declare function observeThemeByDataAttributes<Themes extends Record<strin
     defaultTheme?: keyof Themes | undefined;
     element?: Element | undefined;
 }): MutationObserver;
+export declare function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {
+    attributeName: `data-${string}`;
+    themes: Themes;
+    handler: (value: string | null) => void;
+    allowCustom: true | undefined;
+    defaultTheme?: keyof Themes | undefined;
+    element?: Element | undefined;
+}): MutationObserver;

package/cjs/theme/data-attribute.js

@@ -8,9 +8,9 @@ exports.observeThemeByDataAttributes = observeThemeByDataAttributes;
 var _typePlus = require("type-plus");
 var _dataAttribute = require("../utils/data-attribute.ts");
 function getThemeByDataAttribute(options) {
-  const value = (0, _dataAttribute.getDataAttribute)(options.attributeName, options.element);
+  const value = (0, _dataAttribute.getDataAttribute)(options.attributeName, options.element) ?? void 0;
   const theme = (0, _typePlus.findKey)(options.themes, theme2 => options.themes[theme2] === value);
-  return theme ?? options.defaultTheme;
+  return theme ?? options.defaultTheme ?? (options.allowCustom ? value : void 0);
 }
 function observeThemeByDataAttributes(options) {
   return (0, _dataAttribute.observeDataAttributes)({
@@ -22,9 +22,12 @@ function observeThemeByDataAttributes(options) {
       for (const name in options.themes) {
         if (options.themes[name] === value) {
           options.handler(name);
-          break;
+          return;
         }
       }
+      if (options.allowCustom) {
+        options.handler(value);
+      }
     }
   }, options.element);
 }

package/cjs/utils/attribute.d.ts

@@ -14,7 +14,7 @@
  * const testId = getAttribute('data-testid', element)
  * ```
  */
-export declare function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined): T | null;
+export declare function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined): string | null;
 /**
  * Observes attributes changes on an element and calls corresponding handlers.
  *

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

@@ -1,4 +1,4 @@
-export declare function getDataAttribute<T extends `data-${string}`>(qualifiedName: T, element?: Element | undefined): T | null;
+export declare function getDataAttribute<T extends `data-${string}`>(qualifiedName: T, element?: Element | undefined): string | null;
 /**
  * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
  *

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

@@ -0,0 +1,20 @@
+import type { CSSProperties } from './css-properties.ts';
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export declare function toDOMStyle(style: CSSProperties | undefined): Partial<CSSStyleDeclaration> | undefined;
+//# sourceMappingURL=to_dom_style.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"to_dom_style.d.ts","sourceRoot":"","sources":["../../src/css-properties/to_dom_style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAA;AAExD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC,mBAAmB,CAAC,GAAG,SAAS,CAUrG"}

package/esm/css-properties/to_dom_style.js

@@ -0,0 +1,27 @@
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export function toDOMStyle(style) {
+    if (style === undefined)
+        return undefined;
+    const result = {};
+    for (const [key, value] of Object.entries(style)) {
+        result[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value;
+    }
+    return result;
+}
+//# sourceMappingURL=to_dom_style.js.map

package/esm/css-properties/to_dom_style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"to_dom_style.js","sourceRoot":"","sources":["../../src/css-properties/to_dom_style.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,UAAU,CAAC,KAAgC;IAC1D,IAAI,KAAK,KAAK,SAAS;QAAE,OAAO,SAAS,CAAA;IAEzC,MAAM,MAAM,GAAG,EAAS,CAAA;IAExB,KAAK,MAAM,CAAC,GAAG,EAAE,KAAK,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;QAClD,MAAM,CAAC,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,GAAG,KAAK,CAAA;IACzG,CAAC;IAED,OAAO,MAAM,CAAA;AACd,CAAC"}

package/esm/index.d.ts

@@ -1,4 +1,5 @@
 export * from './css-properties/css-properties.ts';
+export * from './css-properties/to_dom_style.ts';
 export * from './props/class-name.ts';
 export * from './props/style.ts';
 export * from './theme/class-name.ts';

package/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

package/esm/index.js

@@ -1,4 +1,5 @@
 export * from "./css-properties/css-properties.js";
+export * from "./css-properties/to_dom_style.js";
 export * from "./props/class-name.js";
 export * from "./props/style.js";
 export * from "./theme/class-name.js";

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAA;AAClD,cAAc,kCAAkC,CAAA;AAChD,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,2BAA2B,CAAA;AACzC,cAAc,sBAAsB,CAAA;AACpC,cAAc,2BAA2B,CAAA;AACzC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,iCAAiC,CAAA"}

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

@@ -5,6 +5,7 @@
  * @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-')
+ * @param options.allowCustom - Whether to allow custom themes value
  * @returns The matching theme key, or defaultTheme if no match found
  *
  * @example
@@ -24,11 +25,18 @@
  * ```
  */
 export declare function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
-    themes: Themes;
-    defaultTheme?: keyof Themes | undefined;
     attributeName: `data-${string}`;
+    defaultTheme?: keyof Themes | undefined;
+    themes: Themes;
     element?: Element | undefined;
 }): keyof Themes | undefined;
+export declare function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
+    attributeName: `data-${string}`;
+    allowCustom: true | undefined;
+    defaultTheme?: keyof Themes | undefined;
+    themes: Themes;
+    element?: Element | undefined;
+}): string | undefined;
 /**
  * Observes changes to a theme data attribute and calls a handler when it changes.
  *
@@ -65,4 +73,12 @@ export declare function observeThemeByDataAttributes<Themes extends Record<strin
     defaultTheme?: keyof Themes | undefined;
     element?: Element | undefined;
 }): MutationObserver;
+export declare function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {
+    attributeName: `data-${string}`;
+    themes: Themes;
+    handler: (value: string | null) => void;
+    allowCustom: true | undefined;
+    defaultTheme?: keyof Themes | undefined;
+    element?: Element | undefined;
+}): MutationObserver;
 //# sourceMappingURL=data-attribute.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"data-attribute.d.ts","sourceRoot":"","sources":["../../src/theme/data-attribute.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,uBAAuB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE;IACvF,aAAa,EAAE,QAAQ,MAAM,EAAE,CAAA;IAC/B,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,GAAG,MAAM,MAAM,GAAG,SAAS,CAAA;AAC5B,wBAAgB,uBAAuB,CAAC,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EAAE,OAAO,EAAE;IACvF,aAAa,EAAE,QAAQ,MAAM,EAAE,CAAA;IAC/B,WAAW,EAAE,IAAI,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,GAAG,MAAM,GAAG,SAAS,CAAA;AActB;;;;;;;;;;;;;;;;;;;;;;;;;;;;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,GAAG,gBAAgB,CAAA;AACpB,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,WAAW,EAAE,IAAI,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,MAAM,MAAM,GAAG,SAAS,CAAA;IACvC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAA;CAC7B,GAAG,gBAAgB,CAAA"}

package/esm/theme/data-attribute.js

@@ -1,64 +1,10 @@
 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 value = getDataAttribute(options.attributeName, options.element) ?? undefined;
     const theme = findKey(options.themes, (theme) => options.themes[theme] === value);
-    return theme ?? options.defaultTheme;
+    return theme ?? options.defaultTheme ?? (options.allowCustom ? value : 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 function observeThemeByDataAttributes(options) {
     return observeDataAttributes({
         [options.attributeName]: (value) => {
@@ -69,9 +15,12 @@ export function observeThemeByDataAttributes(options) {
             for (const name in options.themes) {
                 if (options.themes[name] === value) {
                     options.handler(name);
-                    break;
+                    return;
                 }
             }
+            if (options.allowCustom) {
+                options.handler(value);
+            }
         },
     }, options.element);
 }

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

@@ -1 +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"}
+{"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;AAyCpF,MAAM,UAAU,uBAAuB,CAAwC,OAM9E;IACA,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,aAAa,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI,SAAS,CAAA;IACnF,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,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAA;AAClF,CAAC;AA8CD,MAAM,UAAU,4BAA4B,CAAwC,OAOnF;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,OAAM;gBACP,CAAC;YACF,CAAC;YAED,IAAI,OAAO,CAAC,WAAW,EAAE,CAAC;gBACzB,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YACvB,CAAC;QACF,CAAC;KACD,EACD,OAAO,CAAC,OAAO,CACf,CAAA;AACF,CAAC"}

package/esm/utils/attribute.d.ts

@@ -14,7 +14,7 @@
  * const testId = getAttribute('data-testid', element)
  * ```
  */
-export declare function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined): T | null;
+export declare function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined): string | null;
 /**
  * Observes attributes changes on an element and calls corresponding handlers.
  *

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

@@ -1 +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"}
+{"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,iBAGvD;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.map

@@ -1 +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"}
+{"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,CAAC,CAAA;AAC5C,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

@@ -1,4 +1,4 @@
-export declare function getDataAttribute<T extends `data-${string}`>(qualifiedName: T, element?: Element | undefined): T | null;
+export declare function getDataAttribute<T extends `data-${string}`>(qualifiedName: T, element?: Element | undefined): string | null;
 /**
  * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
  *

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

@@ -1 +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"}
+{"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,iBAGvD;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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/css",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "CSS types and utilities",
   "type": "module",
   "exports": {

package/src/css-properties/to_dom_style.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from './css-properties.ts'
+
+/**
+ * Converts React-style CSS properties to DOM style properties.
+ * This function handles both standard CSS properties and custom properties,
+ * ensuring proper formatting for DOM style application.
+ *
+ * @param style - React-style CSS properties object
+ * @returns CSSStyleDeclaration compatible object for DOM style application
+ *
+ * @example
+ * ```ts
+ * const domStyle = toDOMStyle({
+ *   backgroundColor: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * element.style = domStyle
+ * ```
+ */
+export function toDOMStyle(style: CSSProperties | undefined): Partial<CSSStyleDeclaration> | undefined {
+	if (style === undefined) return undefined
+
+	const result = {} as any
+
+	for (const [key, value] of Object.entries(style)) {
+		result[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value
+	}
+
+	return result
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from './css-properties/css-properties.ts'
+export * from './css-properties/to_dom_style.ts'
 export * from './props/class-name.ts'
 export * from './props/style.ts'
 export * from './theme/class-name.ts'

package/src/theme/data-attribute.ts

@@ -8,6 +8,7 @@ import { getDataAttribute, observeDataAttributes } from '../utils/data-attribute
  * @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-')
+ * @param options.allowCustom - Whether to allow custom themes value
  * @returns The matching theme key, or defaultTheme if no match found
  *
  * @example
@@ -27,16 +28,29 @@ import { getDataAttribute, observeDataAttributes } from '../utils/data-attribute
  * ```
  */
 export function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
+	attributeName: `data-${string}`
+	defaultTheme?: keyof Themes | undefined
 	themes: Themes
+	element?: Element | undefined
+}): keyof Themes | undefined
+export function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
+	attributeName: `data-${string}`
+	allowCustom: true | undefined
 	defaultTheme?: keyof Themes | undefined
+	themes: Themes
+	element?: Element | undefined
+}): string | undefined
+export function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {
 	attributeName: `data-${string}`
+	allowCustom?: boolean | undefined
+	defaultTheme?: keyof Themes | undefined
+	themes: Themes
 	element?: Element | undefined
 }): keyof Themes | undefined {
-	const value = getDataAttribute(options.attributeName, options.element)
-
+	const value = getDataAttribute(options.attributeName, options.element) ?? undefined
 	const theme = findKey(options.themes, (theme) => options.themes[theme] === value)
 
-	return theme ?? options.defaultTheme
+	return theme ?? options.defaultTheme ?? (options.allowCustom ? value : undefined)
 }
 
 /**
@@ -74,7 +88,23 @@ export function observeThemeByDataAttributes<Themes extends Record<string, strin
 	handler: (value: string | null) => void
 	defaultTheme?: keyof Themes | undefined
 	element?: Element | undefined
-}) {
+}): MutationObserver
+export function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {
+	attributeName: `data-${string}`
+	themes: Themes
+	handler: (value: string | null) => void
+	allowCustom: true | undefined
+	defaultTheme?: keyof Themes | undefined
+	element?: Element | undefined
+}): MutationObserver
+export function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {
+	attributeName: `data-${string}`
+	themes: Themes
+	handler: (value: string | null) => void
+	allowCustom?: boolean | undefined
+	defaultTheme?: keyof Themes | undefined
+	element?: Element | undefined
+}): MutationObserver {
 	return observeDataAttributes(
 		{
 			[options.attributeName]: (value: string | null) => {
@@ -86,9 +116,13 @@ export function observeThemeByDataAttributes<Themes extends Record<string, strin
 				for (const name in options.themes) {
 					if (options.themes[name] === value) {
 						options.handler(name)
-						break
+						return
 					}
 				}
+
+				if (options.allowCustom) {
+					options.handler(value)
+				}
 			},
 		},
 		options.element,

package/src/utils/attribute.ts

@@ -20,7 +20,7 @@ export function getAttribute<T extends string>(
 	qualifiedName: T,
 	element: Element | undefined = ctx.getDocumentElement(),
 ) {
-	return element?.getAttribute(qualifiedName) as T | null
+	return element?.getAttribute(qualifiedName)
 }
 
 /**