@rotki/ui-library 2.18.0 → 2.19.0

package/dist/README.md

@@ -344,10 +344,12 @@ When the dependency installed on the main project, it will run the `prepare` scr
 
 ### Generating the library icons
 
-We use [Lucide](https://lucide.dev/) icons as the base icon set. Brand icons (Discord, Reddit, X/Twitter, etc.) in the `src/custom-icons/` directory are sourced from [Simple Icons](https://simpleicons.org/). You need to run this script to generate the icon data from SVGs. (This script runs automatically on `prepare`. Run this in case the icons aren't generated properly)
+We use [Lucide](https://lucide.dev/) icons as the base icon set. Brand icons (Discord, Reddit, X/Twitter, etc.) in the `src/custom-icons/` directory are sourced from [Simple Icons](https://simpleicons.org/).
+
+The generator (`scripts/generate-icons.ts`) reads each Lucide icon's pre-parsed component data and the parsed XML of every SVG in `src/custom-icons/`, and emits one `[tag, attrs]` tuple per renderable primitive into `src/icons/icons_*.ts`. Multi-path icons stay as multiple entries — they are not collapsed into a single concatenated path. The generated files are gitignored and rebuilt by the `build` script; run the command below if you need to regenerate them by hand.
 
 ```
-pnpm run generate:icons
+pnpm run generate-icons
 ```
 
 ## License

package/dist/components/avatars/RuiAvatar.js

@@ -0,0 +1,7 @@
+import RuiAvatar_vue_vue_type_script_setup_true_lang_default from "./RuiAvatar.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/avatars/RuiAvatar.vue
+var RuiAvatar_default = RuiAvatar_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiAvatar_default as default };
+
+//# sourceMappingURL=RuiAvatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAvatar.js","names":[],"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  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\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\nconst sizeToken = computed<AvatarSize | undefined>(() => {\n  const value = get(resolvedSize);\n  return typeof value === 'string' ? value : undefined;\n});\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 = computeInitials(text ?? undefined);\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-md' },\n      square: { root: 'rounded-none' },\n    },\n    color: {\n      default: { root: 'bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800' },\n      primary: { root: 'bg-rui-primary text-white' },\n      secondary: { root: 'bg-rui-secondary text-white' },\n      error: { root: 'bg-rui-error text-white' },\n      warning: { root: 'bg-rui-warning text-white' },\n      info: { root: 'bg-rui-info text-white' },\n      success: { root: 'bg-rui-success text-white' },\n    },\n    size: {\n      'xs': { initials: 'text-[0.625rem]' },\n      'sm': { initials: 'text-[0.6875rem]' },\n      'md': { initials: 'text-sm' },\n      'lg': { initials: 'text-base' },\n      'xl': { initials: 'text-lg' },\n      '2xl': { initials: 'text-xl' },\n    },\n  },\n  compoundSlots: [\n    { slots: ['root'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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(sizeToken),\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=\"displayMode === 'image' ? undefined : 'img'\"\n    :aria-label=\"ariaLabel\"\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

@@ -0,0 +1,31 @@
+import type { ContextColorsType } from '../../consts/colors.js';
+import type { RuiIcons } from '../../icons/index.js';
+import { type AvatarSize, type AvatarVariant } from '../../components/avatars/avatar-props.js';
+export interface Props {
+    src?: string | null;
+    alt?: string;
+    text?: string | null;
+    icon?: RuiIcons | null;
+    size?: AvatarSize | number;
+    variant?: AvatarVariant;
+    color?: 'default' | ContextColorsType;
+    loading?: 'lazy' | 'eager';
+}
+type __VLS_Slots = {
+    default?: () => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    error: (event: Event) => any;
+    load: (event: Event) => any;
+}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{
+    onError?: ((event: Event) => any) | undefined;
+    onLoad?: ((event: Event) => any) | undefined;
+}>, {}, {}, {}, {}, 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;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,188 @@
+import { tv } from "../../utils/tv.js";
+import RuiIcon_default from "../icons/RuiIcon.js";
+import { computeInitials, resolveAvatarIconPx, resolveAvatarSizePx } from "./avatar-props.js";
+import { useAvatarGroup } from "./use-avatar-group.js";
+import { computed, createBlock, createElementBlock, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, toDisplayString, unref, useSlots, watch } from "vue";
+import { get, set } from "@vueuse/shared";
+//#region src/components/avatars/RuiAvatar.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = [
+	"role",
+	"aria-label",
+	"data-id",
+	"data-size",
+	"data-variant",
+	"data-color"
+];
+var _hoisted_2 = [
+	"src",
+	"alt",
+	"loading",
+	"width",
+	"height"
+];
+var _hoisted_3 = { key: 3 };
+var RuiAvatar_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiAvatar",
+	__name: "RuiAvatar",
+	props: {
+		src: { default: null },
+		alt: { default: "" },
+		text: { default: null },
+		icon: { default: null },
+		size: {},
+		variant: {},
+		color: { default: "default" },
+		loading: { default: "lazy" }
+	},
+	emits: ["load", "error"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const slots = useSlots();
+		const group = useAvatarGroup();
+		const resolvedSize = computed(() => {
+			if (__props.size !== void 0) return __props.size;
+			if (group) return get(group).size;
+			return "md";
+		});
+		const resolvedVariant = computed(() => {
+			if (__props.variant !== void 0) return __props.variant;
+			if (group) return get(group).variant;
+			return "circular";
+		});
+		const sizeToken = computed(() => {
+			const value = get(resolvedSize);
+			return typeof value === "string" ? value : void 0;
+		});
+		const sizePx = computed(() => resolveAvatarSizePx(get(resolvedSize)));
+		const iconPx = computed(() => resolveAvatarIconPx(get(resolvedSize)));
+		const errored = ref(false);
+		watch(() => __props.src, () => {
+			set(errored, false);
+		});
+		const initials = computed(() => {
+			const explicit = computeInitials(__props.text ?? void 0);
+			if (explicit) return explicit;
+			return computeInitials(__props.alt);
+		});
+		const displayMode = computed(() => {
+			if (__props.src && !get(errored)) return "image";
+			if (slots.default) return "slot";
+			if (__props.icon) return "icon";
+			if (get(initials)) return "initials";
+			return "empty";
+		});
+		const decorative = computed(() => __props.alt === "" && !__props.text);
+		const ariaLabel = computed(() => {
+			if (get(displayMode) === "image") return void 0;
+			if (get(decorative)) return void 0;
+			return __props.text ?? __props.alt ?? void 0;
+		});
+		const rootStyle = computed(() => {
+			const px = `${get(sizePx)}px`;
+			return {
+				width: px,
+				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-md" },
+					square: { root: "rounded-none" }
+				},
+				color: {
+					default: { root: "bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800" },
+					primary: { root: "bg-rui-primary text-white" },
+					secondary: { root: "bg-rui-secondary text-white" },
+					error: { root: "bg-rui-error text-white" },
+					warning: { root: "bg-rui-warning text-white" },
+					info: { root: "bg-rui-info text-white" },
+					success: { root: "bg-rui-success text-white" }
+				},
+				size: {
+					"xs": { initials: "text-[0.625rem]" },
+					"sm": { initials: "text-[0.6875rem]" },
+					"md": { initials: "text-sm" },
+					"lg": { initials: "text-base" },
+					"xl": { initials: "text-lg" },
+					"2xl": { initials: "text-xl" }
+				}
+			},
+			compoundSlots: [{
+				slots: ["root"],
+				color: [
+					"warning",
+					"success",
+					"info"
+				],
+				class: "dark:text-rui-light-text"
+			}],
+			defaultVariants: {
+				variant: "circular",
+				color: "default",
+				size: "md"
+			}
+		});
+		const ui = computed(() => avatarStyles({
+			variant: get(resolvedVariant),
+			color: __props.color,
+			size: get(sizeToken)
+		}));
+		function onLoad(event) {
+			set(errored, false);
+			emit("load", event);
+		}
+		function onError(event) {
+			set(errored, true);
+			emit("error", event);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("span", {
+				class: normalizeClass(unref(ui).root()),
+				style: normalizeStyle(unref(rootStyle)),
+				role: unref(displayMode) === "image" ? void 0 : "img",
+				"aria-label": unref(ariaLabel),
+				"data-id": _ctx.$attrs["data-id"] ?? "avatar-root",
+				"data-size": typeof unref(resolvedSize) === "string" ? unref(resolvedSize) : void 0,
+				"data-variant": unref(resolvedVariant),
+				"data-color": __props.color
+			}, [unref(displayMode) === "image" && __props.src ? (openBlock(), createElementBlock("img", {
+				key: 0,
+				class: normalizeClass(unref(ui).image()),
+				src: __props.src,
+				alt: __props.alt,
+				loading: __props.loading,
+				width: unref(sizePx),
+				height: unref(sizePx),
+				"data-id": "avatar-image",
+				onLoad: _cache[0] || (_cache[0] = ($event) => onLoad($event)),
+				onError: _cache[1] || (_cache[1] = ($event) => onError($event))
+			}, null, 42, _hoisted_2)) : (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(unref(ui).fallback()),
+				"data-id": "avatar-fallback",
+				"aria-hidden": "true"
+			}, [unref(displayMode) === "slot" ? renderSlot(_ctx.$slots, "default", { key: 0 }) : unref(displayMode) === "initials" ? (openBlock(), createElementBlock("span", {
+				key: 1,
+				class: normalizeClass(unref(ui).initials()),
+				"data-id": "avatar-initials"
+			}, toDisplayString(unref(initials)), 3)) : unref(displayMode) === "icon" && __props.icon ? (openBlock(), createBlock(RuiIcon_default, {
+				key: 2,
+				name: __props.icon,
+				size: unref(iconPx),
+				"data-id": "avatar-icon"
+			}, null, 8, ["name", "size"])) : (openBlock(), createElementBlock("span", _hoisted_3, "\xA0"))], 2))], 14, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiAvatar_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiAvatar.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAvatar.vue_vue_type_script_setup_true_lang.js","names":["$attrs"],"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  computeInitials,\n  resolveAvatarIconPx,\n  resolveAvatarSizePx,\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\nconst sizeToken = computed<AvatarSize | undefined>(() => {\n  const value = get(resolvedSize);\n  return typeof value === 'string' ? value : undefined;\n});\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 = computeInitials(text ?? undefined);\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-md' },\n      square: { root: 'rounded-none' },\n    },\n    color: {\n      default: { root: 'bg-rui-grey-200 text-rui-text dark:bg-rui-grey-800' },\n      primary: { root: 'bg-rui-primary text-white' },\n      secondary: { root: 'bg-rui-secondary text-white' },\n      error: { root: 'bg-rui-error text-white' },\n      warning: { root: 'bg-rui-warning text-white' },\n      info: { root: 'bg-rui-info text-white' },\n      success: { root: 'bg-rui-success text-white' },\n    },\n    size: {\n      'xs': { initials: 'text-[0.625rem]' },\n      'sm': { initials: 'text-[0.6875rem]' },\n      'md': { initials: 'text-sm' },\n      'lg': { initials: 'text-base' },\n      'xl': { initials: 'text-lg' },\n      '2xl': { initials: 'text-xl' },\n    },\n  },\n  compoundSlots: [\n    { slots: ['root'], color: ['warning', 'success', 'info'], class: 'dark:text-rui-light-text' },\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(sizeToken),\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=\"displayMode === 'image' ? undefined : 'img'\"\n    :aria-label=\"ariaLabel\"\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

@@ -0,0 +1,7 @@
+import RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default from "./RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/avatars/RuiAvatarGroup.vue
+var RuiAvatarGroup_default = RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default;
+//#endregion
+export { RuiAvatarGroup_default as default };
+
+//# sourceMappingURL=RuiAvatarGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAvatarGroup.js","names":[],"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  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\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  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-white dark:ring-rui-grey-900 rounded-full',\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>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\nconst ringOffsetPx = computed<number>(() =>\n  // ring-2 is 2px. Keep items overlapping by the configured spacing\n  // (negative margin). spacing is already negative for tokens.\n  get(spacingPx),\n);\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());\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=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":""}

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

@@ -0,0 +1,24 @@
+import { type VNode } from 'vue';
+import { AvatarGroupSpacing, type AvatarSize, type AvatarVariant } from '../../components/avatars/avatar-props.js';
+export interface Props {
+    size?: AvatarSize | number;
+    variant?: AvatarVariant;
+    max?: number;
+    total?: number;
+    spacing?: AvatarGroupSpacing | number;
+}
+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_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,110 @@
+import { tv } from "../../utils/tv.js";
+import { AVATAR_GROUP_SPACING_PX, AvatarGroupSpacing, avatarGroupInjectionKey, resolveAvatarSizePx } from "./avatar-props.js";
+import RuiAvatar_default from "./RuiAvatar.js";
+import { Comment, Fragment, Text, computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, provide, renderList, renderSlot, toDisplayString, unref, useSlots, withCtx } from "vue";
+import { get } from "@vueuse/shared";
+//#region src/components/avatars/RuiAvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["data-size", "data-variant"];
+var _hoisted_2 = { class: "leading-none" };
+var RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "RuiAvatarGroup",
+	__name: "RuiAvatarGroup",
+	props: {
+		size: {},
+		variant: { default: "circular" },
+		max: {},
+		total: {},
+		spacing: { default: () => AvatarGroupSpacing.md }
+	},
+	setup(__props) {
+		const slots = useSlots();
+		const resolvedSize = computed(() => __props.size ?? "md");
+		const VNodeRenderer = defineComponent({
+			props: ["vnode"],
+			setup(props) {
+				return () => props.vnode;
+			}
+		});
+		provide(avatarGroupInjectionKey, computed(() => ({
+			size: get(resolvedSize),
+			variant: __props.variant
+		})));
+		const groupStyles = tv({ slots: {
+			root: "inline-flex items-center isolate",
+			item: "relative ring-2 ring-white dark:ring-rui-grey-900 rounded-full"
+		} });
+		function flattenChildren(nodes) {
+			if (!nodes) return [];
+			const out = [];
+			for (const node of nodes) {
+				if (node.type === Comment) continue;
+				if (node.type === Text && typeof node.children === "string" && node.children.trim() === "") continue;
+				if (node.type === Fragment && Array.isArray(node.children)) {
+					const inner = node.children.filter((c) => typeof c === "object" && c !== null && "type" in c);
+					out.push(...flattenChildren(inner));
+					continue;
+				}
+				out.push(node);
+			}
+			return out;
+		}
+		const children = computed(() => flattenChildren(slots.default?.()));
+		const visible = computed(() => {
+			if (__props.max === void 0) return get(children);
+			return get(children).slice(0, __props.max);
+		});
+		const surplusCount = computed(() => {
+			const totalCount = __props.total ?? get(children).length;
+			const shown = get(visible).length;
+			return Math.max(0, totalCount - shown);
+		});
+		const spacingPx = computed(() => {
+			if (typeof __props.spacing === "number") return __props.spacing;
+			return AVATAR_GROUP_SPACING_PX[__props.spacing];
+		});
+		const ringOffsetPx = computed(() => get(spacingPx));
+		const itemStyle = computed(() => ({ marginInlineStart: `${get(ringOffsetPx)}px` }));
+		const firstItemStyle = computed(() => ({ marginInlineStart: "0" }));
+		const avatarPx = computed(() => resolveAvatarSizePx(get(resolvedSize)));
+		const ui = computed(() => groupStyles());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(unref(ui).root()),
+				"data-id": "avatar-group",
+				"data-size": typeof unref(resolvedSize) === "string" ? unref(resolvedSize) : void 0,
+				"data-variant": __props.variant
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visible), (child, index) => {
+				return openBlock(), createElementBlock("span", {
+					key: child.key ?? index,
+					class: normalizeClass(unref(ui).item()),
+					style: normalizeStyle(index === 0 ? unref(firstItemStyle) : unref(itemStyle))
+				}, [createVNode(unref(VNodeRenderer), { vnode: child }, null, 8, ["vnode"])], 6);
+			}), 128)), unref(surplusCount) > 0 ? (openBlock(), createElementBlock("span", {
+				key: 0,
+				class: normalizeClass(unref(ui).item()),
+				style: normalizeStyle(unref(visible).length === 0 ? unref(firstItemStyle) : unref(itemStyle)),
+				"data-id": "avatar-group-surplus"
+			}, [renderSlot(_ctx.$slots, "surplus", { count: unref(surplusCount) }, () => [createVNode(RuiAvatar_default, {
+				size: unref(resolvedSize),
+				variant: __props.variant,
+				alt: `+${unref(surplusCount)} more`,
+				style: normalizeStyle({
+					width: `${unref(avatarPx)}px`,
+					height: `${unref(avatarPx)}px`
+				})
+			}, {
+				default: withCtx(() => [createElementVNode("span", _hoisted_2, "+" + toDisplayString(unref(surplusCount)), 1)]),
+				_: 1
+			}, 8, [
+				"size",
+				"variant",
+				"alt",
+				"style"
+			])])], 6)) : createCommentVNode("", true)], 10, _hoisted_1);
+		};
+	}
+});
+//#endregion
+export { RuiAvatarGroup_vue_vue_type_script_setup_true_lang_default as default };
+
+//# sourceMappingURL=RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RuiAvatarGroup.vue_vue_type_script_setup_true_lang.js","names":[],"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  AVATAR_GROUP_SPACING_PX,\n  avatarGroupInjectionKey,\n  AvatarGroupSpacing,\n  type AvatarSize,\n  type AvatarVariant,\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  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-white dark:ring-rui-grey-900 rounded-full',\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>(() => {\n  if (typeof spacing === 'number')\n    return spacing;\n  return AVATAR_GROUP_SPACING_PX[spacing];\n});\n\nconst ringOffsetPx = computed<number>(() =>\n  // ring-2 is 2px. Keep items overlapping by the configured spacing\n  // (negative margin). spacing is already negative for tokens.\n  get(spacingPx),\n);\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());\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=\"leading-none\">+{{ surplusCount }}</span>\n        </RuiAvatar>\n      </slot>\n    </span>\n  </div>\n</template>\n"],"mappings":"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"}

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

@@ -0,0 +1,33 @@
+import type { ComputedRef, InjectionKey } from 'vue';
+export declare const AvatarSize: {
+    readonly xs: "xs";
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+    readonly xl: "xl";
+    readonly '2xl': "2xl";
+};
+export type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];
+export declare const AvatarVariant: {
+    readonly circular: "circular";
+    readonly rounded: "rounded";
+    readonly square: "square";
+};
+export type AvatarVariant = (typeof AvatarVariant)[keyof typeof AvatarVariant];
+export declare const AvatarGroupSpacing: {
+    readonly sm: "sm";
+    readonly md: "md";
+    readonly lg: "lg";
+};
+export type AvatarGroupSpacing = (typeof AvatarGroupSpacing)[keyof typeof AvatarGroupSpacing];
+export declare const AVATAR_SIZE_PX: Record<AvatarSize, number>;
+export declare const AVATAR_ICON_PX: Record<AvatarSize, number>;
+export declare const AVATAR_GROUP_SPACING_PX: Record<AvatarGroupSpacing, number>;
+export declare function resolveAvatarSizePx(size: AvatarSize | number | undefined): number;
+export declare function resolveAvatarIconPx(size: AvatarSize | number | undefined): number;
+export declare function computeInitials(source: string | undefined | null): string;
+export interface AvatarGroupContext {
+    size: AvatarSize | number;
+    variant: AvatarVariant;
+}
+export declare const avatarGroupInjectionKey: InjectionKey<ComputedRef<AvatarGroupContext>>;

package/dist/components/avatars/avatar-props.js

@@ -0,0 +1,46 @@
+//#region src/components/avatars/avatar-props.ts
+var AvatarGroupSpacing = {
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+};
+var AVATAR_SIZE_PX = {
+	"xs": 20,
+	"sm": 24,
+	"md": 32,
+	"lg": 40,
+	"xl": 48,
+	"2xl": 64
+};
+var AVATAR_ICON_PX = {
+	"xs": 12,
+	"sm": 14,
+	"md": 18,
+	"lg": 22,
+	"xl": 28,
+	"2xl": 36
+};
+var AVATAR_GROUP_SPACING_PX = {
+	sm: -4,
+	md: -8,
+	lg: -12
+};
+function resolveAvatarSizePx(size) {
+	if (typeof size === "number") return size;
+	return AVATAR_SIZE_PX[size ?? "md"];
+}
+function resolveAvatarIconPx(size) {
+	if (typeof size === "number") return Math.round(size * .56);
+	return AVATAR_ICON_PX[size ?? "md"];
+}
+function computeInitials(source) {
+	if (!source) return "";
+	const parts = source.trim().split(/\s+/).filter(Boolean).slice(0, 2);
+	if (parts.length === 0) return "";
+	return parts.map((p) => p.charAt(0).toUpperCase()).join("");
+}
+var avatarGroupInjectionKey = Symbol("avatarGroup");
+//#endregion
+export { AVATAR_GROUP_SPACING_PX, AvatarGroupSpacing, avatarGroupInjectionKey, computeInitials, resolveAvatarIconPx, resolveAvatarSizePx };
+
+//# sourceMappingURL=avatar-props.js.map

package/dist/components/avatars/avatar-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-props.js","names":[],"sources":["../../../src/components/avatars/avatar-props.ts"],"sourcesContent":["import type { ComputedRef, InjectionKey } from 'vue';\n\nexport const AvatarSize = {\n  'xs': 'xs',\n  'sm': 'sm',\n  'md': 'md',\n  'lg': 'lg',\n  'xl': 'xl',\n  '2xl': '2xl',\n} as const;\n\nexport type AvatarSize = (typeof AvatarSize)[keyof typeof AvatarSize];\n\nexport const AvatarVariant = {\n  circular: 'circular',\n  rounded: 'rounded',\n  square: 'square',\n} as const;\n\nexport type AvatarVariant = (typeof AvatarVariant)[keyof typeof AvatarVariant];\n\nexport const AvatarGroupSpacing = {\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n} as const;\n\nexport type AvatarGroupSpacing = (typeof AvatarGroupSpacing)[keyof typeof AvatarGroupSpacing];\n\nexport const AVATAR_SIZE_PX: Record<AvatarSize, number> = {\n  'xs': 20,\n  'sm': 24,\n  'md': 32,\n  'lg': 40,\n  'xl': 48,\n  '2xl': 64,\n};\n\nexport const AVATAR_ICON_PX: Record<AvatarSize, number> = {\n  'xs': 12,\n  'sm': 14,\n  'md': 18,\n  'lg': 22,\n  'xl': 28,\n  '2xl': 36,\n};\n\nexport const AVATAR_GROUP_SPACING_PX: Record<AvatarGroupSpacing, number> = {\n  sm: -4,\n  md: -8,\n  lg: -12,\n};\n\nexport function resolveAvatarSizePx(size: AvatarSize | number | undefined): number {\n  if (typeof size === 'number')\n    return size;\n  return AVATAR_SIZE_PX[size ?? 'md'];\n}\n\nexport function resolveAvatarIconPx(size: AvatarSize | number | undefined): number {\n  if (typeof size === 'number')\n    return Math.round(size * 0.56);\n  return AVATAR_ICON_PX[size ?? 'md'];\n}\n\nexport function computeInitials(source: string | undefined | null): string {\n  if (!source)\n    return '';\n  const parts = source\n    .trim()\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2);\n  if (parts.length === 0)\n    return '';\n  return parts.map(p => p.charAt(0).toUpperCase()).join('');\n}\n\nexport interface AvatarGroupContext {\n  size: AvatarSize | number;\n  variant: AvatarVariant;\n}\n\nexport const avatarGroupInjectionKey: InjectionKey<ComputedRef<AvatarGroupContext>>\n  = Symbol('avatarGroup');\n"],"mappings":";AAqBA,IAAa,qBAAqB;CAChC,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAID,IAAa,iBAA6C;CACxD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;CACR;AAED,IAAa,iBAA6C;CACxD,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;CACR;AAED,IAAa,0BAA8D;CACzE,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAgB,oBAAoB,MAA+C;AACjF,KAAI,OAAO,SAAS,SAClB,QAAO;AACT,QAAO,eAAe,QAAQ;;AAGhC,SAAgB,oBAAoB,MAA+C;AACjF,KAAI,OAAO,SAAS,SAClB,QAAO,KAAK,MAAM,OAAO,IAAK;AAChC,QAAO,eAAe,QAAQ;;AAGhC,SAAgB,gBAAgB,QAA2C;AACzE,KAAI,CAAC,OACH,QAAO;CACT,MAAM,QAAQ,OACX,MAAM,CACN,MAAM,MAAM,CACZ,OAAO,QAAQ,CACf,MAAM,GAAG,EAAE;AACd,KAAI,MAAM,WAAW,EACnB,QAAO;AACT,QAAO,MAAM,KAAI,MAAK,EAAE,OAAO,EAAE,CAAC,aAAa,CAAC,CAAC,KAAK,GAAG;;AAQ3D,IAAa,0BACT,OAAO,cAAc"}

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

@@ -0,0 +1,3 @@
+import type { ComputedRef } from 'vue';
+import { type AvatarGroupContext } from '../../components/avatars/avatar-props.js';
+export declare function useAvatarGroup(): ComputedRef<AvatarGroupContext> | undefined;

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

@@ -0,0 +1,10 @@
+import { avatarGroupInjectionKey } from "./avatar-props.js";
+import { inject } from "vue";
+//#region src/components/avatars/use-avatar-group.ts
+function useAvatarGroup() {
+	return inject(avatarGroupInjectionKey, void 0);
+}
+//#endregion
+export { useAvatarGroup };
+
+//# sourceMappingURL=use-avatar-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-avatar-group.js","names":[],"sources":["../../../src/components/avatars/use-avatar-group.ts"],"sourcesContent":["import type { ComputedRef } from 'vue';\nimport { type AvatarGroupContext, avatarGroupInjectionKey } from '@/components/avatars/avatar-props';\n\nexport function useAvatarGroup(): ComputedRef<AvatarGroupContext> | undefined {\n  return inject(avatarGroupInjectionKey, undefined);\n}\n"],"mappings":";;;AAGA,SAAgB,iBAA8D;AAC5E,QAAO,OAAO,yBAAyB,KAAA,EAAU"}

package/dist/components/buttons/button/button-styles.js

@@ -21,7 +21,7 @@ var buttonStyles = tv({
 			fab: { root: "rounded-full py-2" },
 			list: {
 				root: "p-3 px-3 rounded-none w-full justify-start text-left",
-				label: "w-full"
+				label: "w-full leading-[1.125rem]"
 			}
 		},
 		size: {