@rotki/ui-library 3.1.6 → 3.2.0

package/dist/components/forms/switch/switch-styles.js

@@ -0,0 +1,131 @@
+import { tv } from "../../../utils/tv.js";
+//#region src/components/forms/switch/switch-styles.ts
+var switchStyles = tv({
+	slots: {
+		wrapper: "relative flex gap-3.25 items-start cursor-pointer group/switch",
+		inner: "relative w-10 h-5.5 mt-px shrink-0",
+		input: "peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring",
+		toggle: ["absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none", "bg-white left-0.5 shadow-rui-control"].join(" "),
+		label: "text-rui-text text-sm/6",
+		details: ""
+	},
+	variants: {
+		underLabel: {
+			true: { details: "pl-13.25" },
+			false: {}
+		},
+		checked: {
+			true: { toggle: "left-5" },
+			false: {}
+		},
+		disabled: { true: {
+			wrapper: "cursor-not-allowed",
+			input: "bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed",
+			toggle: "bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!",
+			label: "text-rui-text-disabled"
+		} },
+		size: { sm: {
+			inner: "w-8.5 h-4.5 mt-0.75",
+			toggle: "size-3.5"
+		} },
+		validation: {
+			error: { input: "ring-1 ring-rui-error" },
+			success: { input: "ring-1 ring-rui-success" }
+		},
+		color: {
+			primary: {},
+			secondary: {},
+			error: {},
+			warning: {},
+			info: {},
+			success: {}
+		}
+	},
+	compoundVariants: [
+		{
+			checked: false,
+			disabled: false,
+			class: { input: "group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400" }
+		},
+		{
+			checked: true,
+			disabled: false,
+			class: {
+				input: "bg-rui-neutral-900 dark:bg-rui-neutral-100",
+				toggle: "dark:bg-rui-neutral-900"
+			}
+		},
+		{
+			checked: true,
+			disabled: false,
+			color: "primary",
+			class: {
+				input: "bg-rui-primary dark:bg-rui-primary",
+				toggle: "dark:bg-white"
+			}
+		},
+		{
+			checked: true,
+			disabled: false,
+			color: "secondary",
+			class: {
+				input: "bg-rui-secondary dark:bg-rui-secondary",
+				toggle: "dark:bg-white"
+			}
+		},
+		{
+			checked: true,
+			disabled: false,
+			color: "error",
+			class: {
+				input: "bg-rui-error dark:bg-rui-error-darker",
+				toggle: "dark:bg-white"
+			}
+		},
+		{
+			checked: true,
+			disabled: false,
+			color: "warning",
+			class: {
+				input: "bg-rui-warning dark:bg-rui-warning-darker",
+				toggle: "dark:bg-white"
+			}
+		},
+		{
+			checked: true,
+			disabled: false,
+			color: "info",
+			class: {
+				input: "bg-rui-info dark:bg-rui-info-darker",
+				toggle: "dark:bg-white"
+			}
+		},
+		{
+			checked: true,
+			disabled: false,
+			color: "success",
+			class: {
+				input: "bg-rui-success dark:bg-rui-success-darker",
+				toggle: "dark:bg-white"
+			}
+		},
+		{
+			size: "sm",
+			checked: true,
+			class: { toggle: "left-4.5" }
+		},
+		{
+			size: "sm",
+			underLabel: true,
+			class: { details: "pl-11.75" }
+		}
+	],
+	defaultVariants: {
+		checked: false,
+		disabled: false
+	}
+});
+//#endregion
+export { switchStyles };
+
+//# sourceMappingURL=switch-styles.js.map

package/dist/components/forms/switch/switch-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch-styles.js","names":[],"sources":["../../../../src/components/forms/switch/switch-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const switchStyles = tv({\n  slots: {\n    // 13px to the label, the gap a checkbox or radio leaves, so the focus ring clears the text\n    wrapper: 'relative flex gap-3.25 items-start cursor-pointer group/switch',\n    // 40 × 22, nudged down a pixel to sit centred on the label's 24px line\n    inner: 'relative w-10 h-5.5 mt-px shrink-0',\n    // the off track is the control edge color, 3:1 against the page in both themes\n    input: 'peer appearance-none relative w-full h-full rounded-full bg-rui-outline transition-colors duration-150 cursor-pointer focus-visible:focus-ring',\n    toggle: [\n      'absolute size-4.5 transition-all duration-75 ease-in-out -translate-y-1/2 top-1/2 rounded-full pointer-events-none',\n      'bg-white left-0.5 shadow-rui-control',\n    ].join(' '),\n    label: 'text-rui-text text-sm/6',\n    details: '',\n  },\n  variants: {\n    // indented by the track and the 13px gap, so the message starts where the label does\n    underLabel: {\n      true: { details: 'pl-13.25' },\n      false: {},\n    },\n    checked: {\n      true: {\n        toggle: 'left-5',\n      },\n      false: {},\n    },\n    disabled: {\n      true: {\n        wrapper: 'cursor-not-allowed',\n        input: 'bg-rui-neutral-200! dark:bg-rui-neutral-800! cursor-not-allowed',\n        toggle: 'bg-rui-neutral-50! dark:bg-rui-neutral-600! shadow-none!',\n        label: 'text-rui-text-disabled',\n      },\n    },\n    size: {\n      sm: {\n        inner: 'w-8.5 h-4.5 mt-0.75',\n        toggle: 'size-3.5',\n      },\n    },\n    // a ring and the message below mark the state; a filled red or green track would read as \"on\"\n    validation: {\n      error: {\n        input: 'ring-1 ring-rui-error',\n      },\n      success: {\n        input: 'ring-1 ring-rui-success',\n      },\n    },\n    color: {\n      primary: {},\n      secondary: {},\n      error: {},\n      warning: {},\n      info: {},\n      success: {},\n    },\n  },\n  compoundVariants: [\n    { checked: false, disabled: false, class: { input: 'group-hover/switch:bg-rui-neutral-500 dark:group-hover/switch:bg-rui-neutral-400' } },\n\n    // Checked (no color): an inverted neutral track, with a dark knob in dark mode\n    { checked: true, disabled: false, class: { input: 'bg-rui-neutral-900 dark:bg-rui-neutral-100', toggle: 'dark:bg-rui-neutral-900' } },\n\n    // Checked + color: a solid track with the white knob, in both themes\n    { checked: true, disabled: false, color: 'primary', class: { input: 'bg-rui-primary dark:bg-rui-primary', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'secondary', class: { input: 'bg-rui-secondary dark:bg-rui-secondary', toggle: 'dark:bg-white' } },\n    // a status color's dark `main` is a text tone, so the track takes the deep `darker` under the white knob\n    { checked: true, disabled: false, color: 'error', class: { input: 'bg-rui-error dark:bg-rui-error-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'warning', class: { input: 'bg-rui-warning dark:bg-rui-warning-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'info', class: { input: 'bg-rui-info dark:bg-rui-info-darker', toggle: 'dark:bg-white' } },\n    { checked: true, disabled: false, color: 'success', class: { input: 'bg-rui-success dark:bg-rui-success-darker', toggle: 'dark:bg-white' } },\n\n    // Size sm + checked: 34 - 14 - 2\n    { size: 'sm', checked: true, class: { toggle: 'left-4.5' } },\n    // sm: a 34px track\n    { size: 'sm', underLabel: true, class: { details: 'pl-11.75' } },\n  ],\n  defaultVariants: {\n    checked: false,\n    disabled: false,\n  },\n});\n"],"mappings":";;AAEA,IAAa,eAAe,GAAG;CAC7B,OAAO;EAEL,SAAS;EAET,OAAO;EAEP,OAAO;EACP,QAAQ,CACN,sHACA,sCACF,CAAC,CAAC,KAAK,GAAG;EACV,OAAO;EACP,SAAS;CACX;CACA,UAAU;EAER,YAAY;GACV,MAAM,EAAE,SAAS,WAAW;GAC5B,OAAO,CAAC;EACV;EACA,SAAS;GACP,MAAM,EACJ,QAAQ,SACV;GACA,OAAO,CAAC;EACV;EACA,UAAU,EACR,MAAM;GACJ,SAAS;GACT,OAAO;GACP,QAAQ;GACR,OAAO;EACT,EACF;EACA,MAAM,EACJ,IAAI;GACF,OAAO;GACP,QAAQ;EACV,EACF;EAEA,YAAY;GACV,OAAO,EACL,OAAO,wBACT;GACA,SAAS,EACP,OAAO,0BACT;EACF;EACA,OAAO;GACL,SAAS,CAAC;GACV,WAAW,CAAC;GACZ,OAAO,CAAC;GACR,SAAS,CAAC;GACV,MAAM,CAAC;GACP,SAAS,CAAC;EACZ;CACF;CACA,kBAAkB;EAChB;GAAE,SAAS;GAAO,UAAU;GAAO,OAAO,EAAE,OAAO,mFAAmF;EAAE;EAGxI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;IAAE,OAAO;IAA8C,QAAQ;GAA0B;EAAE;EAGpI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAW,OAAO;IAAE,OAAO;IAAsC,QAAQ;GAAgB;EAAE;EACpI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAa,OAAO;IAAE,OAAO;IAA0C,QAAQ;GAAgB;EAAE;EAE1I;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAS,OAAO;IAAE,OAAO;IAAyC,QAAQ;GAAgB;EAAE;EACrI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAW,OAAO;IAAE,OAAO;IAA6C,QAAQ;GAAgB;EAAE;EAC3I;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAQ,OAAO;IAAE,OAAO;IAAuC,QAAQ;GAAgB;EAAE;EAClI;GAAE,SAAS;GAAM,UAAU;GAAO,OAAO;GAAW,OAAO;IAAE,OAAO;IAA6C,QAAQ;GAAgB;EAAE;EAG3I;GAAE,MAAM;GAAM,SAAS;GAAM,OAAO,EAAE,QAAQ,WAAW;EAAE;EAE3D;GAAE,MAAM;GAAM,YAAY;GAAM,OAAO,EAAE,SAAS,WAAW;EAAE;CACjE;CACA,iBAAiB;EACf,SAAS;EACT,UAAU;CACZ;AACF,CAAC"}

package/dist/components/icons/RuiIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.js","names":["_sfc_main"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiIcon.js","names":["_sfc_main"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn } from '@/utils/tv';\nimport { iconStyles } from './icon-styles';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":""}

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js

@@ -1,24 +1,9 @@
 import { useIcons } from "../../composables/icons.js";
 import { get, objectOmit } from "../../vendor/@vueuse/shared/dist/index.js";
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
+import { iconStyles } from "./icon-styles.js";
 import { Fragment, computed, createBlock, createElementBlock, defineComponent, mergeProps, openBlock, renderList, resolveDynamicComponent, unref } from "vue";
 //#region src/components/icons/RuiIcon.vue?vue&type=script&setup=true&lang.ts
-/**
-* The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
-* never wanted: `shrink-0` keeps the size beside a long grow sibling,
-* such as a `w-full` button label in `variant="list"`. Without it the svg is
-* compressed along the main axis while its height stays put, drawing a sliver
-* of a glyph.
-*
-* The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
-* Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
-* single, blurry pixel.
-*
-* The svg also carries the default paint, outlined in `currentColor`, and
-* every primitive inherits it unless it sets its own `fill` or `stroke`. That
-* is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
-* icon mixes a stroked outline with a solid mark.
-*/
 var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
 	name: "RuiIcon",
 	inheritAttrs: false,
@@ -30,17 +15,6 @@ var RuiIcon_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 	},
 	setup(__props) {
 		const { registeredIcons } = useIcons();
-		const iconStyles = tv({
-			base: "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]",
-			variants: { color: {
-				primary: "text-rui-primary",
-				secondary: "text-rui-secondary",
-				error: "text-rui-error",
-				warning: "text-rui-warning",
-				info: "text-rui-info",
-				success: "text-rui-success"
-			} }
-		});
 		const hasExplicitSize = computed(() => __props.size !== void 0);
 		function ui(attrsClass) {
 			return iconStyles({

package/dist/components/icons/RuiIcon.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nconst iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsBA,MAAM,EAAE,oBAAoB,SAAS;EAoBrC,MAAM,aAAa,GAAG;GACpB,MAAM;GACN,UAAU,EACR,OAAO;IACL,SAAS;IACT,WAAW;IACX,OAAO;IACP,SAAS;IACT,MAAM;IACN,SAAS;GACX,EACF;EACF,CAAC;EAED,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;;;;;;;;;;EAWD,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGH,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAOI,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;IACN,MAAK;IACL,QAAO;IACP,kBAAe;IACf,mBAAgB;GACR,GAAAA,MAAA,UAAA,CAAU,CAACJ,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzBC,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAH6BF,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAAH,UAAA,GAAAM,YAKEC,wBAJK,UAAS,EAAA,GADhBL,WAKE,EAFC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,EAAA,GAAA,MAAA,EAAA"}
+{"version":3,"file":"RuiIcon.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_openBlock","_createElementBlock","_mergeProps","_unref","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"sources":["../../../src/components/icons/RuiIcon.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ClassValue } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { objectOmit } from '@vueuse/shared';\nimport { useIcons } from '@/composables/icons';\nimport { cn } from '@/utils/tv';\nimport { iconStyles } from './icon-styles';\n\nexport interface Props {\n  name: RuiIcons;\n  size?: number | string;\n  color?: ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiIcon',\n  // A fallthrough class would land beside the variant classes and leave the cascade to break the tie; `ui` merges instead\n  inheritAttrs: false,\n});\n\nconst { name, size, color } = defineProps<Props>();\n\nconst { registeredIcons } = useIcons();\n\ntype SvgComponent = [tag: string, attrs: Record<string, string>];\n\nconst hasExplicitSize = computed<boolean>(() => size !== undefined);\n\nfunction ui(attrsClass: ClassValue): string {\n  return iconStyles({ color, class: cn(attrsClass) });\n}\n\n/**\n * The `size` prop as an inline CSS custom property on the svg. Inline style\n * beats any inherited value for the same property on this element, so a\n * consumer's size beats the button's `--rui-icon-size` without !important.\n *\n * A bare number is coerced to px, including the numeric string a template\n * binding like `:size=\"16\"` resolves to, while a value that already carries a\n * unit passes through. CSS needs that coercion; the `width`/`height`\n * presentation attributes this replaced treated bare numbers as px themselves.\n */\nconst sizeStyle = computed<Record<string, string> | undefined>(() => {\n  if (!get(hasExplicitSize))\n    return undefined;\n  const raw = String(size);\n  const value = /^\\d+(?:\\.\\d+)?$/.test(raw) ? `${raw}px` : raw;\n  return { '--rui-icon-size': value };\n});\n\n/**\n * What is registered is the only thing that matters here. An app may register\n * its own icons through `createRui(\\{ theme: \\{ icons \\} \\})`, brand logos\n * among them since the library carries none, and those names never appear in\n * the generated `RuiIcons` list. Validating against that list warned for\n * precisely the icons the registration API exists to support. A genuinely\n * unknown name is still caught by the check that decides whether anything\n * renders.\n */\nconst components = computed<SvgComponent[] | undefined>(() => {\n  const found = registeredIcons[name];\n\n  if (!found) {\n    console.error(\n      `Icons \"${name}\" not found. Make sure that you have register the icon when installing the RuiPlugin`,\n    );\n  }\n  return found;\n});\n</script>\n\n<template>\n  <svg\n    aria-hidden=\"true\"\n    class=\"rui-icon\"\n    :class=\"ui($attrs.class)\"\n    :style=\"sizeStyle\"\n    viewBox=\"0 0 24 24\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    v-bind=\"objectOmit($attrs, ['class'])\"\n  >\n    <component\n      :is=\"component[0]\"\n      v-for=\"(component, index) in components\"\n      :key=\"index\"\n      v-bind=\"component[1]\"\n    />\n  </svg>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;EAuBA,MAAM,EAAE,oBAAoB,SAAS;EAIrC,MAAM,kBAAkB,eAAwB,QAAA,SAAS,KAAA,CAAS;EAElE,SAAS,GAAG,YAAgC;GAC1C,OAAO,WAAW;IAAE,OAAI,QAAA;IAAG,OAAO,GAAG,UAAU;GAAE,CAAC;EACpD;;;;;;;;;;;EAYA,MAAM,YAAY,eAAmD;GACnE,IAAI,CAAC,IAAI,eAAe,GACtB,OAAO,KAAA;GACT,MAAM,MAAM,OAAO,QAAA,IAAI;GAEvB,OAAO,EAAE,mBADK,kBAAkB,KAAK,GAAG,IAAI,GAAG,IAAI,MAAM,IACvB;EACpC,CAAC;;;;;;;;;;EAWD,MAAM,aAAa,eAA2C;GAC5D,MAAM,QAAQ,gBAAgB,QAAA;GAE9B,IAAI,CAAC,OACH,QAAQ,MACN,UAAU,QAAA,KAAK,qFACjB;GAEF,OAAO;EACT,CAAC;;GAIC,OAAAC,UAAA,GAAAC,mBAmBM,OAnBNC,WAmBM;IAlBJ,eAAY;IACZ,OAAK,CAAC,YACE,GAAGH,KAAAA,OAAO,KAAK,CAAA;IACtB,OAAOI,MAAA,SAAA;IACR,SAAQ;IACR,OAAM;IACN,MAAK;IACL,QAAO;IACP,kBAAe;IACf,mBAAgB;GACR,GAAAA,MAAA,UAAA,CAAU,CAACJ,KAAAA,QAAM,CAAA,OAAA,CAAA,CAAA,GAAA,EAEzBC,UAAA,IAAA,GAAAC,mBAKEG,UAAA,MAAAC,WAH6BF,MAAA,UAAA,IAArB,WAAW,UAAK;IAF1B,OAAAH,UAAA,GAAAM,YAKEC,wBAJK,UAAS,EAAA,GADhBL,WAKE,EAFC,KAAK,MAAK,GAAA,EAAA,SAAA,KAAA,GACH,UAAS,EAAA,GAAA,MAAA,EAAA"}

package/dist/components/icons/icon-styles.d.ts

@@ -0,0 +1,44 @@
+/**
+ * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
+ * never wanted: `shrink-0` keeps the size beside a long grow sibling,
+ * such as a `w-full` button label in `variant="list"`. Without it the svg is
+ * compressed along the main axis while its height stays put, drawing a sliver
+ * of a glyph.
+ *
+ * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
+ * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
+ * single, blurry pixel.
+ *
+ * The svg also carries the default paint, outlined in `currentColor`, and
+ * every primitive inherits it unless it sets its own `fill` or `stroke`. That
+ * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
+ * icon mixes a stroked outline with a solid mark.
+ */
+export declare const iconStyles: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "text-rui-primary";
+        secondary: "text-rui-secondary";
+        error: "text-rui-error";
+        warning: "text-rui-warning";
+        info: "text-rui-info";
+        success: "text-rui-success";
+    };
+}, undefined, "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]", {
+    color: {
+        primary: "text-rui-primary";
+        secondary: "text-rui-secondary";
+        error: "text-rui-error";
+        warning: "text-rui-warning";
+        info: "text-rui-info";
+        success: "text-rui-success";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "text-rui-primary";
+        secondary: "text-rui-secondary";
+        error: "text-rui-error";
+        warning: "text-rui-warning";
+        info: "text-rui-info";
+        success: "text-rui-success";
+    };
+}, undefined>>;

package/dist/components/icons/icon-styles.js

@@ -0,0 +1,33 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/icons/icon-styles.ts
+/**
+* The icon's box is always driven by `--rui-icon-size`, so flex shrinking is
+* never wanted: `shrink-0` keeps the size beside a long grow sibling,
+* such as a `w-full` button label in `variant="list"`. Without it the svg is
+* compressed along the main axis while its height stays put, drawing a sliver
+* of a glyph.
+*
+* The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.
+* Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a
+* single, blurry pixel.
+*
+* The svg also carries the default paint, outlined in `currentColor`, and
+* every primitive inherits it unless it sets its own `fill` or `stroke`. That
+* is how lucide draws, so its solid dots (tag, palette) stay solid, and how an
+* icon mixes a stroked outline with a solid mark.
+*/
+var iconStyles = tv({
+	base: "shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]",
+	variants: { color: {
+		primary: "text-rui-primary",
+		secondary: "text-rui-secondary",
+		error: "text-rui-error",
+		warning: "text-rui-warning",
+		info: "text-rui-info",
+		success: "text-rui-success"
+	} }
+});
+//#endregion
+export { iconStyles };
+
+//# sourceMappingURL=icon-styles.js.map

package/dist/components/icons/icon-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-styles.js","names":[],"sources":["../../../src/components/icons/icon-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\n/**\n * The icon's box is always driven by `--rui-icon-size`, so flex shrinking is\n * never wanted: `shrink-0` keeps the size beside a long grow sibling,\n * such as a `w-full` button label in `variant=\"list\"`. Without it the svg is\n * compressed along the main axis while its height stays put, drawing a sliver\n * of a glyph.\n *\n * The stroke is set on the svg as CSS, so `--rui-icon-stroke` can retune it.\n * Lucide's 2 reads heavy beside Inter; 1.5 would draw a 16px glyph at a\n * single, blurry pixel.\n *\n * The svg also carries the default paint, outlined in `currentColor`, and\n * every primitive inherits it unless it sets its own `fill` or `stroke`. That\n * is how lucide draws, so its solid dots (tag, palette) stay solid, and how an\n * icon mixes a stroked outline with a solid mark.\n */\nexport const iconStyles = tv({\n  base: 'shrink-0 w-(--rui-icon-size,1.5rem) h-(--rui-icon-size,1.5rem) [stroke-width:var(--rui-icon-stroke,1.75)]',\n  variants: {\n    color: {\n      primary: 'text-rui-primary',\n      secondary: 'text-rui-secondary',\n      error: 'text-rui-error',\n      warning: 'text-rui-warning',\n      info: 'text-rui-info',\n      success: 'text-rui-success',\n    },\n  },\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAa,aAAa,GAAG;CAC3B,MAAM;CACN,UAAU,EACR,OAAO;EACL,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,MAAM;EACN,SAAS;CACX,EACF;AACF,CAAC"}

package/dist/components/loaders/RuiSkeletonBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonBase.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { skeletonBaseStyles } from './skeleton-base-styles';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeletonBaseStyles({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":""}

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js

@@ -1,4 +1,4 @@
-import { tv } from "../../utils/tv.js";
+import { skeletonBaseStyles } from "./skeleton-base-styles.js";
 import { computed, createElementBlock, defineComponent, normalizeClass, openBlock, unref } from "vue";
 //#region src/components/loaders/RuiSkeletonBase.vue?vue&type=script&setup=true&lang.ts
 var RuiSkeletonBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -6,17 +6,7 @@ var RuiSkeletonBase_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/
 	__name: "RuiSkeletonBase",
 	props: { rounded: {} },
 	setup(__props) {
-		const skeleton = tv({
-			base: "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800",
-			variants: { rounded: {
-				none: "rounded-none",
-				sm: "rounded-xs",
-				md: "rounded-rui-control",
-				lg: "rounded-rui-card",
-				full: "rounded-full"
-			} }
-		});
-		const ui = computed(() => skeleton({ rounded: __props.rounded }));
+		const ui = computed(() => skeletonBaseStyles({ rounded: __props.rounded }));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", {
 				class: normalizeClass(unref(ui)),

package/dist/components/loaders/RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\nconst skeleton = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeleton({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAaA,MAAM,WAAW,GAAG;GAElB,MAAM;GACN,UAAU,EACR,SAAS;IACP,MAAM;IACN,IAAI;IACJ,IAAI;IACJ,IAAI;IACJ,MAAM;GACR,EACF;EACF,CAAC;EAGD,MAAM,KAAK,eAAuB,SAAS,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAIrD,OAAAA,UAAA,GAAAC,mBAIE,OAAA;IAHC,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}
+{"version":3,"file":"RuiSkeletonBase.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_unref"],"sources":["../../../src/components/loaders/RuiSkeletonBase.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { skeletonBaseStyles } from './skeleton-base-styles';\n\nexport interface Props {\n  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full';\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoaderBase',\n});\n\nconst { rounded } = defineProps<Props>();\n\n// the bar is decoration only, so it is aria-hidden: an alert role made a screen reader announce every bar\nconst ui = computed<string>(() => skeletonBaseStyles({ rounded }));\n</script>\n\n<template>\n  <div\n    :class=\"ui\"\n    data-id=\"skeleton\"\n    aria-hidden=\"true\"\n  />\n</template>\n"],"mappings":";;;;;;;;EAcA,MAAM,KAAK,eAAuB,mBAAmB,EAAE,SAAM,QAAA,QAAE,CAAC,CAAC;;GAI/D,OAAAA,UAAA,GAAAC,mBAIE,OAAA;IAHC,OAAKC,eAAEC,MAAA,EAAA,CAAE;IACV,WAAQ;IACR,eAAY"}

package/dist/components/loaders/RuiSkeletonLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiSkeletonLoader.js","names":["_sfc_main"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn } from '@/utils/tv';\nimport { skeletonLoaderStyles } from './skeleton-loader-styles';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonLoaderStyles({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,7 @@
-import { cn, tv } from "../../utils/tv.js";
+import { cn } from "../../utils/tv.js";
 import RuiSkeletonBase_default from "./RuiSkeletonBase.js";
 import { SkeletonType } from "./skeleton-type.js";
+import { skeletonLoaderStyles } from "./skeleton-loader-styles.js";
 import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, mergeProps, openBlock, unref, useAttrs } from "vue";
 //#region src/components/loaders/RuiSkeletonLoader.vue?vue&type=script&setup=true&lang.ts
 var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
@@ -13,19 +14,8 @@ var RuiSkeletonLoader_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*
 	},
 	setup(__props) {
 		const multiLineTypes = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];
-		const skeletonType = tv({ variants: { type: {
-			[SkeletonType.CUSTOM]: "box-border",
-			[SkeletonType.TEXT]: "w-full h-4 rounded-rui-control",
-			[SkeletonType.HEADING]: "w-full h-6 rounded-rui-control",
-			[SkeletonType.BUTTON]: "w-full max-w-24 h-9 rounded-rui-control",
-			[SkeletonType.ICON]: "w-6 h-6 rounded-full",
-			[SkeletonType.AVATAR]: "w-10 h-10 rounded-full",
-			[SkeletonType.THUMBNAIL]: "w-14 h-14 rounded-xs",
-			[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
-			[SkeletonType.ARTICLE]: "flex flex-col gap-2"
-		} } });
 		const attrs = useAttrs();
-		const ui = computed(() => skeletonType({
+		const ui = computed(() => skeletonLoaderStyles({
 			type: __props.type,
 			class: cn(attrs.class)
 		}));

package/dist/components/loaders/RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","RuiSkeletonBase","_mergeProps","_createElementBlock","_createCommentVNode","_createVNode"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn, tv } from '@/utils/tv';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst skeletonType = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonType({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,OAAO;EAEpF,MAAM,eAAe,GAAG,EACtB,UAAU,EACR,MAAM;IACH,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,UAAU;IACvB,aAAa,SAAS;IACtB,aAAa,OAAO;IACpB,aAAa,SAAS;IACtB,aAAa,YAAY;IACzB,aAAa,YAAY;IACzB,aAAa,UAAU;EAC1B,EACF,EACF,CAAC;EAED,MAAM,QAAQ,SAAS;EACvB,MAAM,KAAK,eAAuB,aAAa;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,KAAK;EAAE,CAAC,CAAC;EAChF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,IAAI,CAAC;;GAK9D,OAAA,CAAAA,MAAA,WAAA,KADTC,UAAA,GAAAC,YAKEC,yBALFC,WAKE;;IAHC,OAAOJ,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtCC,UAAA,GAAAI,mBAsBM,OAtBND,WAsBM;;IApBH,OAAOJ,MAAA,EAAA;GACK,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAASA,MAAA,YAAA,CAAY,CAAC,WAD9BC,UAAA,GAAAC,YAIEC,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}
+{"version":3,"file":"RuiSkeletonLoader.vue_vue_type_script_setup_true_lang.js","names":["_unref","_openBlock","_createBlock","RuiSkeletonBase","_mergeProps","_createElementBlock","_createCommentVNode","_createVNode"],"sources":["../../../src/components/loaders/RuiSkeletonLoader.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport RuiSkeletonBase, {\n  type Props as SkeletonBaseProps,\n} from '@/components/loaders/RuiSkeletonBase.vue';\nimport { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { cn } from '@/utils/tv';\nimport { skeletonLoaderStyles } from './skeleton-loader-styles';\n\nexport interface Props extends SkeletonBaseProps {\n  type?: SkeletonType;\n}\n\ndefineOptions({\n  name: 'RuiSkeletonLoader',\n  inheritAttrs: false,\n});\n\nconst { type = SkeletonType.TEXT, rounded } = defineProps<Props>();\n\nconst multiLineTypes: SkeletonType[] = [SkeletonType.PARAGRAPH, SkeletonType.ARTICLE];\n\nconst attrs = useAttrs();\nconst ui = computed<string>(() => skeletonLoaderStyles({ type, class: cn(attrs.class) }));\nconst isMultiLine = computed<boolean>(() => multiLineTypes.includes(type));\n</script>\n\n<template>\n  <RuiSkeletonBase\n    v-if=\"!isMultiLine\"\n    :class=\"ui\"\n    :rounded=\"rounded\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  />\n  <div\n    v-else\n    :class=\"ui\"\n    v-bind=\"{ ...attrs, class: undefined }\"\n  >\n    <RuiSkeletonBase\n      v-if=\"type === SkeletonType.ARTICLE\"\n      class=\"w-full h-6 rounded-rui-control mb-1\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[80%]\"\n      :rounded=\"rounded\"\n    />\n    <RuiSkeletonBase\n      class=\"w-full h-3 rounded-rui-control max-w-[90%]\"\n      :rounded=\"rounded\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;EAmBA,MAAM,iBAAiC,CAAC,aAAa,WAAW,aAAa,OAAO;EAEpF,MAAM,QAAQ,SAAS;EACvB,MAAM,KAAK,eAAuB,qBAAqB;GAAE,MAAG,QAAA;GAAG,OAAO,GAAG,MAAM,KAAK;EAAE,CAAC,CAAC;EACxF,MAAM,cAAc,eAAwB,eAAe,SAAS,QAAA,IAAI,CAAC;;GAK9D,OAAA,CAAAA,MAAA,WAAA,KADTC,UAAA,GAAAC,YAKEC,yBALFC,WAKE;;IAHC,OAAOJ,MAAA,EAAA;IACP,SAAS,QAAA;GACG,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA,MAAA,IAAA,CAAA,SAAA,SAAA,CAAA,MAEtCC,UAAA,GAAAI,mBAsBM,OAtBND,WAsBM;;IApBH,OAAOJ,MAAA,EAAA;GACK,GAAA;IAAA,GAAAA,MAAA,KAAA;IAAK,OAAS,KAAA;GAAS,CAAA,GAAA;IAG5B,QAAA,SAASA,MAAA,YAAA,CAAY,CAAC,WAD9BC,UAAA,GAAAC,YAIEC,yBAAA;;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA;;IAEZI,YAGEJ,yBAAA;KAFA,OAAM;KACL,SAAS,QAAA"}

package/dist/components/loaders/skeleton-base-styles.d.ts

@@ -0,0 +1,25 @@
+export declare const skeletonBaseStyles: import("tailwind-variants").TVReturnType<{
+    rounded: {
+        none: "rounded-none";
+        sm: "rounded-xs";
+        md: "rounded-rui-control";
+        lg: "rounded-rui-card";
+        full: "rounded-full";
+    };
+}, undefined, "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800", {
+    rounded: {
+        none: "rounded-none";
+        sm: "rounded-xs";
+        md: "rounded-rui-control";
+        lg: "rounded-rui-card";
+        full: "rounded-full";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    rounded: {
+        none: "rounded-none";
+        sm: "rounded-xs";
+        md: "rounded-rui-control";
+        lg: "rounded-rui-card";
+        full: "rounded-full";
+    };
+}, undefined>>;

package/dist/components/loaders/skeleton-base-styles.js

@@ -0,0 +1,16 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/loaders/skeleton-base-styles.ts
+var skeletonBaseStyles = tv({
+	base: "animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800",
+	variants: { rounded: {
+		none: "rounded-none",
+		sm: "rounded-xs",
+		md: "rounded-rui-control",
+		lg: "rounded-rui-card",
+		full: "rounded-full"
+	} }
+});
+//#endregion
+export { skeletonBaseStyles };
+
+//# sourceMappingURL=skeleton-base-styles.js.map

package/dist/components/loaders/skeleton-base-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-base-styles.js","names":[],"sources":["../../../src/components/loaders/skeleton-base-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const skeletonBaseStyles = tv({\n  // zinc steps rather than translucent black and white, which in dark came out lighter than any surface\n  base: 'animate-pulse bg-rui-neutral-200 dark:bg-rui-neutral-800',\n  variants: {\n    rounded: {\n      none: 'rounded-none',\n      sm: 'rounded-xs',\n      md: 'rounded-rui-control',\n      lg: 'rounded-rui-card',\n      full: 'rounded-full',\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,qBAAqB,GAAG;CAEnC,MAAM;CACN,UAAU,EACR,SAAS;EACP,MAAM;EACN,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,MAAM;CACR,EACF;AACF,CAAC"}

package/dist/components/loaders/skeleton-loader-styles.d.ts

@@ -0,0 +1,37 @@
+export declare const skeletonLoaderStyles: import("tailwind-variants").TVReturnType<{
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined, undefined, {
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    type: {
+        custom: "box-border";
+        text: "w-full h-4 rounded-rui-control";
+        heading: "w-full h-6 rounded-rui-control";
+        button: "w-full max-w-24 h-9 rounded-rui-control";
+        icon: "w-6 h-6 rounded-full";
+        avatar: "w-10 h-10 rounded-full";
+        thumbnail: "w-14 h-14 rounded-xs";
+        paragraph: "flex flex-col gap-2";
+        article: "flex flex-col gap-2";
+    };
+}, undefined>>;

package/dist/components/loaders/skeleton-loader-styles.js

@@ -0,0 +1,18 @@
+import { tv } from "../../utils/tv.js";
+import { SkeletonType } from "./skeleton-type.js";
+//#region src/components/loaders/skeleton-loader-styles.ts
+var skeletonLoaderStyles = tv({ variants: { type: {
+	[SkeletonType.CUSTOM]: "box-border",
+	[SkeletonType.TEXT]: "w-full h-4 rounded-rui-control",
+	[SkeletonType.HEADING]: "w-full h-6 rounded-rui-control",
+	[SkeletonType.BUTTON]: "w-full max-w-24 h-9 rounded-rui-control",
+	[SkeletonType.ICON]: "w-6 h-6 rounded-full",
+	[SkeletonType.AVATAR]: "w-10 h-10 rounded-full",
+	[SkeletonType.THUMBNAIL]: "w-14 h-14 rounded-xs",
+	[SkeletonType.PARAGRAPH]: "flex flex-col gap-2",
+	[SkeletonType.ARTICLE]: "flex flex-col gap-2"
+} } });
+//#endregion
+export { skeletonLoaderStyles };
+
+//# sourceMappingURL=skeleton-loader-styles.js.map

package/dist/components/loaders/skeleton-loader-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-loader-styles.js","names":[],"sources":["../../../src/components/loaders/skeleton-loader-styles.ts"],"sourcesContent":["import { SkeletonType } from '@/components/loaders/skeleton-type';\nimport { tv } from '@/utils/tv';\n\nexport const skeletonLoaderStyles = tv({\n  variants: {\n    type: {\n      [SkeletonType.CUSTOM]: 'box-border',\n      [SkeletonType.TEXT]: 'w-full h-4 rounded-rui-control',\n      [SkeletonType.HEADING]: 'w-full h-6 rounded-rui-control',\n      [SkeletonType.BUTTON]: 'w-full max-w-24 h-9 rounded-rui-control',\n      [SkeletonType.ICON]: 'w-6 h-6 rounded-full',\n      [SkeletonType.AVATAR]: 'w-10 h-10 rounded-full',\n      [SkeletonType.THUMBNAIL]: 'w-14 h-14 rounded-xs',\n      [SkeletonType.PARAGRAPH]: 'flex flex-col gap-2',\n      [SkeletonType.ARTICLE]: 'flex flex-col gap-2',\n    },\n  },\n});\n"],"mappings":";;;AAGA,IAAa,uBAAuB,GAAG,EACrC,UAAU,EACR,MAAM;EACH,aAAa,SAAS;EACtB,aAAa,OAAO;EACpB,aAAa,UAAU;EACvB,aAAa,SAAS;EACtB,aAAa,OAAO;EACpB,aAAa,SAAS;EACtB,aAAa,YAAY;EACzB,aAAa,YAAY;EACzB,aAAa,UAAU;AAC1B,EACF,EACF,CAAC"}

package/dist/components/overlays/badge/RuiBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { tv } from '@/utils/tv';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst badgeStyles = tv({\n  slots: {\n    wrapper: 'relative inline-block',\n    badge: 'flex items-center justify-center text-xs font-medium tabular-nums absolute bg-transparent text-rui-text',\n    content: 'flex items-center gap-1 px-1.5',\n  },\n  variants: {\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark, where `main` is a text tone\n    color: {\n      default: { badge: 'bg-rui-neutral-200 dark:bg-rui-neutral-700' },\n      primary: { badge: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { badge: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { badge: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { badge: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { badge: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { badge: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // the icon is 60% of the badge height, as the text is, rather than filling it\n    size: {\n      sm: { badge: 'min-h-4 min-w-4 text-caption-2 [--rui-icon-size:0.625rem]' },\n      md: { badge: 'min-h-5 min-w-5 [--rui-icon-size:0.75rem]' },\n      lg: { badge: 'min-h-6 min-w-6 [--rui-icon-size:0.875rem]' },\n    },\n    rounded: {\n      sm: { badge: 'rounded-xs' },\n      md: { badge: 'rounded-rui-control' },\n      lg: { badge: 'rounded-rui-card' },\n      full: { badge: 'rounded-full' },\n    },\n    // A surface ring keeps a dot apart from whatever it overlaps, such as an avatar edge\n    dot: {\n      true: { badge: 'ring-2 ring-rui-surface' },\n    },\n    // an icon alone needs no side padding, so the badge stays as wide as it is tall\n    iconOnly: {\n      true: { content: 'px-0' },\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // the default dot is a step lighter in dark, where neutral-500 nearly vanished against a dark control\n    { dot: true, color: 'default', class: { badge: 'bg-rui-neutral-500 dark:bg-rui-neutral-400' } },\n    // A dot carries no text, so it keeps the brighter `main`, which reads better as a small mark on a dark page\n    { dot: true, color: 'error', class: { badge: 'dark:bg-rui-error' } },\n    { dot: true, color: 'warning', class: { badge: 'dark:bg-rui-warning' } },\n    { dot: true, color: 'info', class: { badge: 'dark:bg-rui-info' } },\n    { dot: true, color: 'success', class: { badge: 'dark:bg-rui-success' } },\n\n    // Dot sizes: 8, 10 and 12px, since half of a dot sits off the corner and reads smaller than it is\n    { dot: true, size: 'sm', class: { badge: 'min-w-2 min-h-2' } },\n    { dot: true, size: 'md', class: { badge: 'min-w-2.5 min-h-2.5' } },\n    { dot: true, size: 'lg', class: { badge: 'min-w-3 min-h-3' } },\n  ],\n  defaultVariants: {\n    color: 'primary',\n    size: 'md',\n    rounded: 'full',\n    dot: false,\n  },\n});\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiBadge.js","names":["_sfc_main"],"sources":["../../../../src/components/overlays/badge/RuiBadge.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { BadgePlacement, BadgeRounded, BadgeSize } from '@/components/overlays/badge/badge-props';\nimport { badgeStyles } from './badge-styles';\n\ntype PosConfig = [left: number, right: string, edge: string, center: number];\n\nexport interface Props {\n  text?: string | null;\n  icon?: RuiIcons | null;\n  modelValue?: boolean;\n  dot?: boolean;\n  left?: boolean;\n  offsetX?: string | number;\n  offsetY?: string | number;\n  placement?: BadgePlacement;\n  size?: BadgeSize;\n  rounded?: BadgeRounded;\n  color?: 'default' | ContextColorsType;\n}\n\ndefineOptions({\n  name: 'RuiBadge',\n});\n\nconst {\n  text = null,\n  icon = null,\n  modelValue = true,\n  dot = false,\n  placement = BadgePlacement.top,\n  left = false,\n  size = BadgeSize.md,\n  rounded = BadgeRounded.full,\n  color = 'primary',\n  offsetX = 0,\n  offsetY = 0,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n  badge?: () => any;\n  icon?: () => any;\n}>();\n\nconst hasText = computed<boolean>(() => !!text || !!slots.badge);\n\nconst hasIconAndText = computed<boolean>(() => (!!icon || !!slots.icon) && get(hasText));\n\nconst ui = computed<ReturnType<typeof badgeStyles>>(() => badgeStyles({\n  color,\n  size,\n  rounded,\n  dot,\n  iconOnly: (!!icon || !!slots.icon) && !get(hasText),\n}));\n\n/** Dot positions as [leftOffset, rightBase, edgeBase, centerOffset]; a dot's center sits on the corner, so each size moves by half its diameter. */\nconst DOT_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.25, '100% - 0.25rem', '100% - 0.25rem', 0.25],\n  md: [-0.3125, '100% - 0.3125rem', '100% - 0.3125rem', 0.3125],\n  lg: [-0.375, '100% - 0.375rem', '100% - 0.375rem', 0.375],\n};\nconst BADGE_POS: Record<BadgeSize, PosConfig> = {\n  sm: [-0.85, '100% - 0.375rem', '100% - 0.375rem', 0.55],\n  md: [-0.95, '100% - 0.5rem', '100% - 0.5rem', 0.65],\n  lg: [-1.05, '100% - 0.5rem', '100% - 0.5rem', 0.75],\n};\n\nconst positionStyle = computed<Record<string, string>>(() => {\n  const ox = Number(offsetX) * 0.0625;\n  const oy = Number(offsetY) * 0.0625;\n  const [l, r, edge, center] = dot ? DOT_POS[size] : BADGE_POS[size];\n\n  const horizontal = `calc(${left ? `${l}rem` : r} + ${ox}rem)`;\n  const vertical = placement === 'center'\n    ? `calc(50% - ${center}rem - ${oy}rem)`\n    : `calc(${edge} - ${oy}rem)`;\n\n  return {\n    left: horizontal,\n    [placement === 'top' ? 'bottom' : 'top']: vertical,\n  };\n});\n</script>\n\n<template>\n  <div :class=\"ui.wrapper()\">\n    <slot />\n    <!-- under reduced motion the badge appears and leaves at full size, with no scale -->\n    <Transition\n      appear\n      enter-active-class=\"transition-[scale] ease-out duration-200 motion-reduce:transition-none\"\n      enter-from-class=\"scale-0 motion-reduce:scale-100\"\n      enter-to-class=\"scale-100\"\n      leave-active-class=\"transition-[scale] ease-in duration-150 motion-reduce:transition-none\"\n      leave-from-class=\"scale-100\"\n      leave-to-class=\"scale-0 motion-reduce:scale-100\"\n    >\n      <div\n        v-if=\"modelValue\"\n        :class=\"ui.badge()\"\n        :style=\"positionStyle\"\n        :data-placement=\"placement\"\n        :data-dot=\"dot || undefined\"\n        :data-left=\"left || undefined\"\n        aria-atomic=\"true\"\n        aria-live=\"polite\"\n        role=\"status\"\n      >\n        <!-- no aria-label: on a live region it replaced the count, so a reader announced \"Badge\" -->\n        <span\n          v-if=\"!dot\"\n          :class=\"ui.content({ class: hasIconAndText ? 'px-2' : undefined })\"\n        >\n          <slot name=\"badge\">\n            {{ text }}\n          </slot>\n          <slot name=\"icon\">\n            <RuiIcon\n              v-if=\"icon\"\n              :name=\"icon\"\n            />\n          </slot>\n        </span>\n      </div>\n    </Transition>\n  </div>\n</template>\n"],"mappings":""}