@bridge-ui/vue 0.2.0 → 0.4.0

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

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 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 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";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useDateRangeField as s } from "./composables/useDateRangeField.js";
+import c from "../DateRangePicker/DateRangePicker.js";
+import { Fragment 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";
 //#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__*/ g({
+var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateRangeField",
 	props: /*@__PURE__*/ v({
@@ -79,56 +79,51 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	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, 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: [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({
+		let P = e(), F = v, I = O(g, "modelValue"), L = g, R = C(L.defaultValue ?? null), z = n(I, R), { open: ee, fill: B, overlay: V, dateOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, orientation: Y, pickerClass: X, clearIconSize: Z, showClearIcon: Q, handleOpenChange: $, handlePickerChange: te, handlePickerCancel: ne, overlayCustomProps: re, dateRangePickerCustomProps: ie } = s(L, z, F);
+		return (e, n) => (S(), d(l, null, [h(D(a), { field: D(U) }, p({
+			default: k(() => [f("div", M, [f("input", x(_(D(W))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(G), {
+				onClick: n[0] ||= (...e) => D(K) && D(K)(...e),
+				"aria-label": D(P)("Clear"),
+				onKeydown: [n[1] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
+			}), [h(D(r), y({
 				icon: "clear",
-				size: D(Q)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+				size: D(Z)
+			}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
 			_: 2
-		}, [w(D(t)(D(r), e.$slots), (t) => ({
+		}, [w(D(t)(D(i), e.$slots), (t) => ({
 			name: t,
 			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
-		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(H),
-			"model-value": D(V),
-			"custom-props": D(ie),
-			"onUpdate:modelValue": D(te)
+		}))]), 1032, ["field"]), h(D(o), {
+			overlay: D(V),
+			"model-value": D(ee),
+			"custom-props": D(re),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: k(() => [h(s, {
-				fill: D(ee),
-				value: D(J),
-				class: b(D(Z)),
-				"show-footer": D(Y),
-				orientation: D(X),
-				"read-only": I.readonly,
-				"max-date": D(U).maxDate,
-				"min-date": D(U).minDate,
-				"time-zone": D(U).timeZone,
-				onChange: D(ne),
-				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,
-				"disable-dates": D(U).disableDates,
-				"hide-weekdays": D(U).hideWeekdays,
-				"disable-years": D(U).disableYears,
-				"disable-months": D(U).disableMonths,
-				rounded: D(W).merged.value.rounded,
-				"custom-props": D(ae),
-				"hide-outside-days": D(U).hideOutsideDays
+			default: k(() => [h(c, {
+				fill: D(B),
+				value: D(q),
+				class: b(D(X)),
+				"show-footer": D(J),
+				orientation: D(Y),
+				"read-only": L.readonly,
+				"max-date": D(H).maxDate,
+				"min-date": D(H).minDate,
+				"time-zone": D(H).timeZone,
+				onChange: D(te),
+				onCancel: D(ne),
+				"hide-years": D(H).hideYears,
+				"hide-months": D(H).hideMonths,
+				error: D(U).invalidated.value,
+				color: D(U).merged.value.color,
+				"start-of-week": D(H).startOfWeek,
+				disabled: D(U).isDisabled.value,
+				"disable-dates": D(H).disableDates,
+				"hide-weekdays": D(H).hideWeekdays,
+				"disable-years": D(H).disableYears,
+				"disable-months": D(H).disableMonths,
+				rounded: D(U).merged.value.rounded,
+				"custom-props": D(ie),
+				"hide-outside-days": D(H).hideOutsideDays
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -172,4 +167,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };

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

@@ -178,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" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -448,6 +448,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
         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/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
@@ -720,6 +721,7 @@ export declare function useDateRangeField(props: DateRangeFieldOwnProps, model:
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

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

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 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 a from "../FieldOverlay/FieldOverlay.js";
-import { useDateTimeField as o } from "./composables/useDateTimeField.js";
-import s from "../DateTimePicker/DateTimePicker.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";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeField as s } from "./composables/useDateTimeField.js";
+import c from "../DateTimePicker/DateTimePicker.js";
+import { Fragment 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";
 //#region src/Components/DateTimeField/DateTimeField.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__*/ g({
+var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateTimeField",
 	props: /*@__PURE__*/ v({
@@ -85,62 +85,57 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	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, 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),
-				"aria-label": D(R)("Clear"),
-				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({
+		let P = O(g, "modelValue"), F = e(), I = v, L = g, R = C(L.defaultValue ?? null), z = n(P, R), { open: ee, fill: B, overlay: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, dateTimeOnly: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: te, overlayCustomProps: ne, dateTimePickerCustomProps: re } = s(L, z, I);
+		return (e, n) => (S(), d(l, null, [h(D(a), { field: D(H) }, p({
+			default: k(() => [f("div", M, [f("input", x(_(D(U))), null, 16), D(Z) ? (S(), d("span", y({ key: 0 }, D(W), {
+				onClick: n[0] ||= (...e) => D(G) && D(G)(...e),
+				"aria-label": D(F)("Clear"),
+				onKeydown: [n[1] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["space"])]
+			}), [h(D(r), y({
 				icon: "clear",
-				size: D(Z)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+				size: D(X)
+			}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
 			_: 2
-		}, [w(D(t)(D(r), e.$slots), (t) => ({
+		}, [w(D(t)(D(i), e.$slots), (t) => ({
 			name: t,
 			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
-		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(H),
-			"model-value": D(V),
-			"custom-props": D(re),
-			"onUpdate:modelValue": D($)
+		}))]), 1032, ["field"]), h(D(o), {
+			overlay: D(V),
+			"model-value": D(ee),
+			"custom-props": D(ne),
+			"onUpdate:modelValue": D(Q)
 		}, {
-			default: k(() => [h(D(s), {
-				fill: D(ee),
-				value: D(q),
-				class: b(D(Y)),
-				ampm: D(X).ampm,
-				"show-footer": D(J),
-				"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,
-				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(ie),
-				rounded: D(U).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,
-				"hide-outside-days": D(X).hideOutsideDays
+			default: k(() => [h(D(c), {
+				fill: D(B),
+				value: D(K),
+				class: b(D(J)),
+				ampm: D(Y).ampm,
+				"show-footer": D(q),
+				"read-only": L.readonly,
+				"max-date": D(Y).maxDate,
+				"min-date": D(Y).minDate,
+				"max-time": D(Y).maxTime,
+				"min-time": D(Y).minTime,
+				onChange: D($),
+				onCancel: D(te),
+				interval: D(Y).interval,
+				"time-zone": D(Y).timeZone,
+				"hide-years": D(Y).hideYears,
+				error: D(H).invalidated.value,
+				color: D(H).merged.value.color,
+				"hide-months": D(Y).hideMonths,
+				disabled: D(H).isDisabled.value,
+				"show-seconds": D(Y).showSeconds,
+				"default-view": D(Y).defaultView,
+				"start-of-week": D(Y).startOfWeek,
+				"custom-props": D(re),
+				rounded: D(H).merged.value.rounded,
+				"disable-dates": D(Y).disableDates,
+				"hide-weekdays": D(Y).hideWeekdays,
+				"disable-times": D(Y).disableTimes,
+				"disable-years": D(Y).disableYears,
+				"disable-months": D(Y).disableMonths,
+				"hide-outside-days": D(Y).hideOutsideDays
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -159,4 +154,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };

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

@@ -179,7 +179,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -449,6 +449,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
         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/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
@@ -721,6 +722,7 @@ export declare function useDateTimeField(props: DateTimeFieldOwnProps, model: Re
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

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

@@ -1,15 +1,15 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 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 a from "../FieldOverlay/FieldOverlay.js";
-import { useDateTimeRangeField as o } from "./composables/useDateTimeRangeField.js";
-import s from "../DateTimeRangePicker/DateTimeRangePicker.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";
+import { useOptionalModel as n } from "../../Utils/useOptionalModel.js";
+import r from "../Icon/Icon.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as i } from "../FormField/formField.types.js";
+import a from "../FormField/FormField.js";
+import o from "../FieldOverlay/FieldOverlay.js";
+import { useDateTimeRangeField as s } from "./composables/useDateTimeRangeField.js";
+import c from "../DateTimeRangePicker/DateTimeRangePicker.js";
+import { Fragment 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";
 //#region src/Components/DateTimeRangeField/DateTimeRangeField.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__*/ g({
+var M = { class: "flex min-w-0 flex-1 items-center gap-1" }, N = ["aria-label"], P = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "DateTimeRangeField",
 	props: /*@__PURE__*/ v({
@@ -85,62 +85,57 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	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, 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(K) && D(K)(...e), ["prevent"]), ["enter"]), o[2] ||= A(j((...e) => D(K) && D(K)(...e), ["prevent"]), ["space"])]
-			}), [h(D(n), y({
+		let P = e(), F = O(g, "modelValue"), I = v, L = g, R = C(L.defaultValue ?? null), z = n(F, R), { open: ee, fill: B, overlay: V, 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 } = s(L, z, I);
+		return (e, n) => (S(), d(l, null, [h(D(a), { field: D(H) }, p({
+			default: k(() => [f("div", M, [f("input", x(_(D(U))), null, 16), D(Q) ? (S(), d("span", y({ key: 0 }, D(W), {
+				onClick: n[0] ||= (...e) => D(G) && D(G)(...e),
+				"aria-label": D(P)("Clear"),
+				onKeydown: [n[1] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["enter"]), n[2] ||= A(j((...e) => D(G) && D(G)(...e), ["prevent"]), ["space"])]
+			}), [h(D(r), y({
 				icon: "clear",
-				size: D(Q)
-			}, I.customProps?.clearIcon), null, 16, ["size"])], 16, P)) : u("", !0)])]),
+				size: D(Z)
+			}, L.customProps?.clearIcon), null, 16, ["size"])], 16, N)) : u("", !0)])]),
 			_: 2
-		}, [w(D(t)(D(r), e.$slots), (t) => ({
+		}, [w(D(t)(D(i), e.$slots), (t) => ({
 			name: t,
 			fn: k((n) => [T(e.$slots, t, x(_(n || {})))])
-		}))]), 1032, ["field"]), h(D(a), {
-			overlay: D(H),
-			"model-value": D(V),
-			"custom-props": D(ie),
-			"onUpdate:modelValue": D(te)
+		}))]), 1032, ["field"]), h(D(o), {
+			overlay: D(V),
+			"model-value": D(ee),
+			"custom-props": D(re),
+			"onUpdate:modelValue": D($)
 		}, {
-			default: k(() => [h(D(s), {
-				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(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
+			default: k(() => [h(D(c), {
+				fill: D(B),
+				value: D(K),
+				class: b(D(Y)),
+				ampm: D(X).ampm,
+				"show-footer": D(q),
+				orientation: D(J),
+				"read-only": L.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,
+				error: D(H).invalidated.value,
+				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
 			}, p({
 				day: k((t) => [T(e.$slots, "day", x(_(t)), () => [m(E(t.label), 1)])]),
 				_: 2
@@ -159,4 +154,4 @@ var N = { class: "flex min-w-0 flex-1 items-center gap-1" }, P = ["aria-label"],
 	}
 });
 //#endregion
-export { F as default };
+export { P as default };

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

@@ -180,7 +180,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
             dir?: string | undefined | undefined;
             draggable?: (boolean | "true" | "false") | undefined;
             enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-            enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+            enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
             hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
             inert?: (boolean | "true" | "false") | undefined;
             placeholder?: string | undefined | undefined;
@@ -450,6 +450,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
         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/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {
+            "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
             "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
         }>>;
         startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;
@@ -723,6 +724,7 @@ export declare function useDateTimeRangeField(props: DateTimeRangeFieldOwnProps,
             disableAutoFocus?: boolean;
             disableScrollLock?: boolean;
             keepMounted?: boolean;
+            matchWidth?: boolean;
             offset?: number;
             onShowChange?: (show: boolean) => void;
             persistent?: boolean;

package/dist/Components/FormField/composables/useFormField.d.ts

@@ -190,7 +190,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
         dir?: string | undefined | undefined;
         draggable?: (boolean | "true" | "false") | undefined;
         enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        enterKeyHint?: "done" | "search" | "enter" | "go" | "next" | "previous" | "send" | undefined;
+        enterKeyHint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | undefined;
         hidden?: "" | "until-found" | "hidden" | (boolean | "true" | "false") | undefined;
         inert?: (boolean | "true" | "false") | undefined;
         placeholder?: string | undefined | undefined;
@@ -460,6 +460,7 @@ export declare function useFormField(props: MaybeRefOrGetter<Omit<FormFieldOwnPr
     endSlotBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {}>>;
     invalidated: import('vue').ComputedRef<boolean>;
     containerBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", HTMLAttributes | undefined, {
+        "data-bridge-variant": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldVariant | undefined>;
         "data-bridge-rounded": NonNullable<keyof import('@bridge-ui/core/Tokens').FormFieldRounded | undefined>;
     }>>;
     startIconBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", Partial<Omit<import('../../Icon').IconProps, "icon">> | undefined, {}>>;