yummies 7.10.0 → 7.12.0

package/css.cjs

@@ -1,46 +1,154 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const clsx = require("clsx");
-const tailwindMerge = require("tailwind-merge");
-const toRem = (px, remValue = 16) => `${px / remValue}rem`;
-const cx = (...args) => tailwindMerge.twMerge(clsx(...args));
-const cva = ((...args) => {
-  const schema = classVarianceAuthority.cva(...args);
-  return (...inputArgs) => tailwindMerge.twMerge(schema(...inputArgs));
+const require_chunk = require("./chunk-CVq3Gv4J.cjs");
+let class_variance_authority = require("class-variance-authority");
+let clsx = require("clsx");
+clsx = require_chunk.__toESM(clsx);
+let tailwind_merge = require("tailwind-merge");
+//#region src/css.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`).
+*
+* @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 = 16) => `${px / remValue}rem`;
+/**
+* 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 loadCssFile = (url, attrubutes) => new Promise((resolve, reject) => {
-  let link;
-  if (attrubutes?.id) {
-    link = document.getElementById(attrubutes.id);
-    if (link) {
-      link.remove();
-    }
-  }
-  link = document.createElement("link");
-  const handleLoad = () => {
-    resolve(void 0);
-    link.removeEventListener("load", handleLoad);
-    link.removeEventListener("error", handleError);
-  };
-  const handleError = () => {
-    reject(void 0);
-    link.removeEventListener("load", handleLoad);
-    link.removeEventListener("error", handleError);
-  };
-  link.addEventListener("load", handleLoad);
-  link.addEventListener("error", handleError);
-  link.setAttribute("href", url);
-  if (!attrubutes?.rel) {
-    link.setAttribute("rel", "stylesheet");
-  }
-  Object.entries(attrubutes || {}).forEach(([key, value]) => {
-    link.setAttribute(key, value);
-  });
-  document.head.appendChild(link);
+/**
+* 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).
+*
+* **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed
+* first, so repeated calls with the same `id` replace the previous link (useful for theme or
+* font URLs that change).
+*
+* If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,
+* `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.
+*
+* @param url - Stylesheet URL (`href`).
+* @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).
+* @returns Promise that resolves to `undefined` on load, or rejects on load error.
+*
+* @example
+* ```ts
+* await loadCssFile('https://example.com/fonts.css', {
+*   id: 'app-fonts',
+*   crossOrigin: 'anonymous',
+* });
+* ```
+*
+* @example
+* ```ts
+* // Swap theme stylesheet without duplicate link tags
+* await loadCssFile('/themes/dark.css', { id: 'theme' });
+* await loadCssFile('/themes/light.css', { id: 'theme' });
+* ```
+*/
+var loadCssFile = (url, attrubutes) => new Promise((resolve, reject) => {
+	let link;
+	if (attrubutes?.id) {
+		link = document.getElementById(attrubutes.id);
+		if (link) link.remove();
+	}
+	link = document.createElement("link");
+	const handleLoad = () => {
+		resolve(void 0);
+		link.removeEventListener("load", handleLoad);
+		link.removeEventListener("error", handleError);
+	};
+	const handleError = () => {
+		reject(void 0);
+		link.removeEventListener("load", handleLoad);
+		link.removeEventListener("error", handleError);
+	};
+	link.addEventListener("load", handleLoad);
+	link.addEventListener("error", handleError);
+	link.setAttribute("href", url);
+	if (!attrubutes?.rel) link.setAttribute("rel", "stylesheet");
+	Object.entries(attrubutes || {}).forEach(([key, value]) => {
+		link.setAttribute(key, value);
+	});
+	document.head.appendChild(link);
 });
+//#endregion
 exports.cva = cva;
 exports.cx = cx;
 exports.loadCssFile = loadCssFile;
 exports.toRem = toRem;
-//# sourceMappingURL=css.cjs.map
+
+//# sourceMappingURL=css.cjs.map

package/css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.cjs","sources":["../src/css.ts"],"sourcesContent":["import { cva as cvaLib } from 'class-variance-authority';\nimport clsx, { type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\nimport type { Maybe } from 'yummies/types';\n\ntype ClassProp = {\n  class?: ClassValue;\n  className?: ClassValue;\n};\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;\n\n/**\n * Перевод значения в пикселях в rem строковое\n */\nexport const toRem = (px: number, remValue = 16) => `${px / remValue}rem`;\n\n/**\n * classNames/clsx но с примесями tailwind-merge\n */\nexport const cx = (...args: Parameters<typeof clsx>) => twMerge(clsx(...args));\n\ntype ConfigSchema = Record<string, Record<string, ClassValue>>;\ntype ConfigVariants<T extends ConfigSchema> = {\n  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;\n};\ntype ConfigVariantsMulti<T extends ConfigSchema> = {\n  [Variant in keyof T]?:\n    | StringToBoolean<keyof T[Variant]>\n    | StringToBoolean<keyof T[Variant]>[]\n    | undefined;\n};\ntype Config<T> = T extends ConfigSchema\n  ? {\n      variants?: T;\n      defaultVariants?: ConfigVariants<T>;\n      compoundVariants?: (T extends ConfigSchema\n        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp\n        : ClassProp)[];\n    }\n  : never;\n\ntype Props<T> = T extends ConfigSchema\n  ? ConfigVariants<T> & ClassProp\n  : ClassProp;\n\n/**\n * Class Variance Authority но с примесями tailwind-merge\n *\n * https://cva.style/docs\n */\nexport const cva = ((...args: any[]) => {\n  const schema = cvaLib(...args);\n  return (...inputArgs: any[]) => twMerge(schema(...inputArgs));\n}) as any as <T>(\n  base?: ClassValue,\n  config?: Config<T>,\n) => (props?: Props<T>) => string;\n\nexport type { VariantProps } from 'class-variance-authority';\nexport type { ClassValue } from 'clsx';\n\n/**\n * Load CSS file by providing `url`.\n *\n * **NOTE:** If `id` is provided, it will remove the existing link element with the same `id` before creating a new one.\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"],"names":["twMerge","cvaLib"],"mappings":";;;;;AAeO,MAAM,QAAQ,CAAC,IAAY,WAAW,OAAO,GAAG,KAAK,QAAQ;AAK7D,MAAM,KAAK,IAAI,SAAkCA,cAAAA,QAAQ,KAAK,GAAG,IAAI,CAAC;AA+BtE,MAAM,OAAO,IAAI,SAAgB;AACtC,QAAM,SAASC,2BAAO,GAAG,IAAI;AAC7B,SAAO,IAAI,cAAqBD,cAAAA,QAAQ,OAAO,GAAG,SAAS,CAAC;AAC9D;AAaO,MAAM,cAAc,CAAC,KAAa,eACvC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,MAAI;AAEJ,MAAI,YAAY,IAAI;AAClB,WAAO,SAAS,eAAe,WAAW,EAAE;AAE5C,QAAI,MAAM;AACR,WAAK,OAAA;AAAA,IACP;AAAA,EACF;AAEA,SAAO,SAAS,cAAc,MAAM;AAEpC,QAAM,aAAa,MAAM;AACvB,YAAQ,MAAS;AACjB,SAAM,oBAAoB,QAAQ,UAAU;AAC5C,SAAM,oBAAoB,SAAS,WAAW;AAAA,EAChD;AAEA,QAAM,cAAc,MAAM;AACxB,WAAO,MAAS;AAChB,SAAM,oBAAoB,QAAQ,UAAU;AAC5C,SAAM,oBAAoB,SAAS,WAAW;AAAA,EAChD;AAEA,OAAK,iBAAiB,QAAQ,UAAU;AACxC,OAAK,iBAAiB,SAAS,WAAW;AAE1C,OAAK,aAAa,QAAQ,GAAG;AAE7B,MAAI,CAAC,YAAY,KAAK;AACpB,SAAK,aAAa,OAAO,YAAY;AAAA,EACvC;AAEA,SAAO,QAAQ,cAAc,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzD,SAAK,aAAa,KAAK,KAAK;AAAA,EAC9B,CAAC;AAED,WAAS,KAAK,YAAY,IAAI;AAChC,CAAC;;;;;"}
+{"version":3,"file":"css.cjs","names":[],"sources":["../src/css.ts"],"sourcesContent":["import { cva as cvaLib } from 'class-variance-authority';\nimport clsx, { type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\nimport type { Maybe } from 'yummies/types';\n\ntype ClassProp = {\n  class?: ClassValue;\n  className?: ClassValue;\n};\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;\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 * @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 = 16) => `${px / remValue}rem`;\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\ntype ConfigSchema = Record<string, Record<string, ClassValue>>;\ntype ConfigVariants<T extends ConfigSchema> = {\n  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;\n};\ntype ConfigVariantsMulti<T extends ConfigSchema> = {\n  [Variant in keyof T]?:\n    | StringToBoolean<keyof T[Variant]>\n    | StringToBoolean<keyof T[Variant]>[]\n    | undefined;\n};\ntype Config<T> = T extends ConfigSchema\n  ? {\n      variants?: T;\n      defaultVariants?: ConfigVariants<T>;\n      compoundVariants?: (T extends ConfigSchema\n        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp\n        : ClassProp)[];\n    }\n  : never;\n\ntype Props<T> = T extends ConfigSchema\n  ? ConfigVariants<T> & ClassProp\n  : ClassProp;\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 any as <T>(\n  base?: ClassValue,\n  config?: Config<T>,\n) => (props?: Props<T>) => string;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,SAAS,IAAY,WAAW,OAAO,GAAG,KAAK,SAAS;;;;;;;;;;;;;;;;;;;;;AAsBrE,IAAa,MAAM,GAAG,UAAA,GAAA,eAAA,UAAA,GAAA,KAAA,SAA+C,GAAG,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8D9E,IAAa,QAAQ,GAAG,SAAgB;CACtC,MAAM,UAAA,GAAA,yBAAA,KAAgB,GAAG,KAAK;AAC9B,SAAQ,GAAG,eAAA,GAAA,eAAA,SAA6B,OAAO,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4D/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"}

package/css.d.ts

@@ -8,11 +8,47 @@ type ClassProp = {
 };
 type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
 /**
- * Перевод значения в пикселях в rem строковое
+ * 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`).
+ *
+ * @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;
 /**
- * classNames/clsx но с примесями tailwind-merge
+ * 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);
+ * ```
  */
 declare const cx: (...args: Parameters<typeof clsx>) => string;
 type ConfigSchema = Record<string, Record<string, ClassValue>>;
@@ -29,16 +65,72 @@ type Config<T> = T extends ConfigSchema ? {
 } : never;
 type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
 /**
- * Class Variance Authority но с примесями tailwind-merge
+ * {@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.
  *
- * https://cva.style/docs
+ * 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 });
+ * ```
  */
 declare const cva: <T>(base?: ClassValue, config?: Config<T>) => (props?: Props<T>) => string;
 
 /**
- * Load CSS file by providing `url`.
+ * 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).
+ *
+ * **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed
+ * first, so repeated calls with the same `id` replace the previous link (useful for theme or
+ * font URLs that change).
+ *
+ * If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,
+ * `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.
+ *
+ * @param url - Stylesheet URL (`href`).
+ * @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).
+ * @returns Promise that resolves to `undefined` on load, or rejects on load error.
+ *
+ * @example
+ * ```ts
+ * await loadCssFile('https://example.com/fonts.css', {
+ *   id: 'app-fonts',
+ *   crossOrigin: 'anonymous',
+ * });
+ * ```
  *
- * **NOTE:** If `id` is provided, it will remove the existing link element with the same `id` before creating a new one.
+ * @example
+ * ```ts
+ * // Swap theme stylesheet without duplicate link tags
+ * await loadCssFile('/themes/dark.css', { id: 'theme' });
+ * await loadCssFile('/themes/light.css', { id: 'theme' });
+ * ```
  */
 declare const loadCssFile: (url: string, attrubutes?: Record<string, any>) => Promise<unknown>;
 

package/css.js

@@ -1,46 +1,148 @@
 import { cva as cva$1 } from "class-variance-authority";
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
-const toRem = (px, remValue = 16) => `${px / remValue}rem`;
-const cx = (...args) => twMerge(clsx(...args));
-const cva = ((...args) => {
-  const schema = cva$1(...args);
-  return (...inputArgs) => twMerge(schema(...inputArgs));
+//#region src/css.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`).
+*
+* @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 = 16) => `${px / remValue}rem`;
+/**
+* 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));
 });
-const loadCssFile = (url, attrubutes) => new Promise((resolve, reject) => {
-  let link;
-  if (attrubutes?.id) {
-    link = document.getElementById(attrubutes.id);
-    if (link) {
-      link.remove();
-    }
-  }
-  link = document.createElement("link");
-  const handleLoad = () => {
-    resolve(void 0);
-    link.removeEventListener("load", handleLoad);
-    link.removeEventListener("error", handleError);
-  };
-  const handleError = () => {
-    reject(void 0);
-    link.removeEventListener("load", handleLoad);
-    link.removeEventListener("error", handleError);
-  };
-  link.addEventListener("load", handleLoad);
-  link.addEventListener("error", handleError);
-  link.setAttribute("href", url);
-  if (!attrubutes?.rel) {
-    link.setAttribute("rel", "stylesheet");
-  }
-  Object.entries(attrubutes || {}).forEach(([key, value]) => {
-    link.setAttribute(key, value);
-  });
-  document.head.appendChild(link);
+/**
+* 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).
+*
+* **Id replacement:** if `attrubutes.id` is set, any existing element with that `id` is removed
+* first, so repeated calls with the same `id` replace the previous link (useful for theme or
+* font URLs that change).
+*
+* If `rel` is omitted in `attrubutes`, it defaults to `stylesheet`. Other attributes (`crossorigin`,
+* `media`, `data-*`, etc.) are set via `setAttribute` from the record entries.
+*
+* @param url - Stylesheet URL (`href`).
+* @param attrubutes - Optional HTML attributes for the `<link>` element (see `id` / `rel` behavior above).
+* @returns Promise that resolves to `undefined` on load, or rejects on load error.
+*
+* @example
+* ```ts
+* await loadCssFile('https://example.com/fonts.css', {
+*   id: 'app-fonts',
+*   crossOrigin: 'anonymous',
+* });
+* ```
+*
+* @example
+* ```ts
+* // Swap theme stylesheet without duplicate link tags
+* await loadCssFile('/themes/dark.css', { id: 'theme' });
+* await loadCssFile('/themes/light.css', { id: 'theme' });
+* ```
+*/
+var loadCssFile = (url, attrubutes) => new Promise((resolve, reject) => {
+	let link;
+	if (attrubutes?.id) {
+		link = document.getElementById(attrubutes.id);
+		if (link) link.remove();
+	}
+	link = document.createElement("link");
+	const handleLoad = () => {
+		resolve(void 0);
+		link.removeEventListener("load", handleLoad);
+		link.removeEventListener("error", handleError);
+	};
+	const handleError = () => {
+		reject(void 0);
+		link.removeEventListener("load", handleLoad);
+		link.removeEventListener("error", handleError);
+	};
+	link.addEventListener("load", handleLoad);
+	link.addEventListener("error", handleError);
+	link.setAttribute("href", url);
+	if (!attrubutes?.rel) link.setAttribute("rel", "stylesheet");
+	Object.entries(attrubutes || {}).forEach(([key, value]) => {
+		link.setAttribute(key, value);
+	});
+	document.head.appendChild(link);
 });
-export {
-  cva,
-  cx,
-  loadCssFile,
-  toRem
-};
-//# sourceMappingURL=css.js.map
+//#endregion
+export { cva, cx, loadCssFile, toRem };
+
+//# sourceMappingURL=css.js.map

package/css.js.map

@@ -1 +1 @@
-{"version":3,"file":"css.js","sources":["../src/css.ts"],"sourcesContent":["import { cva as cvaLib } from 'class-variance-authority';\nimport clsx, { type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\nimport type { Maybe } from 'yummies/types';\n\ntype ClassProp = {\n  class?: ClassValue;\n  className?: ClassValue;\n};\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;\n\n/**\n * Перевод значения в пикселях в rem строковое\n */\nexport const toRem = (px: number, remValue = 16) => `${px / remValue}rem`;\n\n/**\n * classNames/clsx но с примесями tailwind-merge\n */\nexport const cx = (...args: Parameters<typeof clsx>) => twMerge(clsx(...args));\n\ntype ConfigSchema = Record<string, Record<string, ClassValue>>;\ntype ConfigVariants<T extends ConfigSchema> = {\n  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;\n};\ntype ConfigVariantsMulti<T extends ConfigSchema> = {\n  [Variant in keyof T]?:\n    | StringToBoolean<keyof T[Variant]>\n    | StringToBoolean<keyof T[Variant]>[]\n    | undefined;\n};\ntype Config<T> = T extends ConfigSchema\n  ? {\n      variants?: T;\n      defaultVariants?: ConfigVariants<T>;\n      compoundVariants?: (T extends ConfigSchema\n        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp\n        : ClassProp)[];\n    }\n  : never;\n\ntype Props<T> = T extends ConfigSchema\n  ? ConfigVariants<T> & ClassProp\n  : ClassProp;\n\n/**\n * Class Variance Authority но с примесями tailwind-merge\n *\n * https://cva.style/docs\n */\nexport const cva = ((...args: any[]) => {\n  const schema = cvaLib(...args);\n  return (...inputArgs: any[]) => twMerge(schema(...inputArgs));\n}) as any as <T>(\n  base?: ClassValue,\n  config?: Config<T>,\n) => (props?: Props<T>) => string;\n\nexport type { VariantProps } from 'class-variance-authority';\nexport type { ClassValue } from 'clsx';\n\n/**\n * Load CSS file by providing `url`.\n *\n * **NOTE:** If `id` is provided, it will remove the existing link element with the same `id` before creating a new one.\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"],"names":["cvaLib"],"mappings":";;;AAeO,MAAM,QAAQ,CAAC,IAAY,WAAW,OAAO,GAAG,KAAK,QAAQ;AAK7D,MAAM,KAAK,IAAI,SAAkC,QAAQ,KAAK,GAAG,IAAI,CAAC;AA+BtE,MAAM,OAAO,IAAI,SAAgB;AACtC,QAAM,SAASA,MAAO,GAAG,IAAI;AAC7B,SAAO,IAAI,cAAqB,QAAQ,OAAO,GAAG,SAAS,CAAC;AAC9D;AAaO,MAAM,cAAc,CAAC,KAAa,eACvC,IAAI,QAAQ,CAAC,SAAS,WAAW;AAC/B,MAAI;AAEJ,MAAI,YAAY,IAAI;AAClB,WAAO,SAAS,eAAe,WAAW,EAAE;AAE5C,QAAI,MAAM;AACR,WAAK,OAAA;AAAA,IACP;AAAA,EACF;AAEA,SAAO,SAAS,cAAc,MAAM;AAEpC,QAAM,aAAa,MAAM;AACvB,YAAQ,MAAS;AACjB,SAAM,oBAAoB,QAAQ,UAAU;AAC5C,SAAM,oBAAoB,SAAS,WAAW;AAAA,EAChD;AAEA,QAAM,cAAc,MAAM;AACxB,WAAO,MAAS;AAChB,SAAM,oBAAoB,QAAQ,UAAU;AAC5C,SAAM,oBAAoB,SAAS,WAAW;AAAA,EAChD;AAEA,OAAK,iBAAiB,QAAQ,UAAU;AACxC,OAAK,iBAAiB,SAAS,WAAW;AAE1C,OAAK,aAAa,QAAQ,GAAG;AAE7B,MAAI,CAAC,YAAY,KAAK;AACpB,SAAK,aAAa,OAAO,YAAY;AAAA,EACvC;AAEA,SAAO,QAAQ,cAAc,CAAA,CAAE,EAAE,QAAQ,CAAC,CAAC,KAAK,KAAK,MAAM;AACzD,SAAK,aAAa,KAAK,KAAK;AAAA,EAC9B,CAAC;AAED,WAAS,KAAK,YAAY,IAAI;AAChC,CAAC;"}
+{"version":3,"file":"css.js","names":[],"sources":["../src/css.ts"],"sourcesContent":["import { cva as cvaLib } from 'class-variance-authority';\nimport clsx, { type ClassValue } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\nimport type { Maybe } from 'yummies/types';\n\ntype ClassProp = {\n  class?: ClassValue;\n  className?: ClassValue;\n};\n\ntype StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;\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 * @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 = 16) => `${px / remValue}rem`;\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\ntype ConfigSchema = Record<string, Record<string, ClassValue>>;\ntype ConfigVariants<T extends ConfigSchema> = {\n  [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;\n};\ntype ConfigVariantsMulti<T extends ConfigSchema> = {\n  [Variant in keyof T]?:\n    | StringToBoolean<keyof T[Variant]>\n    | StringToBoolean<keyof T[Variant]>[]\n    | undefined;\n};\ntype Config<T> = T extends ConfigSchema\n  ? {\n      variants?: T;\n      defaultVariants?: ConfigVariants<T>;\n      compoundVariants?: (T extends ConfigSchema\n        ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp\n        : ClassProp)[];\n    }\n  : never;\n\ntype Props<T> = T extends ConfigSchema\n  ? ConfigVariants<T> & ClassProp\n  : ClassProp;\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 any as <T>(\n  base?: ClassValue,\n  config?: Config<T>,\n) => (props?: Props<T>) => string;\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":";;;;;;;;;;;;;;;;;;;;;;;;;;AAkCA,IAAa,SAAS,IAAY,WAAW,OAAO,GAAG,KAAK,SAAS;;;;;;;;;;;;;;;;;;;;;AAsBrE,IAAa,MAAM,GAAG,SAAkC,QAAQ,KAAK,GAAG,KAAK,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8D9E,IAAa,QAAQ,GAAG,SAAgB;CACtC,MAAM,SAAS,MAAO,GAAG,KAAK;AAC9B,SAAQ,GAAG,cAAqB,QAAQ,OAAO,GAAG,UAAU,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4D/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"}