@bridge-ui/vue 0.0.9 → 0.0.11

package/dist/Components/DateField/composables/useDateField.d.ts

@@ -1,28 +1,28 @@
 import { Ref, SetupContext } from 'vue';
-import { DatePickerModel } from '@bridge-ui/core';
+import { DatePickerModel } from '@bridge-ui/core/Domain';
 import { DateFieldEmits, DateFieldOwnProps } from '../dateField.types';
 import { FormFieldOwnProps } from '../../FormField/formField.types';
 export declare function useDateField(props: DateFieldOwnProps, model: Ref<null | undefined | DatePickerModel>, emit: SetupContext<DateFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
-    mode: import('vue').ComputedRef<import('@bridge-ui/core').DatePickerMode>;
-    overlay: import('vue').ComputedRef<import('@bridge-ui/core').FieldOverlayMode | undefined>;
+    mode: import('vue').ComputedRef<import('@bridge-ui/core/Domain').DatePickerMode>;
+    overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
-    dateOnly: import('vue').ComputedRef<Pick<DateFieldOwnProps & Record<string, unknown>, "classes" | "customProps" | "multiple" | "range" | "overlay" | "showFooter" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>;
+    dateOnly: import('vue').ComputedRef<Pick<DateFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "multiple" | "range" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>;
     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;
@@ -142,7 +142,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             '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;
@@ -178,7 +178,7 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             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;
@@ -212,9 +212,9 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
             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;
@@ -438,31 +438,31 @@ export declare function useDateField(props: DateFieldOwnProps, model: Ref<null |
         }, 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 useDateField(props: DateFieldOwnProps, model: Ref<null |
         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 useDateField(props: DateFieldOwnProps, model: Ref<null |
     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: DatePickerModel) => 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;
         };
     }>;
     datePickerCustomProps: import('vue').ComputedRef<import('../../DatePicker').DatePickerCustomProps | undefined>;

package/dist/Components/DateField/composables/useDateField.js

@@ -1,14 +1,15 @@
 import { useDateAdapter as e, useDateAdapterContext as t } from "../../../Adapters/Date/useDateAdapter.js";
 import { hasNamedSlot as n } from "../../../Utils/slotOrProp.js";
-import { useBreakpoint as ee } from "../../../Utils/useBreakpoint.js";
-import { mergePartBind as r, resolveFieldAdornmentIconSize as i } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as a, useFormField as o } from "../../FormField/composables/useFormField.js";
-import { computed as s, ref as c, useAttrs as l, useSlots as u } from "vue";
-import { cn as d, isDateRangeValue as f, isFieldOverlayDialog as p, resolveDatePickerMode as m, resolveFieldOverlay as h, resolveFieldShowFooter as g, splitComponentProps as _ } from "@bridge-ui/core";
-import { get as v, isArray as y, isNil as b, omit as x } from "es-toolkit/compat";
-import { colorProps as S } from "@bridge-ui/core/Tokens/Listbox";
+import { useBreakpoint as r } from "../../../Utils/useBreakpoint.js";
+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, isArray as m, isNil as h, omit as g } from "es-toolkit/compat";
+import { isDateRangeValue as _, isFieldOverlayDialog as ee, resolveDatePickerMode as v, resolveFieldOverlay as y } from "@bridge-ui/core/Domain";
+import { listboxColorProps as te } from "@bridge-ui/core/Tokens";
+import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/DateField/composables/useDateField.ts
-var C = [
+var ne = [
 	"range",
 	"classes",
 	"maxDate",
@@ -30,140 +31,148 @@ var C = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function w(e, t, n) {
-	return b(e) ? "" : f(e) ? `${t.format(e[0], n)} – ${t.format(e[1], n)}` : y(e) ? e.map((e) => t.format(e, n)).join(", ") : t.format(e, n);
+function S(e, t, n) {
+	return h(e) ? "" : _(e) ? `${t.format(e[0], n)} – ${t.format(e[1], n)}` : m(e) ? e.map((e) => t.format(e, n)).join(", ") : t.format(e, n);
 }
-function T(e) {
-	return b(e) ? !1 : !y(e) || e.length > 0;
+function C(e) {
+	return h(e) ? !1 : !m(e) || e.length > 0;
 }
-function E(f, y, E) {
-	let D = l(), O = u(), k = e(), A = ee(), j = t(), M = c(!1), N = c(null), P = c(null), F = s(() => _({
+function w(m, _, w) {
+	let T = d(), E = f(), D = e(), O = r(), k = t(), A = u(!1), j = u(null), M = u(null), N = l(() => x({
 		props: {
-			...D,
-			...f
+			...T,
+			...m
 		},
-		bridgeKeys: C
-	})), I = s(() => F.value.componentProps), L = s(() => j(I.value.timeZone)), R = s(() => m({
-		range: I.value.range,
-		multiple: I.value.multiple
-	})), z = s(() => g(I.value.showFooter, A.mobile)), B = s(() => y.value ?? null), V = s(() => I.value.clearable !== !1), H = s(() => T(B.value)), U = s(() => h(I.value.overlay, A.mobile)), W = s(() => p(U.value) ? "w-full shadow-none" : void 0), te = (e) => {
-		P.value = e instanceof HTMLElement ? e : null;
+		bridgeKeys: ne
+	})), P = l(() => N.value.componentProps), F = l(() => k(P.value.timeZone)), I = l(() => v({
+		range: P.value.range,
+		multiple: P.value.multiple
+	})), L = l(() => y(P.value.overlay, O.mobile)), R = o({
+		overlay: L,
+		componentName: "DateField",
+		showFooter: () => P.value.showFooter
+	}), z = l(() => _.value ?? null), B = l(() => P.value.clearable !== !1), V = l(() => C(z.value)), H = l(() => ee(L.value) ? "w-full shadow-none" : void 0), U = (e) => {
+		M.value = e instanceof HTMLElement ? e : null;
 	};
-	function G(e) {
-		M.value = e, e ? E("open") : (E("close"), N.value = null);
+	function W(e) {
+		A.value !== e && (A.value = e, e ? w("open") : (w("close"), j.value = null));
 	}
-	let K = s(() => x(F.value.inheritedAttrs, ["class"])), q = s(() => {
-		let e = _({
-			bridgeKeys: a,
-			props: K.value
-		}).componentProps, t = e.endIcon ?? (n(O, "end") ? void 0 : "calendar"), { menu: ee, clearIcon: i, datePicker: o, ...s } = I.value.customProps ?? {};
+	let G = l(() => g(N.value.inheritedAttrs, ["class"])), K = l(() => {
+		let e = x({
+			bridgeKeys: s,
+			props: G.value
+		}).componentProps, t = e.endIcon ?? (n(E, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, datePicker: o, ...c } = P.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
-			classes: I.value.classes,
+			classes: P.value.classes,
 			customProps: {
-				...s,
-				container: r(s.container, {}, {
-					ref: te,
-					class: d({ "cursor-pointer": !f.disabled && !f.readonly }),
+				...c,
+				container: i(c.container, {}, {
+					ref: U,
+					class: b({ "cursor-pointer": !m.disabled && !m.readonly }),
 					onClick: (e) => {
-						f.disabled || f.readonly || e.target.closest("[data-field-clear]") || G(!0);
+						m.disabled || m.readonly || e.target.closest("[data-field-clear]") || W(!0);
 					}
 				})
 			}
 		};
-	}), J = o(() => q.value, {
+	}), q = c(() => K.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateField" }), Y = s(() => H.value && V.value && !f.readonly && !J.isDisabled.value), X = s(() => b(N.value) ? w(B.value, k.value, L.value) : N.value);
-	function Z(e) {
-		y.value = e, E("change", e);
+	}, { componentName: "DateField" }), J = l(() => V.value && B.value && !m.readonly && !q.isDisabled.value), Y = l(() => h(j.value) ? S(z.value, D.value, F.value) : j.value);
+	function X(e) {
+		_.value = e, w("change", e);
 	}
-	function Q(e) {
-		Z(e), N.value = null, (R.value === "single" || z.value) && G(!1);
+	function Z(e) {
+		if (X(e), j.value = null, R.value) {
+			w("apply");
+			return;
+		}
+		I.value === "single" && W(!1);
 	}
-	function ne() {
-		G(!1);
+	function re() {
+		w("cancel");
 	}
-	function re(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(f.disabled || f.readonly) && (Z(null), N.value = null, E("clear"), G(!1));
+	function Q(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(m.disabled || m.readonly) && (X(null), j.value = null, w("clear"), W(!1));
 	}
 	function ie(e) {
 		e.preventDefault();
 	}
 	function $() {
-		if (b(N.value)) return;
-		if (N.value.trim() === "") {
-			Z(null), N.value = null;
+		if (h(j.value)) return;
+		if (j.value.trim() === "") {
+			X(null), j.value = null;
 			return;
 		}
-		if (R.value !== "single") {
-			N.value = null;
+		if (I.value !== "single") {
+			j.value = null;
 			return;
 		}
-		let e = k.value.parse(N.value, L.value);
-		b(e) || Z(e), N.value = null;
+		let e = D.value.parse(j.value, F.value);
+		h(e) || X(e), j.value = null;
 	}
-	let ae = s(() => r({
-		value: X.value,
-		readonly: R.value !== "single" || J.inputBind.value.readonly,
+	let ae = l(() => i({
+		value: Y.value,
+		readonly: I.value !== "single" || q.inputBind.value.readonly,
 		onBlur: (e) => {
-			J.inputBind.value.onBlur?.(e), $();
+			q.inputBind.value.onBlur?.(e), $();
 		},
 		onFocus: (e) => {
-			J.inputBind.value.onFocus?.(e), G(!0);
+			q.inputBind.value.onFocus?.(e), W(!0);
 		},
 		onInput: (e) => {
-			R.value === "single" && (N.value = e.target.value);
+			I.value === "single" && (j.value = e.target.value);
 		},
 		onKeydown: (e) => {
-			J.inputBind.value.onKeydown?.(e), e.key === "Enter" && $(), e.key === "Escape" && (N.value = null, G(!1));
+			q.inputBind.value.onKeydown?.(e), e.key === "Enter" && $(), e.key === "Escape" && (j.value = null, W(!1));
 		}
-	}, void 0, J.inputBind.value)), oe = s(() => I.value.overlay), se = s(() => ({
-		modal: I.value.customProps?.modal,
-		drawer: I.value.customProps?.drawer,
+	}, void 0, q.inputBind.value)), oe = l(() => P.value.overlay), se = l(() => ({
+		modal: P.value.customProps?.modal,
+		drawer: P.value.customProps?.drawer,
 		menu: {
-			anchorEl: P.value,
+			anchorEl: M.value,
 			placement: "bottom-start",
-			...I.value.customProps?.menu
+			...P.value.customProps?.menu
 		}
-	})), ce = s(() => I.value.customProps?.datePicker), le = s(() => i(J.merged.value.size)), ue = s(() => v(S, [J.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), ce = l(() => P.value.customProps?.datePicker), le = l(() => a(q.merged.value.size)), ue = l(() => p(te, [q.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
-		open: M,
-		mode: R,
+		open: A,
+		mode: I,
 		overlay: oe,
-		hasValue: H,
-		dateOnly: I,
-		formField: J,
+		hasValue: V,
+		dateOnly: P,
+		formField: q,
 		inputBind: ae,
-		clearable: V,
-		clearBind: s(() => r({}, {}, {
+		clearable: B,
+		clearBind: l(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
 			onMousedown: ie,
-			class: d({
+			class: b({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
 				[ue.value]: !0,
-				[I.value.classes?.clear ?? ""]: !0
+				[P.value.classes?.clear ?? ""]: !0
 			})
 		})),
-		clearValue: re,
-		modelValue: B,
-		showFooter: z,
-		pickerClass: W,
-		containerRef: P,
+		clearValue: Q,
+		modelValue: z,
+		showFooter: R,
+		pickerClass: H,
+		containerRef: M,
 		clearIconSize: le,
-		showClearIcon: Y,
-		handleOpenChange: G,
-		handlePickerChange: Q,
-		handlePickerCancel: ne,
+		showClearIcon: J,
+		handleOpenChange: W,
+		handlePickerChange: Z,
+		handlePickerCancel: re,
 		overlayCustomProps: se,
 		datePickerCustomProps: ce
 	};
 }
 //#endregion
-export { E as useDateField };
+export { w as useDateField };

package/dist/Components/DateField/dateField.types.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, Slot } from 'vue';
-import { DatePickerModel, DisableDatesInput, FieldOverlayMode, MergeHtmlProps, StartOfWeek } from '@bridge-ui/core';
+import { DatePickerModel, DisableDatesInput, FieldOverlayFooterSlotProps, FieldOverlayMode, StartOfWeek } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { CalendarView } from '../Calendar/calendar.types';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
 import { DatePickerCustomProps } from '../DatePicker/datePicker.types';
@@ -32,21 +33,29 @@ export interface DateFieldCustomProps 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>;
 }
 export interface DateFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the selection model changes.
      */
@@ -169,10 +178,10 @@ export interface DateFieldOwnProps extends Omit<FormFieldOwnProps, "field" | "cl
      */
     range?: boolean;
     /**
-     * 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;
     /**
@@ -195,6 +204,13 @@ export interface DateFieldSlots extends FormFieldSlots {
      * @default undefined
      */
     day?: Slot<CalendarDateDayCell>;
+    /**
+     * 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 DateFieldProps = MergeHtmlProps<DateFieldOwnProps, InputHTMLAttributes> & {
     /**

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

@@ -1,12 +1,16 @@
 import { DatePickerOwnProps, DatePickerSlots } from './datePicker.types';
 type __VLS_Slots = DatePickerSlots;
 declare const __VLS_base: import('vue').DefineComponent<DatePickerOwnProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    apply: () => any;
     cancel: () => any;
-    change: (value: import('@bridge-ui/core').DatePickerModel) => any;
+    change: (value: import('@bridge-ui/core/Domain').DatePickerModel) => any;
 }, string, import('vue').PublicProps, Readonly<DatePickerOwnProps> & Readonly<{
+    onApply?: (() => any) | undefined;
     onCancel?: (() => any) | undefined;
-    onChange?: ((value: import('@bridge-ui/core').DatePickerModel) => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+    onChange?: ((value: import('@bridge-ui/core/Domain').DatePickerModel) => 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;

package/dist/Components/DatePicker/DatePicker.vue_vue_type_script_setup_true_lang.js

@@ -26,19 +26,25 @@ var g = /*@__PURE__*/ s({
 		range: { type: Boolean },
 		readOnly: { type: Boolean },
 		rounded: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		startOfWeek: {},
 		timeZone: {},
 		tokens: {},
 		value: {}
 	},
-	emits: ["cancel", "change"],
+	emits: [
+		"apply",
+		"cancel",
+		"change"
+	],
 	setup(s, { emit: g }) {
 		let { merged: _, rootBind: v, footerBind: y, showFooter: b, applyLabel: x, handleApply: S, cancelLabel: C, displayValue: w, handleCancel: T, calendarTokens: E, applyButtonProps: D, cancelButtonProps: O, handleCalendarChange: k } = n(s, {
 			rounded: "md",
 			startOfWeek: 0,
-			color: "primary",
-			showFooter: !1
+			color: "primary"
 		}, g);
 		return (n, s) => (d(), i("div", u(c(m(v))), [o(t, {
 			color: m(_).color,
@@ -87,7 +93,10 @@ var g = /*@__PURE__*/ s({
 			"disable-years",
 			"disable-months",
 			"hide-outside-days"
-		]), m(b) ? (d(), i("div", u(l({ key: 0 }, m(y))), [o(m(e), l({
+		]), m(b) ? (d(), i("div", u(l({ key: 0 }, m(y))), [f(n.$slots, "footer", {
+			apply: m(S),
+			cancel: m(T)
+		}, () => [o(m(e), l({
 			variant: "flat",
 			color: "secondary",
 			onClick: m(T)
@@ -97,7 +106,7 @@ var g = /*@__PURE__*/ s({
 		}, 16, ["onClick"]), o(m(e), l({ color: "primary" }, m(D), { onClick: m(S) }), {
 			default: h(() => [a(p(m(x)), 1)]),
 			_: 1
-		}, 16, ["onClick"])], 16)) : r("", !0)], 16));
+		}, 16, ["onClick"])])], 16)) : r("", !0)], 16));
 	}
 });
 //#endregion

package/dist/Components/DatePicker/composables/useDatePicker.d.ts

@@ -1,22 +1,20 @@
-import { MaybeRefOrGetter } from 'vue';
-import { DatePickerModel, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
-import { DatePickerOwnProps } from '../datePicker.types';
-type DatePickerLibDefaults = LibDefaultsShape<DatePickerOwnProps, "color" | "rounded" | "showFooter" | "startOfWeek">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { DatePickerModel } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { DatePickerEmits, DatePickerOwnProps } from '../datePicker.types';
+type DatePickerLibDefaults = LibDefaultsShape<DatePickerOwnProps, "color" | "rounded" | "startOfWeek">;
 type DatePickerMerged = MergeLibDefaults<DatePickerOwnProps, DatePickerLibDefaults>;
-export declare function useDatePicker(props: MaybeRefOrGetter<DatePickerOwnProps>, libDefaults: DatePickerLibDefaults, emit: {
-    (event: "change", value: DatePickerModel): void;
-    (event: "cancel"): void;
-}): {
+export declare function useDatePicker(props: MaybeRefOrGetter<DatePickerOwnProps>, libDefaults: DatePickerLibDefaults, emit: SetupContext<DatePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DatePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DatePickerOwnProps, "color" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "showFooter" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>>>;
-    footerBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DatePickerOwnProps, "color" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "multiple" | "range" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears">>>>;
+    footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     handleApply: () => void;
     displayValue: import('vue').ComputedRef<DatePickerModel>;
     handleCancel: () => void;
     calendarTokens: import('vue').ComputedRef<{
-        day: Partial<import('@bridge-ui/core').CalendarDay> | undefined;
-        color: Record<string, Partial<import('@bridge-ui/core').CalendarColorItem>> | undefined;
+        day: Partial<import('@bridge-ui/core/Tokens').CalendarDay> | undefined;
+        color: Record<string, Partial<import('@bridge-ui/core/Tokens').CalendarColorItem>> | undefined;
         rounded: Record<string, string> | undefined;
     }>;
     handleCalendarChange: (next: DatePickerModel) => void;