yummies 7.19.2 → 7.19.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/css.cjs CHANGED
@@ -28,6 +28,8 @@ let tailwind_merge = require("tailwind-merge");
28
28
  * should scale with root font size (accessibility, user zoom). `remValue` is the assumed
29
29
  * `1rem` size in px (browser default is typically `16`).
30
30
  *
31
+ * Also you can override default rem value using `toRem.defaultRemValue = 24`
32
+ *
31
33
  * @param px - Pixel value to convert (not rounded; stringification keeps full float).
32
34
  * @param remValue - How many pixels one `rem` equals. Defaults to `16`.
33
35
  * @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
@@ -43,7 +45,8 @@ let tailwind_merge = require("tailwind-merge");
43
45
  * const gap = toRem(20, 10); // '2rem'
44
46
  * ```
45
47
  */
46
- var toRem = (px, remValue = 16) => `${px / remValue}rem`;
48
+ var toRem = (px, remValue) => `${px / (remValue ?? toRem.defaultRemValue)}rem`;
49
+ toRem.defaultRemValue = 16;
47
50
  /**
48
51
  * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
49
52
  * the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so
package/css.cjs.map CHANGED
@@ -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
@@ -1,6 +1,7 @@
1
- import clsx, { ClassValue } from 'clsx';
2
- export { ClassValue } from 'clsx';
1
+ import { cva as cva$1 } from 'class-variance-authority';
3
2
  export { VariantProps } from 'class-variance-authority';
3
+ import clsx from 'clsx';
4
+ export { ClassValue } from 'clsx';
4
5
 
5
6
  /**
6
7
  * ---header-docs-section---
@@ -19,11 +20,6 @@ export { VariantProps } from 'class-variance-authority';
19
20
  * ```
20
21
  */
21
22
 
22
- type ClassProp = {
23
- class?: ClassValue;
24
- className?: ClassValue;
25
- };
26
- type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
27
23
  /**
28
24
  * Converts a length in **pixels** to a CSS **`rem`** string (`"<number>rem"`).
29
25
  *
@@ -31,6 +27,8 @@ type StringToBoolean<T> = T extends 'true' | 'false' ? boolean : T;
31
27
  * should scale with root font size (accessibility, user zoom). `remValue` is the assumed
32
28
  * `1rem` size in px (browser default is typically `16`).
33
29
  *
30
+ * Also you can override default rem value using `toRem.defaultRemValue = 24`
31
+ *
34
32
  * @param px - Pixel value to convert (not rounded; stringification keeps full float).
35
33
  * @param remValue - How many pixels one `rem` equals. Defaults to `16`.
36
34
  * @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;
46
44
  * const gap = toRem(20, 10); // '2rem'
47
45
  * ```
48
46
  */
49
- declare const toRem: (px: number, remValue?: number) => string;
47
+ declare const toRem: {
48
+ (px: number, remValue?: number): string;
49
+ defaultRemValue: number;
50
+ };
50
51
  /**
51
52
  * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
52
53
  * 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;
68
69
  * ```
69
70
  */
70
71
  declare const cx: (...args: Parameters<typeof clsx>) => string;
71
- type ConfigSchema = Record<string, Record<string, ClassValue>>;
72
- type ConfigVariants<T extends ConfigSchema> = {
73
- [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | null | undefined;
74
- };
75
- type ConfigVariantsMulti<T extends ConfigSchema> = {
76
- [Variant in keyof T]?: StringToBoolean<keyof T[Variant]> | StringToBoolean<keyof T[Variant]>[] | undefined;
77
- };
78
- type Config<T> = T extends ConfigSchema ? {
79
- variants?: T;
80
- defaultVariants?: ConfigVariants<T>;
81
- compoundVariants?: (T extends ConfigSchema ? (ConfigVariants<T> | ConfigVariantsMulti<T>) & ClassProp : ClassProp)[];
82
- } : never;
83
- type Props<T> = T extends ConfigSchema ? ConfigVariants<T> & ClassProp : ClassProp;
84
72
  /**
85
73
  * {@link https://cva.style/docs | Class Variance Authority (cva)} with the same **tailwind-merge**
86
74
  * 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
117
105
  * card({ elevated: true });
118
106
  * ```
119
107
  */
120
- declare const cva: <T>(base?: ClassValue, config?: Config<T>) => (props?: Props<T>) => string;
108
+ declare const cva: typeof cva$1;
121
109
 
122
110
  /**
123
111
  * Injects a stylesheet by appending a `<link rel="stylesheet">` to `document.head`.
package/css.js CHANGED
@@ -25,6 +25,8 @@ import { twMerge } from "tailwind-merge";
25
25
  * should scale with root font size (accessibility, user zoom). `remValue` is the assumed
26
26
  * `1rem` size in px (browser default is typically `16`).
27
27
  *
28
+ * Also you can override default rem value using `toRem.defaultRemValue = 24`
29
+ *
28
30
  * @param px - Pixel value to convert (not rounded; stringification keeps full float).
29
31
  * @param remValue - How many pixels one `rem` equals. Defaults to `16`.
30
32
  * @returns A string like `"1.5rem"` suitable for `style` or CSS-in-JS.
@@ -40,7 +42,8 @@ import { twMerge } from "tailwind-merge";
40
42
  * const gap = toRem(20, 10); // '2rem'
41
43
  * ```
42
44
  */
43
- var toRem = (px, remValue = 16) => `${px / remValue}rem`;
45
+ var toRem = (px, remValue) => `${px / (remValue ?? toRem.defaultRemValue)}rem`;
46
+ toRem.defaultRemValue = 16;
44
47
  /**
45
48
  * Composes conditional class names like {@link https://github.com/lukeed/clsx | clsx}, then runs
46
49
  * the result through {@link https://github.com/dcastil/tailwind-merge | tailwind-merge} so
package/css.js.map CHANGED
@@ -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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "yummies",
3
- "version": "7.19.2",
3
+ "version": "7.19.3",
4
4
  "keywords": [
5
5
  "javascript",
6
6
  "typescript",
@@ -34,7 +34,7 @@
34
34
  "class-variance-authority": "^0.7.1",
35
35
  "clsx": "^2.1.1",
36
36
  "dayjs": "^1.11.20",
37
- "dompurify": "^3.3.3",
37
+ "dompurify": "^3.4.1",
38
38
  "nanoid": "^5.1.7",
39
39
  "tailwind-merge": "^3.5.0"
40
40
  },