@bridge-ui/vue 0.0.10 → 0.0.11

package/dist/Components/DateRangeField/composables/useDateRangeField.d.ts

@@ -1,27 +1,27 @@
 import { Ref, SetupContext } from 'vue';
-import { DateRangeValue } from '@bridge-ui/core';
+import { DateRangeValue } from '@bridge-ui/core/Domain';
 import { DateRangeFieldEmits, DateRangeFieldOwnProps } from '../dateRangeField.types';
 import { FormFieldOwnProps } from '../../FormField/formField.types';
 export declare function useDateRangeField(props: DateRangeFieldOwnProps, model: Ref<null | undefined | DateRangeValue>, emit: SetupContext<DateRangeFieldEmits>["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>;
-    dateOnly: import('vue').ComputedRef<Pick<DateRangeFieldOwnProps & Record<string, unknown>, "orientation" | "classes" | "customProps" | "overlay" | "showFooter" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears">>;
+    dateOnly: import('vue').ComputedRef<Pick<DateRangeFieldOwnProps & Record<string, unknown>, "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "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;
@@ -141,7 +141,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, 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;
@@ -177,7 +177,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, 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;
@@ -211,9 +211,9 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, 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;
@@ -437,31 +437,31 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, 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;
@@ -689,7 +689,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, 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;
@@ -699,10 +699,10 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
     clearValue: (event?: Event) => void;
     modelValue: import('vue').ComputedRef<DateRangeValue | null>;
     showFooter: import('vue').ComputedRef<boolean>;
-    orientation: import('vue').ComputedRef<import('@bridge-ui/core').RangePickerOrientation>;
+    orientation: import('vue').ComputedRef<import('@bridge-ui/core/Domain').RangePickerOrientation>;
     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 | DateRangeValue) => void;
@@ -723,9 +723,9 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, 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/DateRangeField/composables/useDateRangeField.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, isDateRangeValue as p, isFieldOverlayDialog as m, resolveFieldOverlay as h, resolveFieldShowFooter as g, resolveRangePickerOrientation as _, splitComponentProps as v } from "@bridge-ui/core";
-import { get as y, isNil as b, omit as x } from "es-toolkit/compat";
-import { colorProps as S } 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 { isDateRangeValue as g, isFieldOverlayDialog as _, resolveFieldOverlay as v, resolveRangePickerOrientation as y } from "@bridge-ui/core/Domain";
+import { listboxColorProps as b } from "@bridge-ui/core/Tokens";
+import { cn as x, splitComponentProps as S } from "@bridge-ui/core/Utils";
 //#region src/Components/DateRangeField/composables/useDateRangeField.ts
 var C = [
 	"classes",
@@ -29,26 +30,26 @@ var C = [
 	"hideOutsideDays"
 ];
 function w(e, t, n) {
-	return b(e) || !p(e) ? "" : `${t.format(e[0], n)} – ${t.format(e[1], n)}`;
+	return m(e) || !g(e) ? "" : `${t.format(e[0], n)} – ${t.format(e[1], n)}`;
 }
-function T(p, T, E) {
-	let D = u(), O = d(), k = e(), A = r(), j = t(), M = l(!1), N = l(null), P = c(() => v({
+function T(g, T, E) {
+	let D = d(), O = f(), k = e(), A = r(), j = t(), M = u(!1), N = u(null), P = l(() => S({
 		props: {
 			...D,
-			...p
+			...g
 		},
 		bridgeKeys: C
-	})), F = c(() => P.value.componentProps), I = c(() => j(F.value.timeZone)), L = c(() => T.value ?? null), R = c(() => F.value.clearable !== !1), z = c(() => !b(L.value)), B = (e) => {
+	})), F = l(() => P.value.componentProps), I = l(() => j(F.value.timeZone)), L = l(() => T.value ?? null), R = l(() => F.value.clearable !== !1), z = l(() => !m(L.value)), B = (e) => {
 		N.value = e instanceof HTMLElement ? e : null;
 	};
 	function V(e) {
-		M.value = e, E(e ? "open" : "close");
+		M.value !== e && (M.value = e, E(e ? "open" : "close"));
 	}
-	let ee = c(() => x(P.value.inheritedAttrs, ["class"])), H = c(() => {
-		let e = v({
-			bridgeKeys: o,
-			props: ee.value
-		}).componentProps, t = e.endIcon ?? (n(O, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateRangePicker: s, ...c } = F.value.customProps ?? {};
+	let H = l(() => h(P.value.inheritedAttrs, ["class"])), ee = l(() => {
+		let e = S({
+			bridgeKeys: s,
+			props: H.value
+		}).componentProps, t = e.endIcon ?? (n(O, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateRangePicker: o, ...c } = F.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
@@ -57,37 +58,41 @@ function T(p, T, E) {
 				...c,
 				container: i(c.container, {}, {
 					ref: B,
-					class: f({ "cursor-pointer": !p.disabled && !p.readonly }),
+					class: x({ "cursor-pointer": !g.disabled && !g.readonly }),
 					onClick: (e) => {
-						p.disabled || p.readonly || e.target.closest("[data-field-clear]") || V(!0);
+						g.disabled || g.readonly || e.target.closest("[data-field-clear]") || V(!0);
 					}
 				})
 			}
 		};
-	}), U = s(() => H.value, {
+	}), U = c(() => ee.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateRangeField" }), W = c(() => w(L.value, k.value, I.value)), G = c(() => z.value && R.value && !p.readonly && !U.isDisabled.value);
+	}, { componentName: "DateRangeField" }), W = l(() => w(L.value, k.value, I.value)), G = l(() => z.value && R.value && !g.readonly && !U.isDisabled.value);
 	function K(e) {
 		T.value = e, E("change", e);
 	}
-	let q = c(() => h(F.value.overlay, A.mobile)), J = c(() => _(F.value.orientation, q.value, A.mobile)), Y = c(() => g(F.value.showFooter, A.mobile));
+	let q = l(() => v(F.value.overlay, A.mobile)), J = l(() => y(F.value.orientation, q.value, A.mobile)), Y = o({
+		overlay: q,
+		componentName: "DateRangeField",
+		showFooter: () => F.value.showFooter
+	});
 	function X(e) {
-		K(e), Y.value && V(!1);
+		K(e), Y.value && E("apply");
 	}
 	function Z() {
-		V(!1);
+		E("cancel");
 	}
 	function Q(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(p.disabled || p.readonly) && (K(null), E("clear"), V(!1));
+		e?.preventDefault(), e?.stopPropagation(), !(g.disabled || g.readonly) && (K(null), E("clear"), V(!1));
 	}
 	function $(e) {
 		e.preventDefault();
 	}
-	let te = c(() => i({
+	let te = l(() => i({
 		readonly: !0,
 		value: W.value,
 		onFocus: (e) => {
@@ -96,7 +101,7 @@ function T(p, T, E) {
 		onKeydown: (e) => {
 			U.inputBind.value.onKeydown?.(e), e.key === "Escape" && V(!1);
 		}
-	}, void 0, U.inputBind.value)), ne = c(() => F.value.overlay), re = c(() => ({
+	}, void 0, U.inputBind.value)), ne = l(() => F.value.overlay), re = l(() => ({
 		modal: F.value.customProps?.modal,
 		drawer: F.value.customProps?.drawer,
 		menu: {
@@ -104,7 +109,7 @@ function T(p, T, E) {
 			placement: "bottom-start",
 			...F.value.customProps?.menu
 		}
-	})), ie = c(() => F.value.customProps?.dateRangePicker), ae = c(() => m(q.value) ? "w-full shadow-none" : void 0), oe = c(() => a(U.merged.value.size)), se = c(() => y(S, [U.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), ie = l(() => F.value.customProps?.dateRangePicker), ae = l(() => _(q.value) ? "w-full shadow-none" : void 0), oe = l(() => a(U.merged.value.size)), se = l(() => p(b, [U.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
 		open: M,
 		overlay: ne,
@@ -113,12 +118,12 @@ function T(p, T, E) {
 		formField: U,
 		inputBind: te,
 		clearable: R,
-		clearBind: c(() => i({}, {}, {
+		clearBind: l(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
 			onMousedown: $,
-			class: f({
+			class: x({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
 				[se.value]: !0,
 				[F.value.classes?.clear ?? ""]: !0

package/dist/Components/DateRangeField/dateRangeField.types.d.ts

@@ -1,5 +1,6 @@
 import { InputHTMLAttributes, Slot } from 'vue';
-import { DateRangeValue, DisableDatesInput, FieldOverlayMode, MergeHtmlProps, StartOfWeek } from '@bridge-ui/core';
+import { DateRangeValue, DisableDatesInput, FieldOverlayFooterSlotProps, FieldOverlayMode, StartOfWeek } from '@bridge-ui/core/Domain';
+import { MergeHtmlProps } from '@bridge-ui/core/Utils';
 import { CalendarDateDayCell } from '../CalendarDate/calendarDate.types';
 import { CalendarRangeOrientation } from '../CalendarRange';
 import { DateRangePickerCustomProps } from '../DateRangePicker/dateRangePicker.types';
@@ -47,6 +48,14 @@ export interface DateRangeFieldCustomProps extends FormFieldCustomProps {
     modal?: Partial<ModalOwnProps>;
 }
 export interface DateRangeFieldEmits {
+    /**
+     * Emitted when Apply is pressed (`showFooter`).
+     */
+    apply: [];
+    /**
+     * Emitted when Cancel is pressed (`showFooter`).
+     */
+    cancel: [];
     /**
      * Emitted when the range selection changes.
      */
@@ -158,10 +167,10 @@ export interface DateRangeFieldOwnProps 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;
     /**
@@ -184,6 +193,13 @@ export interface DateRangeFieldSlots 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 DateRangeFieldProps = MergeHtmlProps<DateRangeFieldOwnProps, InputHTMLAttributes> & {
     /**

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

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

package/dist/Components/DateRangePicker/DateRangePicker.vue_vue_type_script_setup_true_lang.js

@@ -24,19 +24,25 @@ var g = /*@__PURE__*/ s({
 		orientation: {},
 		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,
 			orientation: "horizontal"
 		}, g);
 		return (n, s) => (d(), i("div", u(c(m(v))), [o(t, {
@@ -82,7 +88,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)
@@ -92,7 +101,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/DateRangePicker/composables/useDateRangePicker.d.ts

@@ -1,22 +1,20 @@
-import { MaybeRefOrGetter } from 'vue';
-import { DateRangeValue, LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core';
-import { DateRangePickerOwnProps } from '../dateRangePicker.types';
-type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "color" | "rounded" | "showFooter" | "orientation" | "startOfWeek">;
+import { MaybeRefOrGetter, SetupContext } from 'vue';
+import { DateRangeValue } from '@bridge-ui/core/Domain';
+import { LibDefaultsShape, MergeLibDefaults } from '@bridge-ui/core/Utils';
+import { DateRangePickerEmits, DateRangePickerOwnProps } from '../dateRangePicker.types';
+type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "color" | "rounded" | "orientation" | "startOfWeek">;
 type DateRangePickerMerged = MergeLibDefaults<DateRangePickerOwnProps, DateRangePickerLibDefaults>;
-export declare function useDateRangePicker(props: MaybeRefOrGetter<DateRangePickerOwnProps>, libDefaults: DateRangePickerLibDefaults, emit: {
-    (event: "change", value: null | DateRangeValue): void;
-    (event: "cancel"): void;
-}): {
+export declare function useDateRangePicker(props: MaybeRefOrGetter<DateRangePickerOwnProps>, libDefaults: DateRangePickerLibDefaults, emit: SetupContext<DateRangePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateRangePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "customProps" | "rounded" | "disabled" | "showFooter" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "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<DateRangePickerOwnProps, "color" | "orientation" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "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<[Date, Date] | null>;
     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: null | DateRangeValue) => void;

package/dist/Components/DateRangePicker/composables/useDateRangePicker.js

@@ -1,10 +1,12 @@
 import { useResolveMessage as e } from "../../../Adapters/I18n/useI18nAdapter.js";
 import { mergePartBind as t, useBridgeUIComponent as n, useBridgeUIMergedRegistryClasses as r } from "../../../Utils/index.js";
-import { computed as i, ref as a, toValue as o, useAttrs as s, watch as c } from "vue";
-import { cn as l, splitComponentProps as u } from "@bridge-ui/core";
-import { isNil as d, omit as f } from "es-toolkit/compat";
+import { FIELD_OVERLAY_INJECTION_KEY as i } from "../../FieldOverlay/fieldOverlayInjectionKey.js";
+import { computed as a, inject as o, ref as s, toValue as c, useAttrs as l, watch as u } from "vue";
+import { get as d, isNil as f, omit as p } from "es-toolkit/compat";
+import { menuRoundedProps as m } from "@bridge-ui/core/Tokens";
+import { cn as h, splitComponentProps as g } from "@bridge-ui/core/Utils";
 //#region src/Components/DateRangePicker/composables/useDateRangePicker.ts
-var p = [
+var _ = [
 	"color",
 	"value",
 	"tokens",
@@ -28,62 +30,73 @@ var p = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function m(m, h, g) {
-	let _ = s(), v = e(), y = i(() => u({
-		bridgeKeys: p,
+function v(v, y, b) {
+	let x = l(), S = o(i, {
+		apply: () => void 0,
+		cancel: () => void 0
+	}), C = e(), w = a(() => g({
+		bridgeKeys: _,
 		props: {
-			..._,
-			...o(m)
+			...x,
+			...c(v)
 		}
-	})), { merged: b, entry: x } = n({
-		libDefaults: h,
+	})), { merged: T, entry: E } = n({
+		libDefaults: y,
 		componentName: "DateRangePicker",
-		props: () => y.value.componentProps
-	}), S = i(() => b.value.customProps), C = i(() => f(y.value.inheritedAttrs, ["onChange", "onCancel"])), w = r({
-		entry: x,
-		props: () => y.value.componentProps
-	}), T = i(() => o(m)), E = i(() => !d(T.value.value)), D = a(b.value.defaultValue ?? null), O = i(() => E.value ? T.value.value ?? null : D.value), k = a(O.value);
-	c(() => [O.value, b.value.showFooter], ([e, t]) => {
-		t && (k.value = e);
+		props: () => w.value.componentProps
+	}), D = a(() => T.value.customProps), O = a(() => p(w.value.inheritedAttrs, [
+		"onApply",
+		"onCancel",
+		"onChange"
+	])), k = r({
+		entry: E,
+		props: () => w.value.componentProps
+	}), A = a(() => c(v)), j = a(() => !f(A.value.value)), M = s(T.value.defaultValue ?? null), N = a(() => j.value ? A.value.value ?? null : M.value), P = s(N.value);
+	u(() => [N.value, T.value.showFooter], ([e, t]) => {
+		t && (P.value = e);
 	});
-	let A = i(() => b.value.showFooter ? k.value : O.value), j = i(() => ({
-		day: b.value.tokens?.calendar?.day ?? b.value.tokens?.day,
-		color: b.value.tokens?.calendar?.color ?? b.value.tokens?.color,
-		rounded: b.value.tokens?.calendar?.rounded ?? b.value.tokens?.rounded
-	})), M = (e) => {
-		E.value || (D.value = e), g("change", e);
+	let F = a(() => T.value.showFooter ? P.value : N.value), I = a(() => ({
+		day: T.value.tokens?.calendar?.day ?? T.value.tokens?.day,
+		color: T.value.tokens?.calendar?.color ?? T.value.tokens?.color,
+		rounded: T.value.tokens?.calendar?.rounded ?? T.value.tokens?.rounded
+	})), L = (e) => {
+		j.value || (M.value = e), b("change", e);
 	};
 	return {
-		merged: b,
-		rootBind: i(() => t(S.value?.root, C.value, l({
-			"flex w-fit flex-col overflow-hidden rounded-lg bg-white shadow-lg dark:bg-dark-900": !0,
-			[w.value.root ?? ""]: !0
-		}))),
-		footerBind: i(() => t(S.value?.footer, {}, l({
+		merged: T,
+		rootBind: a(() => {
+			let e = d(m, T.value.rounded ?? "md");
+			return t(D.value?.root, O.value, h({
+				"flex w-fit flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+				[e]: !0,
+				[k.value.root ?? ""]: !0
+			}));
+		}),
+		footerBind: a(() => t(D.value?.footer, {}, h({
 			"flex items-center justify-end gap-2 border-t border-dark-100 bg-dark-50 px-3 py-2 dark:border-dark-800 dark:bg-dark-950/40": !0,
-			[w.value.footer ?? ""]: !0
+			[k.value.footer ?? ""]: !0
 		}))),
-		showFooter: i(() => !!b.value.showFooter),
+		showFooter: a(() => !!T.value.showFooter),
 		handleApply: () => {
-			M(k.value);
+			L(P.value), b("apply"), S.apply();
 		},
-		displayValue: A,
+		displayValue: F,
 		handleCancel: () => {
-			k.value = O.value, g("cancel");
+			P.value = N.value, b("cancel"), S.cancel();
 		},
-		calendarTokens: j,
+		calendarTokens: I,
 		handleCalendarChange: (e) => {
-			if (b.value.showFooter) {
-				k.value = e;
+			if (T.value.showFooter) {
+				P.value = e;
 				return;
 			}
-			M(e);
+			L(e);
 		},
-		applyLabel: i(() => v("Apply")),
-		cancelLabel: i(() => v("Cancel")),
-		applyButtonProps: i(() => S.value?.applyButton),
-		cancelButtonProps: i(() => S.value?.cancelButton)
+		applyLabel: a(() => C("Apply")),
+		cancelLabel: a(() => C("Cancel")),
+		applyButtonProps: a(() => D.value?.applyButton),
+		cancelButtonProps: a(() => D.value?.cancelButton)
 	};
 }
 //#endregion
-export { m as useDateRangePicker };
+export { v as useDateRangePicker };