@bridge-ui/vue 0.0.11 → 0.1.0

package/dist/Components/DateTimeField/composables/useDateTimeField.js

@@ -1,120 +1,99 @@
 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, useFieldShowFooter as o } from "../../../Utils/index.js";
-import { formFieldBridgeKeys as s, useFormField as c } from "../../FormField/composables/useFormField.js";
-import { computed as l, ref as u, useAttrs as d, useSlots as f } from "vue";
-import { get as p, isNil as m, omit as h } from "es-toolkit/compat";
-import { isFieldOverlayDialog as g, resolveFieldOverlay as _ } from "@bridge-ui/core/Domain";
-import { listboxColorProps as v } from "@bridge-ui/core/Tokens";
-import { cn as y, splitComponentProps as b } from "@bridge-ui/core/Utils";
+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 { resolveFieldOverlay as _, resolveFieldPickerClassName as v } from "@bridge-ui/core/Domain";
+import { listboxColorProps as y } from "@bridge-ui/core/Tokens";
+import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimeField/composables/useDateTimeField.ts
-var x = [
-	"ampm",
-	"classes",
-	"maxDate",
-	"maxTime",
-	"minDate",
-	"minTime",
-	"overlay",
-	"interval",
-	"timeZone",
-	"clearable",
-	"hideYears",
-	"hideMonths",
-	"showFooter",
-	"customProps",
-	"defaultView",
-	"showSeconds",
-	"startOfWeek",
-	"defaultValue",
-	"disableDates",
-	"disableTimes",
-	"disableYears",
-	"hideWeekdays",
-	"disableMonths",
-	"hideOutsideDays"
-];
-function S(e, t, n, r, i) {
-	return m(e) ? "" : `${t.format(e, n)} ${t.formatTime(e, n, {
+var S = /* @__PURE__ */ "ampm.fill.classes.maxDate.maxTime.minDate.minTime.overlay.editable.interval.timeZone.clearable.hideYears.hideMonths.showFooter.customProps.defaultView.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+function ee(e, t, n, r, i) {
+	return h(e) ? "" : `${t.format(e, n)} ${t.formatTime(e, n, {
 		ampm: r,
 		showSeconds: i
 	})}`.trim();
 }
 function C(C, w, T) {
-	let E = d(), D = f(), O = e(), k = r(), A = t(), j = u(!1), M = u(null), N = l(() => b({
+	let E = f(), D = p(), O = e(), k = r(), A = t(), j = d(!1), M = d(null), N = u(() => x({
 		props: {
 			...E,
 			...C
 		},
-		bridgeKeys: x
-	})), P = l(() => N.value.componentProps), F = l(() => A(P.value.timeZone)), I = l(() => w.value ?? null), L = l(() => P.value.clearable !== !1), R = l(() => !m(I.value)), z = l(() => _(P.value.overlay, k.mobile)), B = l(() => g(z.value) ? "w-full shadow-none" : void 0), V = (e) => {
+		bridgeKeys: S
+	})), P = u(() => N.value.componentProps), F = u(() => A(P.value.timeZone)), I = u(() => w.value ?? null), L = u(() => P.value.clearable !== !1), R = u(() => !h(I.value)), z = u(() => _(P.value.overlay, k.mobile)), B = s({
+		overlay: z,
+		componentName: "DateTimeField",
+		fill: () => P.value.fill
+	}), V = u(() => v(B.value, z.value)), H = (e) => {
 		M.value = e instanceof HTMLElement ? e : null;
 	};
-	function H(e) {
+	function U(e) {
 		j.value !== e && (j.value = e, T(e ? "open" : "close"));
 	}
-	let ee = l(() => h(N.value.inheritedAttrs, ["class"])), U = l(() => {
-		let e = b({
-			bridgeKeys: s,
-			props: ee.value
-		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimePicker: o, ...c } = P.value.customProps ?? {};
+	let W = u(() => g(N.value.inheritedAttrs, ["class"])), G = u(() => {
+		let e = x({
+			bridgeKeys: c,
+			props: W.value
+		}).componentProps, t = e.endIcon ?? (n(D, "end") ? void 0 : "calendar"), { menu: r, clearIcon: a, dateTimePicker: o, ...s } = P.value.customProps ?? {};
 		return {
 			...e,
 			endIcon: t,
 			classes: P.value.classes,
 			customProps: {
-				...c,
-				container: i(c.container, {}, {
-					ref: V,
-					class: y({ "cursor-pointer": !C.disabled && !C.readonly }),
+				...s,
+				container: i(s.container, {}, {
+					ref: H,
+					class: b({ "cursor-pointer": !C.disabled && !C.readonly }),
 					onClick: (e) => {
-						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || H(!0);
+						C.disabled || C.readonly || e.target.closest("[data-field-clear]") || U(!0);
 					}
 				})
 			}
 		};
-	}), W = c(() => U.value, {
+	}), K = l(() => G.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateTimeField" }), G = l(() => R.value && L.value && !C.readonly && !W.isDisabled.value), K = l(() => S(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
-	function q(e) {
+	}, { componentName: "DateTimeField" }), q = u(() => R.value && L.value && !C.readonly && !K.isDisabled.value), J = u(() => ee(I.value, O.value, F.value, P.value.ampm, P.value.showSeconds));
+	function Y(e) {
 		w.value = e, T("change", e);
 	}
-	let J = o({
+	let X = o({
 		overlay: z,
 		componentName: "DateTimeField",
 		showFooter: () => P.value.showFooter
 	});
-	function Y(e) {
-		if (q(e), J.value) {
+	function Z(e) {
+		if (Y(e), X.value) {
 			T("apply");
 			return;
 		}
-		H(!1);
+		U(!1);
 	}
-	function X() {
+	function Q() {
 		T("cancel");
 	}
-	function Z(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (q(null), T("clear"), H(!1));
+	function $(e) {
+		e?.preventDefault(), e?.stopPropagation(), !(C.disabled || C.readonly) && (Y(null), T("clear"), U(!1));
 	}
-	function Q(e) {
+	function te(e) {
 		e.preventDefault();
 	}
-	let $ = l(() => i({
-		readonly: !0,
-		value: K.value,
+	let ne = u(() => i({
+		value: J.value,
+		readonly: !P.value.editable || K.inputBind.value.readonly,
 		onFocus: (e) => {
-			W.inputBind.value.onFocus?.(e), H(!0);
+			K.inputBind.value.onFocus?.(e), U(!0);
 		},
 		onKeydown: (e) => {
-			W.inputBind.value.onKeydown?.(e), e.key === "Escape" && H(!1);
+			K.inputBind.value.onKeydown?.(e), e.key === "Escape" && U(!1);
 		}
-	}, void 0, W.inputBind.value)), te = l(() => P.value.overlay), ne = l(() => ({
+	}, void 0, K.inputBind.value)), re = u(() => P.value.overlay), ie = u(() => ({
 		modal: P.value.customProps?.modal,
 		drawer: P.value.customProps?.drawer,
 		menu: {
@@ -122,38 +101,39 @@ function C(C, w, T) {
 			placement: "bottom-start",
 			...P.value.customProps?.menu
 		}
-	})), re = l(() => P.value.customProps?.dateTimePicker), ie = l(() => a(W.merged.value.size)), ae = l(() => p(v, [W.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
+	})), ae = u(() => P.value.customProps?.dateTimePicker), oe = u(() => a(K.merged.value.size)), se = u(() => m(y, [K.merged.value.color ?? "primary", "clear"]) ?? "text-dark-400 hover:text-dark-600 dark:text-dark-500 dark:hover:text-dark-300");
 	return {
 		open: j,
-		overlay: te,
+		fill: B,
+		overlay: re,
 		hasValue: R,
-		formField: W,
-		inputBind: $,
+		formField: K,
+		inputBind: ne,
 		clearable: L,
-		clearBind: l(() => i({}, {}, {
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: Q,
-			class: y({
+			onMousedown: te,
+			class: b({
 				"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-sm transition-colors duration-150": !0,
-				[ae.value]: !0,
+				[se.value]: !0,
 				[P.value.classes?.clear ?? ""]: !0
 			})
 		})),
-		clearValue: Z,
+		clearValue: $,
 		modelValue: I,
-		showFooter: J,
-		pickerClass: B,
+		showFooter: X,
+		pickerClass: V,
 		dateTimeOnly: P,
 		containerRef: M,
-		clearIconSize: ie,
-		showClearIcon: G,
-		handleOpenChange: H,
-		handlePickerChange: Y,
-		handlePickerCancel: X,
-		overlayCustomProps: ne,
-		dateTimePickerCustomProps: re
+		clearIconSize: oe,
+		showClearIcon: q,
+		handleOpenChange: U,
+		handlePickerChange: Z,
+		handlePickerCancel: Q,
+		overlayCustomProps: ie,
+		dateTimePickerCustomProps: ae
 	};
 }
 //#endregion

package/dist/Components/DateTimeField/dateTimeField.types.d.ts

@@ -134,6 +134,22 @@ export interface DateTimeFieldOwnProps 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.
      *

package/dist/Components/DateTimePicker/DateTimePicker.vue_vue_type_script_setup_true_lang.js

@@ -20,6 +20,8 @@ var b = /*@__PURE__*/ u({
 		disableMonths: {},
 		disableTimes: {},
 		disableYears: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -57,8 +59,10 @@ var b = /*@__PURE__*/ u({
 			defaultView: "date"
 		}, b);
 		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(k)) }, [s("div", { class: p(v(M)) }, [l(t, {
+			fill: v(x).fill,
 			color: v(x).color,
 			value: v(A),
+			error: v(x).error,
 			tokens: v(I),
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
@@ -80,8 +84,10 @@ var b = /*@__PURE__*/ u({
 			day: y((e) => [g(n.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
 			_: 3
 		}, 8, [
+			"fill",
 			"color",
 			"value",
+			"error",
 			"tokens",
 			"rounded",
 			"max-date",
@@ -115,9 +121,11 @@ var b = /*@__PURE__*/ u({
 			}, null, 2)) : a("", !0)
 		], 2), s("div", { class: p(v(N)) }, [l(v(i), {
 			ampm: v(x).ampm,
+			fill: v(x).fill,
 			tokens: v(E),
 			color: v(x).color,
 			value: v(A),
+			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-time": v(x).maxTime,
 			"min-time": v(x).minTime,
@@ -131,9 +139,11 @@ var b = /*@__PURE__*/ u({
 			"custom-props": v(V)
 		}, null, 8, [
 			"ampm",
+			"fill",
 			"tokens",
 			"color",
 			"value",
+			"error",
 			"rounded",
 			"max-time",
 			"min-time",

package/dist/Components/DateTimePicker/composables/useDateTimePicker.d.ts

@@ -9,7 +9,7 @@ type DateTimePickerMerged = MergeLibDefaults<DateTimePickerOwnProps, DateTimePic
  */
 export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePickerOwnProps>, libDefaults: DateTimePickerLibDefaults, emit: SetupContext<DateTimePickerEmits>["emit"]): {
     merged: import('vue').ComputedRef<DateTimePickerMerged>;
-    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "color" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateTimePickerOwnProps, "error" | "color" | "fill" | "value" | "classes" | "tokens" | "showFooter" | "customProps" | "rounded" | "disabled" | "defaultValue" | "readOnly" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>>>;
     footerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
     showFooter: import('vue').ComputedRef<boolean>;
     timeTokens: import('vue').ComputedRef<{

package/dist/Components/DateTimePicker/composables/useDateTimePicker.js

@@ -8,7 +8,7 @@ import { combineDateAndTime as _, isDateRangeValue as v } from "@bridge-ui/core/
 import { menuRoundedProps as y } from "@bridge-ui/core/Tokens";
 import { cn as b, splitComponentProps as x } from "@bridge-ui/core/Utils";
 //#region src/Components/DateTimePicker/composables/useDateTimePicker.ts
-var S = /* @__PURE__ */ "ampm.color.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.defaultView.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
+var S = /* @__PURE__ */ "ampm.fill.color.error.value.tokens.classes.maxDate.maxTime.minDate.minTime.rounded.disabled.interval.readOnly.timeZone.hideYears.hideMonths.showFooter.customProps.defaultView.showSeconds.startOfWeek.defaultValue.disableDates.disableTimes.disableYears.hideWeekdays.disableMonths.hideOutsideDays".split(".");
 function C(C, w, T) {
 	let E = d(), D = c(o, {
 		apply: () => void 0,
@@ -70,7 +70,9 @@ function C(C, w, T) {
 	}, Q = s(() => {
 		let e = p(y, M.value.rounded ?? "md");
 		return r(P.value?.root, F.value, b({
-			"flex w-fit flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+			"w-full": M.value.fill,
+			"w-fit": !M.value.fill,
 			[e]: !0,
 			[I.value.root ?? ""]: !0
 		}));

package/dist/Components/DateTimePicker/dateTimePicker.types.d.ts

@@ -132,6 +132,19 @@ export interface DateTimePickerOwnProps {
      * @default undefined
      */
     disableYears?: number[];
+    /**
+     * When `true`, applies the error color palette to tiles.
+     *
+     * @default false
+     */
+    error?: boolean;
+    /**
+     * When `true`, fills the container width.
+     * When `false` or unset, stays at the minimum width.
+     *
+     * @default false
+     */
+    fill?: boolean;
     /**
      * Hides month navigation / panel.
      *

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

@@ -23,6 +23,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onOpen?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: DateRangeValue | null | undefined) => any) | undefined;
 }>, {
+    fill: boolean;
     showFooter: boolean;
     showErrorIcon: boolean;
     clearable: boolean;

package/dist/Components/DateTimeRangeField/DateTimeRangeField.vue_vue_type_script_setup_true_lang.js

@@ -25,6 +25,11 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		disableMonths: {},
 		disableTimes: {},
 		disableYears: {},
+		editable: { type: Boolean },
+		fill: {
+			type: Boolean,
+			default: void 0
+		},
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -85,55 +90,57 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				F.value = e, z.value = e;
 			},
 			get: () => M(F.value) ? z.value : F.value
-		}), { open: V, overlay: ee, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, orientation: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimeRangePickerCustomProps: ie } = o(I, B, L);
-		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(H) }, p({
-			default: k(() => [f("div", N, [f("input", x(_(D(U))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(W), {
-				onClick: o[0] ||= (...e) => D(G) && D(G)(...e),
+		}), { open: V, fill: ee, overlay: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, orientation: Y, pickerClass: X, dateTimeOnly: Z, clearIconSize: Q, showClearIcon: $, handleOpenChange: te, handlePickerChange: ne, handlePickerCancel: re, overlayCustomProps: ie, dateTimeRangePickerCustomProps: ae } = o(I, B, L);
+		return (e, o) => (S(), d(c, null, [h(D(i), { field: D(U) }, p({
+			default: k(() => [f("div", N, [f("input", x(_(D(W))), null, 16), D($) ? (S(), d("span", y({ key: 0 }, D(G), {
+				onClick: o[0] ||= (...e) => D(K) && D(K)(...e),
 				"aria-label": D(R)("Clear"),
-				onKeydown: [o[1] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["space"])]
+				onKeydown: [o[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
 			}), [h(D(n), y({
 				icon: "clear",
-				size: D(Z)
+				size: D(Q)
 			}, 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(_(n || {})))])
 		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(ee),
+			overlay: D(H),
 			"model-value": D(V),
-			"custom-props": D(re),
-			"onUpdate:modelValue": D($)
+			"custom-props": D(ie),
+			"onUpdate:modelValue": D(te)
 		}, {
 			default: k(() => [h(D(s), {
-				value: D(K),
-				class: b(D(Y)),
-				ampm: D(X).ampm,
-				"show-footer": D(q),
-				orientation: D(J),
+				fill: D(ee),
+				value: D(q),
+				class: b(D(X)),
+				ampm: D(Z).ampm,
+				"show-footer": D(J),
+				orientation: D(Y),
 				"read-only": I.readonly,
-				"max-date": D(X).maxDate,
-				"min-date": D(X).minDate,
-				"max-time": D(X).maxTime,
-				"min-time": D(X).minTime,
-				onChange: D(te),
-				onCancel: D(ne),
-				interval: D(X).interval,
-				"time-zone": D(X).timeZone,
-				"hide-years": D(X).hideYears,
-				color: D(H).merged.value.color,
-				"hide-months": D(X).hideMonths,
-				disabled: D(H).isDisabled.value,
-				"show-seconds": D(X).showSeconds,
-				"start-of-week": D(X).startOfWeek,
-				rounded: D(H).merged.value.rounded,
-				"disable-dates": D(X).disableDates,
-				"hide-weekdays": D(X).hideWeekdays,
-				"disable-times": D(X).disableTimes,
-				"disable-years": D(X).disableYears,
-				"disable-months": D(X).disableMonths,
-				"custom-props": D(ie),
-				"hide-outside-days": D(X).hideOutsideDays
+				"max-date": D(Z).maxDate,
+				"min-date": D(Z).minDate,
+				"max-time": D(Z).maxTime,
+				"min-time": D(Z).minTime,
+				onChange: D(ne),
+				onCancel: D(re),
+				interval: D(Z).interval,
+				"time-zone": D(Z).timeZone,
+				"hide-years": D(Z).hideYears,
+				error: D(U).invalidated.value,
+				color: D(U).merged.value.color,
+				"hide-months": D(Z).hideMonths,
+				disabled: D(U).isDisabled.value,
+				"show-seconds": D(Z).showSeconds,
+				"start-of-week": D(Z).startOfWeek,
+				rounded: D(U).merged.value.rounded,
+				"disable-dates": D(Z).disableDates,
+				"hide-weekdays": D(Z).hideWeekdays,
+				"disable-times": D(Z).disableTimes,
+				"disable-years": D(Z).disableYears,
+				"disable-months": D(Z).disableMonths,
+				"custom-props": D(ae),
+				"hide-outside-days": D(Z).hideOutsideDays
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -141,7 +148,7 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				name: "footer",
 				fn: k((t) => [T(e.$slots, "footer", x(_(t)))]),
 				key: "0"
-			} : void 0]), 1032, /* @__PURE__ */ "value.class.ampm.show-footer.orientation.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.start-of-week.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.custom-props.hide-outside-days".split("."))]),
+			} : void 0]), 1032, /* @__PURE__ */ "fill.value.class.ampm.show-footer.orientation.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.error.color.hide-months.disabled.show-seconds.start-of-week.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.custom-props.hide-outside-days".split("."))]),
 			_: 3
 		}, 8, [
 			"overlay",

package/dist/Components/DateTimeRangeField/composables/useDateTimeRangeField.d.ts

@@ -7,6 +7,7 @@ import { FormFieldOwnProps } from '../../FormField/formField.types';
  */
 export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps, model: Ref<null | undefined | DateRangeValue>, emit: SetupContext<DateTimeRangeFieldEmits>["emit"]): {
     open: Ref<boolean, boolean>;
+    fill: import('vue').ComputedRef<boolean>;
     overlay: import('vue').ComputedRef<import('@bridge-ui/core/Domain').FieldOverlayMode | undefined>;
     hasValue: import('vue').ComputedRef<boolean>;
     formField: {
@@ -685,8 +686,8 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         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>>;
@@ -702,8 +703,8 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
     modelValue: import('vue').ComputedRef<DateRangeValue | null>;
     showFooter: import('vue').ComputedRef<boolean>;
     orientation: import('vue').ComputedRef<import('@bridge-ui/core/Domain').RangePickerOrientation>;
-    pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeRangeFieldOwnProps & Record<string, unknown>, "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    pickerClass: import('vue').ComputedRef<string | undefined>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeRangeFieldOwnProps & Record<string, unknown>, "fill" | "orientation" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "hideMonths" | "hideYears" | "editable" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;