@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/TimeRangeField/TimeRangeField.vue_vue_type_script_setup_true_lang.js

@@ -1,16 +1,18 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
-import t from "../Icon/Icon.js";
-import n from "../FormField/FormField.js";
-import r from "../FieldOverlay/FieldOverlay.js";
-import { useTimeRangeField as i } from "./composables/useTimeRangeField.js";
-import a from "../TimeRangePicker/TimeRangePicker.js";
-import { Fragment as o, computed as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, defineComponent as f, guardReactiveProps as p, isRef as m, mergeModels as h, mergeProps as g, normalizeClass as _, normalizeProps as v, openBlock as y, ref as b, unref as x, useModel as S, withCtx as C, withKeys as w, withModifiers as T } from "vue";
-import { isUndefined as E } from "es-toolkit/compat";
+import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
+import n from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
+import i from "../FormField/FormField.js";
+import a from "../FieldOverlay/FieldOverlay.js";
+import { useTimeRangeField as o } from "./composables/useTimeRangeField.js";
+import s from "../TimeRangePicker/TimeRangePicker.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
+import { isUndefined as A } from "es-toolkit/compat";
 //#region src/Components/TimeRangeField/TimeRangeField.vue?vue&type=script&setup=true&lang.ts
-var D = { class: "flex min-w-0 flex-1 items-center gap-1" }, O = ["aria-label"], k = /*@__PURE__*/ f({
+var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"], N = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "TimeRangeField",
-	props: /*@__PURE__*/ h({
+	props: /*@__PURE__*/ _({
 		ampm: { type: Boolean },
 		classes: {},
 		clearable: {
@@ -24,7 +26,10 @@ var D = { class: "flex min-w-0 flex-1 items-center gap-1" }, O = ["aria-label"],
 		maxTime: {},
 		minTime: {},
 		overlay: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		timeZone: {},
 		color: {},
@@ -55,54 +60,63 @@ var D = { class: "flex min-w-0 flex-1 items-center gap-1" }, O = ["aria-label"],
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ h([
+	emits: /*@__PURE__*/ _([
+		"apply",
+		"cancel",
 		"change",
 		"clear",
 		"close",
 		"open"
 	], ["update:modelValue"]),
-	setup(f, { emit: h }) {
-		let k = S(f, "modelValue"), A = f, j = h, M = e(), N = b(A.defaultValue ?? null), P = s({
+	setup(h, { emit: _ }) {
+		let N = E(h, "modelValue"), P = h, F = _, I = e(), L = S(P.defaultValue ?? null), R = l({
 			set: (e) => {
-				k.value = e, N.value = e;
+				N.value = e, L.value = e;
 			},
-			get: () => E(k.value) ? N.value : k.value
-		}), { open: F, overlay: I, timeOnly: L, formField: R, inputBind: z, clearBind: B, clearValue: V, modelValue: H, showFooter: U, pickerClass: W, clearIconSize: G, showClearIcon: K, handleOpenChange: q, handlePickerChange: J, handlePickerCancel: Y, overlayCustomProps: X, timeRangePickerCustomProps: Z } = i(A, P, j);
-		return (e, i) => (y(), l(o, null, [d(x(n), { field: x(R) }, {
-			default: C(() => [u("div", D, [u("input", v(p(x(z))), null, 16), x(K) ? (y(), l("span", g({ key: 0 }, x(B), {
-				onClick: i[0] ||= (...e) => x(V) && x(V)(...e),
-				"aria-label": x(M)("Clear"),
-				onKeydown: [i[1] ||= w(T((...e) => x(V) && x(V)(...e), ["prevent"]), ["enter"]), i[2] ||= w(T((...e) => x(V) && x(V)(...e), ["prevent"]), ["space"])]
-			}), [d(x(t), g({
+			get: () => A(N.value) ? L.value : N.value
+		}), { open: z, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timeRangePickerCustomProps: te } = o(P, R, F);
+		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(H) }, p({
+			default: D(() => [f("div", j, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
+				onClick: o[0] ||= (...e) => T(G) && T(G)(...e),
+				"aria-label": T(I)("Clear"),
+				onKeydown: [o[1] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
+			}), [m(T(n), v({
 				icon: "clear",
-				size: x(G)
-			}, A.customProps?.clearIcon), null, 16, ["size"])], 16, O)) : c("", !0)])]),
-			_: 1
-		}, 8, ["field"]), d(x(r), {
-			modelValue: x(F),
-			"onUpdate:modelValue": [i[3] ||= (e) => m(F) ? F.value = e : null, x(q)],
-			overlay: x(I),
-			"custom-props": x(X)
+				size: T(Y)
+			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
+			_: 2
+		}, [C(T(t)(T(r), e.$slots), (t) => ({
+			name: t,
+			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
+		}))]), 1032, ["field"]), m(T(a), {
+			overlay: T(B),
+			"model-value": T(z),
+			"custom-props": T(ee),
+			"onUpdate:modelValue": T(Z)
 		}, {
-			default: C(() => [d(x(a), {
-				value: x(H),
-				class: _(x(W)),
-				ampm: x(L).ampm,
-				"show-footer": x(U),
-				"read-only": A.readonly,
-				"max-time": x(L).maxTime,
-				"min-time": x(L).minTime,
-				interval: x(L).interval,
-				"time-zone": x(L).timeZone,
-				onChange: x(J),
-				onCancel: x(Y),
-				"show-seconds": x(L).showSeconds,
-				color: x(R).merged.value.color,
-				disabled: x(R).isDisabled.value,
-				"disable-times": x(L).disableTimes,
-				rounded: x(R).merged.value.rounded,
-				"custom-props": x(Z)
-			}, null, 8, [
+			default: D(() => [m(T(s), {
+				value: T(K),
+				class: y(T(J)),
+				ampm: T(V).ampm,
+				"show-footer": T(q),
+				"read-only": P.readonly,
+				"max-time": T(V).maxTime,
+				"min-time": T(V).minTime,
+				interval: T(V).interval,
+				"time-zone": T(V).timeZone,
+				onChange: T(Q),
+				onCancel: T($),
+				"show-seconds": T(V).showSeconds,
+				color: T(H).merged.value.color,
+				disabled: T(H).isDisabled.value,
+				"disable-times": T(V).disableTimes,
+				rounded: T(H).merged.value.rounded,
+				"custom-props": T(te)
+			}, p({ _: 2 }, [e.$slots.footer ? {
+				name: "footer",
+				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
+				key: "0"
+			} : void 0]), 1032, [
 				"value",
 				"class",
 				"ampm",
@@ -121,14 +135,14 @@ var D = { class: "flex min-w-0 flex-1 items-center gap-1" }, O = ["aria-label"],
 				"rounded",
 				"custom-props"
 			])]),
-			_: 1
+			_: 3
 		}, 8, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));
 	}
 });
 //#endregion
-export { k as default };
+export { N as default };

package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts

@@ -1,5 +1,5 @@
 import { Ref, SetupContext } from 'vue';
-import { TimeRangeValue } from '@bridge-ui/core';
+import { TimeRangeValue } from '@bridge-ui/core/Domain';
 import { FormFieldOwnProps } from '../../FormField/formField.types';
 import { TimeRangeFieldEmits, TimeRangeFieldOwnProps } from '../timeRangeField.types';
 /**
@@ -7,24 +7,24 @@ import { TimeRangeFieldEmits, TimeRangeFieldOwnProps } from '../timeRangeField.t
  */
 export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model: Ref<null | undefined | TimeRangeValue>, emit: SetupContext<TimeRangeFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
-    overlay: import('vue').ComputedRef<import('@bridge-ui/core').FieldOverlayMode | undefined>;
+    overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
-    timeOnly: import('vue').ComputedRef<Pick<TimeRangeFieldOwnProps & Record<string, unknown>, "classes" | "customProps" | "overlay" | "showFooter" | "clearable" | "defaultValue" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    timeOnly: import('vue').ComputedRef<Pick<TimeRangeFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "timeZone" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
     formField: {
         slots: Readonly<{
             [name: string]: import('vue').Slot<any> | undefined;
         }>;
         merged: import('vue').ComputedRef<Omit<FormFieldOwnProps, "color" | "size" | "rounded" | "variant" | "errorIcon" | "showErrorIcon"> & {
-            color: NonNullable<keyof import('@bridge-ui/core').FormFieldColor | undefined>;
-            size: NonNullable<keyof import('@bridge-ui/core').FormFieldSize | undefined>;
-            rounded: NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
-            variant: NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>;
+            color: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldColor | undefined>;
+            size: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldSize | undefined>;
+            rounded: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
+            variant: NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             errorIcon: NonNullable<import('../../..').IconSource | undefined>;
             showErrorIcon: NonNullable<boolean | undefined>;
         }>;
         control: import('vue').ComputedRef<string>;
-        endBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+        endBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
             onCopy?: ((payload: ClipboardEvent) => void) | undefined;
             onCut?: ((payload: ClipboardEvent) => void) | undefined;
             onPaste?: ((payload: ClipboardEvent) => void) | undefined;
@@ -144,7 +144,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             'aria-expanded'?: (boolean | "true" | "false") | undefined;
             'aria-flowto'?: string | undefined | undefined;
             'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-            'aria-haspopup'?: (boolean | "true" | "false") | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+            'aria-haspopup'?: "menu" | (boolean | "true" | "false") | "listbox" | "tree" | "grid" | "dialog" | undefined;
             'aria-hidden'?: (boolean | "true" | "false") | undefined;
             'aria-invalid'?: (boolean | "true" | "false") | "grammar" | "spelling" | undefined;
             'aria-keyshortcuts'?: string | undefined | undefined;
@@ -180,7 +180,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "enter" | "go" | "next" | "previous" | "search" | "send" | undefined;
+            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -214,9 +214,9 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             class: string;
         }>>;
         controlId: import('vue').ComputedRef<string>;
-        errorBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        errorBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         errorIcon: import('vue').ComputedRef<NonNullable<import('../../..').IconSource | undefined>>;
-        inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {
+        inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
             id: string;
             disabled: boolean;
             readonly: boolean;
@@ -440,31 +440,31 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
         }, Partial<Omit<Omit<FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
-        startBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        headerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        cornerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        headerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         isDisabled: import('vue').ComputedRef<boolean>;
         isReadonly: import('vue').ComputedRef<boolean>;
-        variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core').FormFieldVariant | undefined>>;
-        endIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        variantKey: import('vue').ComputedRef<NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>>;
+        endIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+        endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         invalidated: import('vue').ComputedRef<boolean>;
-        containerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
-            "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core').FormFieldRounded | undefined>;
+        containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
-        startIconBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
-        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
+        startSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         ariaDescribedBy: import('vue').ComputedRef<string | undefined>;
-        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+        descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        stackedBodyBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
-        insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
-        stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", {}, {}>>;
+        insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+        stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
-    inputBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<import('@bridge-ui/core').MergePartBind<object, "class", {
+    inputBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {
         id: string;
         disabled: boolean;
         readonly: boolean;
@@ -692,7 +692,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
         onKeydown: (event: KeyboardEvent) => void;
     }, undefined>>;
     clearable: import('vue').ComputedRef<boolean>;
-    clearBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<{
+    clearBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<{
         tabindex: number;
         role: string;
         "data-field-clear": boolean;
@@ -704,21 +704,31 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
     showFooter: import('vue').ComputedRef<boolean>;
     pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
-    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core').IconSize>;
+    clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;
     handleOpenChange: (next: boolean) => void;
     handlePickerChange: (next: null | TimeRangeValue) => void;
     handlePickerCancel: () => void;
     overlayCustomProps: import('vue').ComputedRef<{
-        modal: Partial<Pick<import('../../Modal').ModalOwnProps, "size" | "classes" | "customProps" | "blur" | "transition" | "align">> | undefined;
-        drawer: Partial<Pick<import('../../Drawer').DrawerOwnProps, "size" | "classes" | "customProps" | "blur" | "placement" | "transition">> | undefined;
+        modal: Partial<import('../../Modal').ModalOwnProps> | undefined;
+        drawer: Partial<import('../../Drawer').DrawerOwnProps> | undefined;
         menu: {
+            anchorEl: null | HTMLElement;
             classes?: import('../../Menu').MenuClasses;
+            closeOnClickAway?: boolean;
+            closeOnEscape?: boolean;
             customProps?: import('../../Menu').MenuCustomProps;
-            rounded?: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuRounded, import('../../Menu').MenuRoundedOverrides>;
-            shadow?: import('@bridge-ui/core').MergeProps<import('@bridge-ui/core').MenuShadow, import('../../Menu').MenuShadowOverrides>;
+            disableAutoFocus?: boolean;
+            disableScrollLock?: boolean;
+            keepMounted?: boolean;
+            offset?: number;
+            onShowChange?: (show: boolean) => void;
+            persistent?: boolean;
             placement: import('@floating-ui/utils').Placement;
-            anchorEl: HTMLElement | null;
+            rounded?: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuRounded, import('../../Menu').MenuRoundedOverrides>;
+            shadow?: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').MenuShadow, import('../../Menu').MenuShadowOverrides>;
+            strategy?: import('@bridge-ui/core/Runtime').PositionStrategy;
+            teleportTo?: false | string;
         };
     }>;
     timeRangePickerCustomProps: import('vue').ComputedRef<import('../../TimeRangePicker').TimeRangePickerCustomProps | undefined>;

package/dist/Components/TimeRangeField/composables/useTimeRangeField.js

@@ -1,12 +1,13 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
 import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as i, resolveFieldAdornmentIconSize as a } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as o, useFormField as s } from "../../FormField/composables/useFormField.js";
-import { computed as c, ref as l, useAttrs as u, useSlots as d } from "vue";
-import { cn as f, isFieldOverlayDialog as p, isTimeRangeValue as m, resolveFieldOverlay as h, resolveFieldShowFooter as g, splitComponentProps as _ } from "@bridge-ui/core";
-import { get as v, isNil as y, omit as b } from "es-toolkit/compat";
-import { colorProps as x } from "@bridge-ui/core/Tokens/Listbox";
+import { mergePartBind as i, resolveFieldAdornmentIconSize as a, useFieldShowFooter as o } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as s, useFormField as c } from "../../FormField/composables/useFormField.js";
+import { computed as l, ref as u, useAttrs as d, useSlots as f } from "vue";
+import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
+import { isFieldOverlayDialog as g, isTimeRangeValue as _, resolveFieldOverlay as v } from "@bridge-ui/core/Domain";
+import { listboxColorProps as y } from "@bridge-ui/core/Tokens";
+import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/TimeRangeField/composables/useTimeRangeField.ts
 var S = [
 	"ampm",
@@ -24,7 +25,7 @@ var S = [
 	"disableTimes"
 ];
 function C(e, t, n, r, i) {
-	return y(e) || !m(e) ? "" : `${t.formatTime(e[0], n, {
+	return m(e) || !_(e) ? "" : `${t.formatTime(e[0], n, {
 		ampm: r,
 		showSeconds: i
 	})} – ${t.formatTime(e[1], n, {
@@ -32,24 +33,24 @@ function C(e, t, n, r, i) {
 		showSeconds: i
 	})}`;
 }
-function w(m, w, T) {
-	let E = u(), D = d(), O = e(), k = r(), A = t(), j = l(!1), M = l(null), N = c(() => _({
+function w(_, w, T) {
+	let E = d(), D = f(), O = e(), k = r(), A = t(), j = u(!1), M = u(null), N = l(() => x({
 		props: {
 			...E,
-			...m
+			..._
 		},
 		bridgeKeys: S
-	})), P = c(() => N.value.componentProps), F = c(() => A(P.value.timeZone)), I = c(() => w.value ?? null), L = c(() => P.value.clearable !== !1), R = c(() => !y(I.value)), z = (e) => {
+	})), P = l(() => N.value.componentProps), F = l(() => A(P.value.timeZone)), I = l(() => w.value ?? null), L = l(() => P.value.clearable !== !1), R = l(() => !m(I.value)), z = (e) => {
 		M.value = e instanceof HTMLElement ? e : null;
 	};
 	function B(e) {
-		j.value = e, T(e ? "open" : "close");
+		j.value !== e && (j.value = e, T(e ? "open" : "close"));
 	}
-	let ee = c(() => b(N.value.inheritedAttrs, ["class"])), V = c(() => {
-		let e = _({
-			bridgeKeys: o,
-			props: ee.value
-		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timeRangePicker: s, ...c } = P.value.customProps ?? {};
+	let V = l(() => h(N.value.inheritedAttrs, ["class"])), H = l(() => {
+		let e = x({
+			bridgeKeys: s,
+			props: V.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "clock"), { menu: r, clearIcon: a, timeRangePicker: o, ...c } = P.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
@@ -58,46 +59,54 @@ function w(m, w, T) {
 				...c,
 				container: i(c.container, {}, {
 					ref: z,
-					class: f({ "cursor-pointer": !m.disabled && !m.readonly }),
+					class: b({ "cursor-pointer": !_.disabled && !_.readonly }),
 					onClick: (e) => {
-						m.disabled || m.readonly || e.target.closest("[data-field-clear]") || B(!0);
+						_.disabled || _.readonly || e.target.closest("[data-field-clear]") || B(!0);
 					}
 				})
 			}
 		};
-	}), H = s(() => V.value, {
+	}), U = c(() => H.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "TimeRangeField" }), U = c(() => R.value && L.value && !m.readonly && !H.isDisabled.value), W = c(() => C(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
-	function G(e) {
+	}, { componentName: "TimeRangeField" }), W = l(() => R.value && L.value && !_.readonly && !U.isDisabled.value), G = l(() => C(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	function K(e) {
 		w.value = e, T("change", e);
 	}
-	let K = c(() => g(P.value.showFooter, k.mobile));
-	function q(e) {
-		G(e), B(!1);
-	}
-	function J() {
+	let q = o({
+		componentName: "TimeRangeField",
+		showFooter: () => P.value.showFooter,
+		overlay: () => v(P.value.overlay, k.mobile)
+	});
+	function J(e) {
+		if (K(e), q.value) {
+			T("apply");
+			return;
+		}
 		B(!1);
 	}
-	function Y(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(m.disabled || m.readonly) && (G(null), T("clear"), B(!1));
+	function Y() {
+		T("cancel");
 	}
 	function X(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(_.disabled || _.readonly) && (K(null), T("clear"), B(!1));
+	}
+	function Z(e) {
 		e.preventDefault();
 	}
-	let Z = c(() => i({
+	let Q = l(() => i({
 		readonly: !0,
-		value: W.value,
+		value: G.value,
 		onFocus: (e) => {
-			H.inputBind.value.onFocus?.(e), B(!0);
+			U.inputBind.value.onFocus?.(e), B(!0);
 		},
 		onKeydown: (e) => {
-			H.inputBind.value.onKeydown?.(e), e.key === "Escape" && B(!1);
+			U.inputBind.value.onKeydown?.(e), e.key === "Escape" && B(!1);
 		}
-	}, void 0, H.inputBind.value)), Q = c(() => P.value.overlay), $ = c(() => ({
+	}, void 0, U.inputBind.value)), $ = l(() => P.value.overlay), ee = l(() => ({
 		modal: P.value.customProps?.modal,
 		drawer: P.value.customProps?.drawer,
 		menu: {
@@ -105,37 +114,37 @@ function w(m, w, T) {
 			placement: "bottom-start",
 			...P.value.customProps?.menu
 		}
-	})), te = c(() => P.value.customProps?.timeRangePicker), ne = c(() => h(P.value.overlay, k.mobile)), re = c(() => p(ne.value) ? "w-full shadow-none" : void 0), ie = c(() => a(H.merged.value.size)), ae = c(() => v(x, [H.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), te = l(() => P.value.customProps?.timeRangePicker), ne = l(() => v(P.value.overlay, k.mobile)), re = l(() => g(ne.value) ? "w-full shadow-none" : void 0), ie = l(() => a(U.merged.value.size)), ae = l(() => p(y, [U.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
 		open: j,
-		overlay: Q,
+		overlay: $,
 		hasValue: R,
 		timeOnly: P,
-		formField: H,
-		inputBind: Z,
+		formField: U,
+		inputBind: Q,
 		clearable: L,
-		clearBind: c(() => i({}, {}, {
+		clearBind: l(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: X,
-			class: f({
+			onMousedown: Z,
+			class: b({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
 				[ae.value]: !0,
 				[P.value.classes?.clear ?? ""]: !0
 			})
 		})),
-		clearValue: Y,
+		clearValue: X,
 		modelValue: I,
-		showFooter: K,
+		showFooter: q,
 		pickerClass: re,
 		containerRef: M,
 		clearIconSize: ie,
-		showClearIcon: U,
+		showClearIcon: W,
 		handleOpenChange: B,
-		handlePickerChange: q,
-		handlePickerCancel: J,
-		overlayCustomProps: $,
+		handlePickerChange: J,
+		handlePickerCancel: Y,
+		overlayCustomProps: ee,
 		timeRangePickerCustomProps: te
 	};
 }

package/dist/Components/TimeRangeField/timeRangeField.types.d.ts

@@ -1,5 +1,6 @@
-import { InputHTMLAttributes } from 'vue';
-import { DisableTimesInput, FieldOverlayMode, MergeHtmlProps, TimeRangeValue } from '@bridge-ui/core';
+import { InputHTMLAttributes, Slot } from 'vue';
+import { DisableTimesInput, FieldOverlayFooterSlotProps, FieldOverlayMode, TimeRangeValue } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { DrawerOwnProps } from '../Drawer/drawer.types';
 import { FormFieldClasses, FormFieldCustomProps, FormFieldOwnProps, FormFieldSlots } from '../FormField/formField.types';
 import { IconProps } from '../Icon';
@@ -24,19 +25,19 @@ export interface TimeRangeFieldCustomProps extends FormFieldCustomProps {
      *
      * @default undefined
      */
-    drawer?: Partial<Pick<DrawerOwnProps, "blur" | "size" | "classes" | "placement" | "transition" | "customProps">>;
+    drawer?: Partial<DrawerOwnProps>;
     /**
      * Props forwarded to the floating `Menu` when overlay resolves to menu.
      *
      * @default undefined
      */
-    menu?: Partial<Pick<MenuOwnProps, "shadow" | "classes" | "rounded" | "placement" | "customProps">>;
+    menu?: Partial<MenuOwnProps>;
     /**
      * Props forwarded to the nested `Modal` when overlay resolves to modal.
      *
      * @default undefined
      */
-    modal?: Partial<Pick<ModalOwnProps, "blur" | "size" | "align" | "classes" | "transition" | "customProps">>;
+    modal?: Partial<ModalOwnProps>;
     /**
      * Props forwarded to the nested `TimeRangePicker`.
      *
@@ -45,6 +46,14 @@ export interface TimeRangeFieldCustomProps extends FormFieldCustomProps {
     timeRangePicker?: TimeRangePickerCustomProps;
 }
 export interface TimeRangeFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selected range changes.
      */
@@ -125,10 +134,10 @@ export interface TimeRangeFieldOwnProps extends Omit<FormFieldOwnProps, "field"
      */
     overlay?: FieldOverlayMode;
     /**
-     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true`
-     * on mobile.
+     * Shows Cancel / Apply on the nested picker. When unset, defaults to `true` for dialog
+     * shells (`modal` / `drawer`).
      *
-     * @default false
+     * @default false (`true` for `modal` / `drawer` when unset)
      */
     showFooter?: boolean;
     /**
@@ -144,7 +153,15 @@ export interface TimeRangeFieldOwnProps extends Omit<FormFieldOwnProps, "field"
      */
     timeZone?: string;
 }
-export interface TimeRangeFieldSlots extends FormFieldSlots {}
+export interface TimeRangeFieldSlots extends FormFieldSlots {
+    /**
+     * Custom footer. Replaces Cancel / Apply. Call `apply()` to commit and close
+     * the overlay, or `cancel()` to discard and close.
+     *
+     * @default undefined
+     */
+    footer?: Slot<FieldOverlayFooterSlotProps>;
+}
 export type TimeRangeFieldProps = MergeHtmlProps<TimeRangeFieldOwnProps, InputHTMLAttributes> & {
     /**
      * Bound with `v-model` on the component (`defineModel` internally).

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

@@ -1,10 +1,21 @@
-import { TimeRangePickerOwnProps } from './timeRangePicker.types';
-declare const __VLS_export: import('vue').DefineComponent<TimeRangePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+import { TimeRangePickerOwnProps, TimeRangePickerSlots } from './timeRangePicker.types';
+type __VLS_Slots = TimeRangePickerSlots;
+declare const __VLS_base: import('vue').DefineComponent<TimeRangePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => any;
     cancel: () => any;
-    change: (value: import('@bridge-ui/core').TimeRangeValue | null) => any;
+    change: (value: import('@bridge-ui/core/Domain').TimeRangeValue | null) => any;
 }, string, import('vue').PublicProps, Readonly<TimeRangePickerOwnProps> & Readonly<{
+    onApply?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onChange?: ((value: import('@bridge-ui/core').TimeRangeValue | null) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    onChange?: ((value: import('@bridge-ui/core/Domain').TimeRangeValue | null) => any) | undefined;
+}>, {
+    showFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};