@rotki/ui-library 3.1.7 → 3.3.0

package/dist/components/alerts/alert-styles.js

@@ -0,0 +1,70 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/alerts/alert-styles.ts
+var alertStyles = tv({
+	slots: {
+		root: "px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0",
+		content: "flex between:ml-3 between:mr-0 py-1 grow",
+		icon: "flex shrink-0 items-center",
+		texts: "between:mt-1 between:mb-0 grow",
+		action: "",
+		close: ""
+	},
+	variants: {
+		titled: {
+			true: { icon: "h-6" },
+			false: { icon: "h-5" }
+		},
+		variant: {
+			default: {},
+			filled: {
+				icon: "text-rui-dark-text!",
+				texts: "text-rui-dark-text!",
+				action: "text-rui-dark-text!",
+				close: "text-rui-dark-text!"
+			},
+			outlined: { root: "border -m-px bg-transparent" }
+		},
+		type: {
+			primary: { root: "[--rui-alert:var(--rui-primary-main)]" },
+			secondary: { root: "[--rui-alert:var(--rui-secondary-main)]" },
+			error: { root: "[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]" },
+			warning: { root: "[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]" },
+			info: { root: "[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]" },
+			success: { root: "[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]" }
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			class: { root: "border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]" }
+		},
+		{
+			variant: "filled",
+			class: { root: "bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]" }
+		},
+		{
+			variant: "outlined",
+			class: {
+				root: "border-[rgb(var(--rui-alert))]",
+				icon: "text-[rgb(var(--rui-alert))]"
+			}
+		}
+	],
+	compoundSlots: [{
+		slots: [
+			"texts",
+			"action",
+			"close"
+		],
+		variant: ["default", "outlined"],
+		class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
+	}, {
+		slots: ["icon"],
+		variant: "default",
+		class: "text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]"
+	}]
+});
+//#endregion
+export { alertStyles };
+
+//# sourceMappingURL=alert-styles.js.map

package/dist/components/alerts/alert-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert-styles.js","names":[],"sources":["../../../src/components/alerts/alert-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const alertStyles = tv({\n  slots: {\n    root: 'px-4 py-2.5 rounded-rui-panel flex between:ml-4 between:mr-0',\n    content: 'flex between:ml-3 between:mr-0 py-1 grow',\n    // as tall as the first line of text and centered in it, so the icon lines up however the text wraps\n    icon: 'flex shrink-0 items-center',\n    texts: 'between:mt-1 between:mb-0 grow',\n    action: '',\n    close: '',\n  },\n  variants: {\n    // the first line is the title's (24px) when there is one, else the description's (text-sm, 20px)\n    titled: {\n      true: { icon: 'h-6' },\n      false: { icon: 'h-5' },\n    },\n    variant: {\n      default: {},\n      filled: {\n        icon: 'text-rui-dark-text!',\n        texts: 'text-rui-dark-text!',\n        action: 'text-rui-dark-text!',\n        close: 'text-rui-dark-text!',\n      },\n      outlined: { root: 'border -m-px bg-transparent' },\n    },\n    /*\n     * Each type names its color once, as `--rui-alert`, and the variants mix from it. Tints and\n     * shades used to be paused CSS animations behind an `@supports (color-mix())` check that never\n     * matched (not a valid condition); mixing directly gives the same colors without them.\n     */\n    type: {\n      primary: { root: '[--rui-alert:var(--rui-primary-main)]' },\n      secondary: { root: '[--rui-alert:var(--rui-secondary-main)]' },\n      // a status color's dark `main` is a text tone, so a filled alert takes the deep `darker` there\n      error: { root: '[--rui-alert:var(--rui-error-main)] [--rui-alert-fill:var(--rui-error-darker)]' },\n      warning: { root: '[--rui-alert:var(--rui-warning-main)] [--rui-alert-fill:var(--rui-warning-darker)]' },\n      info: { root: '[--rui-alert:var(--rui-info-main)] [--rui-alert-fill:var(--rui-info-darker)]' },\n      success: { root: '[--rui-alert:var(--rui-success-main)] [--rui-alert-fill:var(--rui-success-darker)]' },\n    },\n  },\n  compoundVariants: [\n    // A tint of the type's color with a hairline of it, which reads on any surface in either theme\n    {\n      variant: 'default',\n      class: { root: 'border -m-px bg-[color-mix(in_srgb,rgb(var(--rui-alert))_8%,transparent)] dark:bg-[color-mix(in_srgb,rgb(var(--rui-alert))_12%,transparent)] border-[color-mix(in_srgb,rgb(var(--rui-alert))_25%,transparent)]' },\n    },\n    { variant: 'filled', class: { root: 'bg-[rgb(var(--rui-alert))] dark:bg-[rgb(var(--rui-alert-fill,var(--rui-alert)))]' } },\n    // without a tint behind it, the outlined alert carries its type in the icon too\n    { variant: 'outlined', class: { root: 'border-[rgb(var(--rui-alert))]', icon: 'text-[rgb(var(--rui-alert))]' } },\n  ],\n  compoundSlots: [\n    {\n      slots: ['texts', 'action', 'close'],\n      variant: ['default', 'outlined'],\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n    {\n      slots: ['icon'],\n      variant: 'default',\n      class: 'text-[color-mix(in_srgb,black_60%,rgb(var(--rui-alert)))] dark:text-[color-mix(in_srgb,white_60%,rgb(var(--rui-alert)))]',\n    },\n  ],\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,SAAS;EAET,MAAM;EACN,OAAO;EACP,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EAER,QAAQ;GACN,MAAM,EAAE,MAAM,MAAM;GACpB,OAAO,EAAE,MAAM,MAAM;EACvB;EACA,SAAS;GACP,SAAS,CAAC;GACV,QAAQ;IACN,MAAM;IACN,OAAO;IACP,QAAQ;IACR,OAAO;GACT;GACA,UAAU,EAAE,MAAM,8BAA8B;EAClD;EAMA,MAAM;GACJ,SAAS,EAAE,MAAM,wCAAwC;GACzD,WAAW,EAAE,MAAM,0CAA0C;GAE7D,OAAO,EAAE,MAAM,iFAAiF;GAChG,SAAS,EAAE,MAAM,qFAAqF;GACtG,MAAM,EAAE,MAAM,+EAA+E;GAC7F,SAAS,EAAE,MAAM,qFAAqF;EACxG;CACF;CACA,kBAAkB;EAEhB;GACE,SAAS;GACT,OAAO,EAAE,MAAM,iNAAiN;EAClO;EACA;GAAE,SAAS;GAAU,OAAO,EAAE,MAAM,mFAAmF;EAAE;EAEzH;GAAE,SAAS;GAAY,OAAO;IAAE,MAAM;IAAkC,MAAM;GAA+B;EAAE;CACjH;CACA,eAAe,CACb;EACE,OAAO;GAAC;GAAS;GAAU;EAAO;EAClC,SAAS,CAAC,WAAW,UAAU;EAC/B,OAAO;CACT,GACA;EACE,OAAO,CAAC,MAAM;EACd,SAAS;EACT,OAAO;CACT,CACF;AACF,CAAC"}

package/dist/components/avatars/RuiAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatar.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatar.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { avatarStyles } from './avatar-styles';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onLoad' | 'onError'>>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":""}

package/dist/components/avatars/RuiAvatar.vue.d.ts

@@ -1,3 +1,4 @@
+import type { HTMLAttributes } from 'vue';
 import type { ContextColorsType } from '../../consts/colors.js';
 import type { RuiIcons } from '../../icons/index.js';
 import { type AvatarSize, type AvatarVariant } from './avatar-props.js';
@@ -11,13 +12,14 @@ export interface Props {
     color?: 'default' | ContextColorsType;
     loading?: 'lazy' | 'eager';
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onLoad' | 'onError'>;
 type __VLS_Slots = {
     default?: () => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (event: Event) => any;
     load: (event: Event) => any;
-}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onError?: ((event: Event) => any) | undefined;
     onLoad?: ((event: Event) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js

@@ -1,8 +1,8 @@
 import { get, set } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import RuiIcon_default from "../icons/RuiIcon.js";
 import { computeAvatarText, computeInitials, resolveAvatarIconPx, resolveAvatarSizePx, resolveAvatarTextSize } from "./avatar-props.js";
 import { useAvatarGroup } from "./use-avatar-group.js";
+import { avatarStyles } from "./avatar-styles.js";
 import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch } from "vue";
 //#region src/components/avatars/RuiAvatar.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = [
@@ -82,43 +82,6 @@ var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 				height: px
 			};
 		});
-		const avatarStyles = tv({
-			slots: {
-				root: "relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle",
-				image: "w-full h-full object-cover",
-				fallback: "w-full h-full flex items-center justify-center",
-				initials: "uppercase leading-none"
-			},
-			variants: {
-				variant: {
-					circular: { root: "rounded-full" },
-					rounded: { root: "rounded-rui-control" },
-					square: { root: "rounded-none" }
-				},
-				color: {
-					default: { root: "bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700" },
-					primary: { root: "bg-rui-primary-fill text-rui-primary-foreground" },
-					secondary: { root: "bg-rui-secondary-fill text-rui-secondary-foreground" },
-					error: { root: "bg-rui-error-fill text-rui-error-foreground" },
-					warning: { root: "bg-rui-warning-fill text-rui-warning-foreground" },
-					info: { root: "bg-rui-info-fill text-rui-info-foreground" },
-					success: { root: "bg-rui-success-fill text-rui-success-foreground" }
-				},
-				size: {
-					"xs": { root: "text-[0.625rem]" },
-					"sm": { root: "text-[0.6875rem]" },
-					"md": { root: "text-sm" },
-					"lg": { root: "text-base" },
-					"xl": { root: "text-lg" },
-					"2xl": { root: "text-xl" }
-				}
-			},
-			defaultVariants: {
-				variant: "circular",
-				color: "default",
-				size: "md"
-			}
-		});
 		const ui = computed(() => avatarStyles({
 			variant: get(resolvedVariant),
 			color: __props.color,

package/dist/components/avatars/RuiAvatar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_renderSlot","_toDisplayString","_createBlock","RuiIcon"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst avatarStyles = tv({\n  slots: {\n    root: 'relative inline-flex items-center justify-center shrink-0 overflow-hidden select-none font-medium align-middle',\n    image: 'w-full h-full object-cover',\n    fallback: 'w-full h-full flex items-center justify-center',\n    initials: 'uppercase leading-none',\n  },\n  variants: {\n    variant: {\n      circular: { root: 'rounded-full' },\n      rounded: { root: 'rounded-rui-control' },\n      square: { root: 'rounded-none' },\n    },\n    // `-fill` is `main` in light and, for a status color, the deep `darker` in dark\n    color: {\n      default: { root: 'bg-rui-neutral-200 text-rui-text dark:bg-rui-neutral-700' },\n      primary: { root: 'bg-rui-primary-fill text-rui-primary-foreground' },\n      secondary: { root: 'bg-rui-secondary-fill text-rui-secondary-foreground' },\n      error: { root: 'bg-rui-error-fill text-rui-error-foreground' },\n      warning: { root: 'bg-rui-warning-fill text-rui-warning-foreground' },\n      info: { root: 'bg-rui-info-fill text-rui-info-foreground' },\n      success: { root: 'bg-rui-success-fill text-rui-success-foreground' },\n    },\n    // On the root so slot content (such as a group's `+N`) scales too\n    size: {\n      'xs': { root: 'text-[0.625rem]' },\n      'sm': { root: 'text-[0.6875rem]' },\n      'md': { root: 'text-sm' },\n      'lg': { root: 'text-base' },\n      'xl': { root: 'text-lg' },\n      '2xl': { root: 'text-xl' },\n    },\n  },\n  defaultVariants: {\n    variant: 'circular',\n    color: 'default',\n    size: 'md',\n  },\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs","_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_normalizeStyle","_renderSlot","_toDisplayString","_createBlock","RuiIcon"],"sources":["../../../src/components/avatars/RuiAvatar.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { HTMLAttributes } from 'vue';\nimport type { ContextColorsType } from '@/consts/colors';\nimport type { RuiIcons } from '@/icons';\nimport { get, set } from '@vueuse/shared';\nimport {\n  type AvatarSize,\n  type AvatarVariant,\n  computeAvatarText,\n  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\n  resolveAvatarTextSize,\n} from '@/components/avatars/avatar-props';\nimport { useAvatarGroup } from '@/components/avatars/use-avatar-group';\nimport RuiIcon from '@/components/icons/RuiIcon.vue';\nimport { avatarStyles } from './avatar-styles';\n\nexport interface Props {\n  src?: string | null;\n  alt?: string;\n  text?: string | null;\n  icon?: RuiIcons | null;\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  color?: 'default' | ContextColorsType;\n  loading?: 'lazy' | 'eager';\n}\n\ndefineOptions({\n  name: 'RuiAvatar',\n});\n\nconst {\n  src = null,\n  alt = '',\n  text = null,\n  icon = null,\n  size,\n  variant,\n  color = 'default',\n  loading = 'lazy',\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props | 'onLoad' | 'onError'>>();\n\nconst emit = defineEmits<{\n  load: [event: Event];\n  error: [event: Event];\n}>();\n\nconst slots = defineSlots<{\n  default?: () => any;\n}>();\n\nconst group = useAvatarGroup();\n\nconst resolvedSize = computed<AvatarSize | number>(() => {\n  if (size !== undefined)\n    return size;\n  if (group)\n    return get(group).size;\n  return 'md';\n});\n\nconst resolvedVariant = computed<AvatarVariant>(() => {\n  if (variant !== undefined)\n    return variant;\n  if (group)\n    return get(group).variant;\n  return 'circular';\n});\n\n// A numeric size borrows the text scale of the nearest token below it\nconst textSize = computed<AvatarSize>(() => resolveAvatarTextSize(get(resolvedSize)));\n\nconst sizePx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\nconst iconPx = computed<number>(() => resolveAvatarIconPx(get(resolvedSize)));\n\nconst errored = ref<boolean>(false);\n\nwatch(() => src, () => {\n  set(errored, false);\n});\n\nconst initials = computed<string>(() => {\n  const explicit = computeAvatarText(text);\n  if (explicit)\n    return explicit;\n  return computeInitials(alt);\n});\n\ntype DisplayMode = 'image' | 'slot' | 'initials' | 'icon' | 'empty';\n\nconst displayMode = computed<DisplayMode>(() => {\n  if (src && !get(errored))\n    return 'image';\n  if (slots.default)\n    return 'slot';\n  if (icon)\n    return 'icon';\n  if (get(initials))\n    return 'initials';\n  return 'empty';\n});\n\nconst decorative = computed<boolean>(() => alt === '' && !text);\n\nconst ariaLabel = computed<string | undefined>(() => {\n  if (get(displayMode) === 'image')\n    return undefined;\n  if (get(decorative))\n    return undefined;\n  return text ?? alt ?? undefined;\n});\n\nconst rootStyle = computed<Record<string, string>>(() => {\n  const px = `${get(sizePx)}px`;\n  return { width: px, height: px };\n});\n\nconst ui = computed<ReturnType<typeof avatarStyles>>(() => avatarStyles({\n  variant: get(resolvedVariant),\n  color,\n  size: get(textSize),\n}));\n\nfunction onLoad(event: Event): void {\n  set(errored, false);\n  emit('load', event);\n}\n\nfunction onError(event: Event): void {\n  set(errored, true);\n  emit('error', event);\n}\n</script>\n\n<template>\n  <span\n    :class=\"ui.root()\"\n    :style=\"rootStyle\"\n    :role=\"ariaLabel ? 'img' : undefined\"\n    :aria-label=\"ariaLabel\"\n    :aria-hidden=\"displayMode !== 'image' && decorative ? 'true' : undefined\"\n    :data-id=\"$attrs['data-id'] ?? 'avatar-root'\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"resolvedVariant\"\n    :data-color=\"color\"\n  >\n    <img\n      v-if=\"displayMode === 'image' && src\"\n      :class=\"ui.image()\"\n      :src=\"src\"\n      :alt=\"alt\"\n      :loading=\"loading\"\n      :width=\"sizePx\"\n      :height=\"sizePx\"\n      data-id=\"avatar-image\"\n      @load=\"onLoad($event)\"\n      @error=\"onError($event)\"\n    />\n    <span\n      v-else\n      :class=\"ui.fallback()\"\n      data-id=\"avatar-fallback\"\n      aria-hidden=\"true\"\n    >\n      <slot v-if=\"displayMode === 'slot'\" />\n      <span\n        v-else-if=\"displayMode === 'initials'\"\n        :class=\"ui.initials()\"\n        data-id=\"avatar-initials\"\n      >\n        {{ initials }}\n      </span>\n      <RuiIcon\n        v-else-if=\"displayMode === 'icon' && icon\"\n        :name=\"icon\"\n        :size=\"iconPx\"\n        data-id=\"avatar-icon\"\n      />\n      <span v-else>&nbsp;</span>\n    </span>\n  </span>\n</template>\n"],"mappings":"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"}

package/dist/components/avatars/RuiAvatarGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"RuiAvatarGroup.js","names":["_sfc_main"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, type HTMLAttributes, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { groupStyles } from './avatar-group-styles';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/avatars/RuiAvatarGroup.vue.d.ts

@@ -1,4 +1,4 @@
-import { type VNode } from 'vue';
+import { type HTMLAttributes, type VNode } from 'vue';
 import { AvatarGroupSpacing, type AvatarSize, type AvatarVariant } from './avatar-props.js';
 export interface Props {
     size?: AvatarSize | number;
@@ -13,13 +13,14 @@ export interface Props {
      */
     spacing?: AvatarGroupSpacing | number;
 }
+type __VLS_Props = Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>;
 type __VLS_Slots = {
     default?: () => VNode[];
     surplus?: (props: {
         count: number;
     }) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { get } from "../../vendor/@vueuse/shared/dist/index.js";
-import { tv } from "../../utils/tv.js";
 import { AvatarGroupSpacing, avatarGroupInjectionKey, resolveAvatarGroupSpacingPx, resolveAvatarSizePx } from "./avatar-props.js";
 import RuiAvatar_default from "./RuiAvatar.js";
+import { groupStyles } from "./avatar-group-styles.js";
 import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
 //#region src/components/avatars/RuiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["data-size", "data-variant"];
@@ -28,18 +28,6 @@ var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ d
 			size: get(resolvedSize),
 			variant: __props.variant
 		})));
-		const groupStyles = tv({
-			slots: {
-				root: "inline-flex items-center isolate",
-				item: "relative ring-2 ring-rui-surface",
-				surplus: "leading-none text-[0.85em] tracking-tight"
-			},
-			variants: { variant: {
-				circular: { item: "rounded-full" },
-				rounded: { item: "rounded-rui-control" },
-				square: { item: "rounded-none" }
-			} }
-		});
 		function flattenChildren(nodes) {
 			if (!nodes) return [];
 			const out = [];

package/dist/components/avatars/RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_normalizeStyle","_createVNode","_renderSlot","RuiAvatar","_withCtx","_createElementVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { tv } from '@/utils/tv';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nconst groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":["_useSlots","_openBlock","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_normalizeStyle","_createVNode","_renderSlot","RuiAvatar","_withCtx","_createElementVNode","_toDisplayString","_createCommentVNode"],"sources":["../../../src/components/avatars/RuiAvatarGroup.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { get } from '@vueuse/shared';\nimport { Comment, defineComponent, Fragment, type HTMLAttributes, Text, type VNode } from 'vue';\nimport {\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\n  resolveAvatarGroupSpacingPx,\n  resolveAvatarSizePx,\n} from '@/components/avatars/avatar-props';\nimport RuiAvatar from '@/components/avatars/RuiAvatar.vue';\nimport { groupStyles } from './avatar-group-styles';\n\nexport interface Props {\n  size?: AvatarSize | number;\n  variant?: AvatarVariant;\n  max?: number;\n  total?: number;\n  /**\n   * How much each avatar overlaps the previous one. The tokens name the\n   * amount of overlap, so `lg` overlaps the most and `sm` the least; they\n   * scale with the avatar size. A number is the inline margin in pixels and\n   * should be negative to overlap.\n   */\n  spacing?: AvatarGroupSpacing | number;\n}\n\ndefineOptions({\n  name: 'RuiAvatarGroup',\n});\n\nconst {\n  size,\n  variant = 'circular',\n  max,\n  total,\n  spacing = AvatarGroupSpacing.md,\n} = defineProps<Props & /* @vue-ignore */ Omit<HTMLAttributes, keyof Props>>();\n\nconst slots = defineSlots<{\n  default?: () => VNode[];\n  surplus?: (props: { count: number }) => any;\n}>();\n\nconst resolvedSize = computed<AvatarSize | number>(() => size ?? 'md');\n\nconst VNodeRenderer = defineComponent<{ vnode: VNode }>({\n  props: ['vnode'],\n  setup(props) {\n    return (): VNode => props.vnode;\n  },\n});\n\nprovide(avatarGroupInjectionKey, computed(() => ({ size: get(resolvedSize), variant })));\n\nfunction flattenChildren(nodes: VNode[] | undefined): VNode[] {\n  if (!nodes)\n    return [];\n  const out: VNode[] = [];\n  for (const node of nodes) {\n    if (node.type === Comment)\n      continue;\n    if (node.type === Text && typeof node.children === 'string' && node.children.trim() === '')\n      continue;\n    if (node.type === Fragment && Array.isArray(node.children)) {\n      const inner = node.children.filter((c): c is VNode => typeof c === 'object' && c !== null && 'type' in c);\n      out.push(...flattenChildren(inner));\n      continue;\n    }\n    out.push(node);\n  }\n  return out;\n}\n\nconst children = computed<VNode[]>(() => flattenChildren(slots.default?.()));\n\nconst visible = computed<VNode[]>(() => {\n  if (max === undefined)\n    return get(children);\n  return get(children).slice(0, max);\n});\n\nconst surplusCount = computed<number>(() => {\n  const totalCount = total ?? get(children).length;\n  const shown = get(visible).length;\n  return Math.max(0, totalCount - shown);\n});\n\nconst spacingPx = computed<number>(() => resolveAvatarGroupSpacingPx(spacing, get(resolvedSize)));\n\n// The configured spacing, which is already negative, so the items overlap\nconst ringOffsetPx = computed<number>(() => get(spacingPx));\n\nconst itemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: `${get(ringOffsetPx)}px`,\n}));\n\nconst firstItemStyle = computed<Record<string, string>>(() => ({\n  marginInlineStart: '0',\n}));\n\nconst avatarPx = computed<number>(() => resolveAvatarSizePx(get(resolvedSize)));\n\nconst ui = computed<ReturnType<typeof groupStyles>>(() => groupStyles({ variant }));\n</script>\n\n<template>\n  <div\n    :class=\"ui.root()\"\n    data-id=\"avatar-group\"\n    :data-size=\"typeof resolvedSize === 'string' ? resolvedSize : undefined\"\n    :data-variant=\"variant\"\n  >\n    <span\n      v-for=\"(child, index) in visible\"\n      :key=\"child.key ?? index\"\n      :class=\"ui.item()\"\n      :style=\"index === 0 ? firstItemStyle : itemStyle\"\n    >\n      <VNodeRenderer :vnode=\"child\" />\n    </span>\n    <span\n      v-if=\"surplusCount > 0\"\n      :class=\"ui.item()\"\n      :style=\"visible.length === 0 ? firstItemStyle : itemStyle\"\n      data-id=\"avatar-group-surplus\"\n    >\n      <slot\n        name=\"surplus\"\n        :count=\"surplusCount\"\n      >\n        <RuiAvatar\n          :size=\"resolvedSize\"\n          :variant=\"variant\"\n          :alt=\"`+${surplusCount} more`\"\n          :style=\"{ width: `${avatarPx}px`, height: `${avatarPx}px` }\"\n        >\n          <span :class=\"ui.surplus()\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/avatars/avatar-group-styles.d.ts

@@ -0,0 +1,49 @@
+export declare const groupStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        circular: {
+            item: string;
+        };
+        rounded: {
+            item: string;
+        };
+        square: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    surplus: string;
+}, undefined, {
+    variant: {
+        circular: {
+            item: string;
+        };
+        rounded: {
+            item: string;
+        };
+        square: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    surplus: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        circular: {
+            item: string;
+        };
+        rounded: {
+            item: string;
+        };
+        square: {
+            item: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    surplus: string;
+}>>;

package/dist/components/avatars/avatar-group-styles.js

@@ -0,0 +1,18 @@
+import { tv } from "../../utils/tv.js";
+//#region src/components/avatars/avatar-group-styles.ts
+var groupStyles = tv({
+	slots: {
+		root: "inline-flex items-center isolate",
+		item: "relative ring-2 ring-rui-surface",
+		surplus: "leading-none text-[0.85em] tracking-tight"
+	},
+	variants: { variant: {
+		circular: { item: "rounded-full" },
+		rounded: { item: "rounded-rui-control" },
+		square: { item: "rounded-none" }
+	} }
+});
+//#endregion
+export { groupStyles };
+
+//# sourceMappingURL=avatar-group-styles.js.map

package/dist/components/avatars/avatar-group-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group-styles.js","names":[],"sources":["../../../src/components/avatars/avatar-group-styles.ts"],"sourcesContent":["import { tv } from '@/utils/tv';\n\nexport const groupStyles = tv({\n  slots: {\n    root: 'inline-flex items-center isolate',\n    item: 'relative ring-2 ring-rui-surface',\n    surplus: 'leading-none text-[0.85em] tracking-tight',\n  },\n  // The ring follows the avatar outline\n  variants: {\n    variant: {\n      circular: { item: 'rounded-full' },\n      rounded: { item: 'rounded-rui-control' },\n      square: { item: 'rounded-none' },\n    },\n  },\n});\n"],"mappings":";;AAEA,IAAa,cAAc,GAAG;CAC5B,OAAO;EACL,MAAM;EACN,MAAM;EACN,SAAS;CACX;CAEA,UAAU,EACR,SAAS;EACP,UAAU,EAAE,MAAM,eAAe;EACjC,SAAS,EAAE,MAAM,sBAAsB;EACvC,QAAQ,EAAE,MAAM,eAAe;CACjC,EACF;AACF,CAAC"}

package/dist/components/avatars/avatar-styles.d.ts

@@ -0,0 +1,181 @@
+export declare const avatarStyles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        circular: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    color: {
+        default: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    initials: string;
+}, undefined, {
+    variant: {
+        circular: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    color: {
+        default: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    initials: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    variant: {
+        circular: {
+            root: string;
+        };
+        rounded: {
+            root: string;
+        };
+        square: {
+            root: string;
+        };
+    };
+    color: {
+        default: {
+            root: string;
+        };
+        primary: {
+            root: string;
+        };
+        secondary: {
+            root: string;
+        };
+        error: {
+            root: string;
+        };
+        warning: {
+            root: string;
+        };
+        info: {
+            root: string;
+        };
+        success: {
+            root: string;
+        };
+    };
+    size: {
+        xs: {
+            root: string;
+        };
+        sm: {
+            root: string;
+        };
+        md: {
+            root: string;
+        };
+        lg: {
+            root: string;
+        };
+        xl: {
+            root: string;
+        };
+        '2xl': {
+            root: string;
+        };
+    };
+}, {
+    root: string;
+    image: string;
+    fallback: string;
+    initials: string;
+}>>;