iryx-ui 0.12.0 → 0.13.0

package/dist/component-names.d.ts

@@ -3,5 +3,5 @@
  * Consumed by the Vue plugin (global registration) and the Nuxt module
  * (auto-imports). Keep in sync with `src/components/index.ts`.
  */
-export declare const componentNames: readonly ["Alert", "App", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "Combobox", "ConfirmDialog", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Input", "Label", "LineChart", "NumberInput", "Pagination", "PasswordInput", "Progress", "RadioGroup", "Select", "Separator", "Skeleton", "Sparkline", "Stat", "Stepper", "Switch", "Table", "Tabs", "Textarea", "Toaster", "Tooltip"];
+export declare const componentNames: readonly ["Accordion", "Alert", "App", "AppShell", "AspectRatio", "Avatar", "AvatarGroup", "Badge", "BarChart", "Banner", "Breadcrumb", "Button", "ButtonGroup", "Card", "ChartLegend", "Checkbox", "ColorPicker", "Combobox", "Collapsible", "CommandPalette", "Container", "ConfirmDialog", "ContextMenu", "DatePicker", "DateRangePicker", "Dialog", "Drawer", "DropdownMenu", "EmptyState", "FileUpload", "Form", "FormField", "Input", "Kbd", "Label", "LineChart", "NavigationMenu", "NumberInput", "Menubar", "PageHeader", "Pagination", "PasswordInput", "PinInput", "Popover", "Progress", "RadioGroup", "ScrollArea", "ScrollFade", "Select", "Separator", "Sidebar", "SignaturePad", "Skeleton", "Slider", "Sparkline", "Splitter", "Stat", "Stepper", "Switch", "Table", "Tabs", "TagsInput", "Textarea", "Toaster", "Toggle", "ToggleGroup", "TimeField", "Timeline", "Toolbar", "Tooltip", "Tree"];
 export type ComponentName = (typeof componentNames)[number];

package/dist/component-names.js

@@ -1,4 +1,4 @@
 //#region src/component-names.ts
-var e = /* @__PURE__ */ "Alert.App.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.Combobox.ConfirmDialog.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Label.LineChart.NumberInput.Pagination.PasswordInput.Progress.RadioGroup.Select.Separator.Skeleton.Sparkline.Stat.Stepper.Switch.Table.Tabs.Textarea.Toaster.Tooltip".split(".");
+var e = /* @__PURE__ */ "Accordion.Alert.App.AppShell.AspectRatio.Avatar.AvatarGroup.Badge.BarChart.Banner.Breadcrumb.Button.ButtonGroup.Card.ChartLegend.Checkbox.ColorPicker.Combobox.Collapsible.CommandPalette.Container.ConfirmDialog.ContextMenu.DatePicker.DateRangePicker.Dialog.Drawer.DropdownMenu.EmptyState.FileUpload.Form.FormField.Input.Kbd.Label.LineChart.NavigationMenu.NumberInput.Menubar.PageHeader.Pagination.PasswordInput.PinInput.Popover.Progress.RadioGroup.ScrollArea.ScrollFade.Select.Separator.Sidebar.SignaturePad.Skeleton.Slider.Sparkline.Splitter.Stat.Stepper.Switch.Table.Tabs.TagsInput.Textarea.Toaster.Toggle.ToggleGroup.TimeField.Timeline.Toolbar.Tooltip.Tree".split(".");
 //#endregion
 export { e as componentNames };

package/dist/components/Accordion.js

@@ -0,0 +1,5 @@
+import e from "./Accordion.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Accordion.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/Accordion.vue.d.ts

@@ -0,0 +1,80 @@
+import type { IconLike } from '../composables/icon';
+export interface AccordionItemData {
+    /** Row heading, and the fallback value when none is given. */
+    label: string;
+    /** Body text. Use the `content` slot for anything with markup. */
+    content?: string;
+    /** Identity in the model. Defaults to the label. */
+    value?: string;
+    icon?: IconLike;
+    disabled?: boolean;
+}
+export interface AccordionProps {
+    items?: AccordionItemData[];
+    /** One panel open at a time, or several. */
+    type?: 'single' | 'multiple';
+    /**
+     * Let the open panel be closed again by clicking its trigger. Only means
+     * anything for `single` — with `multiple` every panel already closes.
+     */
+    collapsible?: boolean;
+    variant?: 'plain' | 'outline';
+    disabled?: boolean;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    ui?: Partial<Record<'root' | 'item' | 'header' | 'trigger' | 'icon' | 'content' | 'contentInner', string>>;
+}
+type __VLS_Props = AccordionProps;
+type __VLS_ModelProps = {
+    /**
+     * `string` for `single`, `string[]` for `multiple` — Reka's own shape, kept
+     * rather than normalised, so a caller's model reads the way the docs for the
+     * primitive say it will.
+     */
+    modelValue?: string | string[] | undefined;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_26: {
+    item: {
+        value: string;
+        /** Row heading, and the fallback value when none is given. */
+        label: string;
+        /** Body text. Use the `content` slot for anything with markup. */
+        content?: string;
+        icon?: IconLike;
+        disabled?: boolean;
+    };
+}, __VLS_44: {
+    item: {
+        value: string;
+        /** Row heading, and the fallback value when none is given. */
+        label: string;
+        /** Body text. Use the `content` slot for anything with markup. */
+        content?: string;
+        icon?: IconLike;
+        disabled?: boolean;
+    };
+};
+type __VLS_Slots = {} & {
+    trigger?: (props: typeof __VLS_26) => any;
+} & {
+    content?: (props: typeof __VLS_44) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | string[] | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+}>, {
+    type: "single" | "multiple";
+    collapsible: boolean;
+    unstyled: boolean;
+}, {}, {}, {}, 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/Accordion.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,87 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { accordionTheme as t } from "../theme/accordion.js";
+import n from "./Icon.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, createVNode as u, defineComponent as d, mergeModels as f, normalizeClass as p, openBlock as m, renderList as h, renderSlot as g, toDisplayString as _, unref as v, useModel as y, withCtx as b } from "vue";
+import { ArrowDown01Icon as x } from "@hugeicons/core-free-icons";
+import { AccordionContent as S, AccordionHeader as C, AccordionItem as w, AccordionRoot as T, AccordionTrigger as E } from "reka-ui";
+//#region src/components/Accordion.vue?vue&type=script&setup=true&lang.ts
+var D = { class: "flex min-w-0 items-center gap-2" }, O = { class: "truncate" }, k = /*@__PURE__*/ d({
+	__name: "Accordion",
+	props: /*@__PURE__*/ f({
+		items: {},
+		type: { default: "single" },
+		collapsible: {
+			type: Boolean,
+			default: !0
+		},
+		variant: {},
+		disabled: { type: Boolean },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	}, {
+		modelValue: {},
+		modelModifiers: {}
+	}),
+	emits: ["update:modelValue"],
+	setup(d) {
+		let f = d, k = y(d, "modelValue"), A = i(() => (f.items ?? []).map((e) => ({
+			...e,
+			value: e.value ?? e.label
+		}))), j = e(), M = i(() => f.unstyled ?? j.unstyled), N = i(() => t({ variant: f.variant }));
+		function P(e) {
+			let t = f.ui?.[e];
+			return M.value ? t : N.value[e]({ class: t });
+		}
+		return (e, t) => (m(), a(v(T), {
+			modelValue: k.value,
+			"onUpdate:modelValue": t[0] ||= (e) => k.value = e,
+			type: f.type,
+			collapsible: f.collapsible,
+			disabled: f.disabled,
+			class: p(M.value ? [f.ui?.root, f.class] : N.value.root({ class: [f.ui?.root, f.class] }))
+		}, {
+			default: b(() => [(m(!0), s(r, null, h(A.value, (t) => (m(), a(v(w), {
+				key: t.value,
+				value: t.value,
+				disabled: t.disabled,
+				class: p(P("item"))
+			}, {
+				default: b(() => [u(v(C), { class: p(P("header")) }, {
+					default: b(() => [u(v(E), { class: p(P("trigger")) }, {
+						default: b(() => [g(e.$slots, "trigger", { item: t }, () => [c("span", D, [t.icon ? (m(), a(n, {
+							key: 0,
+							icon: t.icon,
+							class: "size-4 shrink-0 text-muted-foreground"
+						}, null, 8, ["icon"])) : o("", !0), c("span", O, _(t.label), 1)])]), u(n, {
+							icon: v(x),
+							class: p(P("icon"))
+						}, null, 8, ["icon", "class"])]),
+						_: 2
+					}, 1032, ["class"])]),
+					_: 2
+				}, 1032, ["class"]), u(v(S), { class: p(P("content")) }, {
+					default: b(() => [c("div", { class: p(P("contentInner")) }, [g(e.$slots, "content", { item: t }, () => [l(_(t.content), 1)])], 2)]),
+					_: 2
+				}, 1032, ["class"])]),
+				_: 2
+			}, 1032, [
+				"value",
+				"disabled",
+				"class"
+			]))), 128))]),
+			_: 3
+		}, 8, [
+			"modelValue",
+			"type",
+			"collapsible",
+			"disabled",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { k as default };

package/dist/components/Alert.vue.d.ts

@@ -60,9 +60,9 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
     icon: IconLike | false;
+    unstyled: boolean;
     as: string;
     closeLabel: string;
-    unstyled: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/Alert.vue_vue_type_script_setup_true_lang.js

@@ -1,6 +1,6 @@
 import { useIryxUiConfig as e } from "../config.js";
-import { alertTheme as t } from "../theme/alert.js";
-import n from "./Icon.js";
+import t from "./Icon.js";
+import { alertTheme as n } from "../theme/alert.js";
 import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, mergeModels as d, normalizeClass as f, openBlock as p, renderSlot as m, toDisplayString as h, unref as g, useModel as _, withCtx as v } from "vue";
 import { Alert02Icon as y, AlertCircleIcon as b, Cancel01Icon as x, CheckmarkCircle02Icon as S, InformationCircleIcon as C } from "@hugeicons/core-free-icons";
 import { Primitive as w } from "reka-ui";
@@ -40,11 +40,11 @@ var T = ["aria-label"], E = /*@__PURE__*/ u({
 			danger: b
 		}, O = r(() => {
 			if (d.icon !== !1) return d.icon ?? D[d.variant ?? "info"];
-		}), k = r(() => d.variant === "danger" || d.variant === "warning" ? "alert" : "status"), A = e(), j = r(() => d.unstyled ?? A.unstyled), M = r(() => t({
+		}), k = r(() => d.variant === "danger" || d.variant === "warning" ? "alert" : "status"), A = e(), j = r(() => d.unstyled ?? A.unstyled), M = r(() => n({
 			variant: d.variant,
 			withTitle: !!d.title
 		})), N = r(() => j.value ? [d.ui?.root, d.class] : M.value.root({ class: [d.ui?.root, d.class] })), P = r(() => j.value ? d.ui?.icon : M.value.icon({ class: d.ui?.icon })), F = r(() => j.value ? d.ui?.content : M.value.content({ class: d.ui?.content })), I = r(() => j.value ? d.ui?.title : M.value.title({ class: d.ui?.title })), L = r(() => j.value ? d.ui?.description : M.value.description({ class: d.ui?.description })), R = r(() => j.value ? d.ui?.actions : M.value.actions({ class: d.ui?.actions })), z = r(() => j.value ? d.ui?.close : M.value.close({ class: d.ui?.close }));
-		return (e, t) => E.value ? (p(), i(g(w), {
+		return (e, n) => E.value ? (p(), i(g(w), {
 			key: 0,
 			as: d.as,
 			role: k.value,
@@ -54,7 +54,7 @@ var T = ["aria-label"], E = /*@__PURE__*/ u({
 				O.value || e.$slots.icon ? (p(), o("div", {
 					key: 0,
 					class: f(P.value)
-				}, [m(e.$slots, "icon", {}, () => [l(n, { icon: O.value }, null, 8, ["icon"])])], 2)) : a("", !0),
+				}, [m(e.$slots, "icon", {}, () => [l(t, { icon: O.value }, null, 8, ["icon"])])], 2)) : a("", !0),
 				s("div", { class: f(F.value) }, [
 					d.title || e.$slots.title ? (p(), o("p", {
 						key: 0,
@@ -74,10 +74,10 @@ var T = ["aria-label"], E = /*@__PURE__*/ u({
 					type: "button",
 					"aria-label": d.closeLabel,
 					class: f(z.value),
-					onClick: t[0] ||= (t) => {
+					onClick: n[0] ||= (t) => {
 						E.value = !1, e.$emit("close");
 					}
-				}, [m(e.$slots, "close", {}, () => [l(n, { icon: g(x) }, null, 8, ["icon"])])], 10, T)) : a("", !0)
+				}, [m(e.$slots, "close", {}, () => [l(t, { icon: g(x) }, null, 8, ["icon"])])], 10, T)) : a("", !0)
 			]),
 			_: 3
 		}, 8, [

package/dist/components/App.vue.d.ts

@@ -23,8 +23,8 @@ type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<AppProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppProps> & Readonly<{}>, {
-    as: string;
     unstyled: boolean;
+    as: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/AppShell.js

@@ -0,0 +1,5 @@
+import e from "./AppShell.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/AppShell.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/AppShell.vue.d.ts

@@ -0,0 +1,46 @@
+export interface AppShellProps {
+    /** Render as a different element or component. */
+    as?: string;
+    /**
+     * `main` pins the shell to the viewport and scrolls only the content column.
+     * `page` scrolls the document, with a sticky header and sidebar.
+     */
+    scroll?: 'main' | 'page';
+    sidebarPosition?: 'left' | 'right';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ main: 'p-8' }`. */
+    ui?: {
+        root?: string;
+        header?: string;
+        body?: string;
+        sidebar?: string;
+        main?: string;
+        footer?: string;
+    };
+}
+declare var __VLS_8: {}, __VLS_10: {}, __VLS_12: {}, __VLS_14: {};
+type __VLS_Slots = {} & {
+    header?: (props: typeof __VLS_8) => any;
+} & {
+    sidebar?: (props: typeof __VLS_10) => any;
+} & {
+    default?: (props: typeof __VLS_12) => any;
+} & {
+    footer?: (props: typeof __VLS_14) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AppShellProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AppShellProps> & Readonly<{}>, {
+    unstyled: boolean;
+    as: string;
+    scroll: "main" | "page";
+    sidebarPosition: "left" | "right";
+}, {}, {}, {}, 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/AppShell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,59 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { useElementSize as t } from "../composables/element-size.js";
+import { appShellTheme as n } from "../theme/app-shell.js";
+import { computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, normalizeClass as l, normalizeStyle as u, openBlock as d, ref as f, renderSlot as p, unref as m, useSlots as h, withCtx as g } from "vue";
+import { Primitive as _ } from "reka-ui";
+//#region src/components/AppShell.vue?vue&type=script&setup=true&lang.ts
+var v = /*@__PURE__*/ c({
+	__name: "AppShell",
+	props: {
+		as: { default: "div" },
+		scroll: { default: "main" },
+		sidebarPosition: { default: "left" },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(c) {
+		let v = c, y = h(), b = e(), x = r(() => v.unstyled ?? b.unstyled), S = f(), { height: C } = t(S), w = r(() => v.scroll === "page" && y.header ? { "--iryx-shell-header-height": `${C.value}px` } : void 0), T = r(() => n({
+			scroll: v.scroll,
+			sidebarPosition: v.sidebarPosition
+		}));
+		function E(e) {
+			let t = v.ui?.[e];
+			return x.value ? t : T.value[e]({ class: t });
+		}
+		return (e, t) => (d(), i(m(_), {
+			as: v.as,
+			style: u(w.value),
+			class: l(x.value ? [v.ui?.root, v.class] : T.value.root({ class: [v.ui?.root, v.class] }))
+		}, {
+			default: g(() => [
+				e.$slots.header ? (d(), o("div", {
+					key: 0,
+					ref_key: "header",
+					ref: S,
+					class: l(E("header"))
+				}, [p(e.$slots, "header")], 2)) : a("", !0),
+				s("div", { class: l(E("body")) }, [e.$slots.sidebar ? (d(), o("div", {
+					key: 0,
+					class: l(E("sidebar"))
+				}, [p(e.$slots, "sidebar")], 2)) : a("", !0), s("main", { class: l(E("main")) }, [p(e.$slots, "default")], 2)], 2),
+				e.$slots.footer ? (d(), o("div", {
+					key: 1,
+					class: l(E("footer"))
+				}, [p(e.$slots, "footer")], 2)) : a("", !0)
+			]),
+			_: 3
+		}, 8, [
+			"as",
+			"style",
+			"class"
+		]));
+	}
+});
+//#endregion
+export { v as default };

package/dist/components/AspectRatio.js

@@ -0,0 +1,5 @@
+import e from "./AspectRatio.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/AspectRatio.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/AspectRatio.vue.d.ts

@@ -0,0 +1,26 @@
+export interface AspectRatioProps {
+    /**
+     * Width divided by height — `16 / 9`, `1`, `4 / 3`. Given as a number so
+     * arithmetic works: `16 / 9` reads as the ratio it is.
+     */
+    ratio?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+}
+declare var __VLS_8: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_8) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AspectRatioProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AspectRatioProps> & Readonly<{}>, {
+    unstyled: boolean;
+    ratio: number;
+}, {}, {}, {}, 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/AspectRatio.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,27 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { computed as t, createBlock as n, defineComponent as r, normalizeClass as i, openBlock as a, renderSlot as o, unref as s, withCtx as c } from "vue";
+import { AspectRatio as l } from "reka-ui";
+//#region src/components/AspectRatio.vue?vue&type=script&setup=true&lang.ts
+var u = /*@__PURE__*/ r({
+	__name: "AspectRatio",
+	props: {
+		ratio: { default: 1 },
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {}
+	},
+	setup(r) {
+		let u = r, d = e(), f = t(() => u.unstyled ?? d.unstyled), p = t(() => f.value ? u.class : ["overflow-hidden rounded-xl", u.class]);
+		return (e, t) => (a(), n(s(l), {
+			ratio: u.ratio,
+			class: i(p.value)
+		}, {
+			default: c(() => [o(e.$slots, "default")]),
+			_: 3
+		}, 8, ["ratio", "class"]));
+	}
+});
+//#endregion
+export { u as default };

package/dist/components/Avatar.js

@@ -0,0 +1,5 @@
+import e from "./Avatar.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/Avatar.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/Avatar.vue.d.ts

@@ -0,0 +1,52 @@
+export interface AvatarProps {
+    src?: string;
+    /**
+     * Describes the image. Leave it empty when the avatar sits beside the same
+     * person's name — repeating it makes a screen reader say it twice.
+     */
+    alt?: string;
+    /**
+     * Who this is. Used to derive initials when there is no image, and as the
+     * accessible name when nothing else provides one.
+     */
+    name?: string;
+    /** Overrides the derived initials. */
+    initials?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Circle for a person, square for a company or a project. */
+    shape?: 'circle' | 'square';
+    /** Presence dot in the corner. */
+    status?: 'online' | 'busy' | 'away' | 'offline';
+    /** Names that dot, since a colour alone says nothing to a screen reader. */
+    statusLabel?: string;
+    /**
+     * Hold the fallback back by this many milliseconds, so a fast connection
+     * goes straight to the image instead of flashing initials on the way.
+     */
+    delayMs?: number;
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ fallback: 'bg-primary' }`. */
+    ui?: {
+        root?: string;
+        image?: string;
+        fallback?: string;
+        status?: string;
+    };
+}
+declare var __VLS_19: {};
+type __VLS_Slots = {} & {
+    fallback?: (props: typeof __VLS_19) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+    unstyled: boolean;
+}, {}, {}, {}, 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/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,67 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { avatarTheme as t } from "../theme/avatar.js";
+import { computed as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, defineComponent as c, normalizeClass as l, openBlock as u, renderSlot as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import { AvatarFallback as h, AvatarImage as g, AvatarRoot as _ } from "reka-ui";
+//#region src/components/Avatar.vue?vue&type=script&setup=true&lang.ts
+var v = ["title", "aria-label"], y = /*@__PURE__*/ c({
+	__name: "Avatar",
+	props: {
+		src: {},
+		alt: {},
+		name: {},
+		initials: {},
+		size: {},
+		shape: {},
+		status: {},
+		statusLabel: {},
+		delayMs: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(c) {
+		let y = c, b = n(() => {
+			if (y.initials) return y.initials;
+			let e = (y.name ?? "").trim().split(/\s+/).filter(Boolean);
+			return e.length === 0 ? "" : e.length === 1 ? e[0].slice(0, 1) : `${e[0].slice(0, 1)}${e.at(-1).slice(0, 1)}`;
+		}), x = e(), S = n(() => y.unstyled ?? x.unstyled), C = n(() => t({
+			size: y.size,
+			shape: y.shape,
+			status: y.status
+		})), w = n(() => S.value ? [y.ui?.root, y.class] : C.value.root({ class: [y.ui?.root, y.class] })), T = n(() => S.value ? y.ui?.image : C.value.image({ class: y.ui?.image })), E = n(() => S.value ? y.ui?.fallback : C.value.fallback({ class: y.ui?.fallback })), D = n(() => S.value ? y.ui?.status : C.value.status({ class: y.ui?.status }));
+		return (e, t) => (u(), r(p(_), { class: l(w.value) }, {
+			default: m(() => [
+				y.src ? (u(), r(p(g), {
+					key: 0,
+					src: y.src,
+					alt: y.alt ?? "",
+					class: l(T.value)
+				}, null, 8, [
+					"src",
+					"alt",
+					"class"
+				])) : i("", !0),
+				s(p(h), {
+					"delay-ms": y.delayMs,
+					class: l(E.value)
+				}, {
+					default: m(() => [d(e.$slots, "fallback", {}, () => [o(f(b.value), 1)])]),
+					_: 3
+				}, 8, ["delay-ms", "class"]),
+				y.status ? (u(), a("span", {
+					key: 1,
+					class: l(D.value),
+					title: y.statusLabel ?? y.status,
+					role: "img",
+					"aria-label": y.statusLabel ?? y.status
+				}, null, 10, v)) : i("", !0)
+			]),
+			_: 3
+		}, 8, ["class"]));
+	}
+});
+//#endregion
+export { y as default };

package/dist/components/AvatarGroup.js

@@ -0,0 +1,5 @@
+import e from "./AvatarGroup.vue_vue_type_script_setup_true_lang.js";
+//#region src/components/AvatarGroup.vue
+var t = e;
+//#endregion
+export { t as default };

package/dist/components/AvatarGroup.vue.d.ts

@@ -0,0 +1,39 @@
+import type { AvatarProps } from './Avatar.vue';
+/** One member of the stack — an `IAvatar`'s own props, minus the shared ones. */
+export type AvatarGroupItem = Omit<AvatarProps, 'size' | 'shape' | 'unstyled' | 'class' | 'ui'>;
+export interface AvatarGroupProps {
+    items?: AvatarGroupItem[];
+    /**
+     * Show at most this many, closing the stack with a "+n" chip. Without it
+     * every avatar is rendered, which stops being readable somewhere past six.
+     */
+    max?: number;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    shape?: 'circle' | 'square';
+    /** Skip built-in classes; you take over styling entirely. */
+    unstyled?: boolean;
+    class?: string;
+    /** Override classes per slot, e.g. `{ overflow: 'bg-primary' }`. */
+    ui?: {
+        root?: string;
+        item?: string;
+        overflow?: string;
+    };
+}
+declare var __VLS_1: {
+    count: number;
+};
+type __VLS_Slots = {} & {
+    overflow?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {
+    unstyled: boolean;
+}, {}, {}, {}, 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/AvatarGroup.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,45 @@
+import { useIryxUiConfig as e } from "../config.js";
+import { avatarGroupTheme as t } from "../theme/avatar.js";
+import n from "./Avatar.js";
+import { Fragment as r, computed as i, createBlock as a, createCommentVNode as o, createElementBlock as s, createTextVNode as c, defineComponent as l, mergeProps as u, normalizeClass as d, openBlock as f, renderList as p, renderSlot as m, toDisplayString as h } from "vue";
+//#region src/components/AvatarGroup.vue?vue&type=script&setup=true&lang.ts
+var g = /*@__PURE__*/ l({
+	__name: "AvatarGroup",
+	props: {
+		items: {},
+		max: {},
+		size: {},
+		shape: {},
+		unstyled: {
+			type: Boolean,
+			default: void 0
+		},
+		class: {},
+		ui: {}
+	},
+	setup(l) {
+		let g = l, _ = i(() => g.items ?? []), v = i(() => {
+			let e = g.max;
+			return [...e !== void 0 && _.value.length > e ? _.value.slice(0, e) : _.value].reverse();
+		}), y = i(() => {
+			let e = g.max;
+			return e === void 0 || _.value.length <= e ? 0 : _.value.length - e;
+		}), b = e(), x = i(() => g.unstyled ?? b.unstyled), S = i(() => t({ size: g.size })), C = i(() => x.value ? [g.ui?.root, g.class] : S.value.root({ class: [g.ui?.root, g.class] })), w = i(() => x.value ? g.ui?.item : S.value.item({ class: g.ui?.item })), T = i(() => x.value ? g.ui?.overflow : S.value.overflow({ class: g.ui?.overflow }));
+		return (e, t) => (f(), s("div", { class: d(C.value) }, [y.value ? (f(), s("span", {
+			key: 0,
+			class: d(T.value)
+		}, [m(e.$slots, "overflow", { count: y.value }, () => [c("+" + h(y.value), 1)])], 2)) : o("", !0), (f(!0), s(r, null, p(v.value, (e, t) => (f(), a(n, u({ key: t }, { ref_for: !0 }, e, {
+			size: g.size,
+			shape: g.shape,
+			unstyled: x.value,
+			class: w.value
+		}), null, 16, [
+			"size",
+			"shape",
+			"unstyled",
+			"class"
+		]))), 128))], 2));
+	}
+});
+//#endregion
+export { g as default };