@bridge-ui/vue 0.0.10 → 0.0.11

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

@@ -6,13 +6,13 @@ 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, isRef as _, mergeModels as v, mergeProps as y, normalizeClass as b, normalizeProps as x, openBlock as S, ref as C, renderList as w, renderSlot as T, unref as E, useModel as D, withCtx as O, withKeys as k, withModifiers as A } from "vue";
-import { isUndefined as j } from "es-toolkit/compat";
+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 M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ h({
+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__*/ v({
+	props: /*@__PURE__*/ _({
 		ampm: { type: Boolean },
 		classes: {},
 		clearable: {
@@ -26,7 +26,10 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		maxTime: {},
 		minTime: {},
 		overlay: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		showSeconds: { type: Boolean },
 		timeZone: {},
 		color: {},
@@ -57,57 +60,63 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ v([
+	emits: /*@__PURE__*/ _([
+		"apply",
+		"cancel",
 		"change",
 		"clear",
 		"close",
 		"open"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let P = D(h, "modelValue"), F = h, I = v, L = e(), R = C(F.defaultValue ?? null), z = l({
+	setup(h, { emit: _ }) {
+		let N = E(h, "modelValue"), P = h, F = _, I = e(), L = S(P.defaultValue ?? null), R = l({
 			set: (e) => {
-				P.value = e, R.value = e;
+				N.value = e, L.value = e;
 			},
-			get: () => j(P.value) ? R.value : P.value
-		}), { open: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timeRangePickerCustomProps: ne } = o(F, z, I);
-		return (e, o) => (S(), d(c, null, [m(E(i), { field: E(U) }, p({
-			default: O(() => [f("div", M, [f("input", x(g(E(W))), null, 16), E(Z) ? (S(), d("span", y({ key: 0 }, E(G), {
-				onClick: o[0] ||= (...e) => E(K) && E(K)(...e),
-				"aria-label": E(L)("Clear"),
-				onKeydown: [o[1] ||= k(A((...e) => E(K) && E(K)(...e), ["prevent"]), ["enter"]), o[2] ||= k(A((...e) => E(K) && E(K)(...e), ["prevent"]), ["space"])]
-			}), [m(E(n), y({
+			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: E(X)
-			}, F.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
+				size: T(Y)
+			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
 			_: 2
-		}, [w(E(t)(E(r), e.$slots), (t) => ({
+		}, [C(T(t)(T(r), e.$slots), (t) => ({
 			name: t,
-			fn: O((n) => [T(e.$slots, t, x(g(n || {})))])
-		}))]), 1032, ["field"]), m(E(a), {
-			modelValue: E(B),
-			"onUpdate:modelValue": [o[3] ||= (e) => _(B) ? B.value = e : null, E(Q)],
-			overlay: E(V),
-			"custom-props": E(te)
+			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: O(() => [m(E(s), {
-				value: E(q),
-				class: b(E(Y)),
-				ampm: E(H).ampm,
-				"show-footer": E(J),
-				"read-only": F.readonly,
-				"max-time": E(H).maxTime,
-				"min-time": E(H).minTime,
-				interval: E(H).interval,
-				"time-zone": E(H).timeZone,
-				onChange: E($),
-				onCancel: E(ee),
-				"show-seconds": E(H).showSeconds,
-				color: E(U).merged.value.color,
-				disabled: E(U).isDisabled.value,
-				"disable-times": E(H).disableTimes,
-				rounded: E(U).merged.value.rounded,
-				"custom-props": E(ne)
-			}, 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",
@@ -126,14 +135,14 @@ var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"],
 				"rounded",
 				"custom-props"
 			])]),
-			_: 1
+			_: 3
 		}, 8, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));
 	}
 });
 //#endregion
-export { P 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,7 +704,7 @@ 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;
@@ -725,9 +725,9 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, model:
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;
             placement: import('@floating-ui/utils').Placement;
-            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>;
-            strategy?: import('@bridge-ui/core').PositionStrategy;
+            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;
         };
     }>;

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';
@@ -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;
+    };
+};