ropav 0.0.8 → 0.0.10

package/dist/accordion.css

@@ -7,8 +7,8 @@
   overflow: hidden;
   font-family: var(--rp-font-family);
   color: var(--rp-color-text);
-  background-color: var(--rp-color-surface-raised);
-  border: var(--rp-border-width-thin) solid var(--rp-color-border);
+  background-color: var(--rp-color-default);
+  border: var(--rp-border-width-thin) solid var(--rp-color-default-border);
   border-radius: var(--_rp-accordion-radius);
 }
 .rp-accordion--disabled[data-v-c0aaa9d9] {
@@ -22,7 +22,7 @@
   --_rp-accordion-duration: var(--rp-transition-fast);
   box-sizing: border-box;
   min-width: 0;
-  border-top: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-top: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
 .rp-accordion-item[data-v-8528e537]:first-child {
   border-top: 0;
@@ -30,7 +30,7 @@
 .rp-accordion-item--horizontal[data-v-8528e537] {
   flex: 1 1 0;
   border-top: 0;
-  border-left: var(--rp-border-width-thin) solid var(--rp-color-border);
+  border-left: var(--rp-border-width-thin) solid var(--rp-color-default-border);
 }
 .rp-accordion-item--horizontal[data-v-8528e537]:first-child {
   border-left: 0;
@@ -54,9 +54,9 @@
   padding: var(--rp-spacing-3) var(--rp-spacing-4);
   color: var(--rp-color-text);
   font-family: var(--rp-font-family);
-  font-size: var(--rp-font-size-base);
+  font-size: var(--rp-font-size-md);
   font-weight: var(--rp-font-weight-medium);
-  line-height: var(--rp-line-height-tight);
+  line-height: var(--rp-line-height-xs);
   text-align: left;
   appearance: none;
   cursor: pointer;
@@ -65,11 +65,11 @@
   transition: background-color var(--_rp-accordion-duration), color var(--_rp-accordion-duration);
 }
 .rp-accordion-item__trigger[data-v-8528e537]:hover:not(:disabled) {
-  background-color: var(--rp-color-surface-hover);
+  background-color: var(--rp-color-default-hover);
 }
 .rp-accordion-item__trigger[data-v-8528e537]:focus-visible {
   outline: none;
-  border-color: var(--rp-color-primary);
+  border-color: var(--rp-color-control-border-focus);
   box-shadow: 0 0 0 var(--rp-border-width-medium) var(--rp-color-focus-ring);
 }
 .rp-accordion-item__trigger[data-v-8528e537]:disabled {
@@ -94,8 +94,8 @@
   overflow: hidden;
   padding: 0 var(--rp-spacing-4) var(--rp-spacing-4);
   color: var(--rp-color-text);
-  font-size: var(--rp-font-size-base);
-  line-height: var(--rp-line-height-normal);
+  font-size: var(--rp-font-size-md);
+  line-height: var(--rp-line-height-md);
   grid-template-rows: 1fr;
   transition: grid-template-rows var(--_rp-accordion-duration), opacity var(--_rp-accordion-duration), padding-bottom var(--_rp-accordion-duration);
 }

package/dist/accordion.js

@@ -1,8 +1,8 @@
 import './accordion.css';
-import { t as useRequiredInject } from "./useRequiredInject.js";
 import { t as bem } from "./bem.js";
-import { t as useCollapse } from "./useCollapse.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { t as useRequiredInject } from "./useRequiredInject.js";
+import { t as useCollapse } from "./useCollapse.js";
 import { VaporTransition, applyVShow, child, computed, createComponent, createIf, createSlot, defineVaporComponent, extend, markRaw, next, provide, ref, renderEffect, setDynamicProps, setInsertionState, setText, template, toDisplayString, unref, useId } from "vue";
 //#region src/components/accordion/types.ts
 var accordionKey = Symbol("accordion");

package/dist/alert.css

@@ -0,0 +1,109 @@
+.rp-alert[data-v-97a5ebfe] {
+  --_rp-alert-bg: var(--rp-color-cyan-light);
+  --_rp-alert-fg: var(--rp-color-text);
+  --_rp-alert-title-fg: var(--rp-color-cyan-light-color);
+  --_rp-alert-icon-fg: var(--rp-color-cyan-light-color);
+  --_rp-alert-border: transparent;
+  --_rp-alert-radius: var(--rp-radius-sm);
+  box-sizing: border-box;
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+  min-width: 0;
+  padding: var(--rp-spacing-4);
+  gap: var(--rp-spacing-3);
+  color: var(--_rp-alert-fg);
+  font-family: var(--rp-font-family);
+  font-size: var(--rp-font-size-sm);
+  line-height: var(--rp-line-height-md);
+  background-color: var(--_rp-alert-bg);
+  border: var(--rp-border-width-thin) solid var(--_rp-alert-border);
+  border-radius: var(--_rp-alert-radius);
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast), border-color var(--rp-transition-fast);
+}
+.rp-alert--radius-none[data-v-97a5ebfe] {
+  --_rp-alert-radius: var(--rp-radius-none);
+}
+.rp-alert--radius-xs[data-v-97a5ebfe] {
+  --_rp-alert-radius: var(--rp-radius-xs);
+}
+.rp-alert--radius-sm[data-v-97a5ebfe] {
+  --_rp-alert-radius: var(--rp-radius-sm);
+}
+.rp-alert--radius-md[data-v-97a5ebfe] {
+  --_rp-alert-radius: var(--rp-radius-md);
+}
+.rp-alert--radius-lg[data-v-97a5ebfe] {
+  --_rp-alert-radius: var(--rp-radius-lg);
+}
+.rp-alert--radius-xl[data-v-97a5ebfe] {
+  --_rp-alert-radius: var(--rp-radius-xl);
+}
+.rp-alert__icon[data-v-97a5ebfe] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.125rem;
+  color: var(--_rp-alert-icon-fg);
+  line-height: 0;
+}
+.rp-alert__icon[data-v-97a5ebfe] >  svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}
+.rp-alert__content[data-v-97a5ebfe] {
+  display: grid;
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: var(--rp-spacing-1);
+}
+.rp-alert__title[data-v-97a5ebfe] {
+  color: var(--_rp-alert-title-fg);
+  font-size: var(--rp-font-size-md);
+  font-weight: var(--rp-font-weight-semibold);
+  line-height: var(--rp-line-height-xs);
+}
+.rp-alert__description[data-v-97a5ebfe] {
+  margin: 0;
+}
+.rp-alert__body[data-v-97a5ebfe], .rp-alert__description[data-v-97a5ebfe] {
+  min-width: 0;
+  color: var(--_rp-alert-fg);
+}
+.rp-alert__action[data-v-97a5ebfe] {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  margin-left: auto;
+}
+.rp-alert__close[data-v-97a5ebfe] {
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin: calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) calc(var(--rp-spacing-1) * -1) 0;
+  padding: 0;
+  color: var(--_rp-alert-icon-fg);
+  background: transparent;
+  border: 0;
+  border-radius: var(--rp-radius-sm);
+  cursor: pointer;
+  transition: background-color var(--rp-transition-fast), color var(--rp-transition-fast);
+}
+.rp-alert__close[data-v-97a5ebfe]:hover {
+  background-color: color-mix(in srgb, var(--_rp-alert-icon-fg) 12%, transparent);
+}
+.rp-alert__close[data-v-97a5ebfe]:focus-visible {
+  outline: var(--rp-border-width-medium) solid var(--rp-color-focus-ring);
+  outline-offset: 2px;
+}
+.rp-alert__close[data-v-97a5ebfe] >  svg {
+  display: block;
+  width: 1rem;
+  height: 1rem;
+}

package/dist/alert.js

@@ -0,0 +1,168 @@
+import './alert.css';
+import { t as x_default } from "./x.js";
+import { t as bem } from "./bem.js";
+import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createComponent, createIf, createInvoker, createSlot, defineVaporComponent, delegateEvents, ref, renderEffect, setAttr, setClass, setInsertionState, setProp, setStyle, setText, template, toDisplayString, txt, unref, useSlots, watch } from "vue";
+//#region src/components/alert/useAlertColor.ts
+function getAlertColorStyle(color, variant, autoContrast) {
+	if (!color && !variant) return void 0;
+	const resolvedVariant = variant ?? "subtle";
+	const roles = getComponentVariantColorRoles({
+		color,
+		variant: resolvedVariant,
+		defaultColor: "cyan",
+		autoContrast
+	});
+	if (!roles) return void 0;
+	return {
+		"--_rp-alert-bg": roles.background,
+		"--_rp-alert-fg": resolvedVariant === "solid" ? roles.color : "var(--rp-color-text)",
+		"--_rp-alert-title-fg": roles.color,
+		"--_rp-alert-icon-fg": roles.color,
+		"--_rp-alert-border": roles.border
+	};
+}
+//#endregion
+//#region src/components/alert/alert.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-97a5ebfe class=rp-alert__icon aria-hidden=true>");
+var t1 = template(" ");
+var t2 = template("<div data-v-97a5ebfe class=rp-alert__title>");
+var t3 = template("<p data-v-97a5ebfe class=rp-alert__description> ");
+var t4 = template("<div data-v-97a5ebfe class=rp-alert__body>");
+var t5 = template("<div data-v-97a5ebfe class=rp-alert__content>");
+var t6 = template("<div data-v-97a5ebfe class=rp-alert__action>");
+var t7 = template("<button data-v-97a5ebfe class=rp-alert__close type=button>");
+var t8 = template("<div data-v-97a5ebfe>", 1);
+delegateEvents("click");
+//#endregion
+//#region src/components/alert/alert.vue
+var alert_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpAlert",
+	__name: "alert",
+	props: {
+		open: {
+			type: Boolean,
+			default: void 0
+		},
+		title: { default: "" },
+		description: { default: "" },
+		variant: {},
+		color: {},
+		autoContrast: { type: Boolean },
+		radius: {},
+		role: { default: "alert" },
+		closable: {
+			type: Boolean,
+			default: false
+		},
+		closeLabel: { default: "Close alert" }
+	},
+	emits: ["update:open", "close"],
+	setup(__props, { emit: __emit, slots: $slots }) {
+		const props = __props;
+		const emit = __emit;
+		const slots = useSlots();
+		const localOpen = ref(props.open ?? true);
+		watch(() => props.open, (open) => {
+			if (open !== void 0) localOpen.value = open;
+		});
+		const isOpen = computed(() => props.open ?? localOpen.value);
+		const hasTitle = computed(() => Boolean(props.title || slots.title));
+		const hasDescription = computed(() => Boolean(props.description));
+		const hasContent = computed(() => Boolean(hasTitle.value || hasDescription.value || slots.default));
+		const resolvedRole = computed(() => props.role === "none" ? void 0 : props.role);
+		const hasIcon = computed(() => Boolean(slots.icon));
+		const rootClass = computed(() => bem("rp-alert", {
+			[props.variant ?? ""]: Boolean(props.variant),
+			[`radius-${props.radius}`]: Boolean(props.radius)
+		}));
+		const rootStyle = computed(() => getAlertColorStyle(props.color, props.variant, props.autoContrast));
+		function closeAlert() {
+			localOpen.value = false;
+			emit("update:open", false);
+			emit("close");
+		}
+		return createIf(() => isOpen.value, () => {
+			const n30 = t8();
+			renderEffect(() => {
+				setClass(n30, rootClass.value);
+				setStyle(n30, rootStyle.value);
+				setProp(n30, "role", resolvedRole.value);
+			});
+			setInsertionState(n30, null, 0);
+			createIf(() => hasIcon.value, () => {
+				const n5 = t0();
+				setInsertionState(n5, null, 0);
+				createSlot("icon", null, null, 1);
+				return n5;
+			});
+			setInsertionState(n30, null, 1);
+			createIf(() => hasContent.value, () => {
+				const n21 = t5();
+				setInsertionState(n21, null, 0);
+				createIf(() => hasTitle.value, () => {
+					const n13 = t2();
+					setInsertionState(n13, null, 0);
+					createSlot("title", null, () => {
+						const n12 = t1();
+						renderEffect(() => setText(n12, toDisplayString(__props.title)));
+						return n12;
+					}, 1);
+					return n13;
+				});
+				setInsertionState(n21, null, 1);
+				createIf(() => hasDescription.value, () => {
+					const n16 = t3();
+					const x16 = txt(n16);
+					renderEffect(() => setText(x16, toDisplayString(__props.description)));
+					return n16;
+				});
+				setInsertionState(n21, null, 2);
+				createIf(() => $slots.default, () => {
+					const n20 = t4();
+					setInsertionState(n20, null, 0);
+					createSlot("default", null, null, 1);
+					return n20;
+				});
+				return n21;
+			});
+			setInsertionState(n30, null, 2);
+			createIf(() => $slots.action, () => {
+				const n25 = t6();
+				setInsertionState(n25, null, 0);
+				createSlot("action", null, null, 1);
+				return n25;
+			});
+			setInsertionState(n30, null, 3);
+			createIf(() => __props.closable, () => {
+				const n29 = t7();
+				renderEffect(() => setAttr(n29, "aria-label", __props.closeLabel));
+				setInsertionState(n29, null, 0);
+				createComponent(unref(x_default), { "aria-hidden": "true" });
+				n29.$evtclick = createInvoker(closeAlert);
+				return n29;
+			});
+			return n30;
+		});
+	}
+}), [["__scopeId", "data-v-97a5ebfe"]]);
+//#endregion
+//#region src/components/alert/types.ts
+var alertColors = componentColors;
+var alertVariants = [
+	"subtle",
+	"surface",
+	"outline",
+	"solid"
+];
+var alertRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+//#endregion
+export { alert_default as i, alertRadiuses as n, alertVariants as r, alertColors as t };

package/dist/aspect-ratio.css

@@ -0,0 +1,17 @@
+.rp-aspect-ratio[data-v-0c2e5bad] {
+  --_rp-aspect-ratio: 1;
+  position: relative;
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  aspect-ratio: var(--_rp-aspect-ratio);
+}
+.rp-aspect-ratio[data-v-0c2e5bad] >  * {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}

package/dist/aspect-ratio.js

@@ -0,0 +1,26 @@
+import './aspect-ratio.css';
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createSlot, defineVaporComponent, renderEffect, setInsertionState, setStyle, template } from "vue";
+//#region src/components/aspect-ratio/aspect-ratio.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<div data-v-0c2e5bad class=rp-aspect-ratio>", 1);
+//#endregion
+//#region src/components/aspect-ratio/aspect-ratio.vue
+var aspect_ratio_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpAspectRatio",
+	__name: "aspect-ratio",
+	props: { ratio: { default: 1 } },
+	setup(__props) {
+		const props = __props;
+		const rootStyle = computed(() => ({ "--_rp-aspect-ratio": String(normalizeAspectRatio(props.ratio)) }));
+		function normalizeAspectRatio(ratio) {
+			return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+		}
+		const n1 = t0();
+		renderEffect(() => setStyle(n1, rootStyle.value));
+		setInsertionState(n1, null, 0);
+		createSlot("default", null, null, 1);
+		return n1;
+	}
+}), [["__scopeId", "data-v-0c2e5bad"]]);
+//#endregion
+export { aspect_ratio_default as t };

package/dist/avatar.css

@@ -0,0 +1,97 @@
+.rp-avatar[data-v-aaa2d081] {
+  --_rp-avatar-size: var(--rp-size-control-md);
+  --_rp-avatar-font-size: var(--rp-font-size-md);
+  --_rp-avatar-radius: var(--rp-radius-full);
+  --_rp-avatar-bg: var(--rp-color-gray-light);
+  --_rp-avatar-fg: var(--rp-color-gray-light-color);
+  --_rp-avatar-border: transparent;
+  --_rp-avatar-border-width: 0;
+  position: relative;
+  box-sizing: border-box;
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: var(--_rp-avatar-size);
+  height: var(--_rp-avatar-size);
+  overflow: hidden;
+  color: var(--_rp-avatar-fg);
+  font-family: var(--rp-font-family);
+  font-size: var(--_rp-avatar-font-size);
+  font-weight: var(--rp-font-weight-medium);
+  line-height: 1;
+  vertical-align: middle;
+  background-color: var(--_rp-avatar-bg);
+  border: var(--_rp-avatar-border-width) solid var(--_rp-avatar-border);
+  border-radius: var(--_rp-avatar-radius);
+  user-select: none;
+}
+.rp-avatar--surface[data-v-aaa2d081], .rp-avatar--outline[data-v-aaa2d081] {
+  --_rp-avatar-border-width: var(--rp-border-width-thin);
+}
+.rp-avatar--size-xs[data-v-aaa2d081] {
+  --_rp-avatar-size: var(--rp-size-control-xs);
+  --_rp-avatar-font-size: var(--rp-font-size-xs);
+}
+.rp-avatar--size-sm[data-v-aaa2d081] {
+  --_rp-avatar-size: var(--rp-size-control-sm);
+  --_rp-avatar-font-size: var(--rp-font-size-sm);
+}
+.rp-avatar--size-md[data-v-aaa2d081] {
+  --_rp-avatar-size: var(--rp-size-control-md);
+  --_rp-avatar-font-size: var(--rp-font-size-md);
+}
+.rp-avatar--size-lg[data-v-aaa2d081] {
+  --_rp-avatar-size: var(--rp-size-control-lg);
+  --_rp-avatar-font-size: var(--rp-font-size-lg);
+}
+.rp-avatar--size-xl[data-v-aaa2d081] {
+  --_rp-avatar-size: var(--rp-size-control-xl);
+  --_rp-avatar-font-size: var(--rp-font-size-xl);
+}
+.rp-avatar--radius-none[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-none);
+}
+.rp-avatar--radius-xs[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-xs);
+}
+.rp-avatar--radius-sm[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-sm);
+}
+.rp-avatar--radius-md[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-md);
+}
+.rp-avatar--radius-lg[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-lg);
+}
+.rp-avatar--radius-xl[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-xl);
+}
+.rp-avatar--radius-full[data-v-aaa2d081] {
+  --_rp-avatar-radius: var(--rp-radius-full);
+}
+.rp-avatar__image[data-v-aaa2d081] {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.rp-avatar__fallback[data-v-aaa2d081] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.rp-avatar__fallback[data-v-aaa2d081] >  svg {
+  display: block;
+  width: 50%;
+  height: 50%;
+}
+.rp-avatar__initials[data-v-aaa2d081] {
+  text-transform: uppercase;
+}
+.rp-avatar__icon[data-v-aaa2d081] {
+  width: 50%;
+  height: 50%;
+}

package/dist/avatar.js

@@ -0,0 +1,161 @@
+import './avatar.css';
+import { t as bem } from "./bem.js";
+import { i as getComponentVariantColorRoles, t as componentColors } from "./componentColors.js";
+import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper.js";
+import { computed, createComponent, createIf, createSlot, defineVaporComponent, markRaw, on, ref, renderEffect, setAttr, setDynamicProps, setInsertionState, setProp, setText, template, toDisplayString, txt, unref, useAttrs, watch } from "vue";
+//#region ~icons/lucide/user
+var t0$1 = template("<svg viewBox=\"0 0 24 24\"width=1.2em height=1.2em><g fill=none stroke=currentColor stroke-linecap=round stroke-linejoin=round stroke-width=2><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"></path><circle cx=12 cy=7 r=4>", 3, 1);
+function render(_ctx) {
+	return t0$1();
+}
+var user_default = markRaw(defineVaporComponent({
+	name: "lucide-user",
+	render
+}));
+//#endregion
+//#region src/components/avatar/useAvatarColor.ts
+function getAvatarColorStyle(color, variant, autoContrast) {
+	if (!color && !variant) return void 0;
+	const roles = getComponentVariantColorRoles({
+		color,
+		variant: variant ?? "solid",
+		autoContrast
+	});
+	if (!roles) return void 0;
+	return {
+		"--_rp-avatar-bg": roles.background,
+		"--_rp-avatar-fg": roles.color,
+		"--_rp-avatar-border": roles.border
+	};
+}
+//#endregion
+//#region src/components/avatar/avatar.vue?vue&type=script&setup=true&vapor=true&lang.ts
+var t0 = template("<img data-v-aaa2d081 class=rp-avatar__image>");
+var t1 = template("<span data-v-aaa2d081 class=rp-avatar__initials> ");
+var t2 = template("<span data-v-aaa2d081 class=rp-avatar__fallback>");
+var t3 = template("<span data-v-aaa2d081>", 1);
+//#endregion
+//#region src/components/avatar/avatar.vue
+var avatar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineVaporComponent({
+	name: "RpAvatar",
+	inheritAttrs: false,
+	__name: "avatar",
+	props: {
+		src: {},
+		alt: {},
+		ariaLabel: {},
+		name: {},
+		variant: {},
+		color: {},
+		autoContrast: { type: Boolean },
+		size: {},
+		radius: {}
+	},
+	emits: ["load", "error"],
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const attrs = useAttrs();
+		const imageFailed = ref(false);
+		const isHidden = computed(() => attrs["aria-hidden"] === true || attrs["aria-hidden"] === "true");
+		const showsImage = computed(() => Boolean(props.src) && !imageFailed.value);
+		const accessibleName = computed(() => {
+			if (isHidden.value) return void 0;
+			return props.ariaLabel || props.alt || props.name || void 0;
+		});
+		const imageAlt = computed(() => accessibleName.value ?? "");
+		const rootRole = computed(() => !showsImage.value && accessibleName.value ? "img" : void 0);
+		const rootAriaLabel = computed(() => rootRole.value ? accessibleName.value : void 0);
+		const fallbackAriaHidden = computed(() => isHidden.value || rootAriaLabel.value ? true : void 0);
+		const initials = computed(() => getInitials(props.name));
+		const rootClass = computed(() => bem("rp-avatar", {
+			[props.variant ?? ""]: Boolean(props.variant),
+			[`size-${props.size}`]: Boolean(props.size),
+			[`radius-${props.radius}`]: Boolean(props.radius)
+		}));
+		const rootStyle = computed(() => getAvatarColorStyle(props.color, props.variant, props.autoContrast));
+		watch(() => props.src, () => {
+			imageFailed.value = false;
+		});
+		function handleImageLoad(event) {
+			emit("load", event);
+		}
+		function handleImageError(event) {
+			imageFailed.value = true;
+			emit("error", event);
+		}
+		function getInitials(name) {
+			if (!name) return "";
+			const parts = name.trim().split(/\s+/).filter(Boolean);
+			const firstPart = parts[0];
+			if (!firstPart) return "";
+			if (parts.length === 1) return Array.from(firstPart).slice(0, 2).join("").toLocaleUpperCase();
+			const lastPart = parts.at(-1) ?? firstPart;
+			return `${Array.from(firstPart)[0] ?? ""}${Array.from(lastPart)[0] ?? ""}`.toLocaleUpperCase();
+		}
+		const n13 = t3();
+		renderEffect(() => setDynamicProps(n13, [unref(attrs), {
+			class: rootClass.value,
+			style: rootStyle.value,
+			role: rootRole.value,
+			"aria-label": rootAriaLabel.value
+		}]));
+		setInsertionState(n13, null, 0);
+		createIf(() => showsImage.value, () => {
+			const n2 = t0();
+			on(n2, "load", handleImageLoad);
+			on(n2, "error", handleImageError);
+			renderEffect(() => {
+				setProp(n2, "src", __props.src || void 0);
+				setAttr(n2, "alt", imageAlt.value);
+			});
+			return n2;
+		}, () => {
+			const n12 = t2();
+			renderEffect(() => setAttr(n12, "aria-hidden", fallbackAriaHidden.value));
+			setInsertionState(n12, null, 0);
+			createSlot("default", null, () => {
+				return createIf(() => initials.value, () => {
+					const n8 = t1();
+					const x8 = txt(n8);
+					renderEffect(() => setText(x8, toDisplayString(initials.value)));
+					return n8;
+				}, () => {
+					return createComponent(unref(user_default), {
+						class: "rp-avatar__icon",
+						"aria-hidden": "true"
+					});
+				}, 517);
+			}, 1);
+			return n12;
+		}, 261);
+		return n13;
+	}
+}), [["__scopeId", "data-v-aaa2d081"]]);
+//#endregion
+//#region src/components/avatar/types.ts
+var avatarColors = componentColors;
+var avatarSizes = [
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl"
+];
+var avatarRadiuses = [
+	"none",
+	"xs",
+	"sm",
+	"md",
+	"lg",
+	"xl",
+	"full"
+];
+var avatarVariants = [
+	"solid",
+	"subtle",
+	"surface",
+	"outline"
+];
+//#endregion
+export { avatar_default as a, avatarVariants as i, avatarRadiuses as n, avatarSizes as r, avatarColors as t };