@bridge-ui/vue 0.0.11 → 0.1.1

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 },
@@ -38,7 +40,6 @@ var b = /*@__PURE__*/ u({
 		showSeconds: { type: Boolean },
 		startOfWeek: {},
 		timeZone: {},
-		tokens: {},
 		value: {}
 	},
 	emits: [
@@ -47,7 +48,7 @@ var b = /*@__PURE__*/ u({
 		"change"
 	],
 	setup(u, { emit: b }) {
-		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, timeTokens: E, handleApply: D, cancelLabel: O, contentBind: k, displayValue: A, handleCancel: j, calendarBind: M, timeFillBind: N, timeSizerBind: P, timePanelBind: F, calendarTokens: I, applyButtonProps: L, cancelButtonProps: R, handlePanelChange: z, handleCalendarChange: B, timePanelCustomProps: V } = n(u, {
+		let { merged: x, rootBind: S, footerBind: C, showFooter: w, applyLabel: T, handleApply: E, cancelLabel: D, contentBind: O, displayValue: k, handleCancel: A, calendarBind: j, timeFillBind: M, timeSizerBind: N, timePanelBind: P, applyButtonProps: F, cancelButtonProps: I, handlePanelChange: L, handleCalendarChange: R, timePanelCustomProps: z } = n(u, {
 			ampm: !1,
 			interval: 1,
 			rounded: "md",
@@ -56,10 +57,11 @@ var b = /*@__PURE__*/ u({
 			showSeconds: !1,
 			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, {
+		return (n, u) => (h(), o("div", m(d(v(S))), [s("div", { class: p(v(O)) }, [s("div", { class: p(v(j)) }, [l(t, {
+			fill: v(x).fill,
 			color: v(x).color,
-			value: v(A),
-			tokens: v(I),
+			value: v(k),
+			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-date": v(x).maxDate,
 			"min-date": v(x).minDate,
@@ -68,7 +70,7 @@ var b = /*@__PURE__*/ u({
 			"time-zone": v(x).timeZone,
 			"hide-years": v(x).hideYears,
 			"hide-months": v(x).hideMonths,
-			onChange: v(B),
+			onChange: v(R),
 			"default-view": v(x).defaultView,
 			"start-of-week": v(x).startOfWeek,
 			"disable-dates": v(x).disableDates,
@@ -80,9 +82,10 @@ var b = /*@__PURE__*/ u({
 			day: y((e) => [g(n.$slots, "day", m(d(e)), () => [c(_(e.label), 1)])]),
 			_: 3
 		}, 8, [
+			"fill",
 			"color",
 			"value",
-			"tokens",
+			"error",
 			"rounded",
 			"max-date",
 			"min-date",
@@ -99,9 +102,9 @@ var b = /*@__PURE__*/ u({
 			"disable-years",
 			"disable-months",
 			"hide-outside-days"
-		])], 2), s("div", { class: p(v(F)) }, [s("div", {
+		])], 2), s("div", { class: p(v(P)) }, [s("div", {
 			"aria-hidden": "true",
-			class: p(v(P))
+			class: p(v(N))
 		}, [
 			s("div", { class: p(v(r)) }, null, 2),
 			s("div", { class: p(v(r)) }, null, 2),
@@ -113,11 +116,12 @@ var b = /*@__PURE__*/ u({
 				key: 1,
 				class: p(v(r))
 			}, null, 2)) : a("", !0)
-		], 2), s("div", { class: p(v(N)) }, [l(v(i), {
+		], 2), s("div", { class: p(v(M)) }, [l(v(i), {
 			ampm: v(x).ampm,
-			tokens: v(E),
+			fill: v(x).fill,
 			color: v(x).color,
-			value: v(A),
+			value: v(k),
+			error: v(x).error,
 			rounded: v(x).rounded,
 			"max-time": v(x).maxTime,
 			"min-time": v(x).minTime,
@@ -125,15 +129,16 @@ var b = /*@__PURE__*/ u({
 			interval: v(x).interval,
 			"read-only": v(x).readOnly,
 			"time-zone": v(x).timeZone,
-			onChange: v(z),
+			onChange: v(L),
 			"show-seconds": v(x).showSeconds,
 			"disable-times": v(x).disableTimes,
-			"custom-props": v(V)
+			"custom-props": v(z)
 		}, null, 8, [
 			"ampm",
-			"tokens",
+			"fill",
 			"color",
 			"value",
+			"error",
 			"rounded",
 			"max-time",
 			"min-time",
@@ -146,16 +151,16 @@ var b = /*@__PURE__*/ u({
 			"disable-times",
 			"custom-props"
 		])], 2)], 2)], 2), v(w) ? (h(), o("div", m(f({ key: 0 }, v(C))), [g(n.$slots, "footer", {
-			apply: v(D),
-			cancel: v(j)
+			apply: v(E),
+			cancel: v(A)
 		}, () => [l(v(e), f({
 			variant: "flat",
 			color: "secondary",
-			onClick: v(j)
-		}, v(R)), {
-			default: y(() => [c(_(v(O)), 1)]),
+			onClick: v(A)
+		}, v(I)), {
+			default: y(() => [c(_(v(D)), 1)]),
 			_: 1
-		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(L), { onClick: v(D) }), {
+		}, 16, ["onClick"]), l(v(e), f({ color: "primary" }, v(F), { onClick: v(E) }), {
 			default: y(() => [c(_(v(T)), 1)]),
 			_: 1
 		}, 16, ["onClick"])])], 16)) : a("", !0)], 16));

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

@@ -9,13 +9,9 @@ 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" | "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<{
-        color: Record<string, Partial<import('@bridge-ui/core/Tokens').TimeColorItem>> | undefined;
-        rounded: Record<string, string> | undefined;
-    }>;
     handleApply: () => void;
     contentBind: import('vue').ComputedRef<string>;
     displayValue: import('vue').ComputedRef<Date | null>;
@@ -24,11 +20,6 @@ export declare function useDateTimePicker(props: MaybeRefOrGetter<DateTimePicker
     timeFillBind: import('vue').ComputedRef<string>;
     timeSizerBind: import('vue').ComputedRef<string>;
     timePanelBind: import('vue').ComputedRef<string>;
-    calendarTokens: import('vue').ComputedRef<{
-        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;
-    }>;
     handlePanelChange: (next: null | TimeValue) => void;
     handleCalendarChange: (next: DatePickerModel) => void;
     timePanelCustomProps: 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.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,
@@ -34,74 +34,67 @@ function C(C, w, T) {
 	f(() => [V.value, M.value.showFooter], ([e, t]) => {
 		t && (H.value = e);
 	});
-	let U = s(() => M.value.showFooter ? H.value : V.value), W = s(() => ({
-		day: M.value.tokens?.calendar?.day ?? M.value.tokens?.day,
-		color: M.value.tokens?.calendar?.color ?? M.value.tokens?.color,
-		rounded: M.value.tokens?.calendar?.rounded ?? M.value.tokens?.rounded
-	})), G = s(() => ({
-		color: M.value.tokens?.time?.color ?? M.value.tokens?.color,
-		rounded: M.value.tokens?.time?.rounded ?? M.value.tokens?.rounded
-	})), K = (e) => {
+	let U = s(() => M.value.showFooter ? H.value : V.value), W = (e) => {
 		z.value || (B.value = e), T("change", e);
-	}, q = (e) => {
+	}, G = (e) => {
 		if (M.value.showFooter) {
 			H.value = e;
 			return;
 		}
-		K(e);
-	}, J = (e) => {
+		W(e);
+	}, K = (e) => {
 		if (h(e) || m(e) || v(e)) {
-			q(null);
+			G(null);
 			return;
 		}
 		let t = _(e, U.value ?? O.value.now(R.value), O.value, R.value);
-		q(t);
-	}, Y = (e) => {
+		G(t);
+	}, q = (e) => {
 		if (h(e)) {
-			q(null);
+			G(null);
 			return;
 		}
 		let t = _(U.value ?? O.value.now(R.value), e, O.value, R.value);
-		q(t);
-	}, X = () => {
-		K(H.value), T("apply"), D.apply();
-	}, Z = () => {
+		G(t);
+	}, J = () => {
+		W(H.value), T("apply"), D.apply();
+	}, Y = () => {
 		H.value = V.value, T("cancel"), D.cancel();
-	}, Q = s(() => {
+	}, X = 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
 		}));
-	}), $ = s(() => b({ "flex w-full flex-row items-stretch": !0 })), ee = s(() => b({
+	}), Z = s(() => b({ "flex w-full flex-row items-stretch": !0 })), Q = s(() => b({
 		"min-w-0 flex-1": !0,
 		[I.value.calendar ?? ""]: !0
-	})), te = s(() => r(P.value?.footer, {}, b({
+	})), $ = s(() => r(P.value?.footer, {}, b({
 		"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,
 		[I.value.footer ?? ""]: !0
-	}))), ne = s(() => b({
+	}))), ee = s(() => b({
 		"relative isolate shrink-0 self-stretch overflow-hidden border-l border-dark-100 dark:border-dark-800": !0,
 		[I.value.time ?? ""]: !0
-	})), re = s(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ie = s(() => b({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), ae = s(() => b({ "absolute inset-0 flex w-full px-2.5": !0 }));
+	})), te = s(() => ({ root: { class: "h-full max-h-full overflow-hidden" } })), ne = s(() => b({ "invisible flex h-px w-fit gap-2 overflow-hidden px-2.5": !0 })), re = s(() => b({ "absolute inset-0 flex w-full px-2.5": !0 }));
 	return {
 		merged: M,
-		rootBind: Q,
-		footerBind: te,
+		rootBind: X,
+		footerBind: $,
 		showFooter: s(() => !!M.value.showFooter),
-		timeTokens: G,
-		handleApply: X,
-		contentBind: $,
+		handleApply: J,
+		contentBind: Z,
 		displayValue: U,
-		handleCancel: Z,
-		calendarBind: ee,
-		timeFillBind: ae,
-		timeSizerBind: ie,
-		timePanelBind: ne,
-		calendarTokens: W,
-		handlePanelChange: Y,
-		handleCalendarChange: J,
-		timePanelCustomProps: re,
+		handleCancel: Y,
+		calendarBind: Q,
+		timeFillBind: re,
+		timeSizerBind: ne,
+		timePanelBind: ee,
+		handlePanelChange: q,
+		handleCalendarChange: K,
+		timePanelCustomProps: te,
 		applyLabel: s(() => k("Apply")),
 		cancelLabel: s(() => k("Cancel")),
 		applyButtonProps: s(() => P.value?.applyButton),

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

@@ -1,6 +1,6 @@
 import { HTMLAttributes, Slot } from 'vue';
 import { DisableDatesInput, DisableTimesInput, FieldOverlayFooterSlotProps, StartOfWeek } from '@bridge-ui/core/Domain';
-import { CalendarColor, CalendarColorItem, CalendarDay, CalendarRounded, TimeColorItem } from '@bridge-ui/core/Tokens';
+import { CalendarColor, CalendarRounded } from '@bridge-ui/core/Tokens';
 import { MergeHtmlProps, MergeProps } from '@bridge-ui/core/Utils';
 import { ButtonProps } from '../Button/button.types';
 import { CalendarView } from '../Calendar/calendar.types';
@@ -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.
      *
@@ -229,12 +242,6 @@ export interface DateTimePickerOwnProps {
      * @default undefined
      */
     timeZone?: string;
-    /**
-     * Token overrides.
-     *
-     * @default undefined
-     */
-    tokens?: DateTimePickerTokens;
     /**
      * Controlled value.
      *
@@ -257,33 +264,4 @@ export interface DateTimePickerSlots {
      */
     footer?: Slot<FieldOverlayFooterSlotProps>;
 }
-export interface DateTimePickerTokens {
-    /**
-     * Nested calendar token overrides.
-     */
-    calendar?: {
-        color?: Record<string, Partial<CalendarColorItem>>;
-        day?: Partial<CalendarDay>;
-        rounded?: Record<string, string>;
-    };
-    /**
-     * Color token map overrides for the calendar (and time when `time` is unset).
-     */
-    color?: Record<string, Partial<CalendarColorItem>>;
-    /**
-     * Day chrome overrides.
-     */
-    day?: Partial<CalendarDay>;
-    /**
-     * Border radius token map overrides.
-     */
-    rounded?: Record<string, string>;
-    /**
-     * Nested time panel token overrides.
-     */
-    time?: {
-        color?: Record<string, Partial<TimeColorItem>>;
-        rounded?: Record<string, string>;
-    };
-}
 export type DateTimePickerProps = MergeHtmlProps<DateTimePickerOwnProps, HTMLAttributes>;

package/dist/Components/DateTimePicker/index.d.ts

@@ -1,3 +1,3 @@
 export { useDateTimePicker } from './composables/useDateTimePicker';
-export type { DateTimePickerClasses, DateTimePickerColorOverrides, DateTimePickerCustomProps, DateTimePickerEmits, DateTimePickerOwnProps, DateTimePickerProps, DateTimePickerRoundedOverrides, DateTimePickerSlots, DateTimePickerTokens, } from './dateTimePicker.types';
+export type { DateTimePickerClasses, DateTimePickerColorOverrides, DateTimePickerCustomProps, DateTimePickerEmits, DateTimePickerOwnProps, DateTimePickerProps, DateTimePickerRoundedOverrides, DateTimePickerSlots, } from './dateTimePicker.types';
 export { default as DateTimePicker } from './DateTimePicker.vue';

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>;