@just-web/css 0.2.0 → 0.4.0

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

@@ -0,0 +1,26 @@
+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;
+}
+/**
+ * Defines CSS properties including custom properties.
+ * This function is used to properly type CSS properties when defining styles,
+ * especially when using CSS custom properties (variables).
+ *
+ * @param style - CSS properties object that can include both standard and custom properties
+ * @returns The same style object with proper typing
+ *
+ * @example
+ * ```ts
+ * defineCSSProperties({
+ *   color: 'red',
+ *   '--custom-color': '#ff0000'
+ * })
+ * ```
+ */
+export declare function defineCSSProperties(style: CSSProperties): any;

package/cjs/css-properties/css-properties.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defineCSSProperties = defineCSSProperties;
+function defineCSSProperties(style) {
+  return style;
+}

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/globals.ctx.d.ts

@@ -0,0 +1,5 @@
+export declare const ctx: {
+    matchMedia(query: string): MediaQueryList;
+    getDocumentElement(): HTMLElement;
+    _reset(): void;
+};

package/cjs/globals.ctx.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ctx = void 0;
+const ctx = exports.ctx = {
+  matchMedia(query) {
+    return globalThis.matchMedia(query);
+  },
+  getDocumentElement() {
+    return globalThis.document.documentElement;
+  },
+  _reset() {
+    this.matchMedia = globalThis.matchMedia;
+    this.getDocumentElement = () => globalThis.document.documentElement;
+  }
+};

package/cjs/index.d.ts

@@ -0,0 +1,10 @@
+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';
+export * from './theme/data-attribute.ts';
+export * from './utils/attribute.ts';
+export * from './utils/data-attribute.ts';
+export * from './utils/get-css-prop-values.ts';
+export * from './utils/prefers-color-scheme.ts';

package/cjs/index.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _cssProperties = require("./css-properties/css-properties.ts");
+Object.keys(_cssProperties).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _cssProperties[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _cssProperties[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;
+  if (key in exports && exports[key] === _className[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _className[key];
+    }
+  });
+});
+var _style = require("./props/style.ts");
+Object.keys(_style).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _style[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _style[key];
+    }
+  });
+});
+var _className2 = require("./theme/class-name.ts");
+Object.keys(_className2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _className2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _className2[key];
+    }
+  });
+});
+var _dataAttribute = require("./theme/data-attribute.ts");
+Object.keys(_dataAttribute).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dataAttribute[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dataAttribute[key];
+    }
+  });
+});
+var _attribute = require("./utils/attribute.ts");
+Object.keys(_attribute).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _attribute[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _attribute[key];
+    }
+  });
+});
+var _dataAttribute2 = require("./utils/data-attribute.ts");
+Object.keys(_dataAttribute2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dataAttribute2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dataAttribute2[key];
+    }
+  });
+});
+var _getCssPropValues = require("./utils/get-css-prop-values.ts");
+Object.keys(_getCssPropValues).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _getCssPropValues[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _getCssPropValues[key];
+    }
+  });
+});
+var _prefersColorScheme = require("./utils/prefers-color-scheme.ts");
+Object.keys(_prefersColorScheme).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _prefersColorScheme[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _prefersColorScheme[key];
+    }
+  });
+});

package/cjs/package.json

@@ -0,0 +1 @@
+{ "type": "commonjs" }

package/cjs/props/class-name.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 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;
+}

package/cjs/props/class-name.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/props/style.d.ts

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

package/cjs/props/style.js

@@ -0,0 +1 @@
+"use strict";

package/cjs/tailwind.css

@@ -0,0 +1 @@
+@import "tailwindcss";

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

@@ -0,0 +1,4 @@
+export declare function LogPanel({ title, log }: {
+    title: string;
+    log: string[];
+}): import("react").JSX.Element;

package/cjs/testing/log-panel.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LogPanel = LogPanel;
+function LogPanel({
+  title,
+  log
+}) {
+  return /* @__PURE__ */React.createElement("div", {
+    className: "bg-neutral-100 p-4 rounded overflow-y-auto"
+  }, /* @__PURE__ */React.createElement("h4", {
+    className: "mb-2"
+  }, title), log.map((entry, i) => /* @__PURE__ */React.createElement("pre", {
+    key: i,
+    className: "font-mono"
+  }, entry)));
+}

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

@@ -0,0 +1,4 @@
+export declare const ToggleAttributeButton: import("react").ForwardRefExoticComponent<{
+    attribute: string;
+    values?: string[];
+} & import("react").RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ToggleAttributeButton = void 0;
+var _react = require("react");
+const ToggleAttributeButton = exports.ToggleAttributeButton = (0, _react.forwardRef)(({
+  attribute,
+  values = ["test-value"]
+}, ref) => {
+  const handleAttributeChange = (0, _react.useCallback)(attr => {
+    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 /* @__PURE__ */React.createElement("button", {
+    key: attribute,
+    className: "bg-cyan-700 text-white px-4 py-2 rounded-md shadow-md active:bg-cyan-800",
+    onClick: () => handleAttributeChange(attribute)
+  }, "Toggle ", attribute);
+});

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

@@ -0,0 +1,41 @@
+/**
+ * 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;

package/cjs/theme/class-name.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getThemeByClassName = getThemeByClassName;
+exports.observeThemeByClassName = observeThemeByClassName;
+var _typePlus = require("type-plus");
+var _globalsCtx = require("../globals.ctx.ts");
+var _attribute = require("../utils/attribute.ts");
+function getThemeByClassName(options) {
+  const element = options.element ?? _globalsCtx.ctx.getDocumentElement();
+  const className = element.className;
+  const theme = (0, _typePlus.findKey)(options.themes, theme2 => className.includes(options.themes[theme2]));
+  return theme ?? options.defaultTheme;
+}
+function observeThemeByClassName(options) {
+  return (0, _attribute.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);
+}

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

@@ -0,0 +1,67 @@
+/**
+ * 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;

package/cjs/theme/data-attribute.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getThemeByDataAttribute = getThemeByDataAttribute;
+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 theme = (0, _typePlus.findKey)(options.themes, theme2 => options.themes[theme2] === value);
+  return theme ?? options.defaultTheme;
+}
+function observeThemeByDataAttributes(options) {
+  return (0, _dataAttribute.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);
+}

package/cjs/utils/attribute.d.ts

@@ -0,0 +1,36 @@
+/**
+ * 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;

package/cjs/utils/attribute.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAttribute = getAttribute;
+exports.observeAttributes = observeAttributes;
+var _globalsCtx = require("../globals.ctx.ts");
+function getAttribute(qualifiedName, element = _globalsCtx.ctx.getDocumentElement()) {
+  return element?.getAttribute(qualifiedName);
+}
+function observeAttributes(handlers, element = _globalsCtx.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;
+}

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

@@ -0,0 +1,23 @@
+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;

package/cjs/utils/data-attribute.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDataAttribute = getDataAttribute;
+exports.observeDataAttributes = observeDataAttributes;
+var _globalsCtx = require("../globals.ctx.ts");
+var _attribute = require("./attribute.ts");
+function getDataAttribute(qualifiedName, element = _globalsCtx.ctx.getDocumentElement()) {
+  return (0, _attribute.getAttribute)(qualifiedName, element);
+}
+function observeDataAttributes(handlers, element) {
+  return (0, _attribute.observeAttributes)(handlers, element);
+}

package/cjs/utils/get-css-prop-values.d.ts

@@ -0,0 +1,16 @@
+import type { CreateTuple } from 'type-plus';
+/**
+ * Retrieves CSS custom property values from the specified element.
+ *
+ * @param element - The HTML element to get property values from
+ * @param props - CSS custom property names to retrieve, must be in the format `--property-name`
+ * @returns Array of property values corresponding to the requested custom properties
+ */
+export declare function getCSSPropValues<Props extends Array<`--${string}`>>(element: HTMLElement, ...props: Props): CreateTuple<Props['length'], string>;
+/**
+ * Retrieves CSS custom property values from `document.body`.
+ *
+ * @param props - CSS custom property names to retrieve, must be in the format `--property-name`
+ * @returns Array of property values corresponding to the requested custom properties
+ */
+export declare function getCSSPropValues<Props extends Array<`--${string}`>>(...props: Props): CreateTuple<Props['length'], string>;

package/cjs/utils/get-css-prop-values.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCSSPropValues = getCSSPropValues;
+function getCSSPropValues(element, ...props) {
+  if (typeof element === "string") {
+    return getCSSPropValues(globalThis.document.body, element, ...props);
+  }
+  const style = globalThis.getComputedStyle(element);
+  return props.map(v => style.getPropertyValue(v));
+}

package/cjs/utils/prefers-color-scheme.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Observes system color scheme preference changes and calls handlers when they occur.
+ *
+ * @param themes - An object mapping theme names to handler functions that are called when that theme is activated
+ * @returns A cleanup function that removes all event listeners
+ *
+ * @example
+ * ```ts
+ * // Observe light/dark mode changes
+ * const cleanup = observePrefersColorScheme({
+ *   light: (theme) => console.log('Light mode activated'),
+ *   dark: (theme) => console.log('Dark mode activated')
+ * })
+ *
+ * // Later, to stop observing:
+ * cleanup()
+ * ```
+ */
+export declare function observePrefersColorScheme<T extends string>(themes: Record<T, (value: T | null) => void>): () => void;
+/**
+ * Gets the current preferred color theme from the system settings.
+ *
+ * @param themes - A list of theme names to check against the system preference
+ * @returns The first matching theme from the provided list, or null if none match
+ *
+ * @example
+ * ```ts
+ * // Check if system prefers light or dark mode
+ * const theme = getPrefersColorTheme('light', 'dark')
+ * // Returns 'light', 'dark', or null
+ * ```
+ */
+export declare function getPrefersColorTheme<T extends string>(...themes: T[]): any;

package/cjs/utils/prefers-color-scheme.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPrefersColorTheme = getPrefersColorTheme;
+exports.observePrefersColorScheme = observePrefersColorScheme;
+var _typePlus = require("type-plus");
+var _globalsCtx = require("../globals.ctx.ts");
+function observePrefersColorScheme(themes) {
+  const removers = (0, _typePlus.mapKey)(themes, t => {
+    const m = _globalsCtx.ctx.matchMedia(`(prefers-color-scheme: ${t})`);
+    const listener = event => {
+      if (event.matches) {
+        themes[t]?.(t);
+      }
+    };
+    m.addEventListener("change", listener);
+    return () => m.removeEventListener("change", listener);
+  });
+  return () => {
+    for (const remover of removers) {
+      remover();
+    }
+  };
+}
+function getPrefersColorTheme(...themes) {
+  return themes.find(theme => _globalsCtx.ctx.matchMedia(`(prefers-color-scheme: ${theme})`).matches) ?? null;
+}

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/css",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "CSS types and utilities",
   "type": "module",
   "exports": {
@@ -10,7 +10,10 @@
     },
     "./package.json": "./package.json"
   },
+  "main": "./cjs/index.js",
+  "types": "./cjs/index.d.ts",
   "files": [
+    "cjs",
     "esm",
     "src",
     "!**/*.{spec,test,unit,accept,integrate,system,stories}.*",
@@ -38,6 +41,7 @@
     "@vitest/browser": "^3.1.3",
     "@vitest/coverage-v8": "^3.1.3",
     "dedent": "^1.6.0",
+    "ncp": "^2.0.0",
     "playwright": "^1.52.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -49,6 +53,7 @@
     "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^4.1.6",
     "typescript": "^5.8.3",
+    "unbuild": "^3.5.0",
     "vite": "^6.3.5",
     "vitest": "^3.1.3",
     "vitest-browser-react": "^0.1.1",
@@ -57,6 +62,7 @@
   "scripts": {
     "build": "run-p build:*",
     "build-doc": "storybook build -o ../../docs/css",
+    "build:cjs": "unbuild && ncp ../../tools/ts/package.cjs.json ./cjs/package.json",
     "build:esm": "tsc -p tsconfig.esm.json",
     "clean": "rimraf .turbo esm *.tsbuildinfo",
     "cov": "vitest run --coverage",

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'