npm - @just-web/css - Versions diffs - 0.8.1 → 0.8.3 - Mend

@just-web/css 0.8.1 → 0.8.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/cjs/index.cjs.map +1 -1
package/cjs/index.d.cts +2 -2
package/cjs/index.d.cts.map +1 -1
package/esm/index.d.mts +2 -2
package/esm/index.d.mts.map +1 -1
package/esm/index.mjs.map +1 -1
package/package.json +1 -1
package/src/index.ts +1 -1
package/src/properties/css_properties.ts +3 -3
package/src/properties/properties.ts +3 -3

package/cjs/index.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.cjs","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/globals.ctx.ts","../src/utils/attribute.ts","../src/theme/class-name.ts","../src/utils/data-attribute.ts","../src/theme/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":["/*\n Converts pixel values to numbers.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @returns The numeric value\n \n @example\n * ```ts\n * px2num(16) // 16\n * px2num('32px') // 32\n * px2num('12.5px') // 12.5\n * px2num('0px') // 0\n * ```\n /\nexport function px2num(px: number \| string \| undefined): number {\n\treturn typeof px === 'string' ? Number.parseFloat(px.replace(/px$/, '')) : Number(px)\n}\n","/\n Converts pixel values to rem units.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'rem' units\n \n @example\n * ```ts\n * px2rem(16) // '1.0000'\n * px2rem('32px') // '2.0000'\n * px2rem(20, { base: 20 }) // '1.0000'\n * px2rem(13, { precision: 2 }) // '0.81'\n * ```\n /\nexport function px2rem(\n\tpx: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n","/\n Converts rem values to pixel units.\n \n @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n \n @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n /\nexport function rem2px(\n\trem: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem base).toFixed(precision))\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/** Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Widens CSS properties to support custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n * Defined as a union so plain Properties (e.g. from React) are assignable.\n /\nexport type CSSProperties<TLength = string \| number, TTime = string & {}> =\n\t\| CSSTypeProperties<TLength, TTime>\n\t\| (CSSTypeProperties<TLength, TTime> & CustomProperties)\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @deprecated Use `defineProperties` instead.\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineCSSProperties(style: CSSProperties) {\n\treturn style as any\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/* Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Extends CSS properties to include custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n /\nexport type Properties<TLength = 0 \| (string & {}), TTime = string & {}> =\n\t\| CSSTypeProperties<TLength, TTime>\n\t\| (CSSTypeProperties<TLength, TTime> & CustomProperties)\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineProperties<TLength = 0 \| (string & {}), TTime = string & {}>(style: Properties<TLength, TTime>) {\n\treturn style as Properties\n}\n","import type { CSSProperties } from './css_properties.ts'\n\n/\n Converts React-style CSS properties to DOM style properties.\n * This function handles both standard CSS properties and custom properties,\n * ensuring proper formatting for DOM style application.\n \n @param style - React-style CSS properties object\n * @returns CSSStyleDeclaration compatible object for DOM style application\n \n @example\n * ```ts\n * const domStyle = toDOMStyle({\n * backgroundColor: 'red',\n * '--custom-color': '#ff0000'\n * })\n * element.style = domStyle\n * ```\n /\nexport function toDOMStyle(style: CSSProperties \| undefined): Partial<CSSStyleDeclaration> \| undefined {\n\tif (style === undefined) return undefined\n\n\tconst result = {} as any\n\n\tfor (const [key, value] of Object.entries(style)) {\n\t\tresult[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value\n\t}\n\n\treturn result\n}\n","export const ctx = {\n\tmatchMedia(query: string) {\n\t\treturn globalThis.matchMedia(query)\n\t},\n\tgetDocumentElement() {\n\t\treturn globalThis.document.documentElement\n\t},\n\t_reset() {\n\t\tthis.matchMedia = globalThis.matchMedia\n\t\tthis.getDocumentElement = () => globalThis.document.documentElement\n\t},\n}\n","import { ctx } from '../globals.ctx.ts'\n\n/\n Gets the value of an attribute from an element.\n \n @param qualifiedName - The name of the attribute to get\n * @param element - The element to get the attribute from. Defaults to `document.documentElement`\n * @returns The attribute value cast to type T, or null if the attribute doesn't exist\n \n @example\n * ```ts\n * // Get theme from document root\n * const theme = getAttribute('data-theme')\n \n // Get data-testid from a specific element\n * const testId = getAttribute('data-testid', element)\n * ```\n /\nexport function getAttribute<T extends string>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn element?.getAttribute(qualifiedName)\n}\n\n/\n Observes attributes changes on an element and calls corresponding handlers.\n \n @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe. Defaults to `document.documentElement`.\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.\n \n @example\n * ```ts\n * const observer = observeAttributes({\n * 'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),\n * 'class': (attr, value) => console.log(`class changed to: ${value}`)\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T \| null) => void>,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName!\n\t\t\tconst value = element.getAttribute(attribute) as T \| null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers),\n\t})\n\treturn observer\n}\n","import { findKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\nimport { observeAttributes } from '../utils/attribute.ts'\n\n/\n Gets the current theme by checking element class names against a themes map.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their class name values\n * @param options.defaultTheme - Fallback theme key if no matching class is found\n * @param options.element - Element to check classes on (defaults to document.documentElement)\n * @returns The matching theme key or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'theme-light',\n * dark: 'theme-dark'\n * }\n \n // Get current theme from document.documentElement\n * const theme = getThemeByClassName({\n * themes,\n * defaultTheme: 'light'\n * })\n \n // Get theme from specific element\n * const theme = getThemeByClassName({\n * themes,\n * element: myElement,\n * defaultTheme: 'light'\n * })\n * ```\n /\nexport function getThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst element = options.element ?? ctx.getDocumentElement()\n\tconst className = element.className\n\tconst theme = findKey(options.themes, (theme) => className.includes(options.themes[theme]!))\n\treturn theme ?? options.defaultTheme\n}\n\nexport function observeThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\thandler: (value: string \| undefined) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}) {\n\treturn observeAttributes(\n\t\t{\n\t\t\tclass: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler(options.defaultTheme as string)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (value.includes(options.themes[name]!)) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import { ctx } from '../globals.ctx.ts'\nimport { getAttribute, observeAttributes } from './attribute.ts'\n\nexport function getDataAttribute<T extends `data-${string}`>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn getAttribute(qualifiedName, element)\n}\n\n/\n Observes changes to `data-` attributes on an element and calls corresponding handlers.\n \n * @param options - Configuration options\n * @param options.handlers - An object mapping `data-` attribute names to handler functions.\n @param options.element - The element to observe. Defaults to `document.documentElement`\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer\n \n @example\n * ```ts\n * const observer = observeDataAttributes({\n * handlers: {\n * 'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n * 'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n * }\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T \| null) => void>,\n\telement?: Element \| undefined,\n) {\n\treturn observeAttributes(handlers, element)\n}\n","import { findKey } from 'type-plus'\nimport { getDataAttribute, observeDataAttributes } from '../utils/data-attribute.ts'\n\n/\n Gets the theme based on a data attribute value.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to check (must start with 'data-')\n * @param options.allowCustom - Whether to allow custom themes value\n * @returns The matching theme key, or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark',\n * system: 'system'\n * }\n \n // Get theme from data-theme attribute\n * const theme = getThemeByDataAttribute({\n * themes,\n * defaultTheme: 'system',\n * attributeName: 'data-theme'\n * })\n * ```\n /\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): string \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst value = getDataAttribute(options.attributeName, options.element) ?? undefined\n\tconst theme = findKey(options.themes, (theme) => options.themes[theme] === value)\n\n\treturn theme ?? options.defaultTheme ?? (options.allowCustom ? value : undefined)\n}\n\n/\n Observes changes to a theme data attribute and calls a handler when it changes.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.handler - Callback function called with the new theme value or null when removed\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to observe (must start with 'data-')\n * @returns A MutationObserver that can be disconnected to stop observing\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark'\n * }\n \n // Observe data-theme attribute changes\n * const observer = observeThemeByDataAttributes({\n * themes,\n * handler: (theme) => console.log('Theme changed to:', theme),\n * defaultTheme: 'light',\n * attributeName: 'data-theme'\n * })\n \n // Stop observing\n * observer.disconnect()\n * ```\n /\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver {\n\treturn observeDataAttributes(\n\t\t{\n\t\t\t[options.attributeName]: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler((options.defaultTheme as string) ?? null)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (options.themes[name] === value) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (options.allowCustom) {\n\t\t\t\t\toptions.handler(value)\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import type { CreateTuple } from 'type-plus'\n\n/\n Retrieves CSS custom property values from the specified element.\n \n @param element - The HTML element to get property values from\n * @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\telement: HTMLElement,\n\t...props: Props\n): CreateTuple<Props['length'], string>\n/\n Retrieves CSS custom property values from `document.body`.\n \n @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\t...props: Props\n): CreateTuple<Props['length'], string>\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(element: unknown, ...props: Props) {\n\tif (typeof element === 'string') {\n\t\treturn getCSSPropValues(globalThis.document.body, element as `--${string}`, ...props)\n\t}\n\tconst style = globalThis.getComputedStyle(element as HTMLElement)\n\treturn props.map((v) => style.getPropertyValue(v)) as any\n}\n","import { mapKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\n\n/\n Observes system color scheme preference changes and calls handlers when they occur.\n \n @param themes - An object mapping theme names to handler functions that are called when that theme is activated\n * @returns A cleanup function that removes all event listeners\n \n @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme({\n * light: (theme) => console.log('Light mode activated'),\n * dark: (theme) => console.log('Dark mode activated')\n * })\n \n // Later, to stop observing:\n * cleanup()\n * ```\n /\nexport function observePrefersColorScheme<T extends string>(themes: Record<T, (value: T \| null) => void>) {\n\tconst removers = mapKey(themes, (t) => {\n\t\tconst m = ctx.matchMedia(`(prefers-color-scheme: ${t as string})`)\n\t\tconst listener = (event: MediaQueryListEvent) => {\n\t\t\tif (event.matches) {\n\t\t\t\tthemes[t]?.(t)\n\t\t\t}\n\t\t}\n\n\t\tm.addEventListener('change', listener)\n\t\treturn () => m.removeEventListener('change', listener)\n\t})\n\n\treturn () => {\n\t\tfor (const remover of removers) {\n\t\t\tremover()\n\t\t}\n\t}\n}\n\n/\n Gets the current preferred color theme from the system settings.\n \n @param themes - A list of theme names to check against the system preference\n * @returns The first matching theme from the provided list, or null if none match\n \n @example\n * ```ts\n * // Check if system prefers light or dark mode\n * const theme = getPrefersColorTheme('light', 'dark')\n * // Returns 'light', 'dark', or null\n * ```\n */\nexport function getPrefersColorTheme<T extends string>(...themes: T[]) {\n\treturn themes.find((theme) => ctx.matchMedia(`(prefers-color-scheme: ${theme})`).matches) ?? null\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.cjs","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/globals.ctx.ts","../src/utils/attribute.ts","../src/theme/class-name.ts","../src/utils/data-attribute.ts","../src/theme/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":["/*\n Converts pixel values to numbers.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @returns The numeric value\n \n @example\n * ```ts\n * px2num(16) // 16\n * px2num('32px') // 32\n * px2num('12.5px') // 12.5\n * px2num('0px') // 0\n * ```\n /\nexport function px2num(px: number \| string \| undefined): number {\n\treturn typeof px === 'string' ? Number.parseFloat(px.replace(/px$/, '')) : Number(px)\n}\n","/\n Converts pixel values to rem units.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'rem' units\n \n @example\n * ```ts\n * px2rem(16) // '1.0000'\n * px2rem('32px') // '2.0000'\n * px2rem(20, { base: 20 }) // '1.0000'\n * px2rem(13, { precision: 2 }) // '0.81'\n * ```\n /\nexport function px2rem(\n\tpx: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n","/\n Converts rem values to pixel units.\n \n @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n \n @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n /\nexport function rem2px(\n\trem: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem base).toFixed(precision))\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/** Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Widens CSS properties to support custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n * Defined as a union so plain Properties (e.g. from React) are assignable.\n /\nexport interface CSSProperties<TLength = string \| number, TTime = string & {}>\n\textends CSSTypeProperties<TLength, TTime>,\n\t\tCustomProperties {}\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @deprecated Use `defineProperties` instead.\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineCSSProperties(style: CSSProperties) {\n\treturn style as any\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/* Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Extends CSS properties to include custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n /\nexport interface Properties<TLength = 0 \| (string & {}), TTime = string & {}>\n\textends CSSTypeProperties<TLength, TTime>,\n\t\tCustomProperties {}\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineProperties<TLength = 0 \| (string & {}), TTime = string & {}>(style: Properties<TLength, TTime>) {\n\treturn style as Properties\n}\n","import type { CSSProperties } from './css_properties.ts'\n\n/\n Converts React-style CSS properties to DOM style properties.\n * This function handles both standard CSS properties and custom properties,\n * ensuring proper formatting for DOM style application.\n \n @param style - React-style CSS properties object\n * @returns CSSStyleDeclaration compatible object for DOM style application\n \n @example\n * ```ts\n * const domStyle = toDOMStyle({\n * backgroundColor: 'red',\n * '--custom-color': '#ff0000'\n * })\n * element.style = domStyle\n * ```\n /\nexport function toDOMStyle(style: CSSProperties \| undefined): Partial<CSSStyleDeclaration> \| undefined {\n\tif (style === undefined) return undefined\n\n\tconst result = {} as any\n\n\tfor (const [key, value] of Object.entries(style)) {\n\t\tresult[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value\n\t}\n\n\treturn result\n}\n","export const ctx = {\n\tmatchMedia(query: string) {\n\t\treturn globalThis.matchMedia(query)\n\t},\n\tgetDocumentElement() {\n\t\treturn globalThis.document.documentElement\n\t},\n\t_reset() {\n\t\tthis.matchMedia = globalThis.matchMedia\n\t\tthis.getDocumentElement = () => globalThis.document.documentElement\n\t},\n}\n","import { ctx } from '../globals.ctx.ts'\n\n/\n Gets the value of an attribute from an element.\n \n @param qualifiedName - The name of the attribute to get\n * @param element - The element to get the attribute from. Defaults to `document.documentElement`\n * @returns The attribute value cast to type T, or null if the attribute doesn't exist\n \n @example\n * ```ts\n * // Get theme from document root\n * const theme = getAttribute('data-theme')\n \n // Get data-testid from a specific element\n * const testId = getAttribute('data-testid', element)\n * ```\n /\nexport function getAttribute<T extends string>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn element?.getAttribute(qualifiedName)\n}\n\n/\n Observes attributes changes on an element and calls corresponding handlers.\n \n @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe. Defaults to `document.documentElement`.\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.\n \n @example\n * ```ts\n * const observer = observeAttributes({\n * 'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),\n * 'class': (attr, value) => console.log(`class changed to: ${value}`)\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T \| null) => void>,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName!\n\t\t\tconst value = element.getAttribute(attribute) as T \| null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers),\n\t})\n\treturn observer\n}\n","import { findKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\nimport { observeAttributes } from '../utils/attribute.ts'\n\n/\n Gets the current theme by checking element class names against a themes map.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their class name values\n * @param options.defaultTheme - Fallback theme key if no matching class is found\n * @param options.element - Element to check classes on (defaults to document.documentElement)\n * @returns The matching theme key or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'theme-light',\n * dark: 'theme-dark'\n * }\n \n // Get current theme from document.documentElement\n * const theme = getThemeByClassName({\n * themes,\n * defaultTheme: 'light'\n * })\n \n // Get theme from specific element\n * const theme = getThemeByClassName({\n * themes,\n * element: myElement,\n * defaultTheme: 'light'\n * })\n * ```\n /\nexport function getThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst element = options.element ?? ctx.getDocumentElement()\n\tconst className = element.className\n\tconst theme = findKey(options.themes, (theme) => className.includes(options.themes[theme]!))\n\treturn theme ?? options.defaultTheme\n}\n\nexport function observeThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\thandler: (value: string \| undefined) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}) {\n\treturn observeAttributes(\n\t\t{\n\t\t\tclass: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler(options.defaultTheme as string)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (value.includes(options.themes[name]!)) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import { ctx } from '../globals.ctx.ts'\nimport { getAttribute, observeAttributes } from './attribute.ts'\n\nexport function getDataAttribute<T extends `data-${string}`>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn getAttribute(qualifiedName, element)\n}\n\n/\n Observes changes to `data-` attributes on an element and calls corresponding handlers.\n \n * @param options - Configuration options\n * @param options.handlers - An object mapping `data-` attribute names to handler functions.\n @param options.element - The element to observe. Defaults to `document.documentElement`\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer\n \n @example\n * ```ts\n * const observer = observeDataAttributes({\n * handlers: {\n * 'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n * 'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n * }\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T \| null) => void>,\n\telement?: Element \| undefined,\n) {\n\treturn observeAttributes(handlers, element)\n}\n","import { findKey } from 'type-plus'\nimport { getDataAttribute, observeDataAttributes } from '../utils/data-attribute.ts'\n\n/\n Gets the theme based on a data attribute value.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to check (must start with 'data-')\n * @param options.allowCustom - Whether to allow custom themes value\n * @returns The matching theme key, or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark',\n * system: 'system'\n * }\n \n // Get theme from data-theme attribute\n * const theme = getThemeByDataAttribute({\n * themes,\n * defaultTheme: 'system',\n * attributeName: 'data-theme'\n * })\n * ```\n /\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): string \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst value = getDataAttribute(options.attributeName, options.element) ?? undefined\n\tconst theme = findKey(options.themes, (theme) => options.themes[theme] === value)\n\n\treturn theme ?? options.defaultTheme ?? (options.allowCustom ? value : undefined)\n}\n\n/\n Observes changes to a theme data attribute and calls a handler when it changes.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.handler - Callback function called with the new theme value or null when removed\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to observe (must start with 'data-')\n * @returns A MutationObserver that can be disconnected to stop observing\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark'\n * }\n \n // Observe data-theme attribute changes\n * const observer = observeThemeByDataAttributes({\n * themes,\n * handler: (theme) => console.log('Theme changed to:', theme),\n * defaultTheme: 'light',\n * attributeName: 'data-theme'\n * })\n \n // Stop observing\n * observer.disconnect()\n * ```\n /\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver {\n\treturn observeDataAttributes(\n\t\t{\n\t\t\t[options.attributeName]: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler((options.defaultTheme as string) ?? null)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (options.themes[name] === value) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (options.allowCustom) {\n\t\t\t\t\toptions.handler(value)\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import type { CreateTuple } from 'type-plus'\n\n/\n Retrieves CSS custom property values from the specified element.\n \n @param element - The HTML element to get property values from\n * @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\telement: HTMLElement,\n\t...props: Props\n): CreateTuple<Props['length'], string>\n/\n Retrieves CSS custom property values from `document.body`.\n \n @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\t...props: Props\n): CreateTuple<Props['length'], string>\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(element: unknown, ...props: Props) {\n\tif (typeof element === 'string') {\n\t\treturn getCSSPropValues(globalThis.document.body, element as `--${string}`, ...props)\n\t}\n\tconst style = globalThis.getComputedStyle(element as HTMLElement)\n\treturn props.map((v) => style.getPropertyValue(v)) as any\n}\n","import { mapKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\n\n/\n Observes system color scheme preference changes and calls handlers when they occur.\n \n @param themes - An object mapping theme names to handler functions that are called when that theme is activated\n * @returns A cleanup function that removes all event listeners\n \n @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme({\n * light: (theme) => console.log('Light mode activated'),\n * dark: (theme) => console.log('Dark mode activated')\n * })\n \n // Later, to stop observing:\n * cleanup()\n * ```\n /\nexport function observePrefersColorScheme<T extends string>(themes: Record<T, (value: T \| null) => void>) {\n\tconst removers = mapKey(themes, (t) => {\n\t\tconst m = ctx.matchMedia(`(prefers-color-scheme: ${t as string})`)\n\t\tconst listener = (event: MediaQueryListEvent) => {\n\t\t\tif (event.matches) {\n\t\t\t\tthemes[t]?.(t)\n\t\t\t}\n\t\t}\n\n\t\tm.addEventListener('change', listener)\n\t\treturn () => m.removeEventListener('change', listener)\n\t})\n\n\treturn () => {\n\t\tfor (const remover of removers) {\n\t\t\tremover()\n\t\t}\n\t}\n}\n\n/\n Gets the current preferred color theme from the system settings.\n \n @param themes - A list of theme names to check against the system preference\n * @returns The first matching theme from the provided list, or null if none match\n \n @example\n * ```ts\n * // Check if system prefers light or dark mode\n * const theme = getPrefersColorTheme('light', 'dark')\n * // Returns 'light', 'dark', or null\n * ```\n */\nexport function getPrefersColorTheme<T extends string>(...themes: T[]) {\n\treturn themes.find((theme) => ctx.matchMedia(`(prefers-color-scheme: ${theme})`).matches) ?? null\n}\n"],"mappings":"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"}

package/cjs/index.d.cts CHANGED Viewed

@@ -77,7 +77,7 @@ type CustomProperties$1 = {
  * and string values for custom properties with '--' prefix.
  * Defined as a union so plain Properties (e.g. from React) are assignable.
  */
-type CSSProperties<TLength = string | number, TTime = string & {}> = Properties$1<TLength, TTime> | (Properties$1<TLength, TTime> & CustomProperties$1);
+interface CSSProperties<TLength = string | number, TTime = string & {}> extends Properties$1<TLength, TTime>, CustomProperties$1 {}
 /**
  * Defines CSS properties including custom properties.
  * This function is used to properly type CSS properties when defining styles,
@@ -108,7 +108,7 @@ type CustomProperties = {
  * Allows for string or number values for standard properties,
  * and string values for custom properties with '--' prefix.
  */
-type Properties<TLength = 0 | (string & {}), TTime = string & {}> = Properties$1<TLength, TTime> | (Properties$1<TLength, TTime> & CustomProperties);
+interface Properties<TLength = 0 | (string & {}), TTime = string & {}> extends Properties$1<TLength, TTime>, CustomProperties {}
 /**
  * Defines CSS properties including custom properties.
  * This function is used to properly type CSS properties when defining styles,

package/cjs/index.d.cts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.cts","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/props/class-name.ts","../src/props/style.ts","../src/theme/class-name.ts","../src/theme/data-attribute.ts","../src/utils/attribute.ts","../src/utils/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;AAcA;;;;ACGA;;;;ACAgB,iBFHA,MAAA,CEGM,EAAA,EAAA,MAAA,GAAA,MAAA,GAAA,SAAA,CAAA,EAAA,MAAA;;;;;;;;;AFHtB;;;;ACGA;;;;ACAA;;;iBDAgB,MAAA,~~6BELK~~;~~EAThB~~,IAAA,CAAA,EAAA,MAAA,GAAA,SAAgB;~~EAQT~~,SAAA,CAAA,EAAA,MAAa,GAAA,SAAA;~~CACJ~~,CAAA,EAAA,MAAA;;;;;;;;;~~AHErB~~;;;;ACGA;;;;ACAA;;;iBAAgB,MAAA,~~8BCLK~~;~~EAThB~~,IAAA,CAAA,EAAA,MAAA,GAAA,SAAgB;~~EAQT~~,SAAA,CAAA,EAAA,MAAa,GAAA,SAAA;~~CACJ~~,CAAA,EAAA,MAAA;;;;~~KAThB~~,kBAAA;;;;AHWL;;;;ACGA;~~KENY~~,~~gEACT~~,aAAkB,SAAS,~~UAC1B,aAAkB,SAAS,SAAS;;;ADIxC~~;;;;ACjB8D;AAW9D~~;;;;;;;;;~~AAsBA~~;;iBAAgB~~,mBAAA,~~QAA2B~~;;;;~~KC9BtC~~,gBAAA;;;;AJWL;;;;ACGgB,~~KGPJ~~,~~UHOU~~,CAAA,UAAA,CAAA,GAAA,CAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,QAAA,MAAA,GAAA,CAAA,CAAA,CAAA,~~GGNnB~~,~~YHMmB~~,~~CGND~~,~~OHMC~~,~~EGNQ~~,~~KHMR~~,CAAA,~~GAAA~~,~~CGLlB~~,~~YHKkB,CGLA,OHKA,EGLS,KHKT,~~CAAA~~,GGLkB,gBHKlB,CAAA;;;;~~ACAtB;;;;ACjB8D;AAW9D~~;;;;;;;;AAEwD~~,~~iBCiBxC~~,~~gBDjBwC~~,~~CAAA~~,~~UAAA,CAAA,GAAA,CAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,QAAA,MAAA,GAAA,CAAA,CAAA,CAAA,CAAA,KAAA,ECiBkC,UDjBlC,CCiB6C,ODjB7C,ECiBsD,KDjBtD,CAAA,CAAA,ECkBvC,UDlBuC~~;;;;;;;;~~AHCxD~~;;;;ACGA;;;;ACAA;;;;ACdK,iBEgBW,UAAA,CFhBK,KAAA,EEgBa,aFhBb,GAAA,SAAA,CAAA,EEgByC,OFhBzC,CEgBiD,mBFhBjD,CAAA,GAAA,SAAA;;;;;;;;;AHWrB;;KMLY,cAAA;;ALQZ,CAAA;;;;;;KMZY;UACH,WAAW,SAAS;APQ7B,CAAA;;;;;;;;;AAAA;;;;ACGA;;;;ACAA;;;;ACjB8D;AAW9D~~;;;;;;;;;~~AAsBA~~;;iBKCgB~~,~~mCAAmC~~;~~UAC1C~~;~~EJhCJ~~,YAAA,CAAA,EAAA,~~MIiCiB~~,~~MJjCD~~,GAAA,SAAA;~~EAOT~~,OAAA,CAAA,~~EI2BD~~,~~OJ3BW~~,GAAA,SAAA;~~CACD~~,CAAA,EAAA,~~MI2BX~~,~~MJ3BW~~,GAAA,SAAA;~~AAAS~~,~~iBIkCd~~,~~uBJlCc~~,CAAA,~~eIkCyB~~,~~MJlCzB~~,CAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA;~~EAA3B~~,MAAA,~~EImCM~~,~~MJnCN~~;~~EACmB~~,OAAA,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAS,YAAA,CAAA,EAAA,~~MIoCT~~,~~MJpCS~~,GAAA,SAAA;~~EAA3B~~,OAAA,CAAA,~~EIqCO~~,~~OJrCP~~,GAAA,SAAA;~~CAAoC~~,CAAA,~~EIsCvC~~,~~gBJtCuC~~;;;;;;;;;~~AJExC~~;;;;ACGA;;;;ACAA;;;;ACjB8D;AAW9D~~;;;;;;;AAEwC~~,~~iBMgBxB~~,~~uBNhBwB,CAAA,eMgBe,MNhBf,CAAA,~~MAAA,~~EAAA~~,~~MAAA~~,~~CAAA~~,CAAA,~~CAAA~~,~~OAAA~~,~~EAAA;EAAgB~~,~~aAAA,EAAA,QAAA,MAAA,EAAA~~;~~EAoBxC~~,~~YAAA,~~CAAA,EAAA,~~MMFM~~,~~MNEa~~,GAAA,~~SAAQ~~;~~UMDlC;YACE;UACD;AL/BL~~,~~iBKgCW~~,~~uBLhCK~~,CAAA,~~eKgCkC~~,~~MLhClC~~,CAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA;~~EAOT~~,~~aAAU~~,EAAA,QAAA,MAAA,EAAA;~~EACD~~,WAAA,EAAA,IAAA,GAAA,SAAA;~~EAAS~~,YAAA,CAAA,EAAA,~~MK2BR~~,~~ML3BQ~~,GAAA,SAAA;~~EAA3B~~,MAAA,~~EK4BM~~,~~ML5BN~~;~~EACmB~~,OAAA,CAAA,~~EK4BX~~,~~OL5BW~~,GAAA,SAAA;CAAS,CAAA,EAAA,MAAA,GAAA,SAAA~~;;;;AAkB/B;;;;;;;;;ACXA~~;;;;;;;;ACVA;;;;ACJA~~;;;;;iBE+EgB~~,~~4CAA4C;;UAEnD~~;~~EDpDO~~,OAAA,EAAA,CAAA,KAAA,EAAA,~~MAAmB~~,GAAA,IAAA,EAAA,GAAA,IAAA;~~EAAgB~~,YAAA,CAAA,EAAA,~~MCsD7B~~,~~MDtD6B~~,GAAA,SAAA;~~EAC1C~~,OAAA,CAAA,~~ECsDE~~,~~ODtDF~~,GAAA,SAAA;~~CACa~~,CAAA,~~ECsDlB~~,~~gBDtDkB~~;~~AACX~~,~~iBCsDK~~,~~4BDtDL~~,CAAA,~~eCsDiD~~,~~MDtDjD~~,CAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA;~~EACD~~,aAAA,EAAA,QAAA,MAAA,EAAA;~~EAAM~~,MAAA,~~ECuDP~~,~~MDvDO~~;~~EAOA~~,OAAA,EAAA,CAAA,KAAA,EAAA,MAAA,~~GAAuB~~,IAAA,EAAA,GAAA,IAAA;~~EAAgB,WAAA,EAAA,IAAA,GAAA,SAAA~~;~~EAC9C~~,~~YAAA,~~CAAA,~~EAAA,MCkDa,MDlDb,GAAA,SAAA;EAEa,OAAA,~~CAAA,~~ECiDX~~,~~ODjDW,GAAA,SAAA;CACX,CAAA,ECiDP,gBDjDO~~;;;;;;;;;~~ARnCX~~;;;;ACGA;;;;ACAA;;iBQCgB,8CACA,aACN;;APpBoD;AAW9D~~;;;;;;;;;~~AAsBA;;;;ACjC8D;AAU9D~~;;AAC8B~~,~~iBMgCd~~,~~iBNhCc~~,CAAA,UAAA,MAAA,CAAA,CAAA,QAAA,~~EMiCnB~~,~~MNjCmB~~,CAAA,MAAA,EAAA,CAAA,KAAA,~~EMiCI~~,~~CNjCJ~~,GAAA,IAAA,EAAA,GAAA,IAAA,CAAA,EAAA,OAAA,CAAA,~~EMkCpB~~,~~ONlCoB~~,GAAA,SAAA,CAAA,~~EMkC0B~~,~~gBNlC1B~~;;;~~iBORd~~,4DACA,aACN;;;;;;AXSV;;;;ACGA;;;;ACAA;;;;ACjB8D;AAW9D;;;~~AACG~~,~~iBQmBa~~,~~qBRnBb~~,CAAA,UAAA,MAAA,EAAA,UAAA,QAAA,MAAA,EAAA,CAAA,CAAA,QAAA,~~EQoBQ~~,~~MRpBR~~,~~CQoBe~~,~~CRpBf~~,EAAA,CAAA,KAAA,~~EQoB0B~~,~~CRpB1B~~,GAAA,IAAA,EAAA,GAAA,IAAA,CAAA,EAAA,OAAA,CAAA,~~EQqBQ~~,~~ORrBR~~,GAAA,SAAA,CAAA,~~EQqB2B~~,~~gBRrB3B~~;;;;;;;;~~AHEH~~;;iBYLgB,+BAA+B,+BACrC,uBACC,QACR,YAAY;;AXKf;;;;ACAA;iBUEgB,+BAA+B,gCACpC,QACR,YAAY;;;;;;;;;AZPf;;;;ACGA;;;;ACAA;;;;ACdK,iBUkBW,yBVlBK,CAAA,UAAA,MAAA,CAAA,CAAA,MAAA,EUkB+C,MVlB/C,CUkBsD,CVlBtD,EAAA,CAAA,KAAA,EUkBiE,CVlBjE,GAAA,IAAA,EAAA,GAAA,IAAA,CAAA,CAAA,EAAA,GAAA,GAAA,IAAA;AAQrB~~;;;;;;;;;~~AAsBA;;;;~~AC9BK~~,~~iBSmDW~~,~~oBTnDK~~,CAAA,UAAA,MAAA,CAAA,CAAA,GAAA,MAAA,~~ESmD6C~~,~~CTnD7C~~,EAAA,CAAA,~~ESmDgD~~,~~CTnDhD~~,GAAA,IAAA"}
1	+ {"version":3,"file":"index.d.cts","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/props/class-name.ts","../src/props/style.ts","../src/theme/class-name.ts","../src/theme/data-attribute.ts","../src/utils/attribute.ts","../src/utils/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":[],"mappings":"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"}

package/esm/index.d.mts CHANGED Viewed

@@ -77,7 +77,7 @@ type CustomProperties$1 = {
  * and string values for custom properties with '--' prefix.
  * Defined as a union so plain Properties (e.g. from React) are assignable.
  */
-type CSSProperties<TLength = string | number, TTime = string & {}> = Properties$1<TLength, TTime> | (Properties$1<TLength, TTime> & CustomProperties$1);
+interface CSSProperties<TLength = string | number, TTime = string & {}> extends Properties$1<TLength, TTime>, CustomProperties$1 {}
 /**
  * Defines CSS properties including custom properties.
  * This function is used to properly type CSS properties when defining styles,
@@ -108,7 +108,7 @@ type CustomProperties = {
  * Allows for string or number values for standard properties,
  * and string values for custom properties with '--' prefix.
  */
-type Properties<TLength = 0 | (string & {}), TTime = string & {}> = Properties$1<TLength, TTime> | (Properties$1<TLength, TTime> & CustomProperties);
+interface Properties<TLength = 0 | (string & {}), TTime = string & {}> extends Properties$1<TLength, TTime>, CustomProperties {}
 /**
  * Defines CSS properties including custom properties.
  * This function is used to properly type CSS properties when defining styles,

package/esm/index.d.mts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.mts","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/props/class-name.ts","../src/props/style.ts","../src/theme/class-name.ts","../src/theme/data-attribute.ts","../src/utils/attribute.ts","../src/utils/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":[],"mappings":";;;;;;;;;;;;AAcA;;;;ACGA;;;;ACAgB,iBFHA,MAAA,CEGM,EAAA,EAAA,MAAA,GAAA,MAAA,GAAA,SAAA,CAAA,EAAA,MAAA;;;;;;;;;AFHtB;;;;ACGA;;;;ACAA;;;iBDAgB,MAAA,~~6BELK~~;~~EAThB~~,IAAA,CAAA,EAAA,MAAA,GAAA,SAAgB;~~EAQT~~,SAAA,CAAA,EAAA,MAAa,GAAA,SAAA;~~CACJ~~,CAAA,EAAA,MAAA;;;;;;;;;~~AHErB~~;;;;ACGA;;;;ACAA;;;iBAAgB,MAAA,~~8BCLK~~;~~EAThB~~,IAAA,CAAA,EAAA,MAAA,GAAA,SAAgB;~~EAQT~~,SAAA,CAAA,EAAA,MAAa,GAAA,SAAA;~~CACJ~~,CAAA,EAAA,MAAA;;;;~~KAThB~~,kBAAA;;;;AHWL;;;;ACGA;~~KENY~~,~~gEACT~~,aAAkB,SAAS,~~UAC1B,aAAkB,SAAS,SAAS;;;ADIxC~~;;;;ACjB8D;AAW9D~~;;;;;;;;;~~AAsBA~~;;iBAAgB~~,mBAAA,~~QAA2B~~;;;;~~KC9BtC~~,gBAAA;;;;AJWL;;;;ACGgB,~~KGPJ~~,~~UHOU~~,CAAA,UAAA,CAAA,GAAA,CAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,QAAA,MAAA,GAAA,CAAA,CAAA,CAAA,~~GGNnB~~,~~YHMmB~~,~~CGND~~,~~OHMC~~,~~EGNQ~~,~~KHMR~~,CAAA,~~GAAA~~,~~CGLlB~~,~~YHKkB,CGLA,OHKA,EGLS,KHKT,~~CAAA~~,GGLkB,gBHKlB,CAAA;;;;~~ACAtB;;;;ACjB8D;AAW9D~~;;;;;;;;AAEwD~~,~~iBCiBxC~~,~~gBDjBwC~~,~~CAAA~~,~~UAAA,CAAA,GAAA,CAAA,MAAA,GAAA,CAAA,CAAA,CAAA,EAAA,QAAA,MAAA,GAAA,CAAA,CAAA,CAAA,CAAA,KAAA,ECiBkC,UDjBlC,CCiB6C,ODjB7C,ECiBsD,KDjBtD,CAAA,CAAA,ECkBvC,UDlBuC~~;;;;;;;;~~AHCxD~~;;;;ACGA;;;;ACAA;;;;ACdK,iBEgBW,UAAA,CFhBK,KAAA,EEgBa,aFhBb,GAAA,SAAA,CAAA,EEgByC,OFhBzC,CEgBiD,mBFhBjD,CAAA,GAAA,SAAA;;;;;;;;;AHWrB;;KMLY,cAAA;;ALQZ,CAAA;;;;;;KMZY;UACH,WAAW,SAAS;APQ7B,CAAA;;;;;;;;;AAAA;;;;ACGA;;;;ACAA;;;;ACjB8D;AAW9D~~;;;;;;;;;~~AAsBA~~;;iBKCgB~~,~~mCAAmC~~;~~UAC1C~~;~~EJhCJ~~,YAAA,CAAA,EAAA,~~MIiCiB~~,~~MJjCD~~,GAAA,SAAA;~~EAOT~~,OAAA,CAAA,~~EI2BD~~,~~OJ3BW~~,GAAA,SAAA;~~CACD~~,CAAA,EAAA,~~MI2BX~~,~~MJ3BW~~,GAAA,SAAA;~~AAAS~~,~~iBIkCd~~,~~uBJlCc~~,CAAA,~~eIkCyB~~,~~MJlCzB~~,CAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA;~~EAA3B~~,MAAA,~~EImCM~~,~~MJnCN~~;~~EACmB~~,OAAA,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAS,YAAA,CAAA,EAAA,~~MIoCT~~,~~MJpCS~~,GAAA,SAAA;~~EAA3B~~,OAAA,CAAA,~~EIqCO~~,~~OJrCP~~,GAAA,SAAA;~~CAAoC~~,CAAA,~~EIsCvC~~,~~gBJtCuC~~;;;;;;;;;~~AJExC~~;;;;ACGA;;;;ACAA;;;;ACjB8D;AAW9D~~;;;;;;;AAEwC~~,~~iBMgBxB~~,~~uBNhBwB,CAAA,eMgBe,MNhBf,CAAA,~~MAAA,~~EAAA~~,~~MAAA~~,~~CAAA~~,CAAA,~~CAAA~~,~~OAAA~~,~~EAAA;EAAgB~~,~~aAAA,EAAA,QAAA,MAAA,EAAA~~;~~EAoBxC~~,~~YAAA,~~CAAA,EAAA,~~MMFM~~,~~MNEa~~,GAAA,~~SAAQ~~;~~UMDlC;YACE;UACD;AL/BL~~,~~iBKgCW~~,~~uBLhCK~~,CAAA,~~eKgCkC~~,~~MLhClC~~,CAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA;~~EAOT~~,~~aAAU~~,EAAA,QAAA,MAAA,EAAA;~~EACD~~,WAAA,EAAA,IAAA,GAAA,SAAA;~~EAAS~~,YAAA,CAAA,EAAA,~~MK2BR~~,~~ML3BQ~~,GAAA,SAAA;~~EAA3B~~,MAAA,~~EK4BM~~,~~ML5BN~~;~~EACmB~~,OAAA,CAAA,~~EK4BX~~,~~OL5BW~~,GAAA,SAAA;CAAS,CAAA,EAAA,MAAA,GAAA,SAAA~~;;;;AAkB/B;;;;;;;;;ACXA~~;;;;;;;;ACVA;;;;ACJA~~;;;;;iBE+EgB~~,~~4CAA4C;;UAEnD~~;~~EDpDO~~,OAAA,EAAA,CAAA,KAAA,EAAA,~~MAAmB~~,GAAA,IAAA,EAAA,GAAA,IAAA;~~EAAgB~~,YAAA,CAAA,EAAA,~~MCsD7B~~,~~MDtD6B~~,GAAA,SAAA;~~EAC1C~~,OAAA,CAAA,~~ECsDE~~,~~ODtDF~~,GAAA,SAAA;~~CACa~~,CAAA,~~ECsDlB~~,~~gBDtDkB~~;~~AACX~~,~~iBCsDK~~,~~4BDtDL~~,CAAA,~~eCsDiD~~,~~MDtDjD~~,CAAA,MAAA,EAAA,MAAA,CAAA,CAAA,CAAA,OAAA,EAAA;~~EACD~~,aAAA,EAAA,QAAA,MAAA,EAAA;~~EAAM~~,MAAA,~~ECuDP~~,~~MDvDO~~;~~EAOA~~,OAAA,EAAA,CAAA,KAAA,EAAA,MAAA,~~GAAuB~~,IAAA,EAAA,GAAA,IAAA;~~EAAgB,WAAA,EAAA,IAAA,GAAA,SAAA~~;~~EAC9C~~,~~YAAA,~~CAAA,~~EAAA,MCkDa,MDlDb,GAAA,SAAA;EAEa,OAAA,~~CAAA,~~ECiDX~~,~~ODjDW,GAAA,SAAA;CACX,CAAA,ECiDP,gBDjDO~~;;;;;;;;;~~ARnCX~~;;;;ACGA;;;;ACAA;;iBQCgB,8CACA,aACN;;APpBoD;AAW9D~~;;;;;;;;;~~AAsBA;;;;ACjC8D;AAU9D~~;;AAC8B~~,~~iBMgCd~~,~~iBNhCc~~,CAAA,UAAA,MAAA,CAAA,CAAA,QAAA,~~EMiCnB~~,~~MNjCmB~~,CAAA,MAAA,EAAA,CAAA,KAAA,~~EMiCI~~,~~CNjCJ~~,GAAA,IAAA,EAAA,GAAA,IAAA,CAAA,EAAA,OAAA,CAAA,~~EMkCpB~~,~~ONlCoB~~,GAAA,SAAA,CAAA,~~EMkC0B~~,~~gBNlC1B~~;;;~~iBORd~~,4DACA,aACN;;;;;;AXSV;;;;ACGA;;;;ACAA;;;;ACjB8D;AAW9D;;;~~AACG~~,~~iBQmBa~~,~~qBRnBb~~,CAAA,UAAA,MAAA,EAAA,UAAA,QAAA,MAAA,EAAA,CAAA,CAAA,QAAA,~~EQoBQ~~,~~MRpBR~~,~~CQoBe~~,~~CRpBf~~,EAAA,CAAA,KAAA,~~EQoB0B~~,~~CRpB1B~~,GAAA,IAAA,EAAA,GAAA,IAAA,CAAA,EAAA,OAAA,CAAA,~~EQqBQ~~,~~ORrBR~~,GAAA,SAAA,CAAA,~~EQqB2B~~,~~gBRrB3B~~;;;;;;;;~~AHEH~~;;iBYLgB,+BAA+B,+BACrC,uBACC,QACR,YAAY;;AXKf;;;;ACAA;iBUEgB,+BAA+B,gCACpC,QACR,YAAY;;;;;;;;;AZPf;;;;ACGA;;;;ACAA;;;;ACdK,iBUkBW,yBVlBK,CAAA,UAAA,MAAA,CAAA,CAAA,MAAA,EUkB+C,MVlB/C,CUkBsD,CVlBtD,EAAA,CAAA,KAAA,EUkBiE,CVlBjE,GAAA,IAAA,EAAA,GAAA,IAAA,CAAA,CAAA,EAAA,GAAA,GAAA,IAAA;AAQrB~~;;;;;;;;;~~AAsBA;;;;~~AC9BK~~,~~iBSmDW~~,~~oBTnDK~~,CAAA,UAAA,MAAA,CAAA,CAAA,GAAA,MAAA,~~ESmD6C~~,~~CTnD7C~~,EAAA,CAAA,~~ESmDgD~~,~~CTnDhD~~,GAAA,IAAA"}
1	+ {"version":3,"file":"index.d.mts","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/props/class-name.ts","../src/props/style.ts","../src/theme/class-name.ts","../src/theme/data-attribute.ts","../src/utils/attribute.ts","../src/utils/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":[],"mappings":"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"}

package/esm/index.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.mjs","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/globals.ctx.ts","../src/utils/attribute.ts","../src/theme/class-name.ts","../src/utils/data-attribute.ts","../src/theme/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":["/*\n Converts pixel values to numbers.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @returns The numeric value\n \n @example\n * ```ts\n * px2num(16) // 16\n * px2num('32px') // 32\n * px2num('12.5px') // 12.5\n * px2num('0px') // 0\n * ```\n /\nexport function px2num(px: number \| string \| undefined): number {\n\treturn typeof px === 'string' ? Number.parseFloat(px.replace(/px$/, '')) : Number(px)\n}\n","/\n Converts pixel values to rem units.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'rem' units\n \n @example\n * ```ts\n * px2rem(16) // '1.0000'\n * px2rem('32px') // '2.0000'\n * px2rem(20, { base: 20 }) // '1.0000'\n * px2rem(13, { precision: 2 }) // '0.81'\n * ```\n /\nexport function px2rem(\n\tpx: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n","/\n Converts rem values to pixel units.\n \n @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n \n @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n /\nexport function rem2px(\n\trem: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem base).toFixed(precision))\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/** Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Widens CSS properties to support custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n * Defined as a union so plain Properties (e.g. from React) are assignable.\n /\nexport type CSSProperties<TLength = string \| number, TTime = string & {}> =\n\t\| CSSTypeProperties<TLength, TTime>\n\t\| (CSSTypeProperties<TLength, TTime> & CustomProperties)\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @deprecated Use `defineProperties` instead.\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineCSSProperties(style: CSSProperties) {\n\treturn style as any\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/* Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Extends CSS properties to include custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n /\nexport type Properties<TLength = 0 \| (string & {}), TTime = string & {}> =\n\t\| CSSTypeProperties<TLength, TTime>\n\t\| (CSSTypeProperties<TLength, TTime> & CustomProperties)\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineProperties<TLength = 0 \| (string & {}), TTime = string & {}>(style: Properties<TLength, TTime>) {\n\treturn style as Properties\n}\n","import type { CSSProperties } from './css_properties.ts'\n\n/\n Converts React-style CSS properties to DOM style properties.\n * This function handles both standard CSS properties and custom properties,\n * ensuring proper formatting for DOM style application.\n \n @param style - React-style CSS properties object\n * @returns CSSStyleDeclaration compatible object for DOM style application\n \n @example\n * ```ts\n * const domStyle = toDOMStyle({\n * backgroundColor: 'red',\n * '--custom-color': '#ff0000'\n * })\n * element.style = domStyle\n * ```\n /\nexport function toDOMStyle(style: CSSProperties \| undefined): Partial<CSSStyleDeclaration> \| undefined {\n\tif (style === undefined) return undefined\n\n\tconst result = {} as any\n\n\tfor (const [key, value] of Object.entries(style)) {\n\t\tresult[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value\n\t}\n\n\treturn result\n}\n","export const ctx = {\n\tmatchMedia(query: string) {\n\t\treturn globalThis.matchMedia(query)\n\t},\n\tgetDocumentElement() {\n\t\treturn globalThis.document.documentElement\n\t},\n\t_reset() {\n\t\tthis.matchMedia = globalThis.matchMedia\n\t\tthis.getDocumentElement = () => globalThis.document.documentElement\n\t},\n}\n","import { ctx } from '../globals.ctx.ts'\n\n/\n Gets the value of an attribute from an element.\n \n @param qualifiedName - The name of the attribute to get\n * @param element - The element to get the attribute from. Defaults to `document.documentElement`\n * @returns The attribute value cast to type T, or null if the attribute doesn't exist\n \n @example\n * ```ts\n * // Get theme from document root\n * const theme = getAttribute('data-theme')\n \n // Get data-testid from a specific element\n * const testId = getAttribute('data-testid', element)\n * ```\n /\nexport function getAttribute<T extends string>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn element?.getAttribute(qualifiedName)\n}\n\n/\n Observes attributes changes on an element and calls corresponding handlers.\n \n @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe. Defaults to `document.documentElement`.\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.\n \n @example\n * ```ts\n * const observer = observeAttributes({\n * 'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),\n * 'class': (attr, value) => console.log(`class changed to: ${value}`)\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T \| null) => void>,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName!\n\t\t\tconst value = element.getAttribute(attribute) as T \| null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers),\n\t})\n\treturn observer\n}\n","import { findKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\nimport { observeAttributes } from '../utils/attribute.ts'\n\n/\n Gets the current theme by checking element class names against a themes map.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their class name values\n * @param options.defaultTheme - Fallback theme key if no matching class is found\n * @param options.element - Element to check classes on (defaults to document.documentElement)\n * @returns The matching theme key or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'theme-light',\n * dark: 'theme-dark'\n * }\n \n // Get current theme from document.documentElement\n * const theme = getThemeByClassName({\n * themes,\n * defaultTheme: 'light'\n * })\n \n // Get theme from specific element\n * const theme = getThemeByClassName({\n * themes,\n * element: myElement,\n * defaultTheme: 'light'\n * })\n * ```\n /\nexport function getThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst element = options.element ?? ctx.getDocumentElement()\n\tconst className = element.className\n\tconst theme = findKey(options.themes, (theme) => className.includes(options.themes[theme]!))\n\treturn theme ?? options.defaultTheme\n}\n\nexport function observeThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\thandler: (value: string \| undefined) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}) {\n\treturn observeAttributes(\n\t\t{\n\t\t\tclass: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler(options.defaultTheme as string)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (value.includes(options.themes[name]!)) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import { ctx } from '../globals.ctx.ts'\nimport { getAttribute, observeAttributes } from './attribute.ts'\n\nexport function getDataAttribute<T extends `data-${string}`>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn getAttribute(qualifiedName, element)\n}\n\n/\n Observes changes to `data-` attributes on an element and calls corresponding handlers.\n \n * @param options - Configuration options\n * @param options.handlers - An object mapping `data-` attribute names to handler functions.\n @param options.element - The element to observe. Defaults to `document.documentElement`\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer\n \n @example\n * ```ts\n * const observer = observeDataAttributes({\n * handlers: {\n * 'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n * 'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n * }\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T \| null) => void>,\n\telement?: Element \| undefined,\n) {\n\treturn observeAttributes(handlers, element)\n}\n","import { findKey } from 'type-plus'\nimport { getDataAttribute, observeDataAttributes } from '../utils/data-attribute.ts'\n\n/\n Gets the theme based on a data attribute value.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to check (must start with 'data-')\n * @param options.allowCustom - Whether to allow custom themes value\n * @returns The matching theme key, or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark',\n * system: 'system'\n * }\n \n // Get theme from data-theme attribute\n * const theme = getThemeByDataAttribute({\n * themes,\n * defaultTheme: 'system',\n * attributeName: 'data-theme'\n * })\n * ```\n /\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): string \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst value = getDataAttribute(options.attributeName, options.element) ?? undefined\n\tconst theme = findKey(options.themes, (theme) => options.themes[theme] === value)\n\n\treturn theme ?? options.defaultTheme ?? (options.allowCustom ? value : undefined)\n}\n\n/\n Observes changes to a theme data attribute and calls a handler when it changes.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.handler - Callback function called with the new theme value or null when removed\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to observe (must start with 'data-')\n * @returns A MutationObserver that can be disconnected to stop observing\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark'\n * }\n \n // Observe data-theme attribute changes\n * const observer = observeThemeByDataAttributes({\n * themes,\n * handler: (theme) => console.log('Theme changed to:', theme),\n * defaultTheme: 'light',\n * attributeName: 'data-theme'\n * })\n \n // Stop observing\n * observer.disconnect()\n * ```\n /\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver {\n\treturn observeDataAttributes(\n\t\t{\n\t\t\t[options.attributeName]: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler((options.defaultTheme as string) ?? null)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (options.themes[name] === value) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (options.allowCustom) {\n\t\t\t\t\toptions.handler(value)\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import type { CreateTuple } from 'type-plus'\n\n/\n Retrieves CSS custom property values from the specified element.\n \n @param element - The HTML element to get property values from\n * @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\telement: HTMLElement,\n\t...props: Props\n): CreateTuple<Props['length'], string>\n/\n Retrieves CSS custom property values from `document.body`.\n \n @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\t...props: Props\n): CreateTuple<Props['length'], string>\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(element: unknown, ...props: Props) {\n\tif (typeof element === 'string') {\n\t\treturn getCSSPropValues(globalThis.document.body, element as `--${string}`, ...props)\n\t}\n\tconst style = globalThis.getComputedStyle(element as HTMLElement)\n\treturn props.map((v) => style.getPropertyValue(v)) as any\n}\n","import { mapKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\n\n/\n Observes system color scheme preference changes and calls handlers when they occur.\n \n @param themes - An object mapping theme names to handler functions that are called when that theme is activated\n * @returns A cleanup function that removes all event listeners\n \n @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme({\n * light: (theme) => console.log('Light mode activated'),\n * dark: (theme) => console.log('Dark mode activated')\n * })\n \n // Later, to stop observing:\n * cleanup()\n * ```\n /\nexport function observePrefersColorScheme<T extends string>(themes: Record<T, (value: T \| null) => void>) {\n\tconst removers = mapKey(themes, (t) => {\n\t\tconst m = ctx.matchMedia(`(prefers-color-scheme: ${t as string})`)\n\t\tconst listener = (event: MediaQueryListEvent) => {\n\t\t\tif (event.matches) {\n\t\t\t\tthemes[t]?.(t)\n\t\t\t}\n\t\t}\n\n\t\tm.addEventListener('change', listener)\n\t\treturn () => m.removeEventListener('change', listener)\n\t})\n\n\treturn () => {\n\t\tfor (const remover of removers) {\n\t\t\tremover()\n\t\t}\n\t}\n}\n\n/\n Gets the current preferred color theme from the system settings.\n \n @param themes - A list of theme names to check against the system preference\n * @returns The first matching theme from the provided list, or null if none match\n \n @example\n * ```ts\n * // Check if system prefers light or dark mode\n * const theme = getPrefersColorTheme('light', 'dark')\n * // Returns 'light', 'dark', or null\n * ```\n */\nexport function getPrefersColorTheme<T extends string>(...themes: T[]) {\n\treturn themes.find((theme) => ctx.matchMedia(`(prefers-color-scheme: ${theme})`).matches) ?? null\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"index.mjs","names":[],"sources":["../src/convertors/px_2_num.ts","../src/convertors/px_2_rem.ts","../src/convertors/rem_2_px.ts","../src/properties/css_properties.ts","../src/properties/properties.ts","../src/properties/to_dom_style.ts","../src/globals.ctx.ts","../src/utils/attribute.ts","../src/theme/class-name.ts","../src/utils/data-attribute.ts","../src/theme/data-attribute.ts","../src/utils/get-css-prop-values.ts","../src/utils/prefers-color-scheme.ts"],"sourcesContent":["/*\n Converts pixel values to numbers.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @returns The numeric value\n \n @example\n * ```ts\n * px2num(16) // 16\n * px2num('32px') // 32\n * px2num('12.5px') // 12.5\n * px2num('0px') // 0\n * ```\n /\nexport function px2num(px: number \| string \| undefined): number {\n\treturn typeof px === 'string' ? Number.parseFloat(px.replace(/px$/, '')) : Number(px)\n}\n","/\n Converts pixel values to rem units.\n \n @param px - The pixel value to convert. Can be a number or string (e.g. '16px' or '16')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate rem units from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'rem' units\n \n @example\n * ```ts\n * px2rem(16) // '1.0000'\n * px2rem('32px') // '2.0000'\n * px2rem(20, { base: 20 }) // '1.0000'\n * px2rem(13, { precision: 2 }) // '0.81'\n * ```\n /\nexport function px2rem(\n\tpx: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof px === 'string') {\n\t\tpx = px.replace(/px$/, '')\n\t\tpx = Number.parseFloat(px)\n\t}\n\n\treturn Number((px / base).toFixed(precision))\n}\n","/\n Converts rem values to pixel units.\n \n @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n \n @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n /\nexport function rem2px(\n\trem: number \| string,\n\toptions?: { base?: number \| undefined; precision?: number \| undefined },\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem base).toFixed(precision))\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/** Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Widens CSS properties to support custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n * Defined as a union so plain Properties (e.g. from React) are assignable.\n /\nexport interface CSSProperties<TLength = string \| number, TTime = string & {}>\n\textends CSSTypeProperties<TLength, TTime>,\n\t\tCustomProperties {}\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @deprecated Use `defineProperties` instead.\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineCSSProperties(style: CSSProperties) {\n\treturn style as any\n}\n","import type { Properties as CSSTypeProperties } from 'csstype'\n\n/* Custom CSS properties (variables) with `--` prefix. /\ntype CustomProperties = { [k: `--${string}`]: string }\n\n/\n Extends CSS properties to include custom properties.\n * Allows for string or number values for standard properties,\n * and string values for custom properties with '--' prefix.\n /\nexport interface Properties<TLength = 0 \| (string & {}), TTime = string & {}>\n\textends CSSTypeProperties<TLength, TTime>,\n\t\tCustomProperties {}\n\n/\n Defines CSS properties including custom properties.\n * This function is used to properly type CSS properties when defining styles,\n * especially when using CSS custom properties (variables).\n \n @param style - CSS properties object that can include both standard and custom properties\n * @returns The same style object with proper typing\n \n @example\n * ```ts\n * defineCSSProperties({\n * color: 'red',\n * '--custom-color': '#ff0000'\n * })\n * ```\n /\nexport function defineProperties<TLength = 0 \| (string & {}), TTime = string & {}>(style: Properties<TLength, TTime>) {\n\treturn style as Properties\n}\n","import type { CSSProperties } from './css_properties.ts'\n\n/\n Converts React-style CSS properties to DOM style properties.\n * This function handles both standard CSS properties and custom properties,\n * ensuring proper formatting for DOM style application.\n \n @param style - React-style CSS properties object\n * @returns CSSStyleDeclaration compatible object for DOM style application\n \n @example\n * ```ts\n * const domStyle = toDOMStyle({\n * backgroundColor: 'red',\n * '--custom-color': '#ff0000'\n * })\n * element.style = domStyle\n * ```\n /\nexport function toDOMStyle(style: CSSProperties \| undefined): Partial<CSSStyleDeclaration> \| undefined {\n\tif (style === undefined) return undefined\n\n\tconst result = {} as any\n\n\tfor (const [key, value] of Object.entries(style)) {\n\t\tresult[key.startsWith('--') ? key : key.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)] = value\n\t}\n\n\treturn result\n}\n","export const ctx = {\n\tmatchMedia(query: string) {\n\t\treturn globalThis.matchMedia(query)\n\t},\n\tgetDocumentElement() {\n\t\treturn globalThis.document.documentElement\n\t},\n\t_reset() {\n\t\tthis.matchMedia = globalThis.matchMedia\n\t\tthis.getDocumentElement = () => globalThis.document.documentElement\n\t},\n}\n","import { ctx } from '../globals.ctx.ts'\n\n/\n Gets the value of an attribute from an element.\n \n @param qualifiedName - The name of the attribute to get\n * @param element - The element to get the attribute from. Defaults to `document.documentElement`\n * @returns The attribute value cast to type T, or null if the attribute doesn't exist\n \n @example\n * ```ts\n * // Get theme from document root\n * const theme = getAttribute('data-theme')\n \n // Get data-testid from a specific element\n * const testId = getAttribute('data-testid', element)\n * ```\n /\nexport function getAttribute<T extends string>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn element?.getAttribute(qualifiedName)\n}\n\n/\n Observes attributes changes on an element and calls corresponding handlers.\n \n @param handlers - An object mapping attribute names to handler functions.\n * @param element - The element to observe. Defaults to `document.documentElement`.\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.\n \n @example\n * ```ts\n * const observer = observeAttributes({\n * 'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),\n * 'class': (attr, value) => console.log(`class changed to: ${value}`)\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeAttributes<T extends string>(\n\thandlers: Record<string, (value: T \| null) => void>,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\tconst observer = new MutationObserver((mutations) => {\n\t\tfor (const mutation of mutations) {\n\t\t\tconst attribute = mutation.attributeName!\n\t\t\tconst value = element.getAttribute(attribute) as T \| null\n\t\t\thandlers[attribute]?.(value)\n\t\t}\n\t})\n\tobserver.observe(element, {\n\t\tattributes: true,\n\t\tattributeFilter: Object.keys(handlers),\n\t})\n\treturn observer\n}\n","import { findKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\nimport { observeAttributes } from '../utils/attribute.ts'\n\n/\n Gets the current theme by checking element class names against a themes map.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their class name values\n * @param options.defaultTheme - Fallback theme key if no matching class is found\n * @param options.element - Element to check classes on (defaults to document.documentElement)\n * @returns The matching theme key or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'theme-light',\n * dark: 'theme-dark'\n * }\n \n // Get current theme from document.documentElement\n * const theme = getThemeByClassName({\n * themes,\n * defaultTheme: 'light'\n * })\n \n // Get theme from specific element\n * const theme = getThemeByClassName({\n * themes,\n * element: myElement,\n * defaultTheme: 'light'\n * })\n * ```\n /\nexport function getThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst element = options.element ?? ctx.getDocumentElement()\n\tconst className = element.className\n\tconst theme = findKey(options.themes, (theme) => className.includes(options.themes[theme]!))\n\treturn theme ?? options.defaultTheme\n}\n\nexport function observeThemeByClassName<Themes extends Record<string, string>>(options: {\n\tthemes: Themes\n\thandler: (value: string \| undefined) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}) {\n\treturn observeAttributes(\n\t\t{\n\t\t\tclass: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler(options.defaultTheme as string)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (value.includes(options.themes[name]!)) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\tbreak\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import { ctx } from '../globals.ctx.ts'\nimport { getAttribute, observeAttributes } from './attribute.ts'\n\nexport function getDataAttribute<T extends `data-${string}`>(\n\tqualifiedName: T,\n\telement: Element \| undefined = ctx.getDocumentElement(),\n) {\n\treturn getAttribute(qualifiedName, element)\n}\n\n/\n Observes changes to `data-` attributes on an element and calls corresponding handlers.\n \n * @param options - Configuration options\n * @param options.handlers - An object mapping `data-` attribute names to handler functions.\n @param options.element - The element to observe. Defaults to `document.documentElement`\n * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer\n \n @example\n * ```ts\n * const observer = observeDataAttributes({\n * handlers: {\n * 'data-theme': (value) => console.log(`Theme changed to: ${value}`),\n * 'data-mode': (value) => console.log(`Mode changed to: ${value}`)\n * }\n * });\n \n // Later, to stop observing:\n * observer.disconnect();\n * ```\n /\nexport function observeDataAttributes<T extends string, K extends `data-${string}`>(\n\thandlers: Record<K, (value: T \| null) => void>,\n\telement?: Element \| undefined,\n) {\n\treturn observeAttributes(handlers, element)\n}\n","import { findKey } from 'type-plus'\nimport { getDataAttribute, observeDataAttributes } from '../utils/data-attribute.ts'\n\n/\n Gets the theme based on a data attribute value.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to check (must start with 'data-')\n * @param options.allowCustom - Whether to allow custom themes value\n * @returns The matching theme key, or defaultTheme if no match found\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark',\n * system: 'system'\n * }\n \n // Get theme from data-theme attribute\n * const theme = getThemeByDataAttribute({\n * themes,\n * defaultTheme: 'system',\n * attributeName: 'data-theme'\n * })\n * ```\n /\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): string \| undefined\nexport function getThemeByDataAttribute<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\tthemes: Themes\n\telement?: Element \| undefined\n}): keyof Themes \| undefined {\n\tconst value = getDataAttribute(options.attributeName, options.element) ?? undefined\n\tconst theme = findKey(options.themes, (theme) => options.themes[theme] === value)\n\n\treturn theme ?? options.defaultTheme ?? (options.allowCustom ? value : undefined)\n}\n\n/\n Observes changes to a theme data attribute and calls a handler when it changes.\n \n @param options - Configuration options\n * @param options.themes - Record mapping theme keys to their data attribute values\n * @param options.handler - Callback function called with the new theme value or null when removed\n * @param options.defaultTheme - Fallback theme key if attribute value doesn't match any theme\n * @param options.attributeName - Name of the data attribute to observe (must start with 'data-')\n * @returns A MutationObserver that can be disconnected to stop observing\n \n @example\n * ```ts\n * const themes = {\n * light: 'light',\n * dark: 'dark'\n * }\n \n // Observe data-theme attribute changes\n * const observer = observeThemeByDataAttributes({\n * themes,\n * handler: (theme) => console.log('Theme changed to:', theme),\n * defaultTheme: 'light',\n * attributeName: 'data-theme'\n * })\n \n // Stop observing\n * observer.disconnect()\n * ```\n /\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom: true \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver\nexport function observeThemeByDataAttributes<Themes extends Record<string, string>>(options: {\n\tattributeName: `data-${string}`\n\tthemes: Themes\n\thandler: (value: string \| null) => void\n\tallowCustom?: boolean \| undefined\n\tdefaultTheme?: keyof Themes \| undefined\n\telement?: Element \| undefined\n}): MutationObserver {\n\treturn observeDataAttributes(\n\t\t{\n\t\t\t[options.attributeName]: (value: string \| null) => {\n\t\t\t\tif (value === null) {\n\t\t\t\t\toptions.handler((options.defaultTheme as string) ?? null)\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tfor (const name in options.themes) {\n\t\t\t\t\tif (options.themes[name] === value) {\n\t\t\t\t\t\toptions.handler(name)\n\t\t\t\t\t\treturn\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\tif (options.allowCustom) {\n\t\t\t\t\toptions.handler(value)\n\t\t\t\t}\n\t\t\t},\n\t\t},\n\t\toptions.element,\n\t)\n}\n","import type { CreateTuple } from 'type-plus'\n\n/\n Retrieves CSS custom property values from the specified element.\n \n @param element - The HTML element to get property values from\n * @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\telement: HTMLElement,\n\t...props: Props\n): CreateTuple<Props['length'], string>\n/\n Retrieves CSS custom property values from `document.body`.\n \n @param props - CSS custom property names to retrieve, must be in the format `--property-name`\n * @returns Array of property values corresponding to the requested custom properties\n /\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(\n\t...props: Props\n): CreateTuple<Props['length'], string>\nexport function getCSSPropValues<Props extends Array<`--${string}`>>(element: unknown, ...props: Props) {\n\tif (typeof element === 'string') {\n\t\treturn getCSSPropValues(globalThis.document.body, element as `--${string}`, ...props)\n\t}\n\tconst style = globalThis.getComputedStyle(element as HTMLElement)\n\treturn props.map((v) => style.getPropertyValue(v)) as any\n}\n","import { mapKey } from 'type-plus'\nimport { ctx } from '../globals.ctx.ts'\n\n/\n Observes system color scheme preference changes and calls handlers when they occur.\n \n @param themes - An object mapping theme names to handler functions that are called when that theme is activated\n * @returns A cleanup function that removes all event listeners\n \n @example\n * ```ts\n * // Observe light/dark mode changes\n * const cleanup = observePrefersColorScheme({\n * light: (theme) => console.log('Light mode activated'),\n * dark: (theme) => console.log('Dark mode activated')\n * })\n \n // Later, to stop observing:\n * cleanup()\n * ```\n /\nexport function observePrefersColorScheme<T extends string>(themes: Record<T, (value: T \| null) => void>) {\n\tconst removers = mapKey(themes, (t) => {\n\t\tconst m = ctx.matchMedia(`(prefers-color-scheme: ${t as string})`)\n\t\tconst listener = (event: MediaQueryListEvent) => {\n\t\t\tif (event.matches) {\n\t\t\t\tthemes[t]?.(t)\n\t\t\t}\n\t\t}\n\n\t\tm.addEventListener('change', listener)\n\t\treturn () => m.removeEventListener('change', listener)\n\t})\n\n\treturn () => {\n\t\tfor (const remover of removers) {\n\t\t\tremover()\n\t\t}\n\t}\n}\n\n/\n Gets the current preferred color theme from the system settings.\n \n @param themes - A list of theme names to check against the system preference\n * @returns The first matching theme from the provided list, or null if none match\n \n @example\n * ```ts\n * // Check if system prefers light or dark mode\n * const theme = getPrefersColorTheme('light', 'dark')\n * // Returns 'light', 'dark', or null\n * ```\n */\nexport function getPrefersColorTheme<T extends string>(...themes: T[]) {\n\treturn themes.find((theme) => ctx.matchMedia(`(prefers-color-scheme: ${theme})`).matches) ?? null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAcA,SAAgB,OAAO,IAAyC;AAC/D,QAAO,OAAO,OAAO,WAAW,OAAO,WAAW,GAAG,QAAQ,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG;;;;;;;;;;;;;;;;;;;;;;ACEtF,SAAgB,OACf,IACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,OAAO,UAAU;AAC3B,OAAK,GAAG,QAAQ,OAAO,GAAG;AAC1B,OAAK,OAAO,WAAW,GAAG;;AAG3B,QAAO,QAAQ,KAAK,MAAM,QAAQ,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;ACX9C,SAAgB,OACf,KACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,QAAQ,UAAU;AAC5B,QAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,QAAM,OAAO,WAAW,IAAI;;AAG7B,QAAO,QAAQ,MAAM,MAAM,QAAQ,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;ACK/C,SAAgB,oBAAoB,OAAsB;AACzD,QAAO;;;;;;;;;;;;;;;;;;;;;ACJR,SAAgB,iBAAmE,OAAmC;AACrH,QAAO;;;;;;;;;;;;;;;;;;;;;;ACZR,SAAgB,WAAW,OAA4E;AACtG,KAAI,UAAU,OAAW,QAAO;CAEhC,MAAM,SAAS,EAAE;AAEjB,MAAK,MAAM,CAAC,KAAK,UAAU,OAAO,QAAQ,MAAM,CAC/C,QAAO,IAAI,WAAW,KAAK,GAAG,MAAM,IAAI,QAAQ,WAAW,UAAU,IAAI,MAAM,aAAa,GAAG,IAAI;AAGpG,QAAO;;;;;AC5BR,MAAa,MAAM;CAClB,WAAW,OAAe;AACzB,SAAO,WAAW,WAAW,MAAM;;CAEpC,qBAAqB;AACpB,SAAO,WAAW,SAAS;;CAE5B,SAAS;AACR,OAAK,aAAa,WAAW;AAC7B,OAAK,2BAA2B,WAAW,SAAS;;CAErD;;;;;;;;;;;;;;;;;;;;ACOD,SAAgB,aACf,eACA,UAA+B,IAAI,oBAAoB,EACtD;AACD,QAAO,SAAS,aAAa,cAAc;;;;;;;;;;;;;;;;;;;;AAqB5C,SAAgB,kBACf,UACA,UAA+B,IAAI,oBAAoB,EACtD;CACD,MAAM,WAAW,IAAI,kBAAkB,cAAc;AACpD,OAAK,MAAM,YAAY,WAAW;GACjC,MAAM,YAAY,SAAS;GAC3B,MAAM,QAAQ,QAAQ,aAAa,UAAU;AAC7C,YAAS,aAAa,MAAM;;GAE5B;AACF,UAAS,QAAQ,SAAS;EACzB,YAAY;EACZ,iBAAiB,OAAO,KAAK,SAAS;EACtC,CAAC;AACF,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACxBR,SAAgB,oBAA2D,SAI9C;CAE5B,MAAM,aADU,QAAQ,WAAW,IAAI,oBAAoB,EACjC;AAE1B,QADc,QAAQ,QAAQ,SAAS,UAAU,UAAU,SAAS,QAAQ,OAAO,OAAQ,CAAC,IAC5E,QAAQ;;AAGzB,SAAgB,wBAA+D,SAK5E;AACF,QAAO,kBACN,EACC,QAAQ,UAAyB;AAChC,MAAI,UAAU,MAAM;AACnB,WAAQ,QAAQ,QAAQ,aAAuB;AAC/C;;AAGD,OAAK,MAAM,QAAQ,QAAQ,OAC1B,KAAI,MAAM,SAAS,QAAQ,OAAO,MAAO,EAAE;AAC1C,WAAQ,QAAQ,KAAK;AACrB;;IAIH,EACD,QAAQ,QACR;;;;;ACjEF,SAAgB,iBACf,eACA,UAA+B,IAAI,oBAAoB,EACtD;AACD,QAAO,aAAa,eAAe,QAAQ;;;;;;;;;;;;;;;;;;;;;;;AAwB5C,SAAgB,sBACf,UACA,SACC;AACD,QAAO,kBAAkB,UAAU,QAAQ;;;;;ACO5C,SAAgB,wBAA+D,SAMlD;CAC5B,MAAM,QAAQ,iBAAiB,QAAQ,eAAe,QAAQ,QAAQ,IAAI;AAG1E,QAFc,QAAQ,QAAQ,SAAS,UAAU,QAAQ,OAAO,WAAW,MAAM,IAEjE,QAAQ,iBAAiB,QAAQ,cAAc,QAAQ;;AA+CxE,SAAgB,6BAAoE,SAO/D;AACpB,QAAO,sBACN,GACE,QAAQ,iBAAiB,UAAyB;AAClD,MAAI,UAAU,MAAM;AACnB,WAAQ,QAAS,QAAQ,gBAA2B,KAAK;AACzD;;AAGD,OAAK,MAAM,QAAQ,QAAQ,OAC1B,KAAI,QAAQ,OAAO,UAAU,OAAO;AACnC,WAAQ,QAAQ,KAAK;AACrB;;AAIF,MAAI,QAAQ,YACX,SAAQ,QAAQ,MAAM;IAGxB,EACD,QAAQ,QACR;;;;;AC1GF,SAAgB,iBAAqD,SAAkB,GAAG,OAAc;AACvG,KAAI,OAAO,YAAY,SACtB,QAAO,iBAAiB,WAAW,SAAS,MAAM,SAA0B,GAAG,MAAM;CAEtF,MAAM,QAAQ,WAAW,iBAAiB,QAAuB;AACjE,QAAO,MAAM,KAAK,MAAM,MAAM,iBAAiB,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;ACNnD,SAAgB,0BAA4C,QAA8C;CACzG,MAAM,WAAW,OAAO,SAAS,MAAM;EACtC,MAAM,IAAI,IAAI,WAAW,0BAA0B,EAAY,GAAG;EAClE,MAAM,YAAY,UAA+B;AAChD,OAAI,MAAM,QACT,QAAO,KAAK,EAAE;;AAIhB,IAAE,iBAAiB,UAAU,SAAS;AACtC,eAAa,EAAE,oBAAoB,UAAU,SAAS;GACrD;AAEF,cAAa;AACZ,OAAK,MAAM,WAAW,SACrB,UAAS;;;;;;;;;;;;;;;;AAkBZ,SAAgB,qBAAuC,GAAG,QAAa;AACtE,QAAO,OAAO,MAAM,UAAU,IAAI,WAAW,0BAA0B,MAAM,GAAG,CAAC,QAAQ,IAAI"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@just-web/css",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "CSS types and utilities",
   "homepage": "https://github.com/justland/just-web-foundation/tree/main/libs/css",
   "repository": {

package/src/index.ts CHANGED Viewed

@@ -3,8 +3,8 @@ export * from './convertors/px_2_num.ts'
 export * from './convertors/px_2_rem.ts'
 export * from './convertors/rem_2_px.ts'
 export * from './properties/css_properties.ts'
-export { defineProperties } from './properties/properties.ts'
 export type { Properties } from './properties/properties.ts'
+export { defineProperties } from './properties/properties.ts'
 export * from './properties/to_dom_style.ts'
 export * from './props/class-name.ts'
 export * from './props/style.ts'

package/src/properties/css_properties.ts CHANGED Viewed

@@ -9,9 +9,9 @@ type CustomProperties = { [k: `--${string}`]: string }
  * and string values for custom properties with '--' prefix.
  * Defined as a union so plain Properties (e.g. from React) are assignable.
  */
-export type CSSProperties<TLength = string | number, TTime = string & {}> =
-	| CSSTypeProperties<TLength, TTime>
-	| (CSSTypeProperties<TLength, TTime> & CustomProperties)
+export interface CSSProperties<TLength = string | number, TTime = string & {}>
+	extends CSSTypeProperties<TLength, TTime>,
+		CustomProperties {}
 /**
  * Defines CSS properties including custom properties.

package/src/properties/properties.ts CHANGED Viewed

@@ -8,9 +8,9 @@ type CustomProperties = { [k: `--${string}`]: string }
  * Allows for string or number values for standard properties,
  * and string values for custom properties with '--' prefix.
  */
-export type Properties<TLength = 0 | (string & {}), TTime = string & {}> =
-	| CSSTypeProperties<TLength, TTime>
-	| (CSSTypeProperties<TLength, TTime> & CustomProperties)
+export interface Properties<TLength = 0 | (string & {}), TTime = string & {}>
+	extends CSSTypeProperties<TLength, TTime>,
+		CustomProperties {}
 /**
  * Defines CSS properties including custom properties.