npm - yummies - Versions diffs - 7.19.2 → 7.19.4 - Mend

yummies 7.19.2 → 7.19.4

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 (11) hide show

package/css.cjs CHANGED Viewed

@@ -28,6 +28,8 @@ let tailwind_merge = require("tailwind-merge");
 * 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.
@@ -43,7 +45,8 @@ let tailwind_merge = require("tailwind-merge");
 * const gap = toRem(20, 10); // '2rem'
 * ```
 */
-var toRem = (px, remValue = 16) => `${px / remValue}rem`;
+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

package/css.cjs.map CHANGED Viewed

	@@ -1 +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 } 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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA~~,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"}
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"}

package/css.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
-import clsx, { ClassValue } from 'clsx';
-export { ClassValue } from 'clsx';
+import { cva as cva$1 } from 'class-variance-authority';
 export { VariantProps } from 'class-variance-authority';
+import clsx from 'clsx';
+export { ClassValue } from 'clsx';
 /**
  * ---header-docs-section---
@@ -19,11 +20,6 @@ export { VariantProps } from 'class-variance-authority';
  * ```
  */
-type ClassProp = {
-    class?: ClassValue;
-    className?: ClassValue;
-};
-type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
 /**
  * Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
  *
@@ -31,6 +27,8 @@ type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
  * 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.
@@ -46,7 +44,10 @@ type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
  * const gap = toRem(20, 10); // '2rem'
  * ```
  */
-declare const toRem: (px: number, remValue?: number) => string;
+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
@@ -68,19 +69,6 @@ declare const toRem: (px: number, remValue?: number) => string;
  * ```
  */
 declare const cx: (...args: Parameters<typeof clsx>) => string;
-type ConfigSchema = Record<string, Record<string, ClassValue>>;
-type ConfigVariants<T extends ConfigSchema> = {
-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
-};
-type ConfigVariantsMulti<T extends ConfigSchema> = {
-    [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
-};
-type Config<T> = T extends ConfigSchema ? {
-    variants?: T;
-    defaultVariants?: ConfigVariants<T>;
-    compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
-} : never;
-type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
 /**
  * {@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
@@ -117,7 +105,7 @@ type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassPr
  * card({ elevated: true });
  * ```
  */
-declare const cva: <T>(base?: ClassValue, config?: Config<T>) => (props?: Props<T>) => string;
+declare const cva: typeof cva$1;
 /**
  * Injects a stylesheet by appending a `<link rel="stylesheet">` to `document.head`.

package/css.js CHANGED Viewed

@@ -25,6 +25,8 @@ import { twMerge } from "tailwind-merge";
 * 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.
@@ -40,7 +42,8 @@ import { twMerge } from "tailwind-merge";
 * const gap = toRem(20, 10); // '2rem'
 * ```
 */
-var toRem = (px, remValue = 16) => `${px / remValue}rem`;
+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

package/css.js.map CHANGED Viewed

	@@ -1 +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 } 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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDA~~,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"}
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"}

package/html.cjs CHANGED Viewed

@@ -111,7 +111,24 @@ var globalScrollIntoViewForY = (node) => {
 		behavior: "smooth"
 	});
 };
-var sanitizeDefaults = {
+/**
+* Sanitizes HTML using the default allowlist merged with custom DOMPurify config.
+*
+* Default DOMPurify settings are exposed on `sanitizeHtml.defaults` and can be
+* overridden per call via `config`.
+*
+* @example
+* ```ts
+* sanitizeHtml('<img src=x onerror=alert(1) />');
+* ```
+*/
+var sanitizeHtml = ((html, config) => {
+	return dompurify.default.sanitize(html || "", {
+		...sanitizeHtml.defaults,
+		...config
+	});
+});
+sanitizeHtml.defaults = {
 	ALLOWED_TAGS: [
 		"a",
 		"article",
@@ -164,20 +181,6 @@ var sanitizeDefaults = {
 	]
 };
 /**
-* Sanitizes HTML using the default allowlist merged with custom DOMPurify config.
-*
-* @example
-* ```ts
-* sanitizeHtml('<img src=x onerror=alert(1) />');
-* ```
-*/
-var sanitizeHtml = (html, config) => {
-	return dompurify.default.sanitize(html || "", {
-		...sanitizeDefaults,
-		...config
-	});
-};
-/**
 * Checks whether the element is nested inside the provided parent element.
 *
 * @example

package/html.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html.cjs","names":[],"sources":["../src/html.ts"],"sourcesContent":["/*\n ---header-docs-section---\n * # yummies/html\n \n ## Description\n \n DOM-centric utilities: sanitizing HTML with DOMPurify, computed style probes, downloads via\n * temporary anchors, and small string helpers for safe markup. Prefer these over `innerHTML` with\n * raw user input; keep CSP and server-side validation as the real security boundary.\n \n ## Usage\n \n ```ts\n * import { getComputedColor } from \"yummies/html\";\n * ```\n /\n\nimport DOMPurify, { type Config as DOMPurifyConfig } from 'dompurify';\nimport { blobToUrl } from 'yummies/media';\nimport type { Maybe } from 'yummies/types';\n\n/\n Extracts an RGB value from any valid CSS color.\n \n Not recommended for frequent use because it triggers a reflow.\n /\nexport const getComputedColor = (color?: string): string \| null => {\n if (!color) return null;\n\n const d = document.createElement('div');\n d.style.color = color;\n document.body.append(d);\n const rgbcolor = globalThis.getComputedStyle(d).color;\n const match =\n /rgba?\$(\\d+)\\s,\\s(\\d+)\\s,\\s(\\d+)\\s(,\\s\\d+[.d+])\$/g.exec(rgbcolor);\n\n d.remove();\n\n if (!match) return null;\n\n return `${match[1]}, ${match[2]}, ${match[3]}`;\n};\n\n/\n Triggers a file download by creating and clicking a temporary anchor element.\n \n @example\n * ```ts\n * downloadUsingAnchor('/report.pdf', 'report.pdf');\n * ```\n /\nexport const downloadUsingAnchor = (\n urlOrBlob: string \| Blob,\n fileName?: string,\n) => {\n const url = blobToUrl(urlOrBlob);\n\n const a = document.createElement('a');\n a.href = url;\n\n a.download = fileName ?? 'file';\n\n a.target = '_blank';\n\n document.body.append(a);\n\n a.click();\n\n a.remove();\n};\n\n/\n Surrounds string in an anchor tag\n /\nexport function wrapTextToTagLink(link: string) {\n const descr = String(link).replace(/^(https?:\\/{0,2})?(w{3}\\.)?/, 'www.');\n if (!/^https?:\\/{2}/.test(link)) link = `http://${link}`;\n return `<a href=${link} target=\"_blank\">${descr}</a>`;\n}\n\n/\n Collects the cumulative `offsetTop` value through the element parent chain.\n \n @example\n * ```ts\n * const offsetTop = collectOffsetTop(document.getElementById('section'));\n * ```\n /\nexport const collectOffsetTop = (element: HTMLElement \| null) => {\n let offsetTop = 0;\n let node = element;\n\n while (node != null) {\n offsetTop += node.offsetTop;\n node = node.parentElement;\n }\n\n return offsetTop;\n};\n\n/\n Prevents the default browser action and stops event propagation.\n \n @example\n * ```ts\n * button.addEventListener('click', (event) => skipEvent(event));\n * ```\n /\nexport const skipEvent = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n\n return false;\n};\n\n/\n Scrolls the page vertically to the viewport section containing the target element.\n \n @example\n * ```ts\n * globalScrollIntoViewForY(document.getElementById('footer')!);\n * ```\n /\nexport const globalScrollIntoViewForY = (node: HTMLElement) => {\n const scrollContainer = document.body;\n const pageHeight = window.innerHeight;\n const nodeBounding = node.getBoundingClientRect();\n const scrollPagesCount = scrollContainer.scrollHeight / pageHeight;\n\n const scrollPageNumber = Math.min(\n Math.max(nodeBounding.top / pageHeight, 1),\n scrollPagesCount,\n );\n\n window.scroll({\n top: scrollPageNumber pageHeight,\n behavior: 'smooth',\n });\n};\n\nconst sanitizeDefaults: DOMPurifyConfig = {\n ALLOWED_TAGS: [\n 'a',\n 'article',\n 'b',\n 'blockquote',\n 'br',\n 'caption',\n 'code',\n 'del',\n 'details',\n 'div',\n 'em',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'hr',\n 'i',\n 'img',\n 'ins',\n 'kbd',\n 'li',\n 'main',\n 'ol',\n 'p',\n 'pre',\n 'section',\n 'span',\n 'strong',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'th',\n 'thead',\n 'tr',\n 'u',\n 'ul',\n ],\n ALLOWED_ATTR: ['href', 'target', 'name', 'src', 'class'],\n};\n\n/*\n Sanitizes HTML using the default allowlist merged with custom DOMPurify config.\n \n @example\n * ```ts\n * sanitizeHtml('<img src=x onerror=alert(1) />');\n * ```\n /\nexport const sanitizeHtml = (html: Maybe<string>, config?: DOMPurifyConfig) => {\n return DOMPurify.sanitize(html \|\| '', {\n ...sanitizeDefaults,\n ...config,\n });\n};\n\n/\n Checks whether the element is nested inside the provided parent element.\n \n @example\n * ```ts\n * checkElementHasParent(childElement, modalElement);\n * ```\n /\nexport const checkElementHasParent = (\n element: HTMLElement \| null,\n parent: Maybe<HTMLElement>,\n) => {\n let node = element;\n\n if (!parent) return false;\n\n while (node != null) {\n if (node === parent) {\n return true;\n } else {\n node = node.parentElement;\n }\n }\n\n return false;\n};\n\n/\n Executes a function within a view transition if supported by the browser.\n \n @param {VoidFunction} fn - The function to be executed.\n * @returns {ViewTransition} - The result of the executed function.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition \| MDN: Document.startViewTransition}\n /\nexport const startViewTransitionSafety = (\n fn: VoidFunction,\n params?: { disabled?: boolean },\n) => {\n if (\n typeof document !== 'undefined' &&\n document.startViewTransition &&\n !params?.disabled\n ) {\n return document.startViewTransition(fn);\n }\n fn();\n};\n\n/\n Calculates the scrollbar width.\n /\nexport const calcScrollbarWidth = (elementToAppend = document.body) => {\n const outer = document.createElement('div');\n\n outer.style.visibility = 'hidden';\n outer.style.width = '100px';\n outer.style.overflow = 'scroll';\n\n elementToAppend.append(outer);\n\n const inner = document.createElement('div');\n inner.style.width = '100%';\n\n outer.append(inner);\n\n const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;\n\n outer.parentNode?.removeChild(outer);\n\n return scrollbarWidth;\n};\n\n/\n Calculates the inner height of an HTML element, accounting for padding.\n /\nexport function getElementInnerHeight(element: HTMLElement) {\n const { clientHeight } = element;\n const { paddingTop, paddingBottom } = getComputedStyle(element);\n return (\n clientHeight -\n Number.parseFloat(paddingTop) -\n Number.parseFloat(paddingBottom)\n );\n}\n\n/\n Calculates the inner width of an HTML element, accounting for padding.\n /\nexport function getElementInnerWidth(el: HTMLElement) {\n const { clientWidth } = el;\n const { paddingLeft, paddingRight } = getComputedStyle(el);\n return (\n clientWidth -\n Number.parseFloat(paddingLeft) -\n Number.parseFloat(paddingRight)\n );\n}\n\n/\n Checks whether the user prefers a dark color scheme.\n \n @example\n * ```ts\n * const prefersDark = isPrefersDarkTheme();\n * ```\n /\nexport const isPrefersDarkTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n\n/\n Checks whether the user prefers a light color scheme.\n \n @example\n * ```ts\n * const prefersLight = isPrefersLightTheme();\n * ```\n */\nexport const isPrefersLightTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: light)')?.matches;\n"],"mappings":"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"}
1	+ {"version":3,"file":"html.cjs","names":[],"sources":["../src/html.ts"],"sourcesContent":["/*\n ---header-docs-section---\n * # yummies/html\n \n ## Description\n \n DOM-centric utilities: sanitizing HTML with DOMPurify, computed style probes, downloads via\n * temporary anchors, and small string helpers for safe markup. Prefer these over `innerHTML` with\n * raw user input; keep CSP and server-side validation as the real security boundary.\n \n ## Usage\n \n ```ts\n * import { getComputedColor } from \"yummies/html\";\n * ```\n /\n\nimport DOMPurify, { type Config as DOMPurifyConfig } from 'dompurify';\nimport { blobToUrl } from 'yummies/media';\nimport type { Maybe } from 'yummies/types';\n\n/\n Extracts an RGB value from any valid CSS color.\n \n Not recommended for frequent use because it triggers a reflow.\n /\nexport const getComputedColor = (color?: string): string \| null => {\n if (!color) return null;\n\n const d = document.createElement('div');\n d.style.color = color;\n document.body.append(d);\n const rgbcolor = globalThis.getComputedStyle(d).color;\n const match =\n /rgba?\$(\\d+)\\s,\\s(\\d+)\\s,\\s(\\d+)\\s(,\\s\\d+[.d+])\$/g.exec(rgbcolor);\n\n d.remove();\n\n if (!match) return null;\n\n return `${match[1]}, ${match[2]}, ${match[3]}`;\n};\n\n/\n Triggers a file download by creating and clicking a temporary anchor element.\n \n @example\n * ```ts\n * downloadUsingAnchor('/report.pdf', 'report.pdf');\n * ```\n /\nexport const downloadUsingAnchor = (\n urlOrBlob: string \| Blob,\n fileName?: string,\n) => {\n const url = blobToUrl(urlOrBlob);\n\n const a = document.createElement('a');\n a.href = url;\n\n a.download = fileName ?? 'file';\n\n a.target = '_blank';\n\n document.body.append(a);\n\n a.click();\n\n a.remove();\n};\n\n/\n Surrounds string in an anchor tag\n /\nexport function wrapTextToTagLink(link: string) {\n const descr = String(link).replace(/^(https?:\\/{0,2})?(w{3}\\.)?/, 'www.');\n if (!/^https?:\\/{2}/.test(link)) link = `http://${link}`;\n return `<a href=${link} target=\"_blank\">${descr}</a>`;\n}\n\n/\n Collects the cumulative `offsetTop` value through the element parent chain.\n \n @example\n * ```ts\n * const offsetTop = collectOffsetTop(document.getElementById('section'));\n * ```\n /\nexport const collectOffsetTop = (element: HTMLElement \| null) => {\n let offsetTop = 0;\n let node = element;\n\n while (node != null) {\n offsetTop += node.offsetTop;\n node = node.parentElement;\n }\n\n return offsetTop;\n};\n\n/\n Prevents the default browser action and stops event propagation.\n \n @example\n * ```ts\n * button.addEventListener('click', (event) => skipEvent(event));\n * ```\n /\nexport const skipEvent = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n\n return false;\n};\n\n/\n Scrolls the page vertically to the viewport section containing the target element.\n \n @example\n * ```ts\n * globalScrollIntoViewForY(document.getElementById('footer')!);\n * ```\n /\nexport const globalScrollIntoViewForY = (node: HTMLElement) => {\n const scrollContainer = document.body;\n const pageHeight = window.innerHeight;\n const nodeBounding = node.getBoundingClientRect();\n const scrollPagesCount = scrollContainer.scrollHeight / pageHeight;\n\n const scrollPageNumber = Math.min(\n Math.max(nodeBounding.top / pageHeight, 1),\n scrollPagesCount,\n );\n\n window.scroll({\n top: scrollPageNumber pageHeight,\n behavior: 'smooth',\n });\n};\n\ntype SanitizeHtmlFn = ((\n html: Maybe<string>,\n config?: DOMPurifyConfig,\n) => string) & {\n /*\n Default DOMPurify settings\n /\n defaults: DOMPurifyConfig;\n};\n/\n Sanitizes HTML using the default allowlist merged with custom DOMPurify config.\n \n Default DOMPurify settings are exposed on `sanitizeHtml.defaults` and can be\n * overridden per call via `config`.\n \n @example\n * ```ts\n * sanitizeHtml('<img src=x onerror=alert(1) />');\n * ```\n /\nexport const sanitizeHtml = ((\n html: Maybe<string>,\n config?: DOMPurifyConfig,\n) => {\n return DOMPurify.sanitize(html \|\| '', {\n ...sanitizeHtml.defaults,\n ...config,\n });\n}) as SanitizeHtmlFn;\n\nsanitizeHtml.defaults = {\n ALLOWED_TAGS: [\n 'a',\n 'article',\n 'b',\n 'blockquote',\n 'br',\n 'caption',\n 'code',\n 'del',\n 'details',\n 'div',\n 'em',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'hr',\n 'i',\n 'img',\n 'ins',\n 'kbd',\n 'li',\n 'main',\n 'ol',\n 'p',\n 'pre',\n 'section',\n 'span',\n 'strong',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'th',\n 'thead',\n 'tr',\n 'u',\n 'ul',\n ],\n ALLOWED_ATTR: ['href', 'target', 'name', 'src', 'class'],\n};\n\n/\n Checks whether the element is nested inside the provided parent element.\n \n @example\n * ```ts\n * checkElementHasParent(childElement, modalElement);\n * ```\n /\nexport const checkElementHasParent = (\n element: HTMLElement \| null,\n parent: Maybe<HTMLElement>,\n) => {\n let node = element;\n\n if (!parent) return false;\n\n while (node != null) {\n if (node === parent) {\n return true;\n } else {\n node = node.parentElement;\n }\n }\n\n return false;\n};\n\n/\n Executes a function within a view transition if supported by the browser.\n \n @param {VoidFunction} fn - The function to be executed.\n * @returns {ViewTransition} - The result of the executed function.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition \| MDN: Document.startViewTransition}\n /\nexport const startViewTransitionSafety = (\n fn: VoidFunction,\n params?: { disabled?: boolean },\n) => {\n if (\n typeof document !== 'undefined' &&\n document.startViewTransition &&\n !params?.disabled\n ) {\n return document.startViewTransition(fn);\n }\n fn();\n};\n\n/\n Calculates the scrollbar width.\n /\nexport const calcScrollbarWidth = (elementToAppend = document.body) => {\n const outer = document.createElement('div');\n\n outer.style.visibility = 'hidden';\n outer.style.width = '100px';\n outer.style.overflow = 'scroll';\n\n elementToAppend.append(outer);\n\n const inner = document.createElement('div');\n inner.style.width = '100%';\n\n outer.append(inner);\n\n const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;\n\n outer.parentNode?.removeChild(outer);\n\n return scrollbarWidth;\n};\n\n/\n Calculates the inner height of an HTML element, accounting for padding.\n /\nexport function getElementInnerHeight(element: HTMLElement) {\n const { clientHeight } = element;\n const { paddingTop, paddingBottom } = getComputedStyle(element);\n return (\n clientHeight -\n Number.parseFloat(paddingTop) -\n Number.parseFloat(paddingBottom)\n );\n}\n\n/\n Calculates the inner width of an HTML element, accounting for padding.\n /\nexport function getElementInnerWidth(el: HTMLElement) {\n const { clientWidth } = el;\n const { paddingLeft, paddingRight } = getComputedStyle(el);\n return (\n clientWidth -\n Number.parseFloat(paddingLeft) -\n Number.parseFloat(paddingRight)\n );\n}\n\n/\n Checks whether the user prefers a dark color scheme.\n \n @example\n * ```ts\n * const prefersDark = isPrefersDarkTheme();\n * ```\n /\nexport const isPrefersDarkTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n\n/\n Checks whether the user prefers a light color scheme.\n \n @example\n * ```ts\n * const prefersLight = isPrefersLightTheme();\n * ```\n */\nexport const isPrefersLightTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: light)')?.matches;\n"],"mappings":"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"}

package/html.d.ts CHANGED Viewed

@@ -64,15 +64,24 @@ declare const skipEvent: (e: Event) => boolean;
  * ```
  */
 declare const globalScrollIntoViewForY: (node: HTMLElement) => void;
+type SanitizeHtmlFn = ((html: Maybe<string>, config?: Config) => string) & {
+    /**
+     * Default DOMPurify settings
+     */
+    defaults: Config;
+};
 /**
  * Sanitizes HTML using the default allowlist merged with custom DOMPurify config.
  *
+ * Default DOMPurify settings are exposed on `sanitizeHtml.defaults` and can be
+ * overridden per call via `config`.
+ *
  * @example
  * ```ts
  * sanitizeHtml('<img src=x onerror=alert(1) />');
  * ```
  */
-declare const sanitizeHtml: (html: Maybe<string>, config?: Config) => string;
+declare const sanitizeHtml: SanitizeHtmlFn;
 /**
  * Checks whether the element is nested inside the provided parent element.
  *

package/html.js CHANGED Viewed

@@ -108,7 +108,24 @@ var globalScrollIntoViewForY = (node) => {
 		behavior: "smooth"
 	});
 };
-var sanitizeDefaults = {
+/**
+* Sanitizes HTML using the default allowlist merged with custom DOMPurify config.
+*
+* Default DOMPurify settings are exposed on `sanitizeHtml.defaults` and can be
+* overridden per call via `config`.
+*
+* @example
+* ```ts
+* sanitizeHtml('<img src=x onerror=alert(1) />');
+* ```
+*/
+var sanitizeHtml = ((html, config) => {
+	return DOMPurify.sanitize(html || "", {
+		...sanitizeHtml.defaults,
+		...config
+	});
+});
+sanitizeHtml.defaults = {
 	ALLOWED_TAGS: [
 		"a",
 		"article",
@@ -161,20 +178,6 @@ var sanitizeDefaults = {
 	]
 };
 /**
-* Sanitizes HTML using the default allowlist merged with custom DOMPurify config.
-*
-* @example
-* ```ts
-* sanitizeHtml('<img src=x onerror=alert(1) />');
-* ```
-*/
-var sanitizeHtml = (html, config) => {
-	return DOMPurify.sanitize(html || "", {
-		...sanitizeDefaults,
-		...config
-	});
-};
-/**
 * Checks whether the element is nested inside the provided parent element.
 *
 * @example

package/html.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"html.js","names":[],"sources":["../src/html.ts"],"sourcesContent":["/*\n ---header-docs-section---\n * # yummies/html\n \n ## Description\n \n DOM-centric utilities: sanitizing HTML with DOMPurify, computed style probes, downloads via\n * temporary anchors, and small string helpers for safe markup. Prefer these over `innerHTML` with\n * raw user input; keep CSP and server-side validation as the real security boundary.\n \n ## Usage\n \n ```ts\n * import { getComputedColor } from \"yummies/html\";\n * ```\n /\n\nimport DOMPurify, { type Config as DOMPurifyConfig } from 'dompurify';\nimport { blobToUrl } from 'yummies/media';\nimport type { Maybe } from 'yummies/types';\n\n/\n Extracts an RGB value from any valid CSS color.\n \n Not recommended for frequent use because it triggers a reflow.\n /\nexport const getComputedColor = (color?: string): string \| null => {\n if (!color) return null;\n\n const d = document.createElement('div');\n d.style.color = color;\n document.body.append(d);\n const rgbcolor = globalThis.getComputedStyle(d).color;\n const match =\n /rgba?\$(\\d+)\\s,\\s(\\d+)\\s,\\s(\\d+)\\s(,\\s\\d+[.d+])\$/g.exec(rgbcolor);\n\n d.remove();\n\n if (!match) return null;\n\n return `${match[1]}, ${match[2]}, ${match[3]}`;\n};\n\n/\n Triggers a file download by creating and clicking a temporary anchor element.\n \n @example\n * ```ts\n * downloadUsingAnchor('/report.pdf', 'report.pdf');\n * ```\n /\nexport const downloadUsingAnchor = (\n urlOrBlob: string \| Blob,\n fileName?: string,\n) => {\n const url = blobToUrl(urlOrBlob);\n\n const a = document.createElement('a');\n a.href = url;\n\n a.download = fileName ?? 'file';\n\n a.target = '_blank';\n\n document.body.append(a);\n\n a.click();\n\n a.remove();\n};\n\n/\n Surrounds string in an anchor tag\n /\nexport function wrapTextToTagLink(link: string) {\n const descr = String(link).replace(/^(https?:\\/{0,2})?(w{3}\\.)?/, 'www.');\n if (!/^https?:\\/{2}/.test(link)) link = `http://${link}`;\n return `<a href=${link} target=\"_blank\">${descr}</a>`;\n}\n\n/\n Collects the cumulative `offsetTop` value through the element parent chain.\n \n @example\n * ```ts\n * const offsetTop = collectOffsetTop(document.getElementById('section'));\n * ```\n /\nexport const collectOffsetTop = (element: HTMLElement \| null) => {\n let offsetTop = 0;\n let node = element;\n\n while (node != null) {\n offsetTop += node.offsetTop;\n node = node.parentElement;\n }\n\n return offsetTop;\n};\n\n/\n Prevents the default browser action and stops event propagation.\n \n @example\n * ```ts\n * button.addEventListener('click', (event) => skipEvent(event));\n * ```\n /\nexport const skipEvent = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n\n return false;\n};\n\n/\n Scrolls the page vertically to the viewport section containing the target element.\n \n @example\n * ```ts\n * globalScrollIntoViewForY(document.getElementById('footer')!);\n * ```\n /\nexport const globalScrollIntoViewForY = (node: HTMLElement) => {\n const scrollContainer = document.body;\n const pageHeight = window.innerHeight;\n const nodeBounding = node.getBoundingClientRect();\n const scrollPagesCount = scrollContainer.scrollHeight / pageHeight;\n\n const scrollPageNumber = Math.min(\n Math.max(nodeBounding.top / pageHeight, 1),\n scrollPagesCount,\n );\n\n window.scroll({\n top: scrollPageNumber pageHeight,\n behavior: 'smooth',\n });\n};\n\nconst sanitizeDefaults: DOMPurifyConfig = {\n ALLOWED_TAGS: [\n 'a',\n 'article',\n 'b',\n 'blockquote',\n 'br',\n 'caption',\n 'code',\n 'del',\n 'details',\n 'div',\n 'em',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'hr',\n 'i',\n 'img',\n 'ins',\n 'kbd',\n 'li',\n 'main',\n 'ol',\n 'p',\n 'pre',\n 'section',\n 'span',\n 'strong',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'th',\n 'thead',\n 'tr',\n 'u',\n 'ul',\n ],\n ALLOWED_ATTR: ['href', 'target', 'name', 'src', 'class'],\n};\n\n/*\n Sanitizes HTML using the default allowlist merged with custom DOMPurify config.\n \n @example\n * ```ts\n * sanitizeHtml('<img src=x onerror=alert(1) />');\n * ```\n /\nexport const sanitizeHtml = (html: Maybe<string>, config?: DOMPurifyConfig) => {\n return DOMPurify.sanitize(html \|\| '', {\n ...sanitizeDefaults,\n ...config,\n });\n};\n\n/\n Checks whether the element is nested inside the provided parent element.\n \n @example\n * ```ts\n * checkElementHasParent(childElement, modalElement);\n * ```\n /\nexport const checkElementHasParent = (\n element: HTMLElement \| null,\n parent: Maybe<HTMLElement>,\n) => {\n let node = element;\n\n if (!parent) return false;\n\n while (node != null) {\n if (node === parent) {\n return true;\n } else {\n node = node.parentElement;\n }\n }\n\n return false;\n};\n\n/\n Executes a function within a view transition if supported by the browser.\n \n @param {VoidFunction} fn - The function to be executed.\n * @returns {ViewTransition} - The result of the executed function.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition \| MDN: Document.startViewTransition}\n /\nexport const startViewTransitionSafety = (\n fn: VoidFunction,\n params?: { disabled?: boolean },\n) => {\n if (\n typeof document !== 'undefined' &&\n document.startViewTransition &&\n !params?.disabled\n ) {\n return document.startViewTransition(fn);\n }\n fn();\n};\n\n/\n Calculates the scrollbar width.\n /\nexport const calcScrollbarWidth = (elementToAppend = document.body) => {\n const outer = document.createElement('div');\n\n outer.style.visibility = 'hidden';\n outer.style.width = '100px';\n outer.style.overflow = 'scroll';\n\n elementToAppend.append(outer);\n\n const inner = document.createElement('div');\n inner.style.width = '100%';\n\n outer.append(inner);\n\n const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;\n\n outer.parentNode?.removeChild(outer);\n\n return scrollbarWidth;\n};\n\n/\n Calculates the inner height of an HTML element, accounting for padding.\n /\nexport function getElementInnerHeight(element: HTMLElement) {\n const { clientHeight } = element;\n const { paddingTop, paddingBottom } = getComputedStyle(element);\n return (\n clientHeight -\n Number.parseFloat(paddingTop) -\n Number.parseFloat(paddingBottom)\n );\n}\n\n/\n Calculates the inner width of an HTML element, accounting for padding.\n /\nexport function getElementInnerWidth(el: HTMLElement) {\n const { clientWidth } = el;\n const { paddingLeft, paddingRight } = getComputedStyle(el);\n return (\n clientWidth -\n Number.parseFloat(paddingLeft) -\n Number.parseFloat(paddingRight)\n );\n}\n\n/\n Checks whether the user prefers a dark color scheme.\n \n @example\n * ```ts\n * const prefersDark = isPrefersDarkTheme();\n * ```\n /\nexport const isPrefersDarkTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n\n/\n Checks whether the user prefers a light color scheme.\n \n @example\n * ```ts\n * const prefersLight = isPrefersLightTheme();\n * ```\n */\nexport const isPrefersLightTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: light)')?.matches;\n"],"mappings":"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"}
1	+ {"version":3,"file":"html.js","names":[],"sources":["../src/html.ts"],"sourcesContent":["/*\n ---header-docs-section---\n * # yummies/html\n \n ## Description\n \n DOM-centric utilities: sanitizing HTML with DOMPurify, computed style probes, downloads via\n * temporary anchors, and small string helpers for safe markup. Prefer these over `innerHTML` with\n * raw user input; keep CSP and server-side validation as the real security boundary.\n \n ## Usage\n \n ```ts\n * import { getComputedColor } from \"yummies/html\";\n * ```\n /\n\nimport DOMPurify, { type Config as DOMPurifyConfig } from 'dompurify';\nimport { blobToUrl } from 'yummies/media';\nimport type { Maybe } from 'yummies/types';\n\n/\n Extracts an RGB value from any valid CSS color.\n \n Not recommended for frequent use because it triggers a reflow.\n /\nexport const getComputedColor = (color?: string): string \| null => {\n if (!color) return null;\n\n const d = document.createElement('div');\n d.style.color = color;\n document.body.append(d);\n const rgbcolor = globalThis.getComputedStyle(d).color;\n const match =\n /rgba?\$(\\d+)\\s,\\s(\\d+)\\s,\\s(\\d+)\\s(,\\s\\d+[.d+])\$/g.exec(rgbcolor);\n\n d.remove();\n\n if (!match) return null;\n\n return `${match[1]}, ${match[2]}, ${match[3]}`;\n};\n\n/\n Triggers a file download by creating and clicking a temporary anchor element.\n \n @example\n * ```ts\n * downloadUsingAnchor('/report.pdf', 'report.pdf');\n * ```\n /\nexport const downloadUsingAnchor = (\n urlOrBlob: string \| Blob,\n fileName?: string,\n) => {\n const url = blobToUrl(urlOrBlob);\n\n const a = document.createElement('a');\n a.href = url;\n\n a.download = fileName ?? 'file';\n\n a.target = '_blank';\n\n document.body.append(a);\n\n a.click();\n\n a.remove();\n};\n\n/\n Surrounds string in an anchor tag\n /\nexport function wrapTextToTagLink(link: string) {\n const descr = String(link).replace(/^(https?:\\/{0,2})?(w{3}\\.)?/, 'www.');\n if (!/^https?:\\/{2}/.test(link)) link = `http://${link}`;\n return `<a href=${link} target=\"_blank\">${descr}</a>`;\n}\n\n/\n Collects the cumulative `offsetTop` value through the element parent chain.\n \n @example\n * ```ts\n * const offsetTop = collectOffsetTop(document.getElementById('section'));\n * ```\n /\nexport const collectOffsetTop = (element: HTMLElement \| null) => {\n let offsetTop = 0;\n let node = element;\n\n while (node != null) {\n offsetTop += node.offsetTop;\n node = node.parentElement;\n }\n\n return offsetTop;\n};\n\n/\n Prevents the default browser action and stops event propagation.\n \n @example\n * ```ts\n * button.addEventListener('click', (event) => skipEvent(event));\n * ```\n /\nexport const skipEvent = (e: Event) => {\n e.preventDefault();\n e.stopPropagation();\n\n return false;\n};\n\n/\n Scrolls the page vertically to the viewport section containing the target element.\n \n @example\n * ```ts\n * globalScrollIntoViewForY(document.getElementById('footer')!);\n * ```\n /\nexport const globalScrollIntoViewForY = (node: HTMLElement) => {\n const scrollContainer = document.body;\n const pageHeight = window.innerHeight;\n const nodeBounding = node.getBoundingClientRect();\n const scrollPagesCount = scrollContainer.scrollHeight / pageHeight;\n\n const scrollPageNumber = Math.min(\n Math.max(nodeBounding.top / pageHeight, 1),\n scrollPagesCount,\n );\n\n window.scroll({\n top: scrollPageNumber pageHeight,\n behavior: 'smooth',\n });\n};\n\ntype SanitizeHtmlFn = ((\n html: Maybe<string>,\n config?: DOMPurifyConfig,\n) => string) & {\n /*\n Default DOMPurify settings\n /\n defaults: DOMPurifyConfig;\n};\n/\n Sanitizes HTML using the default allowlist merged with custom DOMPurify config.\n \n Default DOMPurify settings are exposed on `sanitizeHtml.defaults` and can be\n * overridden per call via `config`.\n \n @example\n * ```ts\n * sanitizeHtml('<img src=x onerror=alert(1) />');\n * ```\n /\nexport const sanitizeHtml = ((\n html: Maybe<string>,\n config?: DOMPurifyConfig,\n) => {\n return DOMPurify.sanitize(html \|\| '', {\n ...sanitizeHtml.defaults,\n ...config,\n });\n}) as SanitizeHtmlFn;\n\nsanitizeHtml.defaults = {\n ALLOWED_TAGS: [\n 'a',\n 'article',\n 'b',\n 'blockquote',\n 'br',\n 'caption',\n 'code',\n 'del',\n 'details',\n 'div',\n 'em',\n 'h1',\n 'h2',\n 'h3',\n 'h4',\n 'h5',\n 'h6',\n 'hr',\n 'i',\n 'img',\n 'ins',\n 'kbd',\n 'li',\n 'main',\n 'ol',\n 'p',\n 'pre',\n 'section',\n 'span',\n 'strong',\n 'sub',\n 'summary',\n 'sup',\n 'table',\n 'tbody',\n 'td',\n 'th',\n 'thead',\n 'tr',\n 'u',\n 'ul',\n ],\n ALLOWED_ATTR: ['href', 'target', 'name', 'src', 'class'],\n};\n\n/\n Checks whether the element is nested inside the provided parent element.\n \n @example\n * ```ts\n * checkElementHasParent(childElement, modalElement);\n * ```\n /\nexport const checkElementHasParent = (\n element: HTMLElement \| null,\n parent: Maybe<HTMLElement>,\n) => {\n let node = element;\n\n if (!parent) return false;\n\n while (node != null) {\n if (node === parent) {\n return true;\n } else {\n node = node.parentElement;\n }\n }\n\n return false;\n};\n\n/\n Executes a function within a view transition if supported by the browser.\n \n @param {VoidFunction} fn - The function to be executed.\n * @returns {ViewTransition} - The result of the executed function.\n \n @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition \| MDN: Document.startViewTransition}\n /\nexport const startViewTransitionSafety = (\n fn: VoidFunction,\n params?: { disabled?: boolean },\n) => {\n if (\n typeof document !== 'undefined' &&\n document.startViewTransition &&\n !params?.disabled\n ) {\n return document.startViewTransition(fn);\n }\n fn();\n};\n\n/\n Calculates the scrollbar width.\n /\nexport const calcScrollbarWidth = (elementToAppend = document.body) => {\n const outer = document.createElement('div');\n\n outer.style.visibility = 'hidden';\n outer.style.width = '100px';\n outer.style.overflow = 'scroll';\n\n elementToAppend.append(outer);\n\n const inner = document.createElement('div');\n inner.style.width = '100%';\n\n outer.append(inner);\n\n const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;\n\n outer.parentNode?.removeChild(outer);\n\n return scrollbarWidth;\n};\n\n/\n Calculates the inner height of an HTML element, accounting for padding.\n /\nexport function getElementInnerHeight(element: HTMLElement) {\n const { clientHeight } = element;\n const { paddingTop, paddingBottom } = getComputedStyle(element);\n return (\n clientHeight -\n Number.parseFloat(paddingTop) -\n Number.parseFloat(paddingBottom)\n );\n}\n\n/\n Calculates the inner width of an HTML element, accounting for padding.\n /\nexport function getElementInnerWidth(el: HTMLElement) {\n const { clientWidth } = el;\n const { paddingLeft, paddingRight } = getComputedStyle(el);\n return (\n clientWidth -\n Number.parseFloat(paddingLeft) -\n Number.parseFloat(paddingRight)\n );\n}\n\n/\n Checks whether the user prefers a dark color scheme.\n \n @example\n * ```ts\n * const prefersDark = isPrefersDarkTheme();\n * ```\n /\nexport const isPrefersDarkTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: dark)')?.matches;\n\n/\n Checks whether the user prefers a light color scheme.\n \n @example\n * ```ts\n * const prefersLight = isPrefersLightTheme();\n * ```\n */\nexport const isPrefersLightTheme = () =>\n !!globalThis.matchMedia?.('(prefers-color-scheme: light)')?.matches;\n"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "yummies",
-  "version": "7.19.2",
+  "version": "7.19.4",
   "keywords": [
     "javascript",
     "typescript",
@@ -34,7 +34,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.20",
-    "dompurify": "^3.3.3",
+    "dompurify": "^3.4.1",
     "nanoid": "^5.1.7",
     "tailwind-merge": "^3.5.0"
   },