@bridge-ui/vue 0.0.11 → 0.1.0

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

@@ -4,9 +4,10 @@ import { DateRangeFieldEmits, DateRangeFieldOwnProps } from '../dateRangeField.t
 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>;
+    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" | "overlay" | "showFooter" | "customProps" | "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;
@@ -683,8 +684,8 @@ 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>>;
@@ -700,7 +701,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
     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>;
+    pickerClass: import('vue').ComputedRef<string | undefined>;
     containerRef: Ref<HTMLElement | null, HTMLElement | null>;
     clearIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
     showClearIcon: import('vue').ComputedRef<boolean>;

package/dist/Components/DateRangeField/composables/useDateRangeField.js

@@ -1,19 +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, 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";
+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",
@@ -29,79 +31,79 @@ var C = [
 	"disableMonths",
 	"hideOutsideDays"
 ];
-function w(e, t, n) {
-	return m(e) || !g(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(g, T, E) {
-	let D = d(), O = f(), k = e(), A = r(), j = t(), M = u(!1), N = u(null), P = l(() => S({
+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,
-			...g
+			...ee,
+			..._
 		},
-		bridgeKeys: C
-	})), 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) => {
+		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 && (M.value = e, E(e ? "open" : "close"));
+		M.value !== e && (M.value = e, D(e ? "open" : "close"));
 	}
-	let H = l(() => h(P.value.inheritedAttrs, ["class"])), ee = l(() => {
-		let e = S({
-			bridgeKeys: s,
+	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, ...c } = F.value.customProps ?? {};
+		}).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: x({ "cursor-pointer": !g.disabled && !g.readonly }),
+					class: S({ "cursor-pointer": !_.disabled && !_.readonly }),
 					onClick: (e) => {
-						g.disabled || g.readonly || e.target.closest("[data-field-clear]") || V(!0);
+						_.disabled || _.readonly || e.target.closest("[data-field-clear]") || V(!0);
 					}
 				})
 			}
 		};
-	}), U = c(() => ee.value, {
+	}), U = l(() => te.value, {
 		size: "md",
 		rounded: "md",
 		color: "primary",
 		variant: "outline",
 		showErrorIcon: !0
-	}, { componentName: "DateRangeField" }), W = l(() => w(L.value, k.value, I.value)), G = l(() => z.value && R.value && !g.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 = l(() => v(F.value.overlay, A.mobile)), J = l(() => y(F.value.orientation, q.value, A.mobile)), Y = o({
+	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 && E("apply");
+		K(e), Y.value && D("apply");
 	}
 	function Z() {
-		E("cancel");
+		D("cancel");
 	}
 	function Q(e) {
-		e?.preventDefault(), e?.stopPropagation(), !(g.disabled || g.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 = l(() => 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 = l(() => F.value.overlay), re = l(() => ({
+	}, void 0, U.inputBind.value)), ie = u(() => F.value.overlay), ae = u(() => ({
 		modal: F.value.customProps?.modal,
 		drawer: F.value.customProps?.drawer,
 		menu: {
@@ -109,23 +111,28 @@ function T(g, T, E) {
 			placement: "bottom-start",
 			...F.value.customProps?.menu
 		}
-	})), 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");
+	})), 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: l(() => i({}, {}, {
+		clearBind: u(() => i({}, {}, {
 			tabindex: 0,
 			role: "button",
 			"data-field-clear": !0,
-			onMousedown: $,
-			class: x({
+			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
 			})
 		})),
@@ -133,16 +140,16 @@ function T(g, 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

@@ -116,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.
      *

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

@@ -15,6 +15,8 @@ var g = /*@__PURE__*/ s({
 		disableDates: {},
 		disableMonths: {},
 		disableYears: {},
+		error: { type: Boolean },
+		fill: { type: Boolean },
 		hideMonths: { type: Boolean },
 		hideOutsideDays: { type: Boolean },
 		hideWeekdays: { type: Boolean },
@@ -46,7 +48,9 @@ var g = /*@__PURE__*/ s({
 			orientation: "horizontal"
 		}, g);
 		return (n, s) => (d(), i("div", u(c(m(v))), [o(t, {
+			fill: m(_).fill,
 			color: m(_).color,
+			error: m(_).error,
 			value: m(w),
 			tokens: m(E),
 			rounded: m(_).rounded,
@@ -69,7 +73,9 @@ var g = /*@__PURE__*/ s({
 			day: h((e) => [f(n.$slots, "day", u(c(e)), () => [a(p(e.label), 1)])]),
 			_: 3
 		}, 8, [
+			"fill",
 			"color",
+			"error",
 			"value",
 			"tokens",
 			"rounded",

package/dist/Components/DateRangePicker/composables/useDateRangePicker.d.ts

@@ -6,7 +6,7 @@ type DateRangePickerLibDefaults = LibDefaultsShape<DateRangePickerOwnProps, "col
 type DateRangePickerMerged = MergeLibDefaults<DateRangePickerOwnProps, DateRangePickerLibDefaults>;
 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/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">>>>;
+    rootBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, Partial<Omit<DateRangePickerOwnProps, "error" | "color" | "fill" | "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;

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

@@ -7,7 +7,9 @@ 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 _ = [
+	"fill",
 	"color",
+	"error",
 	"value",
 	"tokens",
 	"classes",
@@ -67,7 +69,9 @@ function v(v, y, b) {
 		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,
+				"flex flex-col overflow-hidden bg-white shadow-lg dark:bg-dark-900": !0,
+				"w-full": T.value.fill,
+				"w-fit": !T.value.fill,
 				[e]: !0,
 				[k.value.root ?? ""]: !0
 			}));

package/dist/Components/DateRangePicker/dateRangePicker.types.d.ts

@@ -106,6 +106,19 @@ export interface DateRangePickerOwnProps {
      * @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/DateTimeField/DateTimeField.vue.d.ts

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

package/dist/Components/DateTimeField/DateTimeField.vue_vue_type_script_setup_true_lang.js

@@ -26,6 +26,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,7 +90,7 @@ 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: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: ee, handlePickerCancel: te, overlayCustomProps: ne, dateTimePickerCustomProps: re } = o(I, B, L);
+		}), { open: V, fill: ee, overlay: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, dateTimeOnly: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateTimePickerCustomProps: ie } = 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(Q) ? (S(), d("span", y({ key: 0 }, D(G), {
 				onClick: o[0] ||= (...e) => D(K) && D(K)(...e),
@@ -102,10 +107,11 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		}))]), 1032, ["field"]), h(D(a), {
 			overlay: D(H),
 			"model-value": D(V),
-			"custom-props": D(ne),
+			"custom-props": D(re),
 			"onUpdate:modelValue": D($)
 		}, {
 			default: k(() => [h(D(s), {
+				fill: D(ee),
 				value: D(q),
 				class: b(D(Y)),
 				ampm: D(X).ampm,
@@ -115,18 +121,19 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 				"min-date": D(X).minDate,
 				"max-time": D(X).maxTime,
 				"min-time": D(X).minTime,
-				onChange: D(ee),
-				onCancel: D(te),
+				onChange: D(te),
+				onCancel: D(ne),
 				interval: D(X).interval,
 				"time-zone": D(X).timeZone,
 				"hide-years": D(X).hideYears,
+				error: D(U).invalidated.value,
 				color: D(U).merged.value.color,
 				"hide-months": D(X).hideMonths,
 				disabled: D(U).isDisabled.value,
 				"show-seconds": D(X).showSeconds,
 				"default-view": D(X).defaultView,
 				"start-of-week": D(X).startOfWeek,
-				"custom-props": D(re),
+				"custom-props": D(ie),
 				rounded: D(U).merged.value.rounded,
 				"disable-dates": D(X).disableDates,
 				"hide-weekdays": D(X).hideWeekdays,
@@ -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.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
+			} : void 0]), 1032, /* @__PURE__ */ "fill.value.class.ampm.show-footer.read-only.max-date.min-date.max-time.min-time.onChange.onCancel.interval.time-zone.hide-years.error.color.hide-months.disabled.show-seconds.default-view.start-of-week.custom-props.rounded.disable-dates.hide-weekdays.disable-times.disable-years.disable-months.hide-outside-days".split("."))]),
 			_: 3
 		}, 8, [
 			"overlay",

package/dist/Components/DateTimeField/composables/useDateTimeField.d.ts

@@ -6,6 +6,7 @@ import { FormFieldOwnProps } from '../../FormField/formField.types';
  */
 export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Ref<Date | null | undefined>, emit: SetupContext<DateTimeFieldEmits>["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: {
@@ -684,8 +685,8 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         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>>;
@@ -700,8 +701,8 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
     clearValue: (event?: Event) => void;
     modelValue: import('vue').ComputedRef<Date | null>;
     showFooter: import('vue').ComputedRef<boolean>;
-    pickerClass: import('vue').ComputedRef<"w-full shadow-none" | undefined>;
-    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "hideMonths" | "hideYears" | "ampm" | "disableTimes" | "interval" | "maxTime" | "minTime" | "showSeconds">>;
+    pickerClass: import('vue').ComputedRef<string | undefined>;
+    dateTimeOnly: import('vue').ComputedRef<Pick<DateTimeFieldOwnProps & Record<string, unknown>, "fill" | "classes" | "overlay" | "showFooter" | "customProps" | "clearable" | "defaultValue" | "disableDates" | "disableMonths" | "disableYears" | "hideOutsideDays" | "hideWeekdays" | "maxDate" | "minDate" | "startOfWeek" | "timeZone" | "defaultView" | "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>;