base-ui-vue 0.1.0

package/dist/error/FieldError.js

@@ -0,0 +1,373 @@
+import { useRenderElement } from "../button/Button.js";
+import { fieldValidityMapping, useBaseUiId, useFieldRootContext, useFormContext, useLabelableContext } from "../control/FieldControl.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createTextVNode, defineComponent, mergeProps, nextTick, onUnmounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, toValue, unref, useAttrs, watch, watchEffect, withCtx } from "vue";
+
+//#region src/utils/stateAttributesMapping.ts
+let TransitionStatusDataAttributes = /* @__PURE__ */ function(TransitionStatusDataAttributes) {
+	/**
+	* Present when the component is animating in.
+	*/
+	TransitionStatusDataAttributes["startingStyle"] = "data-starting-style";
+	/**
+	* Present when the component is animating out.
+	*/
+	TransitionStatusDataAttributes["endingStyle"] = "data-ending-style";
+	return TransitionStatusDataAttributes;
+}({});
+const STARTING_HOOK = { [TransitionStatusDataAttributes.startingStyle]: "" };
+const ENDING_HOOK = { [TransitionStatusDataAttributes.endingStyle]: "" };
+const transitionStatusMapping = { transitionStatus(value) {
+	if (value === "starting") return STARTING_HOOK;
+	if (value === "ending") return ENDING_HOOK;
+	return null;
+} };
+
+//#endregion
+//#region src/utils/resolveRef.ts
+function resolveRef(refOrElement) {
+	const element = unref(refOrElement);
+	if (element && "$el" in element) return element.$el;
+	return element;
+}
+
+//#endregion
+//#region src/utils/useAnimationFrame.ts
+/**
+* Unlike `setTimeout`, rAF doesn't guarantee a positive integer return value, so we can't have
+* a monomorphic `uint` type with `0` meaning empty.
+* See warning note at:
+* https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame#return_value
+*/
+const EMPTY = null;
+let LAST_RAF = typeof window !== "undefined" ? window.requestAnimationFrame : void 0;
+var Scheduler = class {
+	callbacks = [];
+	callbacksCount = 0;
+	nextId = 1;
+	startId = 1;
+	isScheduled = false;
+	tick = (timestamp) => {
+		this.isScheduled = false;
+		const currentCallbacks = this.callbacks;
+		const currentCallbacksCount = this.callbacksCount;
+		this.callbacks = [];
+		this.callbacksCount = 0;
+		this.startId = this.nextId;
+		if (currentCallbacksCount > 0) for (let i = 0; i < currentCallbacks.length; i += 1) currentCallbacks[i]?.(timestamp);
+	};
+	request(fn) {
+		if (typeof window === "undefined") return 0;
+		const id = this.nextId;
+		this.nextId += 1;
+		this.callbacks.push(fn);
+		this.callbacksCount += 1;
+		const didRAFChange = process.env.NODE_ENV !== "production" && LAST_RAF !== window.requestAnimationFrame && (LAST_RAF = window.requestAnimationFrame, true);
+		if (!this.isScheduled || didRAFChange) {
+			window.requestAnimationFrame(this.tick);
+			this.isScheduled = true;
+		}
+		return id;
+	}
+	cancel(id) {
+		const index = id - this.startId;
+		if (index < 0 || index >= this.callbacks.length) return;
+		this.callbacks[index] = null;
+		this.callbacksCount -= 1;
+	}
+};
+const scheduler = new Scheduler();
+var AnimationFrame = class AnimationFrame {
+	static create() {
+		return new AnimationFrame();
+	}
+	static request(fn) {
+		return scheduler.request(fn);
+	}
+	static cancel(id) {
+		return scheduler.cancel(id);
+	}
+	currentId = EMPTY;
+	request(fn) {
+		this.cancel();
+		this.currentId = scheduler.request((timestamp) => {
+			this.currentId = EMPTY;
+			fn(timestamp);
+		});
+	}
+	cancel = () => {
+		if (this.currentId !== EMPTY) {
+			scheduler.cancel(this.currentId);
+			this.currentId = EMPTY;
+		}
+	};
+	disposeEffect = () => {
+		return this.cancel;
+	};
+};
+/**
+* A `requestAnimationFrame` with automatic cleanup and guard.
+*/
+function useAnimationFrame() {
+	const animationFrame = AnimationFrame.create();
+	onUnmounted(animationFrame.disposeEffect());
+	return animationFrame;
+}
+
+//#endregion
+//#region src/utils/useAnimationsFinished.ts
+function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) {
+	const frame = useAnimationFrame();
+	return (fnToExecute, signal = null) => {
+		frame.cancel();
+		function done() {
+			nextTick(() => {
+				fnToExecute();
+			});
+		}
+		const resolvedElement = resolveRef(elementOrRef);
+		if (resolvedElement == null) return;
+		if (typeof resolvedElement.getAnimations !== "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED) fnToExecute();
+		else {
+			function execWaitForStartingStyleRemoved() {
+				const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle;
+				if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+					frame.request(exec);
+					return;
+				}
+				const attributeObserver = new MutationObserver(() => {
+					if (!resolvedElement.hasAttribute(startingStyleAttribute)) {
+						attributeObserver.disconnect();
+						exec();
+					}
+				});
+				attributeObserver.observe(resolvedElement, {
+					attributes: true,
+					attributeFilter: [startingStyleAttribute]
+				});
+				signal?.addEventListener("abort", () => attributeObserver.disconnect(), { once: true });
+			}
+			function exec() {
+				Promise.all(resolvedElement.getAnimations().map((anim) => anim.finished)).then(() => {
+					if (signal?.aborted) return;
+					done();
+				}).catch(() => {
+					const currentAnimations = resolvedElement.getAnimations();
+					if (treatAbortedAsFinished) {
+						if (signal?.aborted) return;
+						done();
+					} else if (currentAnimations.length > 0 && currentAnimations.some((anim) => anim.pending || anim.playState !== "finished")) exec();
+				});
+			}
+			if (toValue(waitForStartingStyleRemoved)) {
+				execWaitForStartingStyleRemoved();
+				return;
+			}
+			frame.request(exec);
+		}
+	};
+}
+
+//#endregion
+//#region src/utils/useTransitionStatus.ts
+/**
+* Provides a status string for CSS animations.
+* @param openRef - a boolean that determines if the element is open.
+* @param enableIdleStateRef - a boolean that enables the `'idle'` state between `'starting'` and `'ending'`
+* @param deferEndingStateRef - a boolean that defers the `'ending'` state.
+*/
+function useTransitionStatus(openRef, enableIdleStateRef = false, deferEndingStateRef = false) {
+	const open = computed(() => toValue(openRef));
+	const enableIdleState = computed(() => toValue(enableIdleStateRef));
+	const deferEndingState = computed(() => toValue(deferEndingStateRef));
+	const transitionStatus = ref(open.value && enableIdleState.value ? "idle" : void 0);
+	const mounted = ref(open.value);
+	watchEffect(() => {
+		if (open.value && !mounted.value) {
+			mounted.value = true;
+			transitionStatus.value = "starting";
+		}
+		if (!open.value && mounted.value && transitionStatus.value !== "ending" && !deferEndingState.value) transitionStatus.value = "ending";
+		if (!open.value && !mounted.value && transitionStatus.value === "ending") transitionStatus.value = void 0;
+	});
+	watchEffect((onCleanup) => {
+		if (!open.value && mounted.value && transitionStatus.value !== "ending" && deferEndingState.value) {
+			const frame = AnimationFrame.request(() => {
+				transitionStatus.value = "ending";
+			});
+			onCleanup(() => {
+				AnimationFrame.cancel(frame);
+			});
+		}
+	});
+	watchEffect((onCleanup) => {
+		if (!open.value || enableIdleState.value) return;
+		const frame = AnimationFrame.request(() => {
+			transitionStatus.value = void 0;
+		});
+		onCleanup(() => {
+			AnimationFrame.cancel(frame);
+		});
+	});
+	watchEffect((onCleanup) => {
+		if (!open.value || !enableIdleState.value) return;
+		if (open.value && mounted.value && transitionStatus.value !== "idle") transitionStatus.value = "starting";
+		const frame = AnimationFrame.request(() => {
+			transitionStatus.value = "idle";
+		});
+		onCleanup(() => {
+			AnimationFrame.cancel(frame);
+		});
+	});
+	return {
+		mounted,
+		setMounted(value) {
+			mounted.value = value;
+		},
+		transitionStatus
+	};
+}
+
+//#endregion
+//#region src/utils/useOpenChangeComplete.ts
+/**
+* Calls the provided function when the CSS open/close animation or transition completes.
+*/
+function useOpenChangeComplete(parameters) {
+	const runOnceAnimationsFinish = useAnimationsFinished(parameters.ref, parameters.open, false);
+	watchEffect((onCleanup) => {
+		if (!(toValue(parameters.enabled) ?? true)) return;
+		const abortController = new AbortController();
+		runOnceAnimationsFinish(parameters.onComplete, abortController.signal);
+		onCleanup(() => {
+			abortController.abort();
+		});
+	});
+}
+
+//#endregion
+//#region src/field/error/FieldError.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { key: 1 };
+var FieldError_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "FieldError",
+	inheritAttrs: false,
+	__name: "FieldError",
+	props: {
+		id: {
+			type: String,
+			required: false
+		},
+		match: {
+			type: Boolean,
+			required: false,
+			skipCheck: true
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "div"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const stateAttributesMapping = {
+			...fieldValidityMapping,
+			...transitionStatusMapping
+		};
+		const attrs = useAttrs();
+		const id = useBaseUiId(props.id);
+		const { validityData, state: fieldState, name } = useFieldRootContext(false);
+		const { setMessageIds } = useLabelableContext();
+		const { errors } = useFormContext();
+		const formError = computed(() => {
+			const n = name.value;
+			return n ? errors.value[n] ?? null : null;
+		});
+		const rendered = computed(() => {
+			if (formError.value || props.match === true) return true;
+			if (props.match) return Boolean(validityData.value.state[props.match]);
+			return validityData.value.state.valid === false;
+		});
+		const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+		watch(() => ({
+			rendered: rendered.value,
+			id
+		}), ({ rendered: isRendered }) => {
+			if (isRendered && id) setMessageIds((ids) => ids.concat(id));
+			else if (id) setMessageIds((ids) => ids.filter((item) => item !== id));
+		}, { immediate: true });
+		onUnmounted(() => {
+			if (id) setMessageIds((ids) => ids.filter((item) => item !== id));
+		});
+		const errorRef = ref(null);
+		const errorMessage = computed(() => {
+			const fe = formError.value;
+			if (fe) return fe;
+			if (validityData.value.errors.length > 1) return validityData.value.errors;
+			return validityData.value.error;
+		});
+		useOpenChangeComplete({
+			open: rendered,
+			ref: errorRef,
+			onComplete() {
+				if (!rendered.value) setMounted(false);
+			}
+		});
+		const state = computed(() => ({
+			...fieldState.value,
+			transitionStatus: transitionStatus.value
+		}));
+		const { tag, mergedProps, renderless, ref: renderRef } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({
+				...attrs,
+				id
+			})),
+			stateAttributesMapping,
+			defaultTagName: "div",
+			ref: errorRef
+		});
+		return (_ctx, _cache) => {
+			return unref(mounted) && unref(renderless) ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				ref: unref(renderRef),
+				props: unref(mergedProps),
+				state: state.value,
+				message: errorMessage.value
+			}) : unref(mounted) ? (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), mergeProps({
+				key: 1,
+				ref: unref(renderRef)
+			}, unref(mergedProps)), {
+				default: withCtx(() => [_ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : Array.isArray(errorMessage.value) ? (openBlock(), createElementBlock("ul", _hoisted_1, [(openBlock(true), createElementBlock(Fragment, null, renderList(errorMessage.value, (message) => {
+					return openBlock(), createElementBlock("li", { key: message }, toDisplayString(message), 1);
+				}), 128))])) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(errorMessage.value), 1)], 64))]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/field/error/FieldError.vue
+var FieldError_default = FieldError_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { AnimationFrame, FieldError_default, transitionStatusMapping, useAnimationFrame, useAnimationsFinished, useOpenChangeComplete, useTransitionStatus };
+//# sourceMappingURL=FieldError.js.map

package/dist/error/FieldError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldError.js","names":["$slots"],"sources":["../../src/utils/stateAttributesMapping.ts","../../src/utils/resolveRef.ts","../../src/utils/useAnimationFrame.ts","../../src/utils/useAnimationsFinished.ts","../../src/utils/useTransitionStatus.ts","../../src/utils/useOpenChangeComplete.ts","../../src/field/error/FieldError.vue","../../src/field/error/FieldError.vue"],"sourcesContent":[],"mappings":"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"}

package/dist/fallback/AvatarFallback.cjs

@@ -0,0 +1,165 @@
+const require_button_Button = require('../button/Button.cjs');
+let vue = require("vue");
+
+//#region src/utils/useTimeout.ts
+const EMPTY = 0;
+var Timeout = class Timeout {
+	currentId = EMPTY;
+	static create() {
+		return new Timeout();
+	}
+	/**
+	* Executes `fn` after `delay`, clearing any previously scheduled call.
+	*/
+	start(delay, fn) {
+		this.clear();
+		this.currentId = setTimeout(() => {
+			this.currentId = EMPTY;
+			fn();
+		}, delay);
+	}
+	isStarted() {
+		return this.currentId !== EMPTY;
+	}
+	clear = () => {
+		if (this.currentId !== EMPTY) {
+			clearTimeout(this.currentId);
+			this.currentId = EMPTY;
+		}
+	};
+};
+/**
+* A `setTimeout` with automatic cleanup on unmount.
+*/
+function useTimeout() {
+	const timeout = Timeout.create();
+	(0, vue.onUnmounted)(() => {
+		timeout.clear();
+	});
+	return timeout;
+}
+
+//#endregion
+//#region src/avatar/root/AvatarRootContext.ts
+const AvatarRootContextKey = Symbol("AvatarRootContext");
+function useAvatarRootContext() {
+	const context = (0, vue.inject)(AvatarRootContextKey, void 0);
+	if (context === void 0) throw new Error("Base UI Vue: AvatarRootContext is missing. Avatar parts must be placed within <AvatarRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/avatar/root/stateAttributesMapping.ts
+const avatarStateAttributesMapping = { imageLoadingStatus: () => null };
+
+//#endregion
+//#region src/avatar/fallback/AvatarFallback.vue?vue&type=script&setup=true&lang.ts
+var AvatarFallback_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ (0, vue.defineComponent)({
+	name: "AvatarFallback",
+	inheritAttrs: false,
+	__name: "AvatarFallback",
+	props: {
+		delay: {
+			type: Number,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = (0, vue.useAttrs)();
+		const { imageLoadingStatus } = useAvatarRootContext();
+		const delayPassed = (0, vue.ref)(props.delay === void 0);
+		const timeout = useTimeout();
+		(0, vue.watchEffect)((onCleanup) => {
+			if (props.delay !== void 0) {
+				delayPassed.value = false;
+				timeout.start(props.delay, () => {
+					delayPassed.value = true;
+				});
+			} else delayPassed.value = true;
+			onCleanup(() => {
+				timeout.clear();
+			});
+		});
+		const state = (0, vue.computed)(() => ({ imageLoadingStatus: imageLoadingStatus.value }));
+		const isEnabled = (0, vue.computed)(() => {
+			return imageLoadingStatus.value !== "loaded" && delayPassed.value;
+		});
+		const { tag, mergedProps, renderless } = require_button_Button.useRenderElement({
+			componentProps: props,
+			state,
+			props: (0, vue.computed)(() => ({ ...attrs })),
+			stateAttributesMapping: avatarStateAttributesMapping,
+			defaultTagName: "span"
+		});
+		return (_ctx, _cache) => {
+			return (0, vue.unref)(renderless) && isEnabled.value ? (0, vue.renderSlot)(_ctx.$slots, "default", {
+				key: 0,
+				props: (0, vue.unref)(mergedProps),
+				state: state.value
+			}) : isEnabled.value ? ((0, vue.openBlock)(), (0, vue.createBlock)((0, vue.resolveDynamicComponent)((0, vue.unref)(tag)), (0, vue.normalizeProps)((0, vue.mergeProps)({ key: 1 }, (0, vue.unref)(mergedProps))), {
+				default: (0, vue.withCtx)(() => [(0, vue.renderSlot)(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16)) : (0, vue.createCommentVNode)("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/avatar/fallback/AvatarFallback.vue
+var AvatarFallback_default = AvatarFallback_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+Object.defineProperty(exports, 'AvatarFallback_default', {
+  enumerable: true,
+  get: function () {
+    return AvatarFallback_default;
+  }
+});
+Object.defineProperty(exports, 'AvatarRootContextKey', {
+  enumerable: true,
+  get: function () {
+    return AvatarRootContextKey;
+  }
+});
+Object.defineProperty(exports, 'avatarStateAttributesMapping', {
+  enumerable: true,
+  get: function () {
+    return avatarStateAttributesMapping;
+  }
+});
+Object.defineProperty(exports, 'useAvatarRootContext', {
+  enumerable: true,
+  get: function () {
+    return useAvatarRootContext;
+  }
+});
+Object.defineProperty(exports, 'useTimeout', {
+  enumerable: true,
+  get: function () {
+    return useTimeout;
+  }
+});
+//# sourceMappingURL=AvatarFallback.cjs.map

package/dist/fallback/AvatarFallback.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFallback.cjs","names":[],"sources":["../../src/utils/useTimeout.ts","../../src/avatar/root/AvatarRootContext.ts","../../src/avatar/root/stateAttributesMapping.ts","../../src/avatar/fallback/AvatarFallback.vue","../../src/avatar/fallback/AvatarFallback.vue"],"sourcesContent":[],"mappings":";;;;AAIA,MAAM,QAAQ;AAEd,IAAa,UAAb,MAAa,QAAQ;CACnB,YAAuB;CAEvB,OAAO,SAAS;AACd,SAAO,IAAI,SAAS;;;;;CAMtB,MAAM,OAAe,IAAgB;AACnC,OAAK,OAAO;AACZ,OAAK,YAAY,iBAAiB;AAChC,QAAK,YAAY;AACjB,OAAI;KACH,MAAM;;CAGX,YAAY;AACV,SAAO,KAAK,cAAc;;CAG5B,cAAc;AACZ,MAAI,KAAK,cAAc,OAAO;AAC5B,gBAAa,KAAK,UAAU;AAC5B,QAAK,YAAY;;;;;;;AAQvB,SAAgB,aAAa;CAC3B,MAAM,UAAU,QAAQ,QAAQ;AAEhC,4BAAkB;AAChB,UAAQ,OAAO;GACf;AAEF,QAAO;;;;;ACrCT,MAAa,uBACT,OAAO,oBAAoB;AAE/B,SAAgB,uBAAuB;CACrC,MAAM,0BAAiB,sBAAsB,OAAU;AACvD,KAAI,YAAY,OACd,OAAM,IAAI,MACR,8FACD;AAGH,QAAO;;;;;ACjBT,MAAa,+BACT,EACA,0BAA0B,MAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiBH,MAAM,QAAQ;EAId,MAAM,2BAAiB;EAEvB,MAAM,EAAE,uBAAuB,sBAAqB;EAEpD,MAAM,2BAAkB,MAAM,UAAU,OAAS;EACjD,MAAM,UAAU,YAAW;AAE3B,wBAAa,cAAc;AACzB,OAAI,MAAM,UAAU,QAAW;AAC7B,gBAAY,QAAQ;AACpB,YAAQ,MAAM,MAAM,aAAa;AAC/B,iBAAY,QAAQ;MACrB;SAGD,aAAY,QAAQ;AAGtB,mBAAgB;AACd,YAAQ,OAAM;KACf;IACF;EAED,MAAM,iCAA6C,EACjD,oBAAoB,mBAAmB,OACxC,EAAC;EAEF,MAAM,oCAA2B;AAC/B,UAAO,mBAAmB,UAAU,YAAY,YAAY;IAC7D;EAED,MAAM,EAAE,KAAK,aAAa,eAAe,uCAAiB;GACxD,gBAAgB;GAChB;GACA,gCAAuB,EACrB,GAAG,OACJ,EAAE;GACH,wBAAwB;GACxB,gBAAgB;GACjB,CAAA;;yBAIa,WAAU,IAAI,UAAA,4BAAiD,KAAA,QAAA,WAAA;;IAArC,sBAAO,YAAW;IAAG,OAAO,MAAA;QAClC,UAAA,oGAAhB,IAAG,CAAA,8CAAA,EAAA,KAAA,GAAA,iBAAgC,YAAW,CAAA,CAAA,EAAA;oCACrC,qBAAA,KAAA,QAAA,WAAA,EAAhB,OAAO,MAAA,OAAK,CAAA"}

package/dist/fallback/AvatarFallback.js

@@ -0,0 +1,136 @@
+import { useRenderElement } from "../button/Button.js";
+import { computed, createBlock, createCommentVNode, defineComponent, guardReactiveProps, inject, mergeProps, normalizeProps, onUnmounted, openBlock, ref, renderSlot, resolveDynamicComponent, unref, useAttrs, watchEffect, withCtx } from "vue";
+
+//#region src/utils/useTimeout.ts
+const EMPTY = 0;
+var Timeout = class Timeout {
+	currentId = EMPTY;
+	static create() {
+		return new Timeout();
+	}
+	/**
+	* Executes `fn` after `delay`, clearing any previously scheduled call.
+	*/
+	start(delay, fn) {
+		this.clear();
+		this.currentId = setTimeout(() => {
+			this.currentId = EMPTY;
+			fn();
+		}, delay);
+	}
+	isStarted() {
+		return this.currentId !== EMPTY;
+	}
+	clear = () => {
+		if (this.currentId !== EMPTY) {
+			clearTimeout(this.currentId);
+			this.currentId = EMPTY;
+		}
+	};
+};
+/**
+* A `setTimeout` with automatic cleanup on unmount.
+*/
+function useTimeout() {
+	const timeout = Timeout.create();
+	onUnmounted(() => {
+		timeout.clear();
+	});
+	return timeout;
+}
+
+//#endregion
+//#region src/avatar/root/AvatarRootContext.ts
+const AvatarRootContextKey = Symbol("AvatarRootContext");
+function useAvatarRootContext() {
+	const context = inject(AvatarRootContextKey, void 0);
+	if (context === void 0) throw new Error("Base UI Vue: AvatarRootContext is missing. Avatar parts must be placed within <AvatarRoot>.");
+	return context;
+}
+
+//#endregion
+//#region src/avatar/root/stateAttributesMapping.ts
+const avatarStateAttributesMapping = { imageLoadingStatus: () => null };
+
+//#endregion
+//#region src/avatar/fallback/AvatarFallback.vue?vue&type=script&setup=true&lang.ts
+var AvatarFallback_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "AvatarFallback",
+	inheritAttrs: false,
+	__name: "AvatarFallback",
+	props: {
+		delay: {
+			type: Number,
+			required: false
+		},
+		as: {
+			type: null,
+			required: false,
+			default: "span"
+		},
+		class: {
+			type: Function,
+			required: false,
+			skipCheck: true
+		},
+		style: {
+			type: [
+				Boolean,
+				null,
+				String,
+				Object,
+				Array,
+				Function
+			],
+			required: false,
+			skipCheck: true
+		}
+	},
+	setup(__props) {
+		const props = __props;
+		const attrs = useAttrs();
+		const { imageLoadingStatus } = useAvatarRootContext();
+		const delayPassed = ref(props.delay === void 0);
+		const timeout = useTimeout();
+		watchEffect((onCleanup) => {
+			if (props.delay !== void 0) {
+				delayPassed.value = false;
+				timeout.start(props.delay, () => {
+					delayPassed.value = true;
+				});
+			} else delayPassed.value = true;
+			onCleanup(() => {
+				timeout.clear();
+			});
+		});
+		const state = computed(() => ({ imageLoadingStatus: imageLoadingStatus.value }));
+		const isEnabled = computed(() => {
+			return imageLoadingStatus.value !== "loaded" && delayPassed.value;
+		});
+		const { tag, mergedProps, renderless } = useRenderElement({
+			componentProps: props,
+			state,
+			props: computed(() => ({ ...attrs })),
+			stateAttributesMapping: avatarStateAttributesMapping,
+			defaultTagName: "span"
+		});
+		return (_ctx, _cache) => {
+			return unref(renderless) && isEnabled.value ? renderSlot(_ctx.$slots, "default", {
+				key: 0,
+				props: unref(mergedProps),
+				state: state.value
+			}) : isEnabled.value ? (openBlock(), createBlock(resolveDynamicComponent(unref(tag)), normalizeProps(mergeProps({ key: 1 }, unref(mergedProps))), {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "default", { state: state.value })]),
+				_: 3
+			}, 16)) : createCommentVNode("v-if", true);
+		};
+	}
+});
+
+//#endregion
+//#region src/avatar/fallback/AvatarFallback.vue
+var AvatarFallback_default = AvatarFallback_vue_vue_type_script_setup_true_lang_default;
+
+//#endregion
+export { AvatarFallback_default, AvatarRootContextKey, avatarStateAttributesMapping, useAvatarRootContext, useTimeout };
+//# sourceMappingURL=AvatarFallback.js.map

package/dist/fallback/AvatarFallback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AvatarFallback.js","names":[],"sources":["../../src/utils/useTimeout.ts","../../src/avatar/root/AvatarRootContext.ts","../../src/avatar/root/stateAttributesMapping.ts","../../src/avatar/fallback/AvatarFallback.vue","../../src/avatar/fallback/AvatarFallback.vue"],"sourcesContent":[],"mappings":";;;;AAIA,MAAM,QAAQ;AAEd,IAAa,UAAb,MAAa,QAAQ;CACnB,YAAuB;CAEvB,OAAO,SAAS;AACd,SAAO,IAAI,SAAS;;;;;CAMtB,MAAM,OAAe,IAAgB;AACnC,OAAK,OAAO;AACZ,OAAK,YAAY,iBAAiB;AAChC,QAAK,YAAY;AACjB,OAAI;KACH,MAAM;;CAGX,YAAY;AACV,SAAO,KAAK,cAAc;;CAG5B,cAAc;AACZ,MAAI,KAAK,cAAc,OAAO;AAC5B,gBAAa,KAAK,UAAU;AAC5B,QAAK,YAAY;;;;;;;AAQvB,SAAgB,aAAa;CAC3B,MAAM,UAAU,QAAQ,QAAQ;AAEhC,mBAAkB;AAChB,UAAQ,OAAO;GACf;AAEF,QAAO;;;;;ACrCT,MAAa,uBACT,OAAO,oBAAoB;AAE/B,SAAgB,uBAAuB;CACrC,MAAM,UAAU,OAAO,sBAAsB,OAAU;AACvD,KAAI,YAAY,OACd,OAAM,IAAI,MACR,8FACD;AAGH,QAAO;;;;;ACjBT,MAAa,+BACT,EACA,0BAA0B,MAC3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ECiBH,MAAM,QAAQ;EAId,MAAM,QAAQ,UAAS;EAEvB,MAAM,EAAE,uBAAuB,sBAAqB;EAEpD,MAAM,cAAc,IAAI,MAAM,UAAU,OAAS;EACjD,MAAM,UAAU,YAAW;AAE3B,eAAa,cAAc;AACzB,OAAI,MAAM,UAAU,QAAW;AAC7B,gBAAY,QAAQ;AACpB,YAAQ,MAAM,MAAM,aAAa;AAC/B,iBAAY,QAAQ;MACrB;SAGD,aAAY,QAAQ;AAGtB,mBAAgB;AACd,YAAQ,OAAM;KACf;IACF;EAED,MAAM,QAAQ,gBAAqC,EACjD,oBAAoB,mBAAmB,OACxC,EAAC;EAEF,MAAM,YAAY,eAAe;AAC/B,UAAO,mBAAmB,UAAU,YAAY,YAAY;IAC7D;EAED,MAAM,EAAE,KAAK,aAAa,eAAe,iBAAiB;GACxD,gBAAgB;GAChB;GACA,OAAO,gBAAgB,EACrB,GAAG,OACJ,EAAE;GACH,wBAAwB;GACxB,gBAAgB;GACjB,CAAA;;UAIa,MAAA,WAAU,IAAI,UAAA,QAA1B,WAA2E,KAAA,QAAA,WAAA;;IAArC,OAAO,MAAA,YAAW;IAAG,OAAO,MAAA;QAClC,UAAA,sBAAhC,YAEY,wBAFI,MAAA,IAAG,CAAA,EAAA,eAAA,WAAA,EAAA,KAAA,GAAA,EAAgC,MAAA,YAAW,CAAA,CAAA,EAAA;2BACrC,CAAvB,WAAuB,KAAA,QAAA,WAAA,EAAhB,OAAO,MAAA,OAAK,CAAA"}