@just-web/css 0.6.1 → 0.8.0

package/cjs/convertors/px_2_rem.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.px2rem = px2rem;
-function px2rem(px, options) {
-  const {
-    base = 16,
-    precision = 4
-  } = options ?? {};
-  if (typeof px === "string") {
-    px = px.replace(/px$/, "");
-    px = Number.parseFloat(px);
-  }
-  return Number((px / base).toFixed(precision));
-}

package/cjs/convertors/rem_2_px.d.ts

@@ -1,21 +0,0 @@
-/**
- * Converts rem values to pixel units.
- *
- * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
- * @param options - Optional configuration
- * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
- * @param options.precision - Number of decimal places in the output. Defaults to 4
- * @returns The converted value as a string with 'px' units
- *
- * @example
- * ```ts
- * rem2px(1) // '16.0000'
- * rem2px('2rem') // '32.0000'
- * rem2px(1, { base: 20 }) // '20.0000'
- * rem2px(0.8125, { precision: 2 }) // '13.00'
- * ```
- */
-export declare function rem2px(rem: number | string, options?: {
-    base?: number | undefined;
-    precision?: number | undefined;
-}): number;

package/cjs/convertors/rem_2_px.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.rem2px = rem2px;
-function rem2px(rem, options) {
-  const {
-    base = 16,
-    precision = 4
-  } = options ?? {};
-  if (typeof rem === "string") {
-    rem = rem.replace(/rem$/, "");
-    rem = Number.parseFloat(rem);
-  }
-  return Number((rem * base).toFixed(precision));
-}

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

@@ -1,9 +0,0 @@
-"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

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

@@ -1,14 +0,0 @@
-"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

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

package/cjs/globals.ctx.js

@@ -1,18 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-export * from './convertors/px_2_rem.ts';
-export * from './convertors/rem_2_px.ts';
-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

@@ -1,137 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _px_2_rem = require("./convertors/px_2_rem.ts");
-Object.keys(_px_2_rem).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _px_2_rem[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _px_2_rem[key];
-    }
-  });
-});
-var _rem_2_px = require("./convertors/rem_2_px.ts");
-Object.keys(_rem_2_px).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _rem_2_px[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _rem_2_px[key];
-    }
-  });
-});
-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

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

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

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

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

package/cjs/props/style.d.ts

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

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

package/cjs/tailwind.css

@@ -1 +0,0 @@
-@import "tailwindcss";@custom-variant dark (&:where(.dark, .dark *));

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

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

package/cjs/testing/log-panel.js

@@ -1,19 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LogPanel = LogPanel;
-function LogPanel({
-  title,
-  log
-}) {
-  return /* @__PURE__ */React.createElement("div", {
-    className: "bg-neutral-100 dark:bg-neutral-900 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

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

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

@@ -1,28 +0,0 @@
-"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

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

@@ -1,32 +0,0 @@
-"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

@@ -1,83 +0,0 @@
-/**
- * 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-')
- * @param options.allowCustom - Whether to allow custom themes value
- * @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: {
-    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.
- *
- * @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;
-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

@@ -1,33 +0,0 @@
-"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) ?? void 0;
-  const theme = (0, _typePlus.findKey)(options.themes, theme2 => options.themes[theme2] === value);
-  return theme ?? options.defaultTheme ?? (options.allowCustom ? value : void 0);
-}
-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);
-          return;
-        }
-      }
-      if (options.allowCustom) {
-        options.handler(value);
-      }
-    }
-  }, options.element);
-}

package/cjs/utils/attribute.d.ts

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

@@ -1,25 +0,0 @@
-"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

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