@bridge-ui/vue 0.0.8 → 0.0.9

package/dist/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.js

@@ -0,0 +1,112 @@
+import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
+import { useResolveMessage as n } from "../../../Adapters/I18n/useI18nAdapter.js";
+import { mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
+import { computed as o, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
+import { cn as d, combineDateAndTime as f, splitComponentProps as p } from "@bridge-ui/core";
+import { isNil as m, omit as h } from "es-toolkit/compat";
+//#region src/Components/DateTimeRangePicker/composables/useDateTimeRangePicker.ts
+var g = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.orientation.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function _(e, t, n) {
+	let [r, i] = e;
+	return t.isAfter(r, i, n) ? [i, r] : e;
+}
+function v(v, y, b) {
+	let x = l(), S = e(), C = n(), w = t(), T = o(() => p({
+		props: {
+			...x,
+			...c(v)
+		},
+		bridgeKeys: g
+	})), { merged: E, entry: D } = i({
+		libDefaults: y,
+		componentName: "DateTimeRangePicker",
+		props: () => T.value.componentProps
+	}), O = o(() => E.value.customProps), k = o(() => h(T.value.inheritedAttrs, ["onChange", "onCancel"])), A = a({
+		entry: D,
+		props: () => T.value.componentProps
+	}), j = o(() => c(v)), M = o(() => w(E.value.timeZone)), N = o(() => !m(j.value.value)), P = s(E.value.defaultValue ?? null), F = o(() => N.value ? j.value.value ?? null : P.value), I = s(F.value);
+	u(() => [F.value, E.value.showFooter], ([e, t]) => {
+		t && (I.value = e);
+	});
+	let L = o(() => E.value.showFooter ? I.value : F.value), R = o(() => ({
+		day: E.value.tokens?.calendar?.day ?? E.value.tokens?.day,
+		color: E.value.tokens?.calendar?.color ?? E.value.tokens?.color,
+		rounded: E.value.tokens?.calendar?.rounded ?? E.value.tokens?.rounded
+	})), z = o(() => ({
+		color: E.value.tokens?.time?.color ?? E.value.tokens?.color,
+		rounded: E.value.tokens?.time?.rounded ?? E.value.tokens?.rounded
+	})), B = o(() => L.value?.[0] ?? null), V = o(() => L.value?.[1] ?? null), H = (e) => {
+		N.value || (P.value = e), b("change", e);
+	}, U = (e) => {
+		if (E.value.showFooter) {
+			I.value = e;
+			return;
+		}
+		H(e);
+	}, W = (e) => {
+		if (m(e)) {
+			U(null);
+			return;
+		}
+		let t = S.value.now(M.value), n = f(e[0], L.value?.[0] ?? t, S.value, M.value), r = f(e[1], L.value?.[1] ?? t, S.value, M.value);
+		U(_([n, r], S.value, M.value));
+	}, G = (e) => {
+		if (m(e)) {
+			U(null);
+			return;
+		}
+		let t = S.value.now(M.value), n = f(L.value?.[0] ?? t, e, S.value, M.value), r = L.value?.[1] ?? t;
+		U(_([n, r], S.value, M.value));
+	}, K = (e) => {
+		if (m(e)) {
+			U(null);
+			return;
+		}
+		let t = S.value.now(M.value), n = L.value?.[0] ?? t, r = f(L.value?.[1] ?? t, e, S.value, M.value);
+		U(_([n, r], S.value, M.value));
+	}, q = () => {
+		H(I.value);
+	}, J = () => {
+		I.value = F.value, b("cancel");
+	}, Y = o(() => r(O.value?.root, k.value, d({
+		"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
+		[A.value.root ?? ""]: !0
+	}))), X = o(() => d({ "flex min-w-0 flex-col": !0 })), Z = o(() => d({
+		"min-w-0": !0,
+		[A.value.calendar ?? ""]: !0
+	})), Q = o(() => d({
+		"relative isolate shrink-0 self-stretch overflow-hidden border-l border-dark-100 dark:border-dark-800": !0,
+		[A.value.time ?? ""]: !0
+	})), $ = o(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ee = o(() => d({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), te = o(() => d({ "absolute inset-0 flex w-full px-2.5": !0 }));
+	return {
+		merged: E,
+		rootBind: Y,
+		timeBind: Q,
+		footerBind: o(() => r(O.value?.footer, {}, d({
+			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
+			[A.value.footer ?? ""]: !0
+		}))),
+		showFooter: o(() => !!E.value.showFooter),
+		timeTokens: z,
+		handleApply: q,
+		contentBind: X,
+		displayValue: L,
+		handleCancel: J,
+		calendarBind: Z,
+		timeFillBind: te,
+		endTimeValue: V,
+		timeSizerBind: ee,
+		calendarTokens: R,
+		startTimeValue: B,
+		handleCalendarChange: W,
+		handleEndPanelChange: K,
+		timePanelCustomProps: $,
+		handleStartPanelChange: G,
+		applyLabel: o(() => C("Apply")),
+		cancelLabel: o(() => C("Cancel")),
+		applyButtonProps: o(() => O.value?.applyButton),
+		cancelButtonProps: o(() => O.value?.cancelButton)
+	};
+}
+//#endregion
+export { v as useDateTimeRangePicker };

package/dist/Components/DateTimeRangePicker/dateTimeRangePicker.types.d.ts

@@ -0,0 +1,272 @@
+import { HTMLAttributes, Slot } from 'vue';
+import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, DateRangeValue, DisableDatesInput, DisableTimesInput, MergeHtmlProps, MergeProps, StartOfWeek, TimeColorItem } from '@bridge-ui/core';
+import { ButtonProps } from '../Button/button.types';
+import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
+import { CalendarRangeOrientation } from '../CalendarRange';
+export interface DateTimeRangePickerColorOverrides {}
+export interface DateTimeRangePickerRoundedOverrides {}
+export interface DateTimeRangePickerClasses {
+    /**
+     * Classes for the calendar region.
+     */
+    calendar?: string;
+    /**
+     * Classes for the footer.
+     */
+    footer?: string;
+    /**
+     * Classes for the root element.
+     */
+    root?: string;
+    /**
+     * Classes for the time panels region.
+     */
+    time?: string;
+}
+export interface DateTimeRangePickerCustomProps {
+    /**
+     * Props forwarded to the Apply button.
+     *
+     * @default undefined
+     */
+    applyButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the Cancel button.
+     *
+     * @default undefined
+     */
+    cancelButton?: Partial<ButtonProps>;
+    /**
+     * Props forwarded to the footer.
+     *
+     * @default undefined
+     */
+    footer?: HTMLAttributes;
+    /**
+     * Props forwarded to the root element.
+     *
+     * @default undefined
+     */
+    root?: HTMLAttributes;
+}
+export interface DateTimeRangePickerEmits {
+    /**
+     * Emitted when Cancel is pressed.
+     */
+    cancel: [];
+    /**
+     * Emitted when Apply is pressed (`showFooter`) or when the value commits.
+     */
+    change: [value: null | DateRangeValue];
+}
+export interface DateTimeRangePickerSlots {
+    /**
+     * Custom content inside each day button on the nested calendar.
+     *
+     * @default undefined
+     */
+    day?: Slot<CalendarDateDayCell>;
+}
+export interface DateTimeRangePickerTokens {
+    /**
+     * Nested calendar token overrides.
+     */
+    calendar?: {
+        color?: Record<string, Partial<CalendarColorItem>>;
+        day?: Partial<CalendarDay>;
+        rounded?: Record<string, string>;
+    };
+    /**
+     * Color token map overrides for the calendar (and time when `time` is unset).
+     */
+    color?: Record<string, Partial<CalendarColorItem>>;
+    /**
+     * Day chrome overrides.
+     */
+    day?: Partial<CalendarDay>;
+    /**
+     * Border radius token map overrides.
+     */
+    rounded?: Record<string, string>;
+    /**
+     * Nested time panel token overrides.
+     */
+    time?: {
+        color?: Record<string, Partial<TimeColorItem>>;
+        rounded?: Record<string, string>;
+    };
+}
+export interface DateTimeRangePickerOwnProps {
+    /**
+     * Uses a 12-hour clock with an AM/PM column.
+     *
+     * @default false
+     */
+    ampm?: boolean;
+    /**
+     * Classes for picker regions.
+     *
+     * @default undefined
+     */
+    classes?: DateTimeRangePickerClasses;
+    /**
+     * Accent color for calendar and time tiles.
+     *
+     * @default "primary"
+     */
+    color?: MergeProps<CalendarColor, DateTimeRangePickerColorOverrides>;
+    /**
+     * Extra props for internal parts.
+     *
+     * @default undefined
+     */
+    customProps?: DateTimeRangePickerCustomProps;
+    /**
+     * Uncontrolled initial value.
+     *
+     * @default null
+     */
+    defaultValue?: null | DateRangeValue;
+    /**
+     * Disables the picker.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Dates that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableDates?: DisableDatesInput;
+    /**
+     * Month indexes that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableMonths?: number[];
+    /**
+     * Times that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableTimes?: DisableTimesInput;
+    /**
+     * Years that cannot be selected.
+     *
+     * @default undefined
+     */
+    disableYears?: number[];
+    /**
+     * Hides month navigation / panel.
+     *
+     * @default false
+     */
+    hideMonths?: boolean;
+    /**
+     * Hides days that fall outside the displayed month.
+     *
+     * @default false
+     */
+    hideOutsideDays?: boolean;
+    /**
+     * Hides weekday labels.
+     *
+     * @default false
+     */
+    hideWeekdays?: boolean;
+    /**
+     * Hides year navigation / panel.
+     *
+     * @default false
+     */
+    hideYears?: boolean;
+    /**
+     * Minute step between options.
+     *
+     * @default 1
+     */
+    interval?: number;
+    /**
+     * Latest selectable date.
+     *
+     * @default undefined
+     */
+    maxDate?: Date;
+    /**
+     * Latest selectable time.
+     *
+     * @default undefined
+     */
+    maxTime?: Date;
+    /**
+     * Earliest selectable date.
+     *
+     * @default undefined
+     */
+    minDate?: Date;
+    /**
+     * Earliest selectable time.
+     *
+     * @default undefined
+     */
+    minTime?: Date;
+    /**
+     * Dual calendar arrangement forwarded to `CalendarRange`.
+     *
+     * @default "horizontal"
+     */
+    orientation?: CalendarRangeOrientation;
+    /**
+     * Prevents selection.
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Border radius of calendar / time tiles and chrome.
+     *
+     * `DateTimeRangeField` always forwards its own `rounded` here so the picker
+     * matches the field, independent of `DateTimeRangePicker.defaultProps`.
+     *
+     * @default "md"
+     */
+    rounded?: MergeProps<CalendarRounded, DateTimeRangePickerRoundedOverrides>;
+    /**
+     * Shows Cancel / Apply footer. Selection is draft until Apply.
+     *
+     * @default false
+     */
+    showFooter?: boolean;
+    /**
+     * Shows seconds in the panel and formatted value.
+     *
+     * @default false
+     */
+    showSeconds?: boolean;
+    /**
+     * First day of the week.
+     *
+     * @default 0
+     */
+    startOfWeek?: number | StartOfWeek;
+    /**
+     * IANA time zone.
+     *
+     * @default undefined
+     */
+    timeZone?: string;
+    /**
+     * Token overrides.
+     *
+     * @default undefined
+     */
+    tokens?: DateTimeRangePickerTokens;
+    /**
+     * Controlled value.
+     *
+     * @default undefined
+     */
+    value?: null | DateRangeValue;
+}
+export type DateTimeRangePickerProps = MergeHtmlProps<DateTimeRangePickerOwnProps, HTMLAttributes>;

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

@@ -0,0 +1,3 @@
+export { useDateTimeRangePicker } from './composables/useDateTimeRangePicker';
+export type { DateTimeRangePickerClasses, DateTimeRangePickerColorOverrides, DateTimeRangePickerCustomProps, DateTimeRangePickerEmits, DateTimeRangePickerOwnProps, DateTimeRangePickerProps, DateTimeRangePickerRoundedOverrides, DateTimeRangePickerSlots, DateTimeRangePickerTokens, } from './dateTimeRangePicker.types';
+export { default as DateTimeRangePicker } from './DateTimeRangePicker.vue';

package/dist/Components/DateTimeRangePicker/index.js

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

package/dist/Components/Divider/Divider.vue_vue_type_script_setup_true_lang.js

@@ -1,7 +1,7 @@
 import { useDivider as e } from "./composables/useDivider.js";
 import { createElementBlock as t, defineComponent as n, guardReactiveProps as r, normalizeProps as i, openBlock as a, unref as o } from "vue";
 //#region src/Components/Divider/Divider.vue?vue&type=script&setup=true&lang.ts
-var s = /* @__PURE__ */ n({
+var s = /*@__PURE__*/ n({
 	inheritAttrs: !1,
 	__name: "Divider",
 	props: {

package/dist/Components/Divider/composables/useDivider.js

@@ -23,7 +23,13 @@ function f(f, p) {
 	}), v = n({
 		entry: _,
 		props: () => h.value.componentProps
-	}), y = r(() => c(o(l, _.value?.tokens?.color), g.value.color)), b = r(() => c(o(u, _.value?.tokens?.orientation), g.value.orientation));
+	}), y = r(() => {
+		let e = o(l, _.value?.tokens?.color);
+		return c(e, g.value.color);
+	}), b = r(() => {
+		let e = o(u, _.value?.tokens?.orientation);
+		return c(e, g.value.orientation);
+	});
 	return {
 		merged: g,
 		rootBind: r(() => e({}, h.value.inheritedAttrs, {

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

@@ -16,18 +16,18 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
     "onShow-change"?: ((show: boolean) => any) | undefined;
 }>, {
+    autoFocus: boolean;
     closeOnEscape: boolean;
+    closeOnOverlay: boolean;
+    disableEnforceFocus: boolean;
+    disableRestoreFocus: boolean;
     disableScrollLock: boolean;
+    hideBackdrop: boolean;
     keepMounted: boolean;
     persistent: boolean;
     placement: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').DrawerPlacement, import('./drawer.types').DrawerPlacementOverrides>;
-    teleportTo: false | string;
     scroll: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').DrawerScroll, import('./drawer.types').DrawerScrollOverrides>;
-    autoFocus: boolean;
-    closeOnOverlay: boolean;
-    disableEnforceFocus: boolean;
-    disableRestoreFocus: boolean;
-    hideBackdrop: boolean;
+    teleportTo: false | 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/Drawer/Drawer.vue_vue_type_script_setup_true_lang.js

@@ -2,10 +2,10 @@ import { resolveNamedSlot as e } from "../../Utils/slotOrProp.js";
 import { useDrawer as t } from "./composables/useDrawer.js";
 import { Teleport as n, computed as r, createBlock as i, createCommentVNode as a, createElementBlock as o, createElementVNode as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, resolveDynamicComponent as m, unref as h, useModel as g, useSlots as _ } from "vue";
 //#region src/Components/Drawer/Drawer.vue?vue&type=script&setup=true&lang.ts
-var v = /* @__PURE__ */ c({
+var v = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "Drawer",
-	props: /* @__PURE__ */ u({
+	props: /*@__PURE__*/ u({
 		ariaLabel: {},
 		ariaLabelledBy: {},
 		autoFocus: {
@@ -63,9 +63,9 @@ var v = /* @__PURE__ */ c({
 		},
 		modelModifiers: {}
 	}),
-	emits: /* @__PURE__ */ u(["close", "show-change"], ["update:modelValue"]),
+	emits: /*@__PURE__*/ u(["close", "show-change"], ["update:modelValue"]),
 	setup(c, { expose: u, emit: v }) {
-		let y = _(), b = v, x = c, { merged: S, mounted: C, rootBind: w, panelBind: T, overlayBind: E, wrapperBind: D, setPanelRef: O, layerStackId: k } = t(x, {
+		let y = _(), b = v, x = c, S = g(c, "modelValue"), { merged: C, mounted: w, rootBind: T, panelBind: E, overlayBind: D, wrapperBind: O, setPanelRef: k, layerStackId: A } = t(x, {
 			size: "md",
 			blur: "none",
 			scroll: "paper",
@@ -76,20 +76,20 @@ var v = /* @__PURE__ */ c({
 			closeOnEscape: !0,
 			closeOnOverlay: !0
 		}, {
-			show: g(c, "modelValue"),
+			show: S,
 			stackId: x.stackId,
 			onClose: () => b("close"),
 			onShowChange: (e) => b("show-change", e)
 		});
-		u({ stackId: r(() => x.stackId ?? k.value) });
-		let A = r(() => S.value.teleportTo === !1), j = r(() => S.value.teleportTo === !1 ? "body" : S.value.teleportTo), M = r(() => x.hideBackdrop !== !0 && S.value.hideBackdrop !== !0);
+		u({ stackId: r(() => x.stackId ?? A.value) });
+		let j = r(() => C.value.teleportTo === !1), M = r(() => C.value.teleportTo === !1 ? "body" : C.value.teleportTo), N = r(() => x.hideBackdrop !== !0 && C.value.hideBackdrop !== !0);
 		return (t, r) => (p(), i(n, {
-			to: j.value,
-			disabled: A.value
-		}, [h(C) ? (p(), o("div", f(d({ key: 0 }, h(w))), [M.value ? (p(), o("div", d({
+			to: M.value,
+			disabled: j.value
+		}, [h(w) ? (p(), o("div", f(d({ key: 0 }, h(T))), [N.value ? (p(), o("div", d({
 			key: 0,
 			"aria-hidden": "true"
-		}, h(E)), null, 16)) : a("", !0), s("div", f(l(h(D))), [s("div", d({ ref: h(O) }, h(T)), [(p(), i(m(h(e)(h(y), "default"))))], 16)], 16)], 16)) : a("", !0)], 8, ["to", "disabled"]));
+		}, h(D)), null, 16)) : a("", !0), s("div", f(l(h(O))), [s("div", d({ ref: h(k) }, h(E)), [(p(), i(m(h(e)(h(y), "default"))))], 16)], 16)], 16)) : a("", !0)], 8, ["to", "disabled"]));
 	}
 });
 //#endregion

package/dist/Components/Drawer/composables/useDrawer.d.ts

@@ -34,7 +34,7 @@ export declare function useDrawer(props: DrawerOwnProps, libDefaults: DrawerLibD
         };
         "aria-hidden": boolean | undefined;
         class: string;
-    }, "class", import('vue').HTMLAttributes | undefined, Omit<DrawerProps, "size" | "classes" | "customProps" | "closeOnEscape" | "disableScrollLock" | "keepMounted" | "persistent" | "placement" | "teleportTo" | "scroll" | "blur" | "autoFocus" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "hideBackdrop" | "stackId" | "transition" | "ariaLabel" | "ariaLabelledBy">>>;
+    }, "class", import('vue').HTMLAttributes | undefined, Omit<DrawerProps, "size" | "classes" | "customProps" | "ariaLabel" | "ariaLabelledBy" | "autoFocus" | "blur" | "closeOnEscape" | "closeOnOverlay" | "disableEnforceFocus" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "persistent" | "placement" | "scroll" | "stackId" | "teleportTo" | "transition">>>;
     panelBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
         "data-drawer-part": string;
         "data-state": "open" | "closed";

package/dist/Components/Drawer/composables/useDrawer.js

@@ -45,7 +45,16 @@ function _(_, ge, v = {}) {
 	}), I = n(() => P.value.customProps), L = te({
 		entry: F,
 		props: () => N.value.componentProps
-	}), R = n(() => p(P.value.transition ?? "none")), z = n(() => le(R.value)), B = n(() => P.value.scroll ?? "paper"), V = n(() => P.value.keepMounted && !y.value), H = n(() => P.value.placement ?? "left"), U = n(() => H.value === "left" || H.value === "right" ? "horizontal" : "vertical"), ve = n(() => g(d(pe, F.value?.tokens?.placement), H.value)), ye = n(() => g(fe, H.value)), be = n(() => g(d(de, F.value?.tokens?.blur), P.value.blur)), xe = n(() => g(d(me, F.value?.tokens?.size), [P.value.size, U.value])), Se = n(() => oe(R.value)), Ce = n(() => se(R.value, H.value)), W = n(() => !P.value.persistent), we = n(() => N.value.inheritedAttrs), Te = n(() => e(I.value?.root, we.value, {
+	}), R = n(() => p(P.value.transition ?? "none")), z = n(() => le(R.value)), B = n(() => P.value.scroll ?? "paper"), V = n(() => P.value.keepMounted && !y.value), H = n(() => P.value.placement ?? "left"), U = n(() => H.value === "left" || H.value === "right" ? "horizontal" : "vertical"), ve = n(() => {
+		let e = d(pe, F.value?.tokens?.placement);
+		return g(e, H.value);
+	}), ye = n(() => g(fe, H.value)), be = n(() => {
+		let e = d(de, F.value?.tokens?.blur);
+		return g(e, P.value.blur);
+	}), xe = n(() => {
+		let e = d(me, F.value?.tokens?.size);
+		return g(e, [P.value.size, U.value]);
+	}), Se = n(() => oe(R.value)), Ce = n(() => se(R.value, H.value)), W = n(() => !P.value.persistent), we = n(() => N.value.inheritedAttrs), Te = n(() => e(I.value?.root, we.value, {
 		onTransitionend: je,
 		style: { zIndex: D.value },
 		"aria-hidden": V.value ? !0 : void 0,
@@ -137,7 +146,7 @@ function _(_, ge, v = {}) {
 	function je(e) {
 		if (!b.value || k.value !== "closed") return;
 		let t = e.target;
-		t?.dataset.drawerPart !== "overlay" && t?.dataset.drawerPart !== "panel" || e.propertyName === "none" || e.elapsedTime === 0 || (--S, S <= 0 && J());
+		(t?.dataset.drawerPart === "overlay" || t?.dataset.drawerPart === "panel") && e.propertyName !== "none" && e.elapsedTime !== 0 && (--S, S <= 0 && J());
 	}
 	function X() {
 		if (W.value) {

package/dist/Components/FieldOverlay/FieldOverlay.js

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

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

@@ -0,0 +1,26 @@
+import { FieldOverlayOwnProps, FieldOverlaySlots } from './fieldOverlay.types';
+type __VLS_Slots = FieldOverlaySlots;
+type __VLS_Props = FieldOverlayOwnProps;
+type __VLS_ModelProps = {
+    modelValue?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    "update:modelValue": (value: boolean) => any;
+    "show-change": (show: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    "onShow-change"?: ((show: boolean) => any) | undefined;
+}>, {
+    overlay: import('@bridge-ui/core').FieldOverlayMode;
+}, {}, {}, {}, 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/FieldOverlay/FieldOverlay.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,63 @@
+import { useFieldOverlay as e } from "./composables/useFieldOverlay.js";
+import t from "../Drawer/Drawer.js";
+import n from "../Menu/Menu.js";
+import r from "../Modal/Modal.js";
+import { createBlock as i, defineComponent as a, mergeModels as o, mergeProps as s, openBlock as c, renderSlot as l, unref as u, useModel as d, withCtx as f } from "vue";
+//#region src/Components/FieldOverlay/FieldOverlay.vue?vue&type=script&setup=true&lang.ts
+var p = /*@__PURE__*/ a({
+	inheritAttrs: !1,
+	__name: "FieldOverlay",
+	props: /*@__PURE__*/ o({
+		customProps: {},
+		overlay: { default: "auto" }
+	}, {
+		modelValue: {
+			type: Boolean,
+			default: !1
+		},
+		modelModifiers: {}
+	}),
+	emits: /*@__PURE__*/ o(["close", "show-change"], ["update:modelValue"]),
+	setup(a, { emit: o }) {
+		let p = o, m = a, h = d(a, "modelValue"), { menuBind: g, modalBind: _, drawerBind: v, resolvedOverlay: y } = e(m);
+		function b(e) {
+			p("show-change", e);
+		}
+		function x() {
+			p("close");
+		}
+		return (e, a) => u(y) === "menu" ? (c(), i(u(n), s({
+			key: 0,
+			modelValue: h.value,
+			"onUpdate:modelValue": a[0] ||= (e) => h.value = e
+		}, u(g), {
+			onClose: x,
+			"onUpdate:modelValue": b
+		}), {
+			default: f(() => [l(e.$slots, "default")]),
+			_: 3
+		}, 16, ["modelValue"])) : u(y) === "modal" ? (c(), i(u(r), s({
+			key: 1,
+			modelValue: h.value,
+			"onUpdate:modelValue": a[1] ||= (e) => h.value = e
+		}, u(_), {
+			onClose: x,
+			onShowChange: b
+		}), {
+			default: f(() => [l(e.$slots, "default")]),
+			_: 3
+		}, 16, ["modelValue"])) : (c(), i(u(t), s({
+			key: 2,
+			modelValue: h.value,
+			"onUpdate:modelValue": a[2] ||= (e) => h.value = e
+		}, u(v), {
+			onClose: x,
+			onShowChange: b
+		}), {
+			default: f(() => [l(e.$slots, "default")]),
+			_: 3
+		}, 16, ["modelValue"]));
+	}
+});
+//#endregion
+export { p as default };

package/dist/Components/FieldOverlay/composables/useFieldOverlay.d.ts

@@ -0,0 +1,15 @@
+import { ResolvedFieldOverlay } from '@bridge-ui/core';
+import { DrawerOwnProps } from '../../Drawer/drawer.types';
+import { FieldOverlayOwnProps } from '../fieldOverlay.types';
+import { MenuOwnProps } from '../../Menu/menu.types';
+import { ModalOwnProps } from '../../Modal/modal.types';
+/**
+ * Resolves the field overlay shell and builds Menu / Modal / Drawer binds.
+ */
+export declare function useFieldOverlay(props: FieldOverlayOwnProps): {
+    menuBind: import('vue').ComputedRef<MenuOwnProps>;
+    modalBind: import('vue').ComputedRef<ModalOwnProps>;
+    drawerBind: import('vue').ComputedRef<DrawerOwnProps>;
+    resolvedOverlay: import('vue').ComputedRef<ResolvedFieldOverlay>;
+};
+export type FieldOverlayOptions = FieldOverlayOwnProps;