@bridge-ui/vue 0.3.0 → 0.4.0

package/dist/Components/TextField/TextField.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,14 @@
 import { presentSlotNames as e } from "../../Utils/slotOrProp.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as t } from "../FormField/formField.types.js";
-import n from "../FormField/FormField.js";
-import { useTextField as r } from "./composables/useTextField.js";
-import { computed as i, createBlock as a, createElementVNode as o, createSlots as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, ref as m, renderList as h, renderSlot as g, unref as _, useModel as v, vModelDynamic as y, withCtx as b, withDirectives as x } from "vue";
-import { isUndefined as S } from "es-toolkit/compat";
+import { useOptionalModel as t } from "../../Utils/useOptionalModel.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as n } from "../FormField/formField.types.js";
+import r from "../FormField/FormField.js";
+import { useTextField as i } from "./composables/useTextField.js";
+import { createBlock as a, createElementVNode as o, createSlots as s, defineComponent as c, guardReactiveProps as l, isRef as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, unref as v, useModel as y, vModelDynamic as b, withCtx as x, withDirectives as S } from "vue";
 //#region src/Components/TextField/TextField.vue?vue&type=script&setup=true&lang.ts
 var C = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "TextField",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		defaultValue: {},
 		classes: {},
 		color: {},
@@ -42,18 +42,13 @@ var C = /*@__PURE__*/ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(c) {
-		let u = v(c, "modelValue"), C = c, w = m(C.defaultValue), T = i({
-			set: (e) => {
-				u.value = e, w.value = e;
-			},
-			get: () => S(u.value) ? w.value : u.value
-		}), { formField: E, inputBind: D } = r(C);
-		return (r, i) => (p(), a(_(n), { field: _(E) }, s({
-			default: b(() => [x(o("input", d({ "onUpdate:modelValue": i[0] ||= (e) => T.value = e }, _(D)), null, 16), [[y, T.value]])]),
+		let d = y(c, "modelValue"), C = c, w = h(C.defaultValue), T = t(d, w), { formField: E, inputBind: D } = i(C);
+		return (t, i) => (m(), a(v(r), { field: v(E) }, s({
+			default: x(() => [S(o("input", f({ "onUpdate:modelValue": i[0] ||= (e) => u(T) ? T.value = e : null }, v(D)), null, 16), [[b, v(T)]])]),
 			_: 2
-		}, [h(_(e)(_(t), r.$slots), (e) => ({
+		}, [g(v(e)(v(n), t.$slots), (e) => ({
 			name: e,
-			fn: b((t) => [g(r.$slots, e, f(l(t || {})))])
+			fn: x((n) => [_(t.$slots, e, p(l(n || {})))])
 		}))]), 1032, ["field"]));
 	}
 });

package/dist/Components/TextField/composables/useTextField.d.ts

@@ -440,6 +440,7 @@ export declare function useTextField(props: TextFieldOwnProps): {
         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, {}>>;

package/dist/Components/Textarea/Textarea.vue_vue_type_script_setup_true_lang.js

@@ -1,14 +1,14 @@
 import { presentSlotNames as e } from "../../Utils/slotOrProp.js";
-import { FORM_FIELD_CHROME_SLOT_NAMES as t } from "../FormField/formField.types.js";
-import n from "../FormField/FormField.js";
-import { useTextarea as r } from "./composables/useTextarea.js";
-import { computed as i, createBlock as a, createElementVNode as o, createSlots as s, defineComponent as c, guardReactiveProps as l, mergeModels as u, mergeProps as d, normalizeProps as f, openBlock as p, ref as m, renderList as h, renderSlot as g, unref as _, useModel as v, useTemplateRef as y, vModelText as b, watch as x, withCtx as S, withDirectives as C } from "vue";
-import { isUndefined as w } from "es-toolkit/compat";
+import { useOptionalModel as t } from "../../Utils/useOptionalModel.js";
+import { FORM_FIELD_CHROME_SLOT_NAMES as n } from "../FormField/formField.types.js";
+import r from "../FormField/FormField.js";
+import { useTextarea as i } from "./composables/useTextarea.js";
+import { createBlock as a, createElementVNode as o, createSlots as s, defineComponent as c, guardReactiveProps as l, isRef as u, mergeModels as d, mergeProps as f, normalizeProps as p, openBlock as m, ref as h, renderList as g, renderSlot as _, unref as v, useModel as y, useTemplateRef as b, vModelText as x, watch as S, withCtx as C, withDirectives as w } from "vue";
 //#region src/Components/Textarea/Textarea.vue?vue&type=script&setup=true&lang.ts
 var T = /*@__PURE__*/ c({
 	inheritAttrs: !1,
 	__name: "Textarea",
-	props: /*@__PURE__*/ u({
+	props: /*@__PURE__*/ d({
 		autosize: { type: Boolean },
 		defaultValue: {},
 		likeInput: { type: Boolean },
@@ -45,23 +45,18 @@ var T = /*@__PURE__*/ c({
 	}),
 	emits: ["update:modelValue"],
 	setup(c) {
-		let u = v(c, "modelValue"), T = c, E = m(T.defaultValue), D = i({
-			set: (e) => {
-				u.value = e, E.value = e;
-			},
-			get: () => w(u.value) ? E.value : u.value
-		}), O = y("textarea"), { formField: k, textareaBind: A, adjustHeight: j } = r(T, O);
-		return x(D, () => {
-			j(O.value);
-		}), (r, i) => (p(), a(_(n), { field: _(k) }, s({
-			default: S(() => [C(o("textarea", d({
+		let d = y(c, "modelValue"), T = c, E = b("textarea"), D = h(T.defaultValue), O = t(d, D), { formField: k, textareaBind: A, adjustHeight: j } = i(T, E);
+		return S(O, () => {
+			j(E.value);
+		}), (t, i) => (m(), a(v(r), { field: v(k) }, s({
+			default: C(() => [w(o("textarea", f({
 				ref: "textarea",
-				"onUpdate:modelValue": i[0] ||= (e) => D.value = e
-			}, _(A)), null, 16), [[b, D.value]])]),
+				"onUpdate:modelValue": i[0] ||= (e) => u(O) ? O.value = e : null
+			}, v(A)), null, 16), [[x, v(O)]])]),
 			_: 2
-		}, [h(_(e)(_(t), r.$slots), (e) => ({
+		}, [g(v(e)(v(n), t.$slots), (e) => ({
 			name: e,
-			fn: S((t) => [g(r.$slots, e, f(l(t || {})))])
+			fn: C((n) => [_(t.$slots, e, p(l(n || {})))])
 		}))]), 1032, ["field"]));
 	}
 });

package/dist/Components/Textarea/composables/useTextarea.d.ts

@@ -441,6 +441,7 @@ export declare function useTextarea(props: TextareaOwnProps, textareaRef: Ref<nu
         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, {}>>;

package/dist/Components/TimeField/TimeField.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 { useTimeField as o } from "./composables/useTimeField.js";
-import s from "../TimePicker/TimePicker.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
-import { isUndefined as A } 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 { useTimeField as s } from "./composables/useTimeField.js";
+import c from "../TimePicker/TimePicker.js";
+import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
 //#region src/Components/TimeField/TimeField.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"], N = /*@__PURE__*/ h({
+var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"], M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "TimeField",
 	props: /*@__PURE__*/ _({
@@ -74,51 +74,46 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let N = E(h, "modelValue"), P = h, F = _, I = e(), L = S(P.defaultValue ?? null), R = l({
-			set: (e) => {
-				N.value = e, L.value = e;
-			},
-			get: () => A(N.value) ? L.value : N.value
-		}), { open: z, fill: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timePickerCustomProps: ne } = o(P, R, F);
-		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
-			default: D(() => [f("div", j, [f("input", b(g(T(W))), null, 16), T(Z) ? (x(), d("span", v({ key: 0 }, T(G), {
-				onClick: o[0] ||= (...e) => T(K) && T(K)(...e),
-				"aria-label": T(I)("Clear"),
-				onKeydown: [o[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
-			}), [m(T(n), v({
+		let M = _, N = e(), P = E(h, "modelValue"), F = h, I = S(F.defaultValue ?? null), L = n(P, I), { open: R, fill: z, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timePickerCustomProps: te } = s(F, L, M);
+		return (e, n) => (x(), d(l, null, [m(T(a), { field: T(H) }, p({
+			default: D(() => [f("div", A, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
+				onClick: n[0] ||= (...e) => T(G) && T(G)(...e),
+				"aria-label": T(N)("Clear"),
+				onKeydown: [n[1] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["enter"]), n[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
+			}), [m(T(r), v({
 				icon: "clear",
-				size: T(X)
-			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
+				size: T(Y)
+			}, F.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)])]),
 			_: 2
-		}, [C(T(t)(T(r), e.$slots), (t) => ({
+		}, [C(T(t)(T(i), e.$slots), (t) => ({
 			name: t,
 			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
-		}))]), 1032, ["field"]), m(T(a), {
-			overlay: T(V),
-			"model-value": T(z),
-			"custom-props": T(te),
-			"onUpdate:modelValue": T(Q)
+		}))]), 1032, ["field"]), m(T(o), {
+			overlay: T(B),
+			"model-value": T(R),
+			"custom-props": T(ee),
+			"onUpdate:modelValue": T(Z)
 		}, {
-			default: D(() => [m(T(s), {
-				fill: T(B),
-				value: T(q),
-				class: y(T(Y)),
-				ampm: T(H).ampm,
-				"show-footer": T(J),
-				"read-only": P.readonly,
-				"max-time": T(H).maxTime,
-				"min-time": T(H).minTime,
-				interval: T(H).interval,
-				"time-zone": T(H).timeZone,
-				onChange: T($),
-				onCancel: T(ee),
-				"show-seconds": T(H).showSeconds,
-				error: T(U).invalidated.value,
-				color: T(U).merged.value.color,
-				"custom-props": T(ne),
-				disabled: T(U).isDisabled.value,
-				"disable-times": T(H).disableTimes,
-				rounded: T(U).merged.value.rounded
+			default: D(() => [m(T(c), {
+				fill: T(z),
+				value: T(K),
+				class: y(T(J)),
+				ampm: T(V).ampm,
+				"show-footer": T(q),
+				"read-only": F.readonly,
+				"max-time": T(V).maxTime,
+				"min-time": T(V).minTime,
+				interval: T(V).interval,
+				"time-zone": T(V).timeZone,
+				onChange: T(Q),
+				onCancel: T($),
+				"show-seconds": T(V).showSeconds,
+				error: T(H).invalidated.value,
+				color: T(H).merged.value.color,
+				"custom-props": T(te),
+				disabled: T(H).isDisabled.value,
+				"disable-times": T(V).disableTimes,
+				rounded: T(H).merged.value.rounded
 			}, p({ _: 2 }, [e.$slots.footer ? {
 				name: "footer",
 				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
@@ -154,4 +149,4 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };

package/dist/Components/TimeField/composables/useTimeField.d.ts

@@ -451,6 +451,7 @@ export declare function useTimeField(props: TimeFieldOwnProps, model: Ref<null |
         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, {}>>;

package/dist/Components/TimeRangeField/TimeRangeField.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 { useTimeRangeField as o } from "./composables/useTimeRangeField.js";
-import s from "../TimeRangePicker/TimeRangePicker.js";
-import { Fragment as c, computed as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
-import { isUndefined as A } 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 { useTimeRangeField as s } from "./composables/useTimeRangeField.js";
+import c from "../TimeRangePicker/TimeRangePicker.js";
+import { Fragment as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, defineComponent as h, guardReactiveProps as g, mergeModels as _, mergeProps as v, normalizeClass as y, normalizeProps as b, openBlock as x, ref as S, renderList as C, renderSlot as w, unref as T, useModel as E, withCtx as D, withKeys as O, withModifiers as k } from "vue";
 //#region src/Components/TimeRangeField/TimeRangeField.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"], N = /*@__PURE__*/ h({
+var A = { class: "flex min-w-0 flex-1 items-center gap-1" }, j = ["aria-label"], M = /*@__PURE__*/ h({
 	inheritAttrs: !1,
 	__name: "TimeRangeField",
 	props: /*@__PURE__*/ _({
@@ -74,51 +74,46 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 		"open"
 	], ["update:modelValue"]),
 	setup(h, { emit: _ }) {
-		let N = E(h, "modelValue"), P = h, F = _, I = e(), L = S(P.defaultValue ?? null), R = l({
-			set: (e) => {
-				N.value = e, L.value = e;
-			},
-			get: () => A(N.value) ? L.value : N.value
-		}), { open: z, fill: B, overlay: V, timeOnly: H, formField: U, inputBind: W, clearBind: G, clearValue: K, modelValue: q, showFooter: J, pickerClass: Y, clearIconSize: X, showClearIcon: Z, handleOpenChange: Q, handlePickerChange: $, handlePickerCancel: ee, overlayCustomProps: te, timeRangePickerCustomProps: ne } = o(P, R, F);
-		return (e, o) => (x(), d(c, null, [m(T(i), { field: T(U) }, p({
-			default: D(() => [f("div", j, [f("input", b(g(T(W))), null, 16), T(Z) ? (x(), d("span", v({ key: 0 }, T(G), {
-				onClick: o[0] ||= (...e) => T(K) && T(K)(...e),
-				"aria-label": T(I)("Clear"),
-				onKeydown: [o[1] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["enter"]), o[2] ||= O(k((...e) => T(K) && T(K)(...e), ["prevent"]), ["space"])]
-			}), [m(T(n), v({
+		let M = e(), N = _, P = E(h, "modelValue"), F = h, I = S(F.defaultValue ?? null), L = n(P, I), { open: R, fill: z, overlay: B, timeOnly: V, formField: H, inputBind: U, clearBind: W, clearValue: G, modelValue: K, showFooter: q, pickerClass: J, clearIconSize: Y, showClearIcon: X, handleOpenChange: Z, handlePickerChange: Q, handlePickerCancel: $, overlayCustomProps: ee, timeRangePickerCustomProps: te } = s(F, L, N);
+		return (e, n) => (x(), d(l, null, [m(T(a), { field: T(H) }, p({
+			default: D(() => [f("div", A, [f("input", b(g(T(U))), null, 16), T(X) ? (x(), d("span", v({ key: 0 }, T(W), {
+				onClick: n[0] ||= (...e) => T(G) && T(G)(...e),
+				"aria-label": T(M)("Clear"),
+				onKeydown: [n[1] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["enter"]), n[2] ||= O(k((...e) => T(G) && T(G)(...e), ["prevent"]), ["space"])]
+			}), [m(T(r), v({
 				icon: "clear",
-				size: T(X)
-			}, P.customProps?.clearIcon), null, 16, ["size"])], 16, M)) : u("", !0)])]),
+				size: T(Y)
+			}, F.customProps?.clearIcon), null, 16, ["size"])], 16, j)) : u("", !0)])]),
 			_: 2
-		}, [C(T(t)(T(r), e.$slots), (t) => ({
+		}, [C(T(t)(T(i), e.$slots), (t) => ({
 			name: t,
 			fn: D((n) => [w(e.$slots, t, b(g(n || {})))])
-		}))]), 1032, ["field"]), m(T(a), {
-			overlay: T(V),
-			"model-value": T(z),
-			"custom-props": T(te),
-			"onUpdate:modelValue": T(Q)
+		}))]), 1032, ["field"]), m(T(o), {
+			overlay: T(B),
+			"model-value": T(R),
+			"custom-props": T(ee),
+			"onUpdate:modelValue": T(Z)
 		}, {
-			default: D(() => [m(T(s), {
-				fill: T(B),
-				value: T(q),
-				class: y(T(Y)),
-				ampm: T(H).ampm,
-				"show-footer": T(J),
-				"read-only": P.readonly,
-				"max-time": T(H).maxTime,
-				"min-time": T(H).minTime,
-				interval: T(H).interval,
-				"time-zone": T(H).timeZone,
-				onChange: T($),
-				onCancel: T(ee),
-				"show-seconds": T(H).showSeconds,
-				error: T(U).invalidated.value,
-				color: T(U).merged.value.color,
-				disabled: T(U).isDisabled.value,
-				"disable-times": T(H).disableTimes,
-				rounded: T(U).merged.value.rounded,
-				"custom-props": T(ne)
+			default: D(() => [m(T(c), {
+				fill: T(z),
+				value: T(K),
+				class: y(T(J)),
+				ampm: T(V).ampm,
+				"show-footer": T(q),
+				"read-only": F.readonly,
+				"max-time": T(V).maxTime,
+				"min-time": T(V).minTime,
+				interval: T(V).interval,
+				"time-zone": T(V).timeZone,
+				onChange: T(Q),
+				onCancel: T($),
+				"show-seconds": T(V).showSeconds,
+				error: T(H).invalidated.value,
+				color: T(H).merged.value.color,
+				disabled: T(H).isDisabled.value,
+				"disable-times": T(V).disableTimes,
+				rounded: T(H).merged.value.rounded,
+				"custom-props": T(te)
 			}, p({ _: 2 }, [e.$slots.footer ? {
 				name: "footer",
 				fn: D((t) => [w(e.$slots, "footer", b(g(t)))]),
@@ -154,4 +149,4 @@ var j = { class: "flex min-w-0 flex-1 items-center gap-1" }, M = ["aria-label"],
 	}
 });
 //#endregion
-export { N as default };
+export { M as default };

package/dist/Components/TimeRangeField/composables/useTimeRangeField.d.ts

@@ -451,6 +451,7 @@ export declare function useTimeRangeField(props: TimeRangeFieldOwnProps, 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, {}>>;

package/dist/Utils/index.d.ts

@@ -72,3 +72,4 @@ export { useBreakpoint } from './useBreakpoint';
 export type { UseBreakpointOptions } from './useBreakpoint';
 export { useHoldRepeat } from './useHoldRepeat';
 export type { HoldRepeatAction, UseHoldRepeatOptions, } from './useHoldRepeat';
+export { useOptionalModel } from './useOptionalModel';

package/dist/Utils/index.js

@@ -2,64 +2,65 @@ import { useBridgeUI as e } from "../Provider/useBridgeUI.js";
 import { RenderFn as t, hasNamedSlot as n, hasSlotOrProp as r, isPropPresent as i, presentSlotNames as a } from "./slotOrProp.js";
 import { useBreakpoint as o } from "./useBreakpoint.js";
 import { useHoldRepeat as s } from "./useHoldRepeat.js";
-import { computed as c, defineComponent as l, toValue as u, unref as d } from "vue";
-import { get as f, isNil as p } from "es-toolkit/compat";
-import { resolveFieldShowFooter as m, resolvePickerFill as h } from "@bridge-ui/core/Domain";
-import { createMergeNestedComponentProps as g, createMergePartBind as _, mergeBridgeUILayeredClasses as v, mergePropsWithBridgeUIDefaults as y } from "@bridge-ui/core/Utils";
+import { useOptionalModel as c } from "./useOptionalModel.js";
+import { computed as l, defineComponent as u, toValue as d, unref as f } from "vue";
+import { get as p, isNil as m } from "es-toolkit/compat";
+import { resolveFieldShowFooter as h, resolvePickerFill as g } from "@bridge-ui/core/Domain";
+import { createMergeNestedComponentProps as _, createMergePartBind as v, mergeBridgeUILayeredClasses as y, mergePropsWithBridgeUIDefaults as b } from "@bridge-ui/core/Utils";
 //#region src/Utils/index.ts
-function b(e) {
-	return l({
+function x(e) {
+	return u({
 		name: "HeadlessTestComponent",
 		setup() {
 			return e(), () => null;
 		}
 	});
 }
-var x = _("class"), S = g(x);
-function C({ props: t, libDefaults: n, componentName: r }) {
-	let i = e(), a = c(() => p(i) ? null : d(i.components));
+var S = v("class"), C = _(S);
+function w({ props: t, libDefaults: n, componentName: r }) {
+	let i = e(), a = l(() => m(i) ? null : f(i.components));
 	return {
-		entry: c(() => {
-			if (r) return f(a.value, r);
+		entry: l(() => {
+			if (r) return p(a.value, r);
 		}),
 		bridge: i,
-		merged: c(() => y({
+		merged: l(() => b({
 			libDefaults: n,
 			componentName: r,
-			props: u(t),
+			props: d(t),
 			components: a.value,
 			formDefaults: i?.global.value.formDefaults
 		})),
 		components: a
 	};
 }
-function w({ overlay: t, showFooter: n, componentName: r }) {
+function T({ overlay: t, showFooter: n, componentName: r }) {
 	let i = e();
-	return c(() => {
-		let e = r ? f(d(i?.components), [
+	return l(() => {
+		let e = r ? p(f(i?.components), [
 			r,
 			"defaultProps",
 			"showFooter"
 		]) : void 0;
-		return m(u(n) ?? e, u(t));
+		return h(d(n) ?? e, d(t));
 	});
 }
-function T({ fill: t, overlay: n, componentName: r }) {
+function E({ fill: t, overlay: n, componentName: r }) {
 	let i = e();
-	return c(() => {
-		let e = r ? f(d(i?.components), [
+	return l(() => {
+		let e = r ? p(f(i?.components), [
 			r,
 			"defaultProps",
 			"fill"
 		]) : void 0;
-		return h(u(t) ?? e, u(n));
+		return g(d(t) ?? e, d(n));
 	});
 }
-function E({ entry: e, props: t }) {
-	return c(() => v(f(e.value, "classes"), u(t).classes));
+function D({ entry: e, props: t }) {
+	return l(() => y(p(e.value, "classes"), d(t).classes));
 }
-function D(e) {
-	return f({
+function O(e) {
+	return p({
 		xs: "xs",
 		sm: "sm",
 		md: "md",
@@ -69,7 +70,7 @@ function D(e) {
 		"2xl": "lg"
 	}, e ?? "md");
 }
-function O(e) {
+function k(e) {
 	if (e instanceof HTMLElement) return e;
 	if (e && "$el" in e) {
 		let t = e.$el;
@@ -78,4 +79,4 @@ function O(e) {
 	return null;
 }
 //#endregion
-export { t as RenderFn, b as defineHeadlessComponent, n as hasNamedSlot, r as hasSlotOrProp, i as isPropPresent, S as mergeNestedComponentProps, x as mergePartBind, a as presentSlotNames, D as resolveFieldAdornmentIconSize, O as resolveVnodeRefElement, o as useBreakpoint, C as useBridgeUIComponent, E as useBridgeUIMergedRegistryClasses, w as useFieldShowFooter, s as useHoldRepeat, T as usePickerFill };
+export { t as RenderFn, x as defineHeadlessComponent, n as hasNamedSlot, r as hasSlotOrProp, i as isPropPresent, C as mergeNestedComponentProps, S as mergePartBind, a as presentSlotNames, O as resolveFieldAdornmentIconSize, k as resolveVnodeRefElement, o as useBreakpoint, w as useBridgeUIComponent, D as useBridgeUIMergedRegistryClasses, T as useFieldShowFooter, s as useHoldRepeat, c as useOptionalModel, E as usePickerFill };

package/dist/Utils/useOptionalModel.d.ts

@@ -0,0 +1,6 @@
+import { Ref, WritableComputedRef } from 'vue';
+/**
+ * Optional `v-model` that keeps `defaultValue` when unbound, and stays empty
+ * when the parent sets the bound model to `null`.
+ */
+export declare function useOptionalModel<T>(model: Ref<undefined | NoInfer<T>>, uncontrolled: Ref<T>): WritableComputedRef<T>;

package/dist/Utils/useOptionalModel.js

@@ -0,0 +1,13 @@
+import { computed as e } from "vue";
+import { isUndefined as t } from "es-toolkit/compat";
+//#region src/Utils/useOptionalModel.ts
+function n(n, r) {
+	return e({
+		get: () => t(n.value) ? r.value : n.value,
+		set: (e) => {
+			t(n.value) && (r.value = e), n.value = e;
+		}
+	});
+}
+//#endregion
+export { n as useOptionalModel };

package/dist/augments.d.ts

@@ -96,7 +96,7 @@ declare module "@bridge-ui/core/Config" {
     }
     interface NumberFieldConfigOverrides {
         classes: NumberFieldClasses;
-        defaultProps: Partial<Pick<NumberFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "hideErrorMessage">>;
+        defaultProps: Partial<Pick<NumberFieldProps, "size" | "color" | "rounded" | "variant" | "showErrorIcon" | "controlVariant" | "hideErrorMessage">>;
     }
     interface OtpFieldConfigOverrides {
         classes: OtpFieldClasses;

package/dist/index.d.ts

@@ -87,7 +87,7 @@ export type { MenuClasses, MenuCustomProps, MenuEmits, MenuOptions, MenuOwnProps
 export { Modal, useModal } from './Components/Modal';
 export type { ModalAlignOverrides, ModalBlurOverrides, ModalClasses, ModalCustomProps, ModalEmits, ModalOwnProps, ModalProps, ModalSizeOverrides, ModalSlots, } from './Components/Modal';
 export { NumberField, useNumberField } from './Components/NumberField';
-export type { NumberFieldClasses, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
+export type { NumberFieldClasses, NumberFieldControlVariantOverrides, NumberFieldCustomProps, NumberFieldOwnProps, NumberFieldProps, NumberFieldSlots, } from './Components/NumberField';
 export { OtpField, useOtpField } from './Components/OtpField';
 export type { OtpFieldClasses, OtpFieldCustomProps, OtpFieldEmits, OtpFieldOwnProps, OtpFieldProps, OtpFieldSlots, UseOtpFieldOptions, } from './Components/OtpField';
 export { Pagination, usePagination } from './Components/Pagination';