@bridge-ui/vue 0.0.10 → 0.1.0

package/dist/Components/DateRangeField/DateRangeField.vue_vue_type_script_setup_true_lang.js

@@ -3,13 +3,13 @@ import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
 import n from "../Icon/Icon.js";
 import { FORM_FIELD_CHROME_SLOT_NAMES as r } from "../FormField/formField.types.js";
 import i from "../FormField/FormField.js";
-import ee from "../FieldOverlay/FieldOverlay.js";
-import { useDateRangeField as a } from "./composables/useDateRangeField.js";
-import o from "../DateRangePicker/DateRangePicker.js";
-import { Fragment as s, computed as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createSlots as f, createTextVNode 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, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
+import a from "../FieldOverlay/FieldOverlay.js";
+import { useDateRangeField as o } from "./composables/useDateRangeField.js";
+import s from "../DateRangePicker/DateRangePicker.js";
+import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createTextVNode as m, createVNode as h, defineComponent as g, guardReactiveProps 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, toDisplayString as E, unref as D, useModel as O, withCtx as k, withKeys as A, withModifiers as j } from "vue";
 import { isUndefined as M } from "es-toolkit/compat";
 //#region src/Components/DateRangeField/DateRangeField.vue?vue&type=script&setup=true&lang.ts
-var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ h({
+var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"], F = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateRangeField",
 	props: /*@__PURE__*/ v({
@@ -23,6 +23,11 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		disableDates: {},
 		disableMonths: {},
 		disableYears: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -31,7 +36,10 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		minDate: {},
 		orientation: {},
 		overlay: {},
-		showFooter: { type: Boolean },
+		showFooter: {
+			type: Boolean,
+			default: void 0
+		},
 		startOfWeek: {},
 		timeZone: {},
 		color: {},
@@ -63,38 +71,41 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		modelModifiers: {}
 	}),
 	emits: /*@__PURE__*/ v([
+		"apply",
+		"cancel",
 		"change",
 		"clear",
 		"close",
 		"open"
 	], ["update:modelValue"]),
-	setup(h, { emit: v }) {
-		let F = O(h, "modelValue"), I = h, L = v, R = e(), z = C(I.defaultValue ?? null), B = c({
+	setup(g, { emit: v }) {
+		let F = O(g, "modelValue"), I = g, L = v, R = e(), z = C(I.defaultValue ?? null), B = l({
 			set: (e) => {
 				F.value = e, z.value = e;
 			},
 			get: () => M(F.value) ? z.value : F.value
-		}), { open: V, overlay: H, dateOnly: U, formField: W, inputBind: G, clearBind: K, clearValue: q, modelValue: J, showFooter: Y, orientation: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, handleOpenChange: te, handlePickerChange: ne, handlePickerCancel: re, overlayCustomProps: ie, dateRangePickerCustomProps: ae } = a(I, B, L);
-		return (e, a) => (S(), u(s, null, [m(D(i), { field: D(W) }, f({
-			default: k(() => [d("div", N, [d("input", x(g(D(G))), null, 16), D($) ? (S(), u("span", y({ key: 0 }, D(K), {
-				onClick: a[0] ||= (...e) => D(q) && D(q)(...e),
+		}), { open: V, fill: ee, overlay: H, dateOnly: U, formField: W, inputBind: G, clearBind: K, clearValue: q, modelValue: J, showFooter: Y, orientation: X, pickerClass: Z, clearIconSize: Q, showClearIcon: $, handleOpenChange: te, handlePickerChange: ne, handlePickerCancel: re, overlayCustomProps: ie, dateRangePickerCustomProps: ae } = o(I, B, L);
+		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(W) }, p({
+			default: k(() => [f("div", N, [f("input", x(_(D(G))), null, 16), D($) ? (S(), d("span", y({ key: 0 }, D(K), {
+				onClick: o[0] ||= (...e) => D(q) && D(q)(...e),
 				"aria-label": D(R)("Clear"),
-				onKeydown: [a[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), a[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
-			}), [m(D(n), y({
+				onKeydown: [o[1] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(q) && D(q)(...e), ["prevent"]), ["space"])]
+			}), [h(D(n), y({
 				icon: "clear",
 				size: D(Q)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : l("", !0)])]),
+			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
 			_: 2
 		}, [w(D(t)(D(r), e.$slots), (t) => ({
 			name: t,
-			fn: k((n) => [T(e.$slots, t, x(g(n || {})))])
-		}))]), 1032, ["field"]), m(D(ee), {
-			modelValue: D(V),
-			"onUpdate:modelValue": [a[3] ||= (e) => _(V) ? V.value = e : null, D(te)],
+			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
+		}))]), 1032, ["field"]), h(D(a), {
 			overlay: D(H),
-			"custom-props": D(ie)
+			"model-value": D(V),
+			"custom-props": D(ie),
+			"onUpdate:modelValue": D(te)
 		}, {
-			default: k(() => [m(o, {
+			default: k(() => [h(s, {
+				fill: D(ee),
 				value: D(J),
 				class: b(D(Z)),
 				"show-footer": D(Y),
@@ -107,6 +118,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				onCancel: D(re),
 				"hide-years": D(U).hideYears,
 				"hide-months": D(U).hideMonths,
+				error: D(W).invalidated.value,
 				color: D(W).merged.value.color,
 				"start-of-week": D(U).startOfWeek,
 				disabled: D(W).isDisabled.value,
@@ -117,10 +129,15 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				rounded: D(W).merged.value.rounded,
 				"custom-props": D(ae),
 				"hide-outside-days": D(U).hideOutsideDays
-			}, {
-				day: k((t) => [T(e.$slots, "day", x(g(t)), () => [p(E(t.label), 1)])]),
-				_: 3
-			}, 8, [
+			}, p({
+				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
+				_: 2
+			}, [e.$slots.footer ? {
+				name: "footer",
+				fn: k((t) => [T(e.$slots, "footer", x(_(t)))]),
+				key: "0"
+			} : void 0]), 1032, [
+				"fill",
 				"value",
 				"class",
 				"show-footer",
@@ -133,6 +150,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"onCancel",
 				"hide-years",
 				"hide-months",
+				"error",
 				"color",
 				"start-of-week",
 				"disabled",
@@ -146,8 +164,8 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 			])]),
 			_: 3
 		}, 8, [
-			"modelValue",
 			"overlay",
+			"model-value",
 			"custom-props",
 			"onUpdate:modelValue"
 		])], 64));

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

@@ -1,27 +1,28 @@
 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>;
+    fill: import('vue').ComputedRef<boolean>;
+    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>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "editable">>;
     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 +142,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 +178,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 +212,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 +438,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;
@@ -683,13 +684,13 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
     }, 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">>>, "class", {
-        readonly: boolean;
         value: string;
+        readonly: boolean;
         onFocus: (event: FocusEvent) => void;
         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 +700,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>;
-    pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
+    orientation: import('vue').ComputedRef<import('@bridge-ui/core/Domain').RangePickerOrientation>;
+    pickerClass: import('vue').ComputedRef<string | 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 +724,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,18 +1,21 @@
 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, usePickerFill as s } from "../../../Utils/index.js";
+import { formFieldBridgeKeys as c, useFormField as l } from "../../FormField/composables/useFormField.js";
+import { computed as u, ref as d, useAttrs as f, useSlots as p } from "vue";
+import { get as m, isNil as h, omit as g } from "es-toolkit/compat";
+import { isDateRangeValue as _, resolveFieldOverlay as v, resolveFieldPickerClassName as y, resolveRangePickerOrientation as b } from "@bridge-ui/core/Domain";
+import { listboxColorProps as x } from "@bridge-ui/core/Tokens";
+import { cn as S, splitComponentProps as C } from "@bridge-ui/core/Utils";
 //#region src/Components/DateRangeField/composables/useDateRangeField.ts
-var C = [
+var w = [
+	"fill",
 	"classes",
 	"maxDate",
 	"minDate",
 	"overlay",
+	"editable",
 	"timeZone",
 	"clearable",
 	"hideYears",
@@ -28,75 +31,79 @@ var C = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function w(e, t, n) {
-	return b(e) || !p(e) ? "" : `${t.format(e[0], n)} – ${t.format(e[1], n)}`;
+function T(e, t, n) {
+	return h(e) || !_(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 E(_, E, D) {
+	let ee = f(), O = p(), k = e(), A = r(), j = t(), M = d(!1), N = d(null), P = u(() => C({
 		props: {
-			...D,
-			...p
+			...ee,
+			..._
 		},
-		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) => {
+		bridgeKeys: w
+	})), F = u(() => P.value.componentProps), I = u(() => j(F.value.timeZone)), L = u(() => E.value ?? null), R = u(() => F.value.clearable !== !1), z = u(() => !h(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, D(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 = u(() => g(P.value.inheritedAttrs, ["class"])), te = u(() => {
+		let e = C({
+			bridgeKeys: c,
+			props: H.value
+		}).componentProps, t = e.endIcon ?? (n(O, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateRangePicker: o, ...s } = F.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
 			classes: F.value.classes,
 			customProps: {
-				...c,
-				container: i(c.container, {}, {
+				...s,
+				container: i(s.container, {}, {
 					ref: B,
-					class: f({ "cursor-pointer": !p.disabled && !p.readonly }),
+					class: S({ "cursor-pointer": !_.disabled && !_.readonly }),
 					onClick: (e) => {
-						p.disabled || p.readonly || e.target.closest("[data-field-clear]") || V(!0);
+						_.disabled || _.readonly || e.target.closest("[data-field-clear]") || V(!0);
 					}
 				})
 			}
 		};
-	}), U = s(() => H.value, {
+	}), U = l(() => te.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 = u(() => T(L.value, k.value, I.value)), G = u(() => z.value && R.value && !_.readonly && !U.isDisabled.value);
 	function K(e) {
-		T.value = e, E("change", e);
+		E.value = e, D("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 = u(() => v(F.value.overlay, A.mobile)), J = u(() => b(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 && D("apply");
 	}
 	function Z() {
-		V(!1);
+		D("cancel");
 	}
 	function Q(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(p.disabled || p.readonly) && (K(null), E("clear"), V(!1));
+		e?.preventDefault(), e?.stopPropagation(), !(_.disabled || _.readonly) && (K(null), D("clear"), V(!1));
 	}
-	function $(e) {
+	function ne(e) {
 		e.preventDefault();
 	}
-	let te = c(() => i({
-		readonly: !0,
+	let re = u(() => i({
 		value: W.value,
+		readonly: !F.value.editable || U.inputBind.value.readonly,
 		onFocus: (e) => {
 			U.inputBind.value.onFocus?.(e), V(!0);
 		},
 		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)), ie = u(() => F.value.overlay), ae = u(() => ({
 		modal: F.value.customProps?.modal,
 		drawer: F.value.customProps?.drawer,
 		menu: {
@@ -104,23 +111,28 @@ 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");
+	})), oe = u(() => F.value.customProps?.dateRangePicker), $ = s({
+		overlay: q,
+		componentName: "DateRangeField",
+		fill: () => F.value.fill
+	}), se = u(() => y($.value, q.value)), ce = u(() => a(U.merged.value.size)), le = u(() => m(x, [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,
+		fill: $,
+		overlay: ie,
 		hasValue: z,
 		dateOnly: F,
 		formField: U,
-		inputBind: te,
+		inputBind: re,
 		clearable: R,
-		clearBind: c(() => i({}, {}, {
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: $,
-			class: f({
+			onMousedown: ne,
+			class: S({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-				[se.value]: !0,
+				[le.value]: !0,
 				[F.value.classes?.clear ?? ""]: !0
 			})
 		})),
@@ -128,16 +140,16 @@ function T(p, T, E) {
 		modelValue: L,
 		showFooter: Y,
 		orientation: J,
-		pickerClass: ae,
+		pickerClass: se,
 		containerRef: N,
-		clearIconSize: oe,
+		clearIconSize: ce,
 		showClearIcon: G,
 		handleOpenChange: V,
 		handlePickerChange: X,
 		handlePickerCancel: Z,
-		overlayCustomProps: re,
-		dateRangePickerCustomProps: ie
+		overlayCustomProps: ae,
+		dateRangePickerCustomProps: oe
 	};
 }
 //#endregion
-export { T as useDateRangeField };
+export { E as useDateRangeField };

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.
      */
@@ -107,6 +116,22 @@ export interface DateRangeFieldOwnProps extends Omit<FormFieldOwnProps, "field"
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * Unlocks the input for typing. The field does not parse or commit typed
+     * text; use the picker (or your own component) to update the value. When
+     * unset, the input is read-only.
+     *
+     * @default false
+     */
+    editable?: boolean;
+    /**
+     * When `true`, the picker fills the overlay width.
+     * When `false`, it stays at its minimum width.
+     * Unset: `true` for `drawer`, `false` for `menu` and `modal`.
+     *
+     * @default undefined
+     */
+    fill?: boolean;
     /**
      * Hides month navigation / panel.
      *
@@ -158,10 +183,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 +209,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;