yummies 7.19.4 → 7.20.0

package/css-cx.js

@@ -0,0 +1,74 @@
+import { cva as cva$1 } from "class-variance-authority";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+//#region src/css/css-cx.ts
+/**
+* @internal Separate chunk so clsx + tailwind-merge + class-variance-authority are tree-shaken
+* away when `cx`/`cva` are not used. Consumers import from `yummies/css` — this module is not a
+* public entry point.
+*/
+/**
+* Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
+* the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so
+* conflicting Tailwind utilities collapse to the last/intended one (e.g. two `padding-x` classes).
+*
+* Accepts the same argument shapes as `clsx`: strings, objects, arrays, falsy values to omit.
+*
+* @param args - Same as `clsx(...args)` — `ClassValue` rest parameters.
+* @returns A single merged class string, safe for `className` on DOM/React.
+*
+* @example
+* ```ts
+* cx('px-2 py-1 text-sm', 'px-4'); // 'py-1 text-sm px-4' — padding-x merged
+* ```
+*
+* @example
+* ```ts
+* cx('btn', { 'btn--active': isActive, 'btn--disabled': disabled }, className);
+* ```
+*/
+var cx = (...args) => twMerge(clsx(...args));
+/**
+* {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**
+* pass as {@link cx}: the class string produced by the variant function is merged so Tailwind
+* conflicts resolve predictably.
+*
+* API matches `cva` from `class-variance-authority`: optional `base` classes, `config` with
+* `variants`, `defaultVariants`, and `compoundVariants`. The returned function accepts variant
+* props plus optional `class` / `className` for one-off overrides.
+*
+* Use {@link VariantProps} with `typeof buttonVariants` (or similar) to type component props.
+*
+* @param base - Base `ClassValue`(s) always applied.
+* @param config - Variant schema and defaults (same shape as upstream `cva`).
+* @returns A function `(props?) => string` that resolves variant classes, merged with tw-merge.
+*
+* @example
+* ```ts
+* const button = cva('rounded font-medium', {
+*   variants: {
+*     tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },
+*     size: { sm: 'text-sm px-2', md: 'text-base px-4' },
+*   },
+*   defaultVariants: { tone: 'primary', size: 'md' },
+* });
+* button({ tone: 'ghost', className: 'ml-2' });
+* ```
+*
+* @example
+* ```ts
+* const card = cva('border p-4', {
+*   variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },
+*   defaultVariants: { elevated: false },
+* });
+* card({ elevated: true });
+* ```
+*/
+var cva = ((...args) => {
+	const schema = cva$1(...args);
+	return (...inputArgs) => twMerge(schema(...inputArgs));
+});
+//#endregion
+export { cva, cx };
+
+//# sourceMappingURL=css-cx.js.map

package/css-cx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css-cx.js","names":[],"sources":["../src/css/css-cx.ts"],"sourcesContent":["/**\n * @internal Separate chunk so clsx + tailwind-merge + class-variance-authority are tree-shaken\n * away when `cx`/`cva` are not used. Consumers import from `yummies/css` — this module is not a\n * public entry point.\n */\n\nimport { cva as cvaLib } from 'class-variance-authority';\nimport clsx from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\n/**\n * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs\n * the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so\n * conflicting Tailwind utilities collapse to the last/intended one (e.g. two `padding-x` classes).\n *\n * Accepts the same argument shapes as `clsx`: strings, objects, arrays, falsy values to omit.\n *\n * @param args - Same as `clsx(...args)` — `ClassValue` rest parameters.\n * @returns A single merged class string, safe for `className` on DOM/React.\n *\n * @example\n * ```ts\n * cx('px-2 py-1 text-sm', 'px-4'); // 'py-1 text-sm px-4' — padding-x merged\n * ```\n *\n * @example\n * ```ts\n * cx('btn', { 'btn--active': isActive, 'btn--disabled': disabled }, className);\n * ```\n */\nexport const cx = (...args: Parameters<typeof clsx>) => twMerge(clsx(...args));\n\n/**\n * {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**\n * pass as {@link cx}: the class string produced by the variant function is merged so Tailwind\n * conflicts resolve predictably.\n *\n * API matches `cva` from `class-variance-authority`: optional `base` classes, `config` with\n * `variants`, `defaultVariants`, and `compoundVariants`. The returned function accepts variant\n * props plus optional `class` / `className` for one-off overrides.\n *\n * Use {@link VariantProps} with `typeof buttonVariants` (or similar) to type component props.\n *\n * @param base - Base `ClassValue`(s) always applied.\n * @param config - Variant schema and defaults (same shape as upstream `cva`).\n * @returns A function `(props?) => string` that resolves variant classes, merged with tw-merge.\n *\n * @example\n * ```ts\n * const button = cva('rounded font-medium', {\n *   variants: {\n *     tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },\n *     size: { sm: 'text-sm px-2', md: 'text-base px-4' },\n *   },\n *   defaultVariants: { tone: 'primary', size: 'md' },\n * });\n * button({ tone: 'ghost', className: 'ml-2' });\n * ```\n *\n * @example\n * ```ts\n * const card = cva('border p-4', {\n *   variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },\n *   defaultVariants: { elevated: false },\n * });\n * card({ elevated: true });\n * ```\n */\nexport const cva = ((...args: any[]) => {\n  const schema = cvaLib(...args);\n  return (...inputArgs: any[]) => twMerge(schema(...inputArgs));\n}) as unknown as typeof cvaLib;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,IAAa,MAAM,GAAG,SAAkC,QAAQ,KAAK,GAAG,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC7E,IAAa,QAAQ,GAAG,SAAgB;CACtC,MAAM,SAAS,MAAO,GAAG,IAAI;CAC7B,QAAQ,GAAG,cAAqB,QAAQ,OAAO,GAAG,SAAS,CAAC;AAC9D"}

package/css.cjs

@@ -1,113 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_chunk = require("./chunk-CZWwpsFl.cjs");
-let class_variance_authority = require("class-variance-authority");
-let clsx = require("clsx");
-clsx = require_chunk.__toESM(clsx, 1);
-let tailwind_merge = require("tailwind-merge");
-//#region src/css.ts
-/**
-* ---header-docs-section---
-* # yummies/css
-*
-* ## Description
-*
-* Styling utilities for React and plain DOM: `rem` conversion, `clsx` + `tailwind-merge` via `cx`,
-* and a `cva` bridge for variant-driven class names. The goal is predictable class strings without
-* Tailwind conflicts and with less boilerplate than concatenating strings by hand across components.
-*
-* ## Usage
-*
-* ```ts
-* import { cx, toRem } from "yummies/css";
-* ```
-*/
-/**
-* Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
-*
-* Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet
-* should scale with root font size (accessibility, user zoom). `remValue` is the assumed
-* `1rem` size in px (browser default is typically `16`).
-*
-* Also you can override default rem value using `toRem.defaultRemValue = 24`
-*
-* @param px - Pixel value to convert (not rounded; stringification keeps full float).
-* @param remValue - How many pixels one `rem` equals. Defaults to `16`.
-* @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
-*
-* @example
-* ```ts
-* const width = toRem(24); // '1.5rem' with default 16px root
-* ```
-*
-* @example
-* ```ts
-* // Custom root / design system where 1rem === 10px
-* const gap = toRem(20, 10); // '2rem'
-* ```
-*/
-var toRem = (px, remValue) => `${px / (remValue ?? toRem.defaultRemValue)}rem`;
-toRem.defaultRemValue = 16;
-/**
-* Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
-* the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so
-* conflicting Tailwind utilities collapse to the last/intended one (e.g. two `padding-x` classes).
-*
-* Accepts the same argument shapes as `clsx`: strings, objects, arrays, falsy values to omit.
-*
-* @param args - Same as `clsx(...args)` — `ClassValue` rest parameters.
-* @returns A single merged class string, safe for `className` on DOM/React.
-*
-* @example
-* ```ts
-* cx('px-2 py-1 text-sm', 'px-4'); // 'py-1 text-sm px-4' — padding-x merged
-* ```
-*
-* @example
-* ```ts
-* cx('btn', { 'btn--active': isActive, 'btn--disabled': disabled }, className);
-* ```
-*/
-var cx = (...args) => (0, tailwind_merge.twMerge)((0, clsx.default)(...args));
-/**
-* {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**
-* pass as {@link cx}: the class string produced by the variant function is merged so Tailwind
-* conflicts resolve predictably.
-*
-* API matches `cva` from `class-variance-authority`: optional `base` classes, `config` with
-* `variants`, `defaultVariants`, and `compoundVariants`. The returned function accepts variant
-* props plus optional `class` / `className` for one-off overrides.
-*
-* Use {@link VariantProps} with `typeof buttonVariants` (or similar) to type component props.
-*
-* @param base - Base `ClassValue`(s) always applied.
-* @param config - Variant schema and defaults (same shape as upstream `cva`).
-* @returns A function `(props?) => string` that resolves variant classes, merged with tw-merge.
-*
-* @example
-* ```ts
-* const button = cva('rounded font-medium', {
-*   variants: {
-*     tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },
-*     size: { sm: 'text-sm px-2', md: 'text-base px-4' },
-*   },
-*   defaultVariants: { tone: 'primary', size: 'md' },
-* });
-* button({ tone: 'ghost', className: 'ml-2' });
-* ```
-*
-* @example
-* ```ts
-* const card = cva('border p-4', {
-*   variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },
-*   defaultVariants: { elevated: false },
-* });
-* card({ elevated: true });
-* ```
-*/
-var cva = ((...args) => {
-	const schema = (0, class_variance_authority.cva)(...args);
-	return (...inputArgs) => (0, tailwind_merge.twMerge)(schema(...inputArgs));
-});
+const require_css_cx = require("./css-cx.cjs");
+//#region src/css/load-css-file.ts
 /**
 * Injects a stylesheet by appending a `<link rel="stylesheet">` to `document.head`.
 * Resolves when the sheet fires `load`; rejects on `error` (e.g. 404 or network failure).
@@ -165,8 +58,36 @@ var loadCssFile = (url, attrubutes) => new Promise((resolve, reject) => {
 	document.head.appendChild(link);
 });
 //#endregion
-exports.cva = cva;
-exports.cx = cx;
+//#region src/css/to-rem.ts
+/**
+* Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
+*
+* Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet
+* should scale with root font size (accessibility, user zoom). `remValue` is the assumed
+* `1rem` size in px (browser default is typically `16`).
+*
+* Also you can override default rem value using `toRem.defaultRemValue = 24`
+*
+* @param px - Pixel value to convert (not rounded; stringification keeps full float).
+* @param remValue - How many pixels one `rem` equals. Defaults to `16`.
+* @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
+*
+* @example
+* ```ts
+* const width = toRem(24); // '1.5rem' with default 16px root
+* ```
+*
+* @example
+* ```ts
+* // Custom root / design system where 1rem === 10px
+* const gap = toRem(20, 10); // '2rem'
+* ```
+*/
+var toRem = (px, remValue) => `${px / (remValue ?? toRem.defaultRemValue)}rem`;
+toRem.defaultRemValue = 16;
+//#endregion
+exports.cva = require_css_cx.cva;
+exports.cx = require_css_cx.cx;
 exports.loadCssFile = loadCssFile;
 exports.toRem = toRem;
 

package/css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.cjs","names":[],"sources":["../src/css.ts"],"sourcesContent":["/**\n * ---header-docs-section---\n * # yummies/css\n *\n * ## Description\n *\n * Styling utilities for React and plain DOM: `rem` conversion, `clsx` + `tailwind-merge` via `cx`,\n * and a `cva` bridge for variant-driven class names. The goal is predictable class strings without\n * Tailwind conflicts and with less boilerplate than concatenating strings by hand across components.\n *\n * ## Usage\n *\n * ```ts\n * import { cx, toRem } from \"yummies/css\";\n * ```\n */\n\nimport { cva as cvaLib, VariantProps } from 'class-variance-authority';\nimport clsx from 'clsx';\nimport { twMerge } from 'tailwind-merge';\nimport type { Maybe } from 'yummies/types';\n/**\n * Converts a length in **pixels** to a CSS **`rem`** string (`\"<number>rem\"`).\n *\n * Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet\n * should scale with root font size (accessibility, user zoom). `remValue` is the assumed\n * `1rem` size in px (browser default is typically `16`).\n *\n * Also you can override default rem value using `toRem.defaultRemValue = 24`\n *\n * @param px - Pixel value to convert (not rounded; stringification keeps full float).\n * @param remValue - How many pixels one `rem` equals. Defaults to `16`.\n * @returns A string like `\"1.5rem\"` suitable for `style` or CSS-in-JS.\n *\n * @example\n * ```ts\n * const width = toRem(24); // '1.5rem' with default 16px root\n * ```\n *\n * @example\n * ```ts\n * // Custom root / design system where 1rem === 10px\n * const gap = toRem(20, 10); // '2rem'\n * ```\n */\nexport const toRem = (px: number, remValue?: number): string =>\n  `${px / (remValue ?? toRem.defaultRemValue)}rem`;\n\ntoRem.defaultRemValue = 16;\n\n/**\n * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs\n * the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so\n * conflicting Tailwind utilities collapse to the last/intended one (e.g. two `padding-x` classes).\n *\n * Accepts the same argument shapes as `clsx`: strings, objects, arrays, falsy values to omit.\n *\n * @param args - Same as `clsx(...args)` — `ClassValue` rest parameters.\n * @returns A single merged class string, safe for `className` on DOM/React.\n *\n * @example\n * ```ts\n * cx('px-2 py-1 text-sm', 'px-4'); // 'py-1 text-sm px-4' — padding-x merged\n * ```\n *\n * @example\n * ```ts\n * cx('btn', { 'btn--active': isActive, 'btn--disabled': disabled }, className);\n * ```\n */\nexport const cx = (...args: Parameters<typeof clsx>) => twMerge(clsx(...args));\n\n/**\n * {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**\n * pass as {@link cx}: the class string produced by the variant function is merged so Tailwind\n * conflicts resolve predictably.\n *\n * API matches `cva` from `class-variance-authority`: optional `base` classes, `config` with\n * `variants`, `defaultVariants`, and `compoundVariants`. The returned function accepts variant\n * props plus optional `class` / `className` for one-off overrides.\n *\n * Use {@link VariantProps} with `typeof buttonVariants` (or similar) to type component props.\n *\n * @param base - Base `ClassValue`(s) always applied.\n * @param config - Variant schema and defaults (same shape as upstream `cva`).\n * @returns A function `(props?) => string` that resolves variant classes, merged with tw-merge.\n *\n * @example\n * ```ts\n * const button = cva('rounded font-medium', {\n *   variants: {\n *     tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },\n *     size: { sm: 'text-sm px-2', md: 'text-base px-4' },\n *   },\n *   defaultVariants: { tone: 'primary', size: 'md' },\n * });\n * button({ tone: 'ghost', className: 'ml-2' });\n * ```\n *\n * @example\n * ```ts\n * const card = cva('border p-4', {\n *   variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },\n *   defaultVariants: { elevated: false },\n * });\n * card({ elevated: true });\n * ```\n */\nexport const cva = ((...args: any[]) => {\n  const schema = cvaLib(...args);\n  return (...inputArgs: any[]) => twMerge(schema(...inputArgs));\n}) as unknown as typeof cvaLib;\n\n/**\n * Utility type from `class-variance-authority`: infers the variant prop object from a `cva` instance.\n * Use it to type React (or other) components that forward variant props.\n *\n * @example\n * ```ts\n * const input = cva('border', { variants: { size: { sm: 'h-8', lg: 'h-12' } } });\n * type InputVariants = VariantProps<typeof input>;\n * // { size?: 'sm' | 'lg' | null }\n * ```\n */\nexport type { VariantProps } from 'class-variance-authority';\n\n/**\n * Re-export from `clsx`: a class name fragment — string, number, nested arrays, object map of\n * flags, or falsy nodes to skip. Used by {@link cx}, {@link cva}, and typical `className` helpers.\n *\n * @example\n * ```ts\n * const value: ClassValue = ['btn', false && 'hidden', { active: true }];\n * ```\n */\nexport type { ClassValue } from 'clsx';\n\n/**\n * Injects a stylesheet by appending a `<link rel=\"stylesheet\">` to `document.head`.\n * Resolves when the sheet fires `load`; rejects on `error` (e.g. 404 or network failure).\n *\n * **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed\n * first, so repeated calls with the same `id` replace the previous link (useful for theme or\n * font URLs that change).\n *\n * If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,\n * `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.\n *\n * @param url - Stylesheet URL (`href`).\n * @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).\n * @returns Promise that resolves to `undefined` on load, or rejects on load error.\n *\n * @example\n * ```ts\n * await loadCssFile('https://example.com/fonts.css', {\n *   id: 'app-fonts',\n *   crossOrigin: 'anonymous',\n * });\n * ```\n *\n * @example\n * ```ts\n * // Swap theme stylesheet without duplicate link tags\n * await loadCssFile('/themes/dark.css', { id: 'theme' });\n * await loadCssFile('/themes/light.css', { id: 'theme' });\n * ```\n */\nexport const loadCssFile = (url: string, attrubutes?: Record<string, any>) =>\n  new Promise((resolve, reject) => {\n    let link: Maybe<HTMLLinkElement>;\n\n    if (attrubutes?.id) {\n      link = document.getElementById(attrubutes.id) as HTMLLinkElement | null;\n\n      if (link) {\n        link.remove();\n      }\n    }\n\n    link = document.createElement('link');\n\n    const handleLoad = () => {\n      resolve(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    const handleError = () => {\n      reject(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    link.addEventListener('load', handleLoad);\n    link.addEventListener('error', handleError);\n\n    link.setAttribute('href', url);\n\n    if (!attrubutes?.rel) {\n      link.setAttribute('rel', 'stylesheet');\n    }\n\n    Object.entries(attrubutes || {}).forEach(([key, value]) => {\n      link.setAttribute(key, value);\n    });\n\n    document.head.appendChild(link);\n  });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAAS,IAAY,aAChC,GAAG,MAAM,YAAY,MAAM,iBAAiB;AAE9C,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;AAsBxB,IAAa,MAAM,GAAG,UAAA,GAAA,eAAA,UAAA,GAAA,KAAA,SAA+C,GAAG,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC9E,IAAa,QAAQ,GAAG,SAAgB;CACtC,MAAM,UAAA,GAAA,yBAAA,KAAgB,GAAG,KAAK;AAC9B,SAAQ,GAAG,eAAA,GAAA,eAAA,SAA6B,OAAO,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyD/D,IAAa,eAAe,KAAa,eACvC,IAAI,SAAS,SAAS,WAAW;CAC/B,IAAI;AAEJ,KAAI,YAAY,IAAI;AAClB,SAAO,SAAS,eAAe,WAAW,GAAG;AAE7C,MAAI,KACF,MAAK,QAAQ;;AAIjB,QAAO,SAAS,cAAc,OAAO;CAErC,MAAM,mBAAmB;AACvB,UAAQ,KAAA,EAAU;AAClB,OAAM,oBAAoB,QAAQ,WAAW;AAC7C,OAAM,oBAAoB,SAAS,YAAY;;CAGjD,MAAM,oBAAoB;AACxB,SAAO,KAAA,EAAU;AACjB,OAAM,oBAAoB,QAAQ,WAAW;AAC7C,OAAM,oBAAoB,SAAS,YAAY;;AAGjD,MAAK,iBAAiB,QAAQ,WAAW;AACzC,MAAK,iBAAiB,SAAS,YAAY;AAE3C,MAAK,aAAa,QAAQ,IAAI;AAE9B,KAAI,CAAC,YAAY,IACf,MAAK,aAAa,OAAO,aAAa;AAGxC,QAAO,QAAQ,cAAc,EAAE,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;AACzD,OAAK,aAAa,KAAK,MAAM;GAC7B;AAEF,UAAS,KAAK,YAAY,KAAK;EAC/B"}
+{"version":3,"file":"css.cjs","names":[],"sources":["../src/css/load-css-file.ts","../src/css/to-rem.ts"],"sourcesContent":["import type { Maybe } from 'yummies/types';\n\n/**\n * Injects a stylesheet by appending a `<link rel=\"stylesheet\">` to `document.head`.\n * Resolves when the sheet fires `load`; rejects on `error` (e.g. 404 or network failure).\n *\n * **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed\n * first, so repeated calls with the same `id` replace the previous link (useful for theme or\n * font URLs that change).\n *\n * If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,\n * `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.\n *\n * @param url - Stylesheet URL (`href`).\n * @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).\n * @returns Promise that resolves to `undefined` on load, or rejects on load error.\n *\n * @example\n * ```ts\n * await loadCssFile('https://example.com/fonts.css', {\n *   id: 'app-fonts',\n *   crossOrigin: 'anonymous',\n * });\n * ```\n *\n * @example\n * ```ts\n * // Swap theme stylesheet without duplicate link tags\n * await loadCssFile('/themes/dark.css', { id: 'theme' });\n * await loadCssFile('/themes/light.css', { id: 'theme' });\n * ```\n */\nexport const loadCssFile = (url: string, attrubutes?: Record<string, any>) =>\n  new Promise((resolve, reject) => {\n    let link: Maybe<HTMLLinkElement>;\n\n    if (attrubutes?.id) {\n      link = document.getElementById(attrubutes.id) as HTMLLinkElement | null;\n\n      if (link) {\n        link.remove();\n      }\n    }\n\n    link = document.createElement('link');\n\n    const handleLoad = () => {\n      resolve(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    const handleError = () => {\n      reject(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    link.addEventListener('load', handleLoad);\n    link.addEventListener('error', handleError);\n\n    link.setAttribute('href', url);\n\n    if (!attrubutes?.rel) {\n      link.setAttribute('rel', 'stylesheet');\n    }\n\n    Object.entries(attrubutes || {}).forEach(([key, value]) => {\n      link.setAttribute(key, value);\n    });\n\n    document.head.appendChild(link);\n  });\n","/**\n * Converts a length in **pixels** to a CSS **`rem`** string (`\"<number>rem\"`).\n *\n * Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet\n * should scale with root font size (accessibility, user zoom). `remValue` is the assumed\n * `1rem` size in px (browser default is typically `16`).\n *\n * Also you can override default rem value using `toRem.defaultRemValue = 24`\n *\n * @param px - Pixel value to convert (not rounded; stringification keeps full float).\n * @param remValue - How many pixels one `rem` equals. Defaults to `16`.\n * @returns A string like `\"1.5rem\"` suitable for `style` or CSS-in-JS.\n *\n * @example\n * ```ts\n * const width = toRem(24); // '1.5rem' with default 16px root\n * ```\n *\n * @example\n * ```ts\n * // Custom root / design system where 1rem === 10px\n * const gap = toRem(20, 10); // '2rem'\n * ```\n */\nexport const toRem = (px: number, remValue?: number): string =>\n  `${px / (remValue ?? toRem.defaultRemValue)}rem`;\n\ntoRem.defaultRemValue = 16;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,eAAe,KAAa,eACvC,IAAI,SAAS,SAAS,WAAW;CAC/B,IAAI;CAEJ,IAAI,YAAY,IAAI;EAClB,OAAO,SAAS,eAAe,WAAW,EAAE;EAE5C,IAAI,MACF,KAAK,OAAO;CAEhB;CAEA,OAAO,SAAS,cAAc,MAAM;CAEpC,MAAM,mBAAmB;EACvB,QAAQ,KAAA,CAAS;EACjB,KAAM,oBAAoB,QAAQ,UAAU;EAC5C,KAAM,oBAAoB,SAAS,WAAW;CAChD;CAEA,MAAM,oBAAoB;EACxB,OAAO,KAAA,CAAS;EAChB,KAAM,oBAAoB,QAAQ,UAAU;EAC5C,KAAM,oBAAoB,SAAS,WAAW;CAChD;CAEA,KAAK,iBAAiB,QAAQ,UAAU;CACxC,KAAK,iBAAiB,SAAS,WAAW;CAE1C,KAAK,aAAa,QAAQ,GAAG;CAE7B,IAAI,CAAC,YAAY,KACf,KAAK,aAAa,OAAO,YAAY;CAGvC,OAAO,QAAQ,cAAc,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,WAAW;EACzD,KAAK,aAAa,KAAK,KAAK;CAC9B,CAAC;CAED,SAAS,KAAK,YAAY,IAAI;AAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AChDH,IAAa,SAAS,IAAY,aAChC,GAAG,MAAM,YAAY,MAAM,iBAAiB;AAE9C,MAAM,kBAAkB"}

package/css.d.ts

@@ -4,50 +4,11 @@ import clsx from 'clsx';
 export { ClassValue } from 'clsx';
 
 /**
- * ---header-docs-section---
- * # yummies/css
- *
- * ## Description
- *
- * Styling utilities for React and plain DOM: `rem` conversion, `clsx` + `tailwind-merge` via `cx`,
- * and a `cva` bridge for variant-driven class names. The goal is predictable class strings without
- * Tailwind conflicts and with less boilerplate than concatenating strings by hand across components.
- *
- * ## Usage
- *
- * ```ts
- * import { cx, toRem } from "yummies/css";
- * ```
+ * @internal Separate chunk so clsx + tailwind-merge + class-variance-authority are tree-shaken
+ * away when `cx`/`cva` are not used. Consumers import from `yummies/css` — this module is not a
+ * public entry point.
  */
 
-/**
- * Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
- *
- * Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet
- * should scale with root font size (accessibility, user zoom). `remValue` is the assumed
- * `1rem` size in px (browser default is typically `16`).
- *
- * Also you can override default rem value using `toRem.defaultRemValue = 24`
- *
- * @param px - Pixel value to convert (not rounded; stringification keeps full float).
- * @param remValue - How many pixels one `rem` equals. Defaults to `16`.
- * @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
- *
- * @example
- * ```ts
- * const width = toRem(24); // '1.5rem' with default 16px root
- * ```
- *
- * @example
- * ```ts
- * // Custom root / design system where 1rem === 10px
- * const gap = toRem(20, 10); // '2rem'
- * ```
- */
-declare const toRem: {
-    (px: number, remValue?: number): string;
-    defaultRemValue: number;
-};
 /**
  * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
  * the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so
@@ -139,4 +100,33 @@ declare const cva: typeof cva$1;
  */
 declare const loadCssFile: (url: string, attrubutes?: Record<string, any>) => Promise<unknown>;
 
+/**
+ * Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
+ *
+ * Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet
+ * should scale with root font size (accessibility, user zoom). `remValue` is the assumed
+ * `1rem` size in px (browser default is typically `16`).
+ *
+ * Also you can override default rem value using `toRem.defaultRemValue = 24`
+ *
+ * @param px - Pixel value to convert (not rounded; stringification keeps full float).
+ * @param remValue - How many pixels one `rem` equals. Defaults to `16`.
+ * @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
+ *
+ * @example
+ * ```ts
+ * const width = toRem(24); // '1.5rem' with default 16px root
+ * ```
+ *
+ * @example
+ * ```ts
+ * // Custom root / design system where 1rem === 10px
+ * const gap = toRem(20, 10); // '2rem'
+ * ```
+ */
+declare const toRem: {
+    (px: number, remValue?: number): string;
+    defaultRemValue: number;
+};
+
 export { cva, cx, loadCssFile, toRem };

package/css.js

@@ -1,110 +1,5 @@
-import { cva as cva$1 } from "class-variance-authority";
-import clsx from "clsx";
-import { twMerge } from "tailwind-merge";
-//#region src/css.ts
-/**
-* ---header-docs-section---
-* # yummies/css
-*
-* ## Description
-*
-* Styling utilities for React and plain DOM: `rem` conversion, `clsx` + `tailwind-merge` via `cx`,
-* and a `cva` bridge for variant-driven class names. The goal is predictable class strings without
-* Tailwind conflicts and with less boilerplate than concatenating strings by hand across components.
-*
-* ## Usage
-*
-* ```ts
-* import { cx, toRem } from "yummies/css";
-* ```
-*/
-/**
-* Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
-*
-* Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet
-* should scale with root font size (accessibility, user zoom). `remValue` is the assumed
-* `1rem` size in px (browser default is typically `16`).
-*
-* Also you can override default rem value using `toRem.defaultRemValue = 24`
-*
-* @param px - Pixel value to convert (not rounded; stringification keeps full float).
-* @param remValue - How many pixels one `rem` equals. Defaults to `16`.
-* @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
-*
-* @example
-* ```ts
-* const width = toRem(24); // '1.5rem' with default 16px root
-* ```
-*
-* @example
-* ```ts
-* // Custom root / design system where 1rem === 10px
-* const gap = toRem(20, 10); // '2rem'
-* ```
-*/
-var toRem = (px, remValue) => `${px / (remValue ?? toRem.defaultRemValue)}rem`;
-toRem.defaultRemValue = 16;
-/**
-* Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
-* the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so
-* conflicting Tailwind utilities collapse to the last/intended one (e.g. two `padding-x` classes).
-*
-* Accepts the same argument shapes as `clsx`: strings, objects, arrays, falsy values to omit.
-*
-* @param args - Same as `clsx(...args)` — `ClassValue` rest parameters.
-* @returns A single merged class string, safe for `className` on DOM/React.
-*
-* @example
-* ```ts
-* cx('px-2 py-1 text-sm', 'px-4'); // 'py-1 text-sm px-4' — padding-x merged
-* ```
-*
-* @example
-* ```ts
-* cx('btn', { 'btn--active': isActive, 'btn--disabled': disabled }, className);
-* ```
-*/
-var cx = (...args) => twMerge(clsx(...args));
-/**
-* {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**
-* pass as {@link cx}: the class string produced by the variant function is merged so Tailwind
-* conflicts resolve predictably.
-*
-* API matches `cva` from `class-variance-authority`: optional `base` classes, `config` with
-* `variants`, `defaultVariants`, and `compoundVariants`. The returned function accepts variant
-* props plus optional `class` / `className` for one-off overrides.
-*
-* Use {@link VariantProps} with `typeof buttonVariants` (or similar) to type component props.
-*
-* @param base - Base `ClassValue`(s) always applied.
-* @param config - Variant schema and defaults (same shape as upstream `cva`).
-* @returns A function `(props?) => string` that resolves variant classes, merged with tw-merge.
-*
-* @example
-* ```ts
-* const button = cva('rounded font-medium', {
-*   variants: {
-*     tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },
-*     size: { sm: 'text-sm px-2', md: 'text-base px-4' },
-*   },
-*   defaultVariants: { tone: 'primary', size: 'md' },
-* });
-* button({ tone: 'ghost', className: 'ml-2' });
-* ```
-*
-* @example
-* ```ts
-* const card = cva('border p-4', {
-*   variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },
-*   defaultVariants: { elevated: false },
-* });
-* card({ elevated: true });
-* ```
-*/
-var cva = ((...args) => {
-	const schema = cva$1(...args);
-	return (...inputArgs) => twMerge(schema(...inputArgs));
-});
+import { cva, cx } from "./css-cx.js";
+//#region src/css/load-css-file.ts
 /**
 * Injects a stylesheet by appending a `<link rel="stylesheet">` to `document.head`.
 * Resolves when the sheet fires `load`; rejects on `error` (e.g. 404 or network failure).
@@ -162,6 +57,34 @@ var loadCssFile = (url, attrubutes) => new Promise((resolve, reject) => {
 	document.head.appendChild(link);
 });
 //#endregion
+//#region src/css/to-rem.ts
+/**
+* Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
+*
+* Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet
+* should scale with root font size (accessibility, user zoom). `remValue` is the assumed
+* `1rem` size in px (browser default is typically `16`).
+*
+* Also you can override default rem value using `toRem.defaultRemValue = 24`
+*
+* @param px - Pixel value to convert (not rounded; stringification keeps full float).
+* @param remValue - How many pixels one `rem` equals. Defaults to `16`.
+* @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
+*
+* @example
+* ```ts
+* const width = toRem(24); // '1.5rem' with default 16px root
+* ```
+*
+* @example
+* ```ts
+* // Custom root / design system where 1rem === 10px
+* const gap = toRem(20, 10); // '2rem'
+* ```
+*/
+var toRem = (px, remValue) => `${px / (remValue ?? toRem.defaultRemValue)}rem`;
+toRem.defaultRemValue = 16;
+//#endregion
 export { cva, cx, loadCssFile, toRem };
 
 //# sourceMappingURL=css.js.map

package/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","names":[],"sources":["../src/css.ts"],"sourcesContent":["/**\n * ---header-docs-section---\n * # yummies/css\n *\n * ## Description\n *\n * Styling utilities for React and plain DOM: `rem` conversion, `clsx` + `tailwind-merge` via `cx`,\n * and a `cva` bridge for variant-driven class names. The goal is predictable class strings without\n * Tailwind conflicts and with less boilerplate than concatenating strings by hand across components.\n *\n * ## Usage\n *\n * ```ts\n * import { cx, toRem } from \"yummies/css\";\n * ```\n */\n\nimport { cva as cvaLib, VariantProps } from 'class-variance-authority';\nimport clsx from 'clsx';\nimport { twMerge } from 'tailwind-merge';\nimport type { Maybe } from 'yummies/types';\n/**\n * Converts a length in **pixels** to a CSS **`rem`** string (`\"<number>rem\"`).\n *\n * Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet\n * should scale with root font size (accessibility, user zoom). `remValue` is the assumed\n * `1rem` size in px (browser default is typically `16`).\n *\n * Also you can override default rem value using `toRem.defaultRemValue = 24`\n *\n * @param px - Pixel value to convert (not rounded; stringification keeps full float).\n * @param remValue - How many pixels one `rem` equals. Defaults to `16`.\n * @returns A string like `\"1.5rem\"` suitable for `style` or CSS-in-JS.\n *\n * @example\n * ```ts\n * const width = toRem(24); // '1.5rem' with default 16px root\n * ```\n *\n * @example\n * ```ts\n * // Custom root / design system where 1rem === 10px\n * const gap = toRem(20, 10); // '2rem'\n * ```\n */\nexport const toRem = (px: number, remValue?: number): string =>\n  `${px / (remValue ?? toRem.defaultRemValue)}rem`;\n\ntoRem.defaultRemValue = 16;\n\n/**\n * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs\n * the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so\n * conflicting Tailwind utilities collapse to the last/intended one (e.g. two `padding-x` classes).\n *\n * Accepts the same argument shapes as `clsx`: strings, objects, arrays, falsy values to omit.\n *\n * @param args - Same as `clsx(...args)` — `ClassValue` rest parameters.\n * @returns A single merged class string, safe for `className` on DOM/React.\n *\n * @example\n * ```ts\n * cx('px-2 py-1 text-sm', 'px-4'); // 'py-1 text-sm px-4' — padding-x merged\n * ```\n *\n * @example\n * ```ts\n * cx('btn', { 'btn--active': isActive, 'btn--disabled': disabled }, className);\n * ```\n */\nexport const cx = (...args: Parameters<typeof clsx>) => twMerge(clsx(...args));\n\n/**\n * {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**\n * pass as {@link cx}: the class string produced by the variant function is merged so Tailwind\n * conflicts resolve predictably.\n *\n * API matches `cva` from `class-variance-authority`: optional `base` classes, `config` with\n * `variants`, `defaultVariants`, and `compoundVariants`. The returned function accepts variant\n * props plus optional `class` / `className` for one-off overrides.\n *\n * Use {@link VariantProps} with `typeof buttonVariants` (or similar) to type component props.\n *\n * @param base - Base `ClassValue`(s) always applied.\n * @param config - Variant schema and defaults (same shape as upstream `cva`).\n * @returns A function `(props?) => string` that resolves variant classes, merged with tw-merge.\n *\n * @example\n * ```ts\n * const button = cva('rounded font-medium', {\n *   variants: {\n *     tone: { primary: 'bg-blue-600 text-white', ghost: 'bg-transparent' },\n *     size: { sm: 'text-sm px-2', md: 'text-base px-4' },\n *   },\n *   defaultVariants: { tone: 'primary', size: 'md' },\n * });\n * button({ tone: 'ghost', className: 'ml-2' });\n * ```\n *\n * @example\n * ```ts\n * const card = cva('border p-4', {\n *   variants: { elevated: { true: 'shadow-lg', false: 'shadow-none' } },\n *   defaultVariants: { elevated: false },\n * });\n * card({ elevated: true });\n * ```\n */\nexport const cva = ((...args: any[]) => {\n  const schema = cvaLib(...args);\n  return (...inputArgs: any[]) => twMerge(schema(...inputArgs));\n}) as unknown as typeof cvaLib;\n\n/**\n * Utility type from `class-variance-authority`: infers the variant prop object from a `cva` instance.\n * Use it to type React (or other) components that forward variant props.\n *\n * @example\n * ```ts\n * const input = cva('border', { variants: { size: { sm: 'h-8', lg: 'h-12' } } });\n * type InputVariants = VariantProps<typeof input>;\n * // { size?: 'sm' | 'lg' | null }\n * ```\n */\nexport type { VariantProps } from 'class-variance-authority';\n\n/**\n * Re-export from `clsx`: a class name fragment — string, number, nested arrays, object map of\n * flags, or falsy nodes to skip. Used by {@link cx}, {@link cva}, and typical `className` helpers.\n *\n * @example\n * ```ts\n * const value: ClassValue = ['btn', false && 'hidden', { active: true }];\n * ```\n */\nexport type { ClassValue } from 'clsx';\n\n/**\n * Injects a stylesheet by appending a `<link rel=\"stylesheet\">` to `document.head`.\n * Resolves when the sheet fires `load`; rejects on `error` (e.g. 404 or network failure).\n *\n * **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed\n * first, so repeated calls with the same `id` replace the previous link (useful for theme or\n * font URLs that change).\n *\n * If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,\n * `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.\n *\n * @param url - Stylesheet URL (`href`).\n * @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).\n * @returns Promise that resolves to `undefined` on load, or rejects on load error.\n *\n * @example\n * ```ts\n * await loadCssFile('https://example.com/fonts.css', {\n *   id: 'app-fonts',\n *   crossOrigin: 'anonymous',\n * });\n * ```\n *\n * @example\n * ```ts\n * // Swap theme stylesheet without duplicate link tags\n * await loadCssFile('/themes/dark.css', { id: 'theme' });\n * await loadCssFile('/themes/light.css', { id: 'theme' });\n * ```\n */\nexport const loadCssFile = (url: string, attrubutes?: Record<string, any>) =>\n  new Promise((resolve, reject) => {\n    let link: Maybe<HTMLLinkElement>;\n\n    if (attrubutes?.id) {\n      link = document.getElementById(attrubutes.id) as HTMLLinkElement | null;\n\n      if (link) {\n        link.remove();\n      }\n    }\n\n    link = document.createElement('link');\n\n    const handleLoad = () => {\n      resolve(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    const handleError = () => {\n      reject(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    link.addEventListener('load', handleLoad);\n    link.addEventListener('error', handleError);\n\n    link.setAttribute('href', url);\n\n    if (!attrubutes?.rel) {\n      link.setAttribute('rel', 'stylesheet');\n    }\n\n    Object.entries(attrubutes || {}).forEach(([key, value]) => {\n      link.setAttribute(key, value);\n    });\n\n    document.head.appendChild(link);\n  });\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,IAAa,SAAS,IAAY,aAChC,GAAG,MAAM,YAAY,MAAM,iBAAiB;AAE9C,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;AAsBxB,IAAa,MAAM,GAAG,SAAkC,QAAQ,KAAK,GAAG,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsC9E,IAAa,QAAQ,GAAG,SAAgB;CACtC,MAAM,SAAS,MAAO,GAAG,KAAK;AAC9B,SAAQ,GAAG,cAAqB,QAAQ,OAAO,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyD/D,IAAa,eAAe,KAAa,eACvC,IAAI,SAAS,SAAS,WAAW;CAC/B,IAAI;AAEJ,KAAI,YAAY,IAAI;AAClB,SAAO,SAAS,eAAe,WAAW,GAAG;AAE7C,MAAI,KACF,MAAK,QAAQ;;AAIjB,QAAO,SAAS,cAAc,OAAO;CAErC,MAAM,mBAAmB;AACvB,UAAQ,KAAA,EAAU;AAClB,OAAM,oBAAoB,QAAQ,WAAW;AAC7C,OAAM,oBAAoB,SAAS,YAAY;;CAGjD,MAAM,oBAAoB;AACxB,SAAO,KAAA,EAAU;AACjB,OAAM,oBAAoB,QAAQ,WAAW;AAC7C,OAAM,oBAAoB,SAAS,YAAY;;AAGjD,MAAK,iBAAiB,QAAQ,WAAW;AACzC,MAAK,iBAAiB,SAAS,YAAY;AAE3C,MAAK,aAAa,QAAQ,IAAI;AAE9B,KAAI,CAAC,YAAY,IACf,MAAK,aAAa,OAAO,aAAa;AAGxC,QAAO,QAAQ,cAAc,EAAE,CAAC,CAAC,SAAS,CAAC,KAAK,WAAW;AACzD,OAAK,aAAa,KAAK,MAAM;GAC7B;AAEF,UAAS,KAAK,YAAY,KAAK;EAC/B"}
+{"version":3,"file":"css.js","names":[],"sources":["../src/css/load-css-file.ts","../src/css/to-rem.ts"],"sourcesContent":["import type { Maybe } from 'yummies/types';\n\n/**\n * Injects a stylesheet by appending a `<link rel=\"stylesheet\">` to `document.head`.\n * Resolves when the sheet fires `load`; rejects on `error` (e.g. 404 or network failure).\n *\n * **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed\n * first, so repeated calls with the same `id` replace the previous link (useful for theme or\n * font URLs that change).\n *\n * If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,\n * `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.\n *\n * @param url - Stylesheet URL (`href`).\n * @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).\n * @returns Promise that resolves to `undefined` on load, or rejects on load error.\n *\n * @example\n * ```ts\n * await loadCssFile('https://example.com/fonts.css', {\n *   id: 'app-fonts',\n *   crossOrigin: 'anonymous',\n * });\n * ```\n *\n * @example\n * ```ts\n * // Swap theme stylesheet without duplicate link tags\n * await loadCssFile('/themes/dark.css', { id: 'theme' });\n * await loadCssFile('/themes/light.css', { id: 'theme' });\n * ```\n */\nexport const loadCssFile = (url: string, attrubutes?: Record<string, any>) =>\n  new Promise((resolve, reject) => {\n    let link: Maybe<HTMLLinkElement>;\n\n    if (attrubutes?.id) {\n      link = document.getElementById(attrubutes.id) as HTMLLinkElement | null;\n\n      if (link) {\n        link.remove();\n      }\n    }\n\n    link = document.createElement('link');\n\n    const handleLoad = () => {\n      resolve(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    const handleError = () => {\n      reject(undefined);\n      link!.removeEventListener('load', handleLoad);\n      link!.removeEventListener('error', handleError);\n    };\n\n    link.addEventListener('load', handleLoad);\n    link.addEventListener('error', handleError);\n\n    link.setAttribute('href', url);\n\n    if (!attrubutes?.rel) {\n      link.setAttribute('rel', 'stylesheet');\n    }\n\n    Object.entries(attrubutes || {}).forEach(([key, value]) => {\n      link.setAttribute(key, value);\n    });\n\n    document.head.appendChild(link);\n  });\n","/**\n * Converts a length in **pixels** to a CSS **`rem`** string (`\"<number>rem\"`).\n *\n * Use when authoring component styles in JS/TS where design tokens are in px but the stylesheet\n * should scale with root font size (accessibility, user zoom). `remValue` is the assumed\n * `1rem` size in px (browser default is typically `16`).\n *\n * Also you can override default rem value using `toRem.defaultRemValue = 24`\n *\n * @param px - Pixel value to convert (not rounded; stringification keeps full float).\n * @param remValue - How many pixels one `rem` equals. Defaults to `16`.\n * @returns A string like `\"1.5rem\"` suitable for `style` or CSS-in-JS.\n *\n * @example\n * ```ts\n * const width = toRem(24); // '1.5rem' with default 16px root\n * ```\n *\n * @example\n * ```ts\n * // Custom root / design system where 1rem === 10px\n * const gap = toRem(20, 10); // '2rem'\n * ```\n */\nexport const toRem = (px: number, remValue?: number): string =>\n  `${px / (remValue ?? toRem.defaultRemValue)}rem`;\n\ntoRem.defaultRemValue = 16;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,IAAa,eAAe,KAAa,eACvC,IAAI,SAAS,SAAS,WAAW;CAC/B,IAAI;CAEJ,IAAI,YAAY,IAAI;EAClB,OAAO,SAAS,eAAe,WAAW,EAAE;EAE5C,IAAI,MACF,KAAK,OAAO;CAEhB;CAEA,OAAO,SAAS,cAAc,MAAM;CAEpC,MAAM,mBAAmB;EACvB,QAAQ,KAAA,CAAS;EACjB,KAAM,oBAAoB,QAAQ,UAAU;EAC5C,KAAM,oBAAoB,SAAS,WAAW;CAChD;CAEA,MAAM,oBAAoB;EACxB,OAAO,KAAA,CAAS;EAChB,KAAM,oBAAoB,QAAQ,UAAU;EAC5C,KAAM,oBAAoB,SAAS,WAAW;CAChD;CAEA,KAAK,iBAAiB,QAAQ,UAAU;CACxC,KAAK,iBAAiB,SAAS,WAAW;CAE1C,KAAK,aAAa,QAAQ,GAAG;CAE7B,IAAI,CAAC,YAAY,KACf,KAAK,aAAa,OAAO,YAAY;CAGvC,OAAO,QAAQ,cAAc,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,WAAW;EACzD,KAAK,aAAa,KAAK,KAAK;CAC9B,CAAC;CAED,SAAS,KAAK,YAAY,IAAI;AAChC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AChDH,IAAa,SAAS,IAAY,aAChC,GAAG,MAAM,YAAY,MAAM,iBAAiB;AAE9C,MAAM,kBAAkB"}