@bridge-ui/vue 0.3.0 → 0.4.0

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

@@ -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, {}>>;

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

@@ -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, {}>>;

package/dist/Components/FormField/composables/useFormField.js

@@ -28,39 +28,39 @@ var b = [
 	"showErrorIcon",
 	"hideErrorMessage"
 ];
-function x(x, S, C = {}) {
-	let w = c(), T = l(), E = o(() => y({
+function x(x, ee, S = {}) {
+	let C = c(), w = l(), T = o(() => y({
 		props: s(x),
 		bridgeKeys: b
-	})), { merged: D, entry: O } = i({
-		libDefaults: S,
-		componentName: C.componentName,
-		props: () => E.value.componentProps
-	}), k = o(() => D.value.customProps), A = o(() => C.control?.() ?? "input"), j = a({
-		entry: O,
-		props: () => E.value.componentProps
-	}), M = o(() => D.value.error === !0), N = o(() => !!D.value.disabled), P = o(() => !!D.value.readonly), F = o(() => D.value.variant ?? "outline"), ee = o(() => D.value.errorIcon ?? "alert"), I = o(() => F.value === "notched"), L = o(() => F.value === "stacked"), R = o(() => F.value === "underlined"), z = o(() => A.value === "textarea"), B = o(() => z.value && !!C.likeInput?.()), V = o(() => !D.value.hideErrorMessage), H = o(() => {
-		let e = E.value.inheritedAttrs.id;
-		return D.value.controlId ?? e ?? w;
-	}), U = o(() => M.value && t(T, "errorMessage", D.value.errorMessage)), W = o(() => (I.value || L.value) && (t(T, "label", D.value.label) || t(T, "corner", D.value.corner))), G = o(() => t(T, "label", D.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
+	})), { merged: E, entry: D } = i({
+		libDefaults: ee,
+		componentName: S.componentName,
+		props: () => T.value.componentProps
+	}), O = o(() => E.value.customProps), k = o(() => S.control?.() ?? "input"), A = a({
+		entry: D,
+		props: () => T.value.componentProps
+	}), j = o(() => E.value.error === !0), M = o(() => !!E.value.disabled), N = o(() => !!E.value.readonly), P = o(() => E.value.variant ?? "outline"), F = o(() => E.value.errorIcon ?? "alert"), I = o(() => P.value === "notched"), L = o(() => P.value === "stacked"), R = o(() => P.value === "underlined"), z = o(() => k.value === "textarea"), B = o(() => z.value && !!S.likeInput?.()), V = o(() => !E.value.hideErrorMessage), H = o(() => {
+		let e = T.value.inheritedAttrs.id;
+		return E.value.controlId ?? e ?? C;
+	}), U = o(() => j.value && t(w, "errorMessage", E.value.errorMessage)), W = o(() => (I.value || L.value) && (t(w, "label", E.value.label) || t(w, "corner", E.value.corner))), G = o(() => t(w, "label", E.value.label) ? "justify-between items-end" : "justify-end"), K = o(() => {
 		let e = [];
-		return !M.value && t(T, "description", D.value.description) && e.push(`${H.value}-description`), M.value && !D.value.hideErrorMessage && t(T, "errorMessage", D.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+		return !j.value && t(w, "description", E.value.description) && e.push(`${H.value}-description`), j.value && !E.value.hideErrorMessage && t(w, "errorMessage", E.value.errorMessage) && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
 	}), q = o(() => {
-		let e = v(m, O.value?.tokens?.size);
-		return u(e, [D.value.size, F.value]);
+		let e = v(m, D.value?.tokens?.size);
+		return u(e, [E.value.size, P.value]);
 	}), J = o(() => {
-		let e = v(f, O.value?.tokens?.color);
+		let e = v(f, D.value?.tokens?.color);
 		return _({
 			tokens: e,
-			color: D.value.color,
-			invalid: M.value
+			color: E.value.color,
+			invalid: j.value
 		});
 	}), Y = o(() => {
-		let e = v(p, O.value?.tokens?.rounded);
-		return u(e, D.value.rounded);
+		let e = v(p, D.value?.tokens?.rounded);
+		return u(e, E.value.rounded);
 	}), X = o(() => {
-		let e = v(h, O.value?.tokens?.variant);
-		return u(e, F.value);
+		let e = v(h, D.value?.tokens?.variant);
+		return u(e, P.value);
 	}), Z = o(() => R.value ? J.value?.underlined : J.value?.input), Q = o(() => {
 		if (L.value) return g({
 			[q.value?.insetTop ?? ""]: !0,
@@ -68,42 +68,45 @@ function x(x, S, C = {}) {
 			[q.value?.insetEnd ?? ""]: !0
 		});
 	}), te = o(() => {
-		let t = C.reservedSlots?.() ?? [], n = e(T, "end") || t.includes("end"), r = e(T, "start") || t.includes("start");
+		let t = S.reservedSlots?.() ?? [], n = e(w, "end") || t.includes("end"), r = e(w, "start") || t.includes("start");
 		if (!L.value) return !r && !n ? q.value?.padding : g({
 			[q.value?.insetStart ?? ""]: !r,
 			[q.value?.insetEnd ?? ""]: !n
 		});
-	}), ne = o(() => r(k.value?.end, {}, g({
+	}), ne = o(() => r(O.value?.end, {}, g({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-500": !0,
-		[Y.value?.end ?? ""]: !R.value && !L.value,
 		[J.value?.end ?? ""]: !0,
-		[j.value.end ?? ""]: !0
+		[A.value.end ?? ""]: !0
 	}))), re = o(() => {
-		let e = E.value.inheritedAttrs;
-		return r(k.value?.root, {
+		let e = T.value.inheritedAttrs;
+		return r(O.value?.root, {
 			class: g(e.class),
 			...d(e, ["class"])
 		}, g({
 			"group w-full relative": !0,
 			"aria-disabled:pointer-events-none aria-disabled:select-none aria-disabled:opacity-60": !0,
 			"aria-readonly:pointer-events-none aria-readonly:select-none": !0,
-			[j.value.root ?? ""]: !0
+			[A.value.root ?? ""]: !0
 		}));
-	}), ie = o(() => r(k.value?.errorMessage, {}, g({
+	}), ie = o(() => r(O.value?.errorMessage, {}, g({
 		"mt-2": !0,
 		"min-h-[1lh]": V.value,
 		"text-error-600 dark:text-error-400": !0,
 		[q.value?.text ?? ""]: !0,
-		[j.value.errorMessage ?? ""]: !0
+		[A.value.errorMessage ?? ""]: !0
 	}))), ae = o(() => r({
-		...k.value?.input,
+		...O.value?.input,
 		id: H.value,
-		disabled: N.value,
-		readonly: P.value,
+		disabled: M.value,
+		readonly: N.value,
 		"aria-describedby": K.value,
-		"aria-invalid": M.value || void 0
-	}, d(E.value.inheritedAttrs, ["class"]), g({
+		"aria-invalid": j.value || void 0
+	}, d(T.value.inheritedAttrs, [
+		"class",
+		"modelValue",
+		"onUpdate:modelValue"
+	]), g({
 		"flex-1 min-w-0 min-h-0 bg-transparent border-0 shadow-none": !0,
 		"h-full": !z.value && !L.value,
 		"max-h-none": z.value,
@@ -113,33 +116,32 @@ function x(x, S, C = {}) {
 		[q.value?.input ?? ""]: !z.value,
 		[q.value?.textarea ?? ""]: z.value,
 		[q.value?.textareaLikeInput ?? ""]: B.value,
-		[j.value.input ?? ""]: !0
-	}))), oe = o(() => n(k.value?.label, {
+		[A.value.input ?? ""]: !0
+	}))), oe = o(() => n(O.value?.label, {
 		for: H.value,
-		size: D.value.size,
-		error: M.value,
-		required: D.value.required,
+		size: E.value.size,
+		error: j.value,
+		required: E.value.required,
 		classes: {
-			required: j.value.required,
+			required: A.value.required,
 			root: g({
 				[X.value?.label ?? ""]: I.value,
-				[j.value.label ?? ""]: !0
+				[A.value.label ?? ""]: !0
 			})
 		}
-	})), $ = o(() => r(k.value?.start, {}, g({
+	})), $ = o(() => r(O.value?.start, {}, g({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-400": !0,
-		[Y.value?.start ?? ""]: !R.value && !L.value,
 		[J.value?.start ?? ""]: !0,
-		[j.value.start ?? ""]: !0
-	}))), se = o(() => r(k.value?.corner, {}, g({
+		[A.value.start ?? ""]: !0
+	}))), se = o(() => r(O.value?.corner, {}, g({
 		"text-dark-500 dark:text-dark-400": !I.value,
 		[q.value?.text ?? ""]: !0,
 		[X.value?.corner ?? ""]: I.value,
-		[j.value.corner ?? ""]: !0
+		[A.value.corner ?? ""]: !0
 	}))), ce = o(() => {
-		let e = t(T, "label", D.value.label);
-		return r(k.value?.header, {}, g({
+		let e = t(w, "label", E.value.label);
+		return r(O.value?.header, {}, g({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
@@ -147,18 +149,18 @@ function x(x, S, C = {}) {
 			"items-center": I.value,
 			"items-end": L.value,
 			[X.value?.labelRow ?? ""]: W.value,
-			[j.value.header ?? ""]: !0
+			[A.value.header ?? ""]: !0
 		}));
-	}), le = o(() => r(k.value?.header, {}, g({
+	}), le = o(() => r(O.value?.header, {}, g({
 		flex: !0,
 		"mb-1": !0,
 		[G.value]: !0,
-		[j.value.header ?? ""]: !0
-	}))), ue = o(() => r(k.value?.endIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), de = o(() => r(k.value?.end, {}, g({
+		[A.value.header ?? ""]: !0
+	}))), ue = o(() => r(O.value?.endIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), de = o(() => r(O.value?.end, {}, g({
 		"group/end wrapper-end-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 		"self-stretch min-h-0 overflow-hidden py-0.5 pe-0.5": L.value,
 		"h-full min-h-0 overflow-hidden py-0.5 pe-0.5": !L.value,
-		[j.value.end ?? ""]: !0
+		[A.value.end ?? ""]: !0
 	}))), fe = o(() => r({}, {}, g({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
 		[Q.value ?? ""]: !0
@@ -167,56 +169,59 @@ function x(x, S, C = {}) {
 		[q.value?.controlRow ?? ""]: !0
 	})));
 	return {
-		slots: T,
-		merged: D,
-		control: A,
+		slots: w,
+		merged: E,
+		control: k,
 		endBind: ne,
 		rootBind: re,
 		controlId: H,
 		errorBind: ie,
-		errorIcon: ee,
+		errorIcon: F,
 		inputBind: ae,
 		isNotched: I,
 		isStacked: L,
 		startBind: $,
 		cornerBind: se,
 		headerBind: le,
-		isDisabled: N,
-		isReadonly: P,
-		variantKey: F,
+		isDisabled: M,
+		isReadonly: N,
+		variantKey: P,
 		endIconBind: ue,
 		endSlotBind: de,
-		invalidated: M,
-		containerBind: o(() => r(k.value?.container, { "data-bridge-rounded": D.value.rounded ?? "md" }, g({
+		invalidated: j,
+		containerBind: o(() => r(O.value?.container, {
+			"data-bridge-variant": P.value,
+			"data-bridge-rounded": E.value.rounded ?? "md"
+		}, g({
 			"group/field relative flex flex-row items-stretch overflow-hidden": L.value,
 			"group/field relative flex justify-start gap-x-2 items-stretch": !L.value,
 			"transition-all ease-in-out duration-150 outline-none": !0,
-			"bg-dark-100 dark:bg-dark-800": N.value && !M.value,
+			"bg-dark-100 dark:bg-dark-800": M.value && !j.value,
 			[q.value?.container ?? ""]: !z.value,
 			[q.value?.containerTextareaLikeInput ?? ""]: B.value,
 			[q.value?.containerTextarea ?? ""]: z.value && !B.value,
 			[X.value?.container ?? ""]: !0,
-			[Y.value?.input ?? ""]: !R.value,
+			[Y.value ?? ""]: !R.value,
 			[te.value ?? ""]: !0,
 			[Z.value ?? ""]: !0,
 			"rounded-none": R.value,
-			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": M.value && !R.value,
-			"border-error-500 dark:border-error-600": M.value && R.value,
-			[j.value.container ?? ""]: !0
+			"bg-error-50 ring-error-500 dark:bg-error-700/10 dark:ring-error-600": j.value && !R.value,
+			"border-error-500 dark:border-error-600": j.value && R.value,
+			[A.value.container ?? ""]: !0
 		}))),
-		startIconBind: o(() => r(k.value?.startIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
-		startSlotBind: o(() => r(k.value?.start, {}, g({
+		startIconBind: o(() => r(O.value?.startIcon, {}, g({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: o(() => r(O.value?.start, {}, g({
 			"group/start wrapper-start-slot shrink-0 flex w-auto items-stretch self-stretch [&>*]:min-h-0": !0,
 			"self-stretch min-h-0 overflow-hidden py-0.5 ps-0.5": L.value,
 			"h-full min-h-0 overflow-hidden py-0.5 ps-0.5": !L.value,
-			[j.value.start ?? ""]: !0
+			[A.value.start ?? ""]: !0
 		}))),
 		fieldLabelProps: oe,
 		ariaDescribedBy: K,
-		descriptionBind: o(() => r(k.value?.description, {}, g({
+		descriptionBind: o(() => r(O.value?.description, {}, g({
 			"mt-2 text-dark-500 dark:text-dark-400": !0,
 			[q.value?.text ?? ""]: !0,
-			[j.value.description ?? ""]: !0
+			[A.value.description ?? ""]: !0
 		}))),
 		stackedBodyBind: fe,
 		hasInsetLabelRow: W,

package/dist/Components/NumberField/NumberField.vue_vue_type_script_setup_true_lang.js

@@ -1,20 +1,21 @@
 import { useResolveMessage as e } from "../../Adapters/I18n/useI18nAdapter.js";
 import { presentSlotNames as t } from "../../Utils/slotOrProp.js";
 import { useHoldRepeat as n } from "../../Utils/useHoldRepeat.js";
-import { mergePartBind as r, resolveFieldAdornmentIconSize as i } from "../../Utils/index.js";
+import { useOptionalModel as r } from "../../Utils/useOptionalModel.js";
+import { mergePartBind as i } from "../../Utils/index.js";
 import a from "../Icon/Icon.js";
 import { FORM_FIELD_CHROME_SLOT_NAMES as o } from "../FormField/formField.types.js";
 import s from "../FormField/FormField.js";
 import { useNumberField as c } from "./composables/useNumberField.js";
-import { computed as l, createBlock as u, createElementVNode as d, createSlots as f, createVNode as p, defineComponent as m, guardReactiveProps as h, isRef as g, mergeModels as _, mergeProps as v, normalizeProps as y, openBlock as b, ref as x, renderList as S, renderSlot as C, unref as w, useModel as T, vModelDynamic as E, withCtx as D, withDirectives as O } from "vue";
-import { isUndefined as k } from "es-toolkit/compat";
-import { cn as A } from "@bridge-ui/core/Utils";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createElementVNode as p, createSlots as m, createVNode as h, defineComponent as g, guardReactiveProps as _, isRef as v, mergeModels as y, mergeProps as b, normalizeClass as x, normalizeProps as S, openBlock as C, ref as ee, renderList as w, renderSlot as T, unref as E, useModel as D, vModelDynamic as O, withCtx as k, withDirectives as A } from "vue";
+import { cn as j } from "@bridge-ui/core/Utils";
 //#region src/Components/NumberField/NumberField.vue?vue&type=script&setup=true&lang.ts
-var j = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overflow-hidden" }, M = /*@__PURE__*/ m({
+var M = /*@__PURE__*/ g({
 	inheritAttrs: !1,
 	__name: "NumberField",
-	props: /*@__PURE__*/ _({
+	props: /*@__PURE__*/ y({
 		classes: {},
+		controlVariant: {},
 		customProps: {},
 		defaultValue: {},
 		max: {},
@@ -43,50 +44,59 @@ var j = { class: "bridge-end-adornment flex h-full min-w-9 flex-col gap-px overf
 		modelValue: {},
 		modelModifiers: {}
 	}),
-	emits: /*@__PURE__*/ _(["change", "update:modelValue"], ["update:modelValue"]),
-	setup(m, { emit: _ }) {
-		let M = _, N = T(m, "modelValue"), P = m, F = x(P.defaultValue), I = l({
-			set: (e) => {
-				N.value = e, F.value = e;
-			},
-			get: () => k(N.value) ? F.value : N.value
-		}), L = e(), { decrement: R, formField: z, increment: B, inputBind: V, stringModel: H, mergedClasses: U } = c(P, I, { onChange: (e) => M("change", e) }), W = n(() => B(), () => ({ disabled: P.disabled })), G = n(() => R(), () => ({ disabled: P.disabled })), K = l(() => i(P.size)), q = l(() => r(P.customProps?.increment, {
+	emits: /*@__PURE__*/ y(["change", "update:modelValue"], ["update:modelValue"]),
+	setup(g, { emit: y }) {
+		let M = e(), te = y, N = D(g, "modelValue"), P = g, F = ee(P.defaultValue), I = r(N, F), { isSplit: L, decrement: R, formField: z, increment: B, inputBind: V, stringModel: H, decrementIcon: U, incrementIcon: W, mergedClasses: G, incrementFirst: K, stepperIconSize: q, controlVariantItem: J } = c(P, I, { onChange: (e) => te("change", e) }), Y = n(() => B(), () => ({ disabled: P.disabled })), X = n(() => R(), () => ({ disabled: P.disabled })), Z = l(() => o.filter((e) => !(e === "end" || e === "start" && L.value))), Q = l(() => i(P.customProps?.increment, {
 			type: "button",
 			disabled: P.disabled,
-			onClick: W.onPressClick,
-			onPointerup: W.onPressPointerUp,
-			onPointerdown: W.onPressPointerDown,
-			"aria-label": L("Increment value"),
-			onLostpointercapture: W.onPressLostPointerCapture
-		}, A({
-			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-			[U.value.increment ?? ""]: !0
-		}))), J = l(() => r(P.customProps?.decrement, {
+			onClick: Y.onPressClick,
+			onPointerup: Y.onPressPointerUp,
+			onPointerdown: Y.onPressPointerDown,
+			"aria-label": M("Increment value"),
+			onLostpointercapture: Y.onPressLostPointerCapture
+		}, j({
+			[J.value.button]: !0,
+			[G.value.increment ?? ""]: !0
+		}))), $ = l(() => i(P.customProps?.decrement, {
 			type: "button",
 			disabled: P.disabled,
-			onClick: G.onPressClick,
-			onPointerup: G.onPressPointerUp,
-			onPointerdown: G.onPressPointerDown,
-			"aria-label": L("Decrement value"),
-			onLostpointercapture: G.onPressLostPointerCapture
-		}, A({
-			"bridge-field-adornment-button inline-flex min-h-0 min-w-8 flex-1 items-center justify-center": !0,
-			[U.value.decrement ?? ""]: !0
+			onClick: X.onPressClick,
+			onPointerup: X.onPressPointerUp,
+			onPointerdown: X.onPressPointerDown,
+			"aria-label": M("Decrement value"),
+			onLostpointercapture: X.onPressLostPointerCapture
+		}, j({
+			[J.value.button]: !0,
+			[G.value.decrement ?? ""]: !0
 		})));
-		return (e, n) => (b(), u(w(s), { field: w(z) }, f({
-			end: D(() => [d("div", j, [d("button", y(h(q.value)), [p(w(a), v({
-				icon: "chevronUp",
-				size: K.value
-			}, P.customProps?.incrementIcon), null, 16, ["size"])], 16), d("button", y(h(J.value)), [p(w(a), v({
-				icon: "chevronDown",
-				size: K.value
-			}, P.customProps?.decrementIcon), null, 16, ["size"])], 16)])]),
-			default: D(() => [O(d("input", v({ "onUpdate:modelValue": n[0] ||= (e) => g(H) ? H.value = e : null }, w(V)), null, 16), [[E, w(H)]])]),
+		return (e, n) => (C(), u(E(s), { field: E(z) }, m({
+			end: k(() => [p("div", { class: x(E(J).endGroup) }, [
+				E(K) ? (C(), f("button", S(b({ key: 0 }, Q.value)), [h(E(a), b({
+					icon: E(W),
+					size: E(q)
+				}, P.customProps?.incrementIcon), null, 16, ["icon", "size"])], 16)) : d("", !0),
+				E(L) ? d("", !0) : (C(), f("button", S(b({ key: 1 }, $.value)), [h(E(a), b({
+					icon: E(U),
+					size: E(q)
+				}, P.customProps?.decrementIcon), null, 16, ["icon", "size"])], 16)),
+				E(K) ? d("", !0) : (C(), f("button", S(b({ key: 2 }, Q.value)), [h(E(a), b({
+					icon: E(W),
+					size: E(q)
+				}, P.customProps?.incrementIcon), null, 16, ["icon", "size"])], 16))
+			], 2)]),
+			default: k(() => [A(p("input", b({ "onUpdate:modelValue": n[0] ||= (e) => v(H) ? H.value = e : null }, E(V)), null, 16), [[O, E(H)]])]),
 			_: 2
-		}, [S(w(t)(w(o).filter((e) => e !== "end"), e.$slots), (t) => ({
+		}, [w(E(t)(Z.value, e.$slots), (t) => ({
 			name: t,
-			fn: D((n) => [C(e.$slots, t, y(h(n || {})))])
-		}))]), 1032, ["field"]));
+			fn: k((n) => [T(e.$slots, t, S(_(n || {})))])
+		})), E(L) ? {
+			name: "start",
+			fn: k(() => [p("div", { class: x(E(J).startGroup) }, [p("button", S(_($.value)), [h(E(a), b({
+				icon: E(U),
+				size: E(q)
+			}, P.customProps?.decrementIcon), null, 16, ["icon", "size"])], 16)], 2)]),
+			key: "0"
+		} : void 0]), 1032, ["field"]));
 	}
 });
 //#endregion

package/dist/Components/NumberField/composables/useNumberField.d.ts

@@ -448,6 +448,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: 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, {}>>;
@@ -690,6 +691,12 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         type: string;
         step: number;
     }>>;
-    stringModel: import('vue').WritableComputedRef<string | undefined, string | null | undefined>;
+    stringModel: import('vue').WritableComputedRef<string, string | null | undefined>;
     mergedClasses: import('vue').ComputedRef<Partial<NumberFieldClasses>>;
+    stepperIconSize: import('vue').ComputedRef<keyof import('@bridge-ui/core/Tokens').IconSize>;
+    controlVariantItem: import('vue').ComputedRef<import('@bridge-ui/core/Tokens').NumberFieldControlVariantItem>;
+    isSplit: import('vue').ComputedRef<boolean>;
+    decrementIcon: import('vue').ComputedRef<"minus" | "chevronDown">;
+    incrementIcon: import('vue').ComputedRef<"plus" | "chevronUp">;
+    incrementFirst: import('vue').ComputedRef<boolean>;
 };