@bridge-ui/vue 0.0.7 → 0.0.9

package/dist/Components/Slider/composables/useSlider.js

@@ -0,0 +1,292 @@
+import { useBridgeUI as e } from "../../../Provider/useBridgeUI.js";
+import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
+import { baseFieldBridgeKeys as i, useBaseField as a } from "../../BaseField/composables/useBaseField.js";
+import { computed as o, ref as s, toValue as ee, useAttrs as te, watch as ne } from "vue";
+import { cn as c, getSliderBarGeometry as re, getSliderPointerClientX as l, isSliderStopCovered as ie, mergeBridgeUILayeredClasses as u, normalizeSliderStops as ae, percentFromSliderPointer as d, percentToValue as f, pickClosestSliderThumb as oe, resolveSliderBounds as se, snapSliderValue as p, sortSliderRangeValue as ce, splitComponentProps as le, stepSliderValue as m, valueToPercent as h, writeSliderRangeThumb as g } from "@bridge-ui/core";
+import { get as _, omit as v, pick as y } from "es-toolkit/compat";
+import { colorProps as ue, invalidatedProps as de, roundedProps as fe, sizeProps as pe } from "@bridge-ui/core/Tokens/Slider";
+//#region src/Components/Slider/composables/useSlider.ts
+var b = [
+	"max",
+	"min",
+	"step",
+	"color",
+	"range",
+	"stops",
+	"rounded",
+	"showStops",
+	"showTooltip",
+	"defaultValue"
+], x = [...i, ...b];
+function S(e, t, n) {
+	return n && Array.isArray(e) ? e[t] : Array.isArray(e) ? e[0] : e;
+}
+function C(e, t, n, r) {
+	return !r || !Array.isArray(e) ? {
+		thumbIndex: t,
+		value: n
+	} : g(e, t, n);
+}
+function w(g, w, T, me = {}) {
+	let he = te(), ge = e(), E = s(null), D = s(null), O = s(null), k = s(null), A = o(() => le({
+		bridgeKeys: x,
+		props: {
+			...he,
+			...ee(g)
+		}
+	})), _e = o(() => y(A.value.componentProps, i)), j = a(_e, {
+		error: !1,
+		hideErrorMessage: !1,
+		size: w.size ?? "md"
+	}, {
+		componentName: "Slider",
+		labelHtmlFor: (e) => `${e}-thumb-0`
+	}), { merged: M, entry: N } = n({
+		libDefaults: w,
+		componentName: "Slider",
+		props: () => ({
+			...y(A.value.componentProps, b),
+			size: j.merged.value.size,
+			classes: A.value.componentProps.classes,
+			customProps: A.value.componentProps.customProps
+		})
+	}), P = o(() => M.value.customProps), F = r({
+		entry: N,
+		props: () => A.value.componentProps
+	}), I = o(() => se({
+		min: M.value.min,
+		max: M.value.max,
+		step: M.value.step
+	})), L = o(() => !!M.value.range), R = o(() => M.value.showTooltip !== !1), z = o(() => ge?.global.value.direction === "rtl"), { controlId: B, isDisabled: V, isReadonly: H, invalidated: U, ariaDescribedBy: ve } = j, W = o(() => {
+		let e = T.value, t = I.value;
+		if (L.value) {
+			if (Array.isArray(e)) return ce(p(e[0], t.min, t.max, t.step), p(e[1], t.min, t.max, t.step));
+			let n = p(typeof e == "number" ? e : t.min, t.min, t.max, t.step);
+			return [n, n];
+		}
+		return p(Array.isArray(e) ? e[0] : typeof e == "number" ? e : t.min, t.min, t.max, t.step);
+	}), G = o(() => ae({
+		min: I.value.min,
+		max: I.value.max,
+		step: I.value.step,
+		stops: M.value.stops,
+		showStops: M.value.showStops
+	})), K = o(() => re({
+		range: L.value,
+		min: I.value.min,
+		max: I.value.max,
+		value: W.value
+	})), ye = o(() => {
+		let e = u(ue, N.value?.tokens?.color);
+		return _(e, M.value.color ?? "primary");
+	}), q = o(() => u(de, N.value?.tokens?.invalidated, M.value.customProps?.invalidated)), J = o(() => U.value ? q.value : ye.value), Y = o(() => {
+		let e = u(pe, N.value?.tokens?.size);
+		return _(e, M.value.size ?? "md");
+	}), X = o(() => {
+		let e = u(fe, N.value?.tokens?.rounded);
+		return _(e, M.value.rounded ?? "full");
+	}), be = o(() => G.value.some((e) => !!e.label)), Z = (e) => {
+		T.value = e, me.onChange?.(e);
+	}, xe = (e) => {
+		E.value &&= { thumbIndex: e }, D.value !== null && (D.value = e);
+	}, Se = (e, t) => {
+		if (V.value || H.value) return;
+		let n = I.value, r = f(t, n.min, n.max, n.step), i = C(W.value, e, r, L.value);
+		i.thumbIndex !== e && xe(i.thumbIndex), Z(i.value);
+	}, Q = (e, t) => {
+		V.value || H.value || (e.preventDefault(), E.value = { thumbIndex: t }, D.value = t);
+	}, Ce = (e) => {
+		if (V.value || H.value || e.target.closest("[data-bridge-slider-thumb]")) return;
+		let t = k.value?.getBoundingClientRect();
+		if (!t) return;
+		let n = d({
+			rect: t,
+			isRtl: z.value,
+			clientX: l(e)
+		}), r = I.value, i = f(n, r.min, r.max, r.step), a = 0, o = W.value;
+		L.value && Array.isArray(o) && (a = oe(i, o[0], o[1]));
+		let s = C(o, a, i, L.value);
+		Z(s.value), Q(e, s.thumbIndex);
+	}, we = (e) => (t) => {
+		Q(t, e);
+	}, Te = (e) => (t) => {
+		if (V.value || H.value) return;
+		let n = I.value, r = S(W.value, e, L.value), i = null, a = z.value;
+		switch (t.key) {
+			case "ArrowRight":
+				i = m(r, a ? -1 : 1, n.min, n.max, n.step);
+				break;
+			case "ArrowLeft":
+				i = m(r, a ? 1 : -1, n.min, n.max, n.step);
+				break;
+			case "ArrowUp":
+				i = m(r, 1, n.min, n.max, n.step);
+				break;
+			case "ArrowDown":
+				i = m(r, -1, n.min, n.max, n.step);
+				break;
+			case "Home":
+				i = n.min;
+				break;
+			case "End":
+				i = n.max;
+				break;
+			case "PageUp":
+				i = m(r, 1, n.min, n.max, n.step * 10);
+				break;
+			case "PageDown": i = m(r, -1, n.min, n.max, n.step * 10);
+		}
+		if (i === null) return;
+		t.preventDefault();
+		let o = C(W.value, e, i, L.value);
+		Z(o.value), o.thumbIndex !== e && document.getElementById(`${B.value}-thumb-${o.thumbIndex}`)?.focus();
+	};
+	ne(D, (e, t, n) => {
+		if (e === null) return;
+		let r = (e) => {
+			let t = k.value?.getBoundingClientRect();
+			if (!t || E.value === null) return;
+			let n = d({
+				rect: t,
+				isRtl: z.value,
+				clientX: l(e)
+			});
+			Se(E.value.thumbIndex, n);
+		}, i = () => {
+			E.value = null, D.value = null;
+		};
+		window.addEventListener("pointermove", r), window.addEventListener("pointerup", i), window.addEventListener("pointercancel", i), n(() => {
+			window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", i), window.removeEventListener("pointercancel", i);
+		});
+	});
+	let Ee = o(() => t({}, {}, c("relative w-full min-w-0 flex-1"))), $ = o(() => t({
+		...v(P.value?.track ?? {}, ["style"]),
+		onPointerdown: Ce
+	}, {}, c({
+		"relative w-full select-none touch-none": !0,
+		"cursor-pointer": !V.value && !H.value,
+		"cursor-not-allowed": V.value,
+		[Y.value?.track ?? ""]: !0,
+		[X.value ?? ""]: !0,
+		[J.value?.track ?? ""]: !0,
+		[F.value.track ?? ""]: !0
+	}))), De = o(() => t(v(P.value?.bar ?? {}, ["style"]), {
+		"aria-hidden": !0,
+		style: {
+			width: K.value.width,
+			insetInlineStart: K.value.start
+		}
+	}, c({
+		"absolute top-0 h-full": !0,
+		[X.value ?? ""]: !0,
+		[J.value?.bar ?? ""]: !0,
+		[F.value.bar ?? ""]: !0
+	}))), Oe = (e) => {
+		let n = S(W.value, e, L.value), r = h(n, I.value.min, I.value.max), i = D.value === e;
+		return t({
+			...v(P.value?.thumb ?? {}, ["style"]),
+			role: "slider",
+			type: "button",
+			"aria-valuenow": n,
+			"aria-valuemin": I.value.min,
+			"aria-valuemax": I.value.max,
+			tabIndex: V.value ? -1 : 0,
+			"data-bridge-slider-thumb": e,
+			disabled: V.value || void 0,
+			"aria-orientation": "horizontal",
+			"aria-describedby": ve.value,
+			onKeydown: Te(e),
+			id: `${B.value}-thumb-${e}`,
+			"aria-disabled": V.value || void 0,
+			"aria-readonly": H.value || void 0,
+			"aria-invalid": U.value || void 0,
+			onPointerdown: we(e),
+			style: { insetInlineStart: `${r}%` },
+			onFocus: () => {
+				O.value = e;
+			},
+			onPointerenter: () => {
+				O.value = e;
+			},
+			onBlur: () => {
+				D.value !== e && (O.value = O.value === e ? null : O.value);
+			},
+			onPointerleave: () => {
+				D.value !== e && (O.value = O.value === e ? null : O.value);
+			},
+			"aria-label": P.value?.thumb?.["aria-label"] ?? (L.value ? e === 0 ? "Minimum" : "Maximum" : j.merged.value.label || "Slider")
+		}, {}, c({
+			"group/thumb absolute z-10 flex -translate-x-1/2 items-center justify-center bg-transparent leading-none outline-none": !0,
+			"cursor-grab": !V.value && !H.value,
+			"cursor-grabbing": i,
+			"cursor-not-allowed": V.value,
+			[Y.value?.thumb ?? ""]: !0,
+			[F.value.thumb ?? ""]: !0
+		}));
+	}, ke = (e) => {
+		let n = D.value === e;
+		return t(P.value?.thumbKnob, { "aria-hidden": !0 }, c({
+			"block rounded-full border-2 shadow-sm transition-transform duration-100": !0,
+			"group-focus-visible/thumb:ring-2 group-focus-visible/thumb:ring-offset-2": !0,
+			"scale-120": n,
+			[J.value?.focus ?? ""]: !0,
+			[Y.value?.thumbKnob ?? ""]: !0,
+			[J.value?.thumb ?? ""]: !0,
+			[F.value.thumbKnob ?? ""]: !0
+		}));
+	}, Ae = (e) => {
+		let n = h(e.value, I.value.min, I.value.max), r = ie({
+			range: L.value,
+			min: I.value.min,
+			max: I.value.max,
+			stopValue: e.value,
+			value: W.value
+		});
+		return t(v(P.value?.stop ?? {}, ["style"]), {
+			"aria-hidden": !0,
+			style: {
+				insetInlineStart: `${n}%`,
+				display: r ? "none" : void 0
+			}
+		}, c({
+			"absolute top-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white dark:bg-dark-400": !0,
+			[F.value.stop ?? ""]: !0
+		}));
+	}, je = o(() => t(P.value?.stopLabels, { "aria-hidden": !0 }, c({
+		"relative h-[1lh] w-full text-xs": !0,
+		[F.value.stopLabels ?? ""]: !0
+	})));
+	return {
+		bounds: I,
+		merged: M,
+		barBind: De,
+		isRange: L,
+		trackRef: k,
+		baseField: j,
+		trackBind: $,
+		controlBind: Ee,
+		showTooltip: R,
+		getStopBind: Ae,
+		thumbIndexes: o(() => L.value ? [0, 1] : [0]),
+		getThumbBind: Oe,
+		resolvedStops: G,
+		resolvedValue: W,
+		isTooltipOpen: (e) => R.value && (D.value === e || O.value === e),
+		hasStopLabels: be,
+		stopLabelsBind: je,
+		getStopLabelBind: (e) => {
+			let n = h(e.value, I.value.min, I.value.max);
+			return t(v(P.value?.stopLabel ?? {}, ["style"]), { style: { insetInlineStart: `${n}%` } }, c({
+				"absolute top-0 -translate-x-1/2 whitespace-nowrap": !0,
+				"text-dark-700 dark:text-dark-400": !U.value,
+				[q.value.stopLabel ?? ""]: U.value,
+				[F.value.stopLabel ?? ""]: !0
+			}));
+		},
+		getThumbKnobBind: ke,
+		tooltipProps: o(() => P.value?.tooltip),
+		readThumbValue: (e) => S(W.value, e, L.value)
+	};
+}
+//#endregion
+export { x as sliderBridgeKeys, w as useSlider };

package/dist/Components/Slider/index.d.ts

@@ -0,0 +1,4 @@
+export { useSlider } from './composables/useSlider';
+export type { UseSliderOptions, UseSliderReturn, } from './composables/useSlider';
+export type { SliderClasses, SliderColorOverrides, SliderCustomProps, SliderEmits, SliderOwnProps, SliderProps, SliderRangeValue, SliderRoundedOverrides, SliderSizeOverrides, SliderSlots, SliderStop, SliderStopInput, } from './slider.types';
+export { default as Slider } from './Slider.vue';

package/dist/Components/Slider/index.js

@@ -0,0 +1,3 @@
+import { useSlider as e } from "./composables/useSlider.js";
+import t from "./Slider.js";
+export { t as Slider, e as useSlider };

package/dist/Components/Slider/slider.types.d.ts

@@ -0,0 +1,177 @@
+import { ButtonHTMLAttributes, HTMLAttributes, Slot } from 'vue';
+import { BaseFieldInvalidated, MergeHtmlProps, MergeProps, SliderColor, SliderInvalidated, SliderRangeValue, SliderRounded, SliderStopInput } from '@bridge-ui/core';
+import { BaseFieldClasses, BaseFieldCustomProps, BaseFieldOwnProps, BaseFieldSlots } from '../BaseField/baseField.types';
+import { TooltipOwnProps } from '../Tooltip/tooltip.types';
+export type { SliderRangeValue, SliderStop, SliderStopInput, } from '@bridge-ui/core';
+export interface SliderSizeOverrides {}
+export interface SliderColorOverrides {}
+export interface SliderRoundedOverrides {}
+export interface SliderClasses extends BaseFieldClasses {
+    /**
+     * Classes for the filled bar.
+     */
+    bar?: string;
+    /**
+     * Classes for stop markers.
+     */
+    stop?: string;
+    /**
+     * Classes for stop labels.
+     */
+    stopLabel?: string;
+    /**
+     * Classes for the row that holds the stop labels.
+     */
+    stopLabels?: string;
+    /**
+     * Classes for thumb hit-area wrappers.
+     */
+    thumb?: string;
+    /**
+     * Classes for the visible thumb knob.
+     */
+    thumbKnob?: string;
+    /**
+     * Classes for the track.
+     */
+    track?: string;
+}
+export interface SliderCustomProps extends Omit<BaseFieldCustomProps, "invalidated"> {
+    /**
+     * Props forwarded to the filled bar.
+     */
+    bar?: HTMLAttributes;
+    /**
+     * Control error chrome (`bar`, `thumb`, `track`, …). Error message color comes
+     * from {@link BaseField}; pass `errorMessage` here to override.
+     *
+     * @default undefined
+     */
+    invalidated?: Partial<SliderInvalidated & BaseFieldInvalidated>;
+    /**
+     * Props forwarded to stop markers.
+     */
+    stop?: HTMLAttributes;
+    /**
+     * Props forwarded to stop labels.
+     */
+    stopLabel?: HTMLAttributes;
+    /**
+     * Props forwarded to the row that holds the stop labels.
+     */
+    stopLabels?: HTMLAttributes;
+    /**
+     * Props forwarded to thumb hit-area buttons.
+     */
+    thumb?: Partial<ButtonHTMLAttributes>;
+    /**
+     * Props forwarded to the visible thumb knob.
+     */
+    thumbKnob?: HTMLAttributes;
+    /**
+     * Props forwarded to each value `Tooltip` (`content` is owned by the slider).
+     */
+    tooltip?: Partial<Omit<TooltipOwnProps, "slots" | "content" | "anchorEl" | "modelValue">>;
+    /**
+     * Props forwarded to the track element.
+     */
+    track?: HTMLAttributes;
+}
+export interface SliderEmits {
+    /**
+     * Emitted when the slider value changes.
+     * Listen with `@change` / `v-on:change`.
+     */
+    change: [value: number | SliderRangeValue];
+    /**
+     * Emitted when `v-model` should update.
+     */
+    "update:modelValue": [value: number | SliderRangeValue];
+}
+export interface SliderOwnProps extends Omit<BaseFieldOwnProps, "field" | "slots" | "classes" | "children" | "customProps"> {
+    /**
+     * Classes for the field chrome and the slider control.
+     *
+     * @default undefined
+     */
+    classes?: SliderClasses;
+    /**
+     * The color to apply to the slider bar and thumbs.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<SliderColor, SliderColorOverrides>;
+    /**
+     * Extra props for internal parts (`track`, `thumb`, `tooltip`, …).
+     *
+     * @default undefined
+     */
+    customProps?: SliderCustomProps;
+    /**
+     * Uncontrolled initial value. Use a tuple when `range` is enabled.
+     *
+     * @default min (or `[min, min]` when `range`)
+     */
+    defaultValue?: number | SliderRangeValue;
+    /**
+     * Maximum value of the slider.
+     *
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Minimum value of the slider.
+     *
+     * @default 0
+     */
+    min?: number;
+    /**
+     * When `true`, the slider selects a range with two thumbs.
+     *
+     * @default false
+     */
+    range?: boolean;
+    /**
+     * The roundedness of the track and bar.
+     *
+     * @default "full"
+     */
+    rounded?: MergeProps<SliderRounded, SliderRoundedOverrides>;
+    /**
+     * When `true`, renders stop marks (from `stops`, or every `step` when
+     * `stops` is empty).
+     *
+     * @default false
+     */
+    showStops?: boolean;
+    /**
+     * When `true`, shows a Tooltip with the current value on each thumb.
+     *
+     * @default true
+     */
+    showTooltip?: boolean;
+    /**
+     * Step increment between values.
+     *
+     * @default 1
+     */
+    step?: number;
+    /**
+     * Custom stop marks. Numbers are treated as `{ value }`.
+     *
+     * @default undefined
+     */
+    stops?: readonly SliderStopInput[];
+}
+export interface SliderSlots extends BaseFieldSlots {
+    /**
+     * Optional custom thumb content (replaces the default knob).
+     */
+    thumb?: Slot;
+}
+export type SliderProps = MergeHtmlProps<SliderOwnProps, Omit<HTMLAttributes, "color" | "defaultValue">> & {
+    /**
+     * Bound with `v-model` on the component (`defineModel` internally).
+     */
+    modelValue?: number | SliderRangeValue;
+};

package/dist/Components/Snackbar/Snackbar.vue.d.ts

@@ -6,13 +6,13 @@ type __VLS_ModelProps = {
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: boolean) => any;
     close: () => any;
+    "update:modelValue": (value: boolean) => any;
     "show-change": (show: boolean) => any;
     "leave-complete": () => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
     "onLeave-complete"?: (() => any) | undefined;
 }>, {

package/dist/Components/Snackbar/Snackbar.vue_vue_type_script_setup_true_lang.js

@@ -4,10 +4,10 @@ import { useSnackbar as n } from "./composables/useSnackbar.js";
 import { Teleport 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, guardReactiveProps as f, mergeModels as p, mergeProps as m, normalizeClass as h, normalizeProps as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useModel as x, useSlots as S } from "vue";
 import { cn as C } from "@bridge-ui/core";
 //#region src/Components/Snackbar/Snackbar.vue?vue&type=script&setup=true&lang.ts
-var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { class: "flex ml-4 shrink-0" }, D = ["aria-label"], O = ["src"], k = { class: "flex ml-4 shrink-0" }, A = ["aria-label"], j = /* @__PURE__ */ d({
+var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { class: "flex ml-4 shrink-0" }, D = ["aria-label"], O = ["src"], k = { class: "flex ml-4 shrink-0" }, A = ["aria-label"], j = /*@__PURE__*/ d({
 	inheritAttrs: !1,
 	__name: "Snackbar",
-	props: /* @__PURE__ */ p({
+	props: /*@__PURE__*/ p({
 		classes: {},
 		closeButton: {
 			type: Boolean,
@@ -43,13 +43,13 @@ var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { cla
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ p([
+	emits: /*@__PURE__*/ p([
 		"close",
 		"leave-complete",
 		"show-change"
 	], ["update:modelValue"]),
 	setup(d, { emit: p }) {
-		let j = S(), M = p, N = d, P = e(), { merged: F, rendered: I, iconBind: L, panelBind: R, titleBind: z, isPortaled: B, portalBind: V, contentBind: H, showProgress: U, progressBind: W, resolvedIcon: G, requestClose: K, descriptionBind: q } = n(N, {
+		let j = S(), M = p, N = d, P = e(), F = x(d, "modelValue"), { merged: I, rendered: L, iconBind: R, panelBind: z, titleBind: B, isPortaled: V, portalBind: H, contentBind: U, showProgress: W, progressBind: G, resolvedIcon: K, requestClose: q, descriptionBind: J } = n(N, {
 			rounded: "lg",
 			duration: 5e3,
 			color: "primary",
@@ -60,49 +60,49 @@ var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { cla
 			transition: "slide",
 			position: "bottom-center"
 		}, {
-			show: x(d, "modelValue"),
+			show: F,
 			stackId: N.stackId,
 			onClose: () => M("close"),
 			onLeaveComplete: () => M("leave-complete"),
 			onShowChange: (e) => M("show-change", e)
-		}), J = i(() => !!(j.icon || G.value || F.value.img)), Y = i(() => !!(j.title || F.value.title)), X = i(() => !!(j.description || F.value.description)), Z = i(() => !!j.right), Q = i(() => F.value.teleportTo === !1), $ = i(() => F.value.teleportTo === !1 ? "body" : F.value.teleportTo);
+		}), Y = i(() => !!(j.icon || K.value || I.value.img)), X = i(() => !!(j.title || I.value.title)), Z = i(() => !!(j.description || I.value.description)), Q = i(() => !!j.right), $ = i(() => I.value.teleportTo === !1), ee = i(() => I.value.teleportTo === !1 ? "body" : I.value.teleportTo);
 		return (e, n) => (_(), a(r, {
-			to: $.value,
-			disabled: Q.value
-		}, [b(I) && b(B) ? (_(), s("div", g(m({ key: 0 }, b(V))), [c("div", w, [c("div", m(b(R), { class: b(C)(b(R).class, { flex: Z.value }) }), [
-			c("div", g(f(b(H)(Z.value))), [c("div", { class: h({
-				"flex items-start": !Z.value,
-				"w-full flex": Z.value
+			to: ee.value,
+			disabled: $.value
+		}, [b(L) && b(V) ? (_(), s("div", g(m({ key: 0 }, b(H))), [c("div", w, [c("div", m(b(z), { class: b(C)(b(z).class, { flex: Q.value }) }), [
+			c("div", g(f(b(U)(Q.value))), [c("div", { class: h({
+				"flex items-start": !Q.value,
+				"w-full flex": Q.value
 			}) }, [
-				J.value ? (_(), s("div", {
+				Y.value ? (_(), s("div", {
 					key: 0,
 					class: h(["shrink-0", {
-						"w-6": !!(b(G) || b(j).icon),
-						"pt-0.5": !!b(F).img
+						"w-6": !!(b(K) || b(j).icon),
+						"pt-0.5": !!b(I).img
 					}])
 				}, [
 					v(e.$slots, "icon"),
-					!b(j).icon && b(F).img ? (_(), s("img", {
+					!b(j).icon && b(I).img ? (_(), s("img", {
 						key: 0,
 						alt: "",
-						src: b(F).img,
+						src: b(I).img,
 						class: "w-10 h-10 rounded-full"
 					}, null, 8, T)) : o("", !0),
-					!b(j).icon && !b(F).img && b(G) ? (_(), a(b(t), m({ key: 1 }, b(L), { icon: b(G) }), null, 16, ["icon"])) : o("", !0)
+					!b(j).icon && !b(I).img && b(K) ? (_(), a(b(t), m({ key: 1 }, b(R), { icon: b(K) }), null, 16, ["icon"])) : o("", !0)
 				], 2)) : o("", !0),
-				c("div", { class: h(["w-0 flex-1 pt-0.5", { "ml-3": J.value }]) }, [
-					Y.value ? (_(), s("p", g(m({ key: 0 }, b(z))), [v(e.$slots, "title", {}, () => [l(y(b(F).title), 1)])], 16)) : o("", !0),
-					X.value ? (_(), s("p", g(m({ key: 1 }, b(q))), [v(e.$slots, "description", {}, () => [l(y(b(F).description), 1)])], 16)) : o("", !0),
+				c("div", { class: h(["w-0 flex-1 pt-0.5", { "ml-3": Y.value }]) }, [
+					X.value ? (_(), s("p", g(m({ key: 0 }, b(B))), [v(e.$slots, "title", {}, () => [l(y(b(I).title), 1)])], 16)) : o("", !0),
+					Z.value ? (_(), s("p", g(m({ key: 1 }, b(J))), [v(e.$slots, "description", {}, () => [l(y(b(I).description), 1)])], 16)) : o("", !0),
 					v(e.$slots, "default"),
 					b(j).actions ? (_(), s("div", {
 						key: 2,
-						class: h(["flex mt-3 gap-x-3", b(F).classes?.actions])
+						class: h(["flex mt-3 gap-x-3", b(I).classes?.actions])
 					}, [v(e.$slots, "actions")], 2)) : o("", !0)
 				], 2),
-				c("div", E, [v(e.$slots, "trailing"), b(F).closeButton === !1 ? o("", !0) : (_(), s("button", {
+				c("div", E, [v(e.$slots, "trailing"), b(I).closeButton === !1 ? o("", !0) : (_(), s("button", {
 					key: 0,
 					type: "button",
-					onClick: n[0] ||= (...e) => b(K) && b(K)(...e),
+					onClick: n[0] ||= (...e) => b(q) && b(q)(...e),
 					"aria-label": b(P)("Close"),
 					class: "cursor-pointer inline-flex rounded-md text-dark-400 hover:text-dark-500 focus:outline-hidden"
 				}, [u(b(t), {
@@ -111,41 +111,41 @@ var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { cla
 				})], 8, D))])
 			], 2)], 16),
 			v(e.$slots, "right"),
-			b(U) ? (_(), s("div", g(m({ key: 0 }, b(W))), null, 16)) : o("", !0)
-		], 16)])], 16)) : b(I) ? (_(), s("div", m({ key: 1 }, b(R), { class: b(C)(b(R).class, { flex: Z.value }) }), [
-			c("div", g(f(b(H)(Z.value))), [c("div", { class: h({
-				"flex items-start": !Z.value,
-				"w-full flex": Z.value
+			b(W) ? (_(), s("div", g(m({ key: 0 }, b(G))), null, 16)) : o("", !0)
+		], 16)])], 16)) : b(L) ? (_(), s("div", m({ key: 1 }, b(z), { class: b(C)(b(z).class, { flex: Q.value }) }), [
+			c("div", g(f(b(U)(Q.value))), [c("div", { class: h({
+				"flex items-start": !Q.value,
+				"w-full flex": Q.value
 			}) }, [
-				J.value ? (_(), s("div", {
+				Y.value ? (_(), s("div", {
 					key: 0,
 					class: h(["shrink-0", {
-						"w-6": !!(b(G) || b(j).icon),
-						"pt-0.5": !!b(F).img
+						"w-6": !!(b(K) || b(j).icon),
+						"pt-0.5": !!b(I).img
 					}])
 				}, [
 					v(e.$slots, "icon"),
-					!b(j).icon && b(F).img ? (_(), s("img", {
+					!b(j).icon && b(I).img ? (_(), s("img", {
 						key: 0,
 						alt: "",
-						src: b(F).img,
+						src: b(I).img,
 						class: "w-10 h-10 rounded-full"
 					}, null, 8, O)) : o("", !0),
-					!b(j).icon && !b(F).img && b(G) ? (_(), a(b(t), m({ key: 1 }, b(L), { icon: b(G) }), null, 16, ["icon"])) : o("", !0)
+					!b(j).icon && !b(I).img && b(K) ? (_(), a(b(t), m({ key: 1 }, b(R), { icon: b(K) }), null, 16, ["icon"])) : o("", !0)
 				], 2)) : o("", !0),
-				c("div", { class: h(["w-0 flex-1 pt-0.5", { "ml-3": J.value }]) }, [
-					Y.value ? (_(), s("p", g(m({ key: 0 }, b(z))), [v(e.$slots, "title", {}, () => [l(y(b(F).title), 1)])], 16)) : o("", !0),
-					X.value ? (_(), s("p", g(m({ key: 1 }, b(q))), [v(e.$slots, "description", {}, () => [l(y(b(F).description), 1)])], 16)) : o("", !0),
+				c("div", { class: h(["w-0 flex-1 pt-0.5", { "ml-3": Y.value }]) }, [
+					X.value ? (_(), s("p", g(m({ key: 0 }, b(B))), [v(e.$slots, "title", {}, () => [l(y(b(I).title), 1)])], 16)) : o("", !0),
+					Z.value ? (_(), s("p", g(m({ key: 1 }, b(J))), [v(e.$slots, "description", {}, () => [l(y(b(I).description), 1)])], 16)) : o("", !0),
 					v(e.$slots, "default"),
 					b(j).actions ? (_(), s("div", {
 						key: 2,
-						class: h(["flex mt-3 gap-x-3", b(F).classes?.actions])
+						class: h(["flex mt-3 gap-x-3", b(I).classes?.actions])
 					}, [v(e.$slots, "actions")], 2)) : o("", !0)
 				], 2),
-				c("div", k, [v(e.$slots, "trailing"), b(F).closeButton === !1 ? o("", !0) : (_(), s("button", {
+				c("div", k, [v(e.$slots, "trailing"), b(I).closeButton === !1 ? o("", !0) : (_(), s("button", {
 					key: 0,
 					type: "button",
-					onClick: n[1] ||= (...e) => b(K) && b(K)(...e),
+					onClick: n[1] ||= (...e) => b(q) && b(q)(...e),
 					"aria-label": b(P)("Close"),
 					class: "cursor-pointer inline-flex rounded-md text-dark-400 hover:text-dark-500 focus:outline-hidden"
 				}, [u(b(t), {
@@ -154,7 +154,7 @@ var w = { class: "w-full max-w-sm pointer-events-auto" }, T = ["src"], E = { cla
 				})], 8, A))])
 			], 2)], 16),
 			v(e.$slots, "right"),
-			b(U) ? (_(), s("div", g(m({ key: 0 }, b(W))), null, 16)) : o("", !0)
+			b(W) ? (_(), s("div", g(m({ key: 0 }, b(G))), null, 16)) : o("", !0)
 		], 16)) : o("", !0)], 8, ["to", "disabled"]));
 	}
 });