@bridge-ui/vue 0.7.0 → 0.8.0

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

@@ -1,11 +1,11 @@
 import { hasNamedSlot as e, hasSlotOrProp as t } from "../../../Utils/slotOrProp.js";
-import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as i, useBridgeUIMergedRegistryClasses as a } from "../../../Utils/index.js";
-import { computed as o, toValue as s, useId as c, useSlots as l } from "vue";
-import { get as u, omit as d } from "es-toolkit/compat";
-import { formFieldColorProps as f, formFieldRoundedProps as p, formFieldSizeProps as m, formFieldVariantProps as h } from "@bridge-ui/core/Tokens";
-import { cn as g, getColorToken as _, mergeBridgeUILayeredClasses as v, splitComponentProps as y } from "@bridge-ui/core/Utils";
+import { mergeNestedComponentProps as n, mergePartBind as r, useBridgeUIComponent as ee, useBridgeUIMergedRegistryClasses as i } from "../../../Utils/index.js";
+import { computed as a, toValue as o, useId as s, useSlots as c } from "vue";
+import { get as l, omit as u } from "es-toolkit/compat";
+import { formFieldColorProps as d, formFieldRoundedProps as f, formFieldSizeProps as p, formFieldVariantProps as m } from "@bridge-ui/core/Tokens";
+import { cn as h, getColorToken as g, mergeBridgeUILayeredClasses as _, splitComponentProps as v } from "@bridge-ui/core/Utils";
 //#region src/Components/FormField/composables/useFormField.ts
-var b = [
+var y = [
 	"end",
 	"size",
 	"color",
@@ -26,216 +26,220 @@ var b = [
 	"description",
 	"errorMessage",
 	"showErrorIcon",
-	"hideErrorMessage"
+	"hideErrorMessage",
+	"showDescriptionOnError"
 ];
-function x(x, ee, S = {}) {
-	let C = c(), w = l(), T = o(() => y({
-		props: s(x),
-		bridgeKeys: b
-	})), { 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({
+function b(b, x, S = {}) {
+	let te = s(), C = c(), w = a(() => v({
+		props: o(b),
+		bridgeKeys: y
+	})), T = S.componentName ?? "FormField", { merged: E, entry: D, chromeEntry: O } = ee({
+		libDefaults: x,
+		componentName: T,
+		props: () => w.value.componentProps
+	}), k = a(() => E.value.customProps), A = a(() => S.control?.() ?? "input"), j = i({
 		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(() => {
+		chromeEntry: O,
+		props: () => w.value.componentProps
+	}), M = a(() => E.value.error === !0), N = a(() => !!E.value.disabled), P = a(() => !!E.value.readonly), F = a(() => E.value.variant ?? "outline"), ne = a(() => E.value.errorIcon ?? "alert"), I = a(() => F.value === "notched"), L = a(() => F.value === "stacked"), R = a(() => F.value === "underlined"), z = a(() => A.value === "textarea"), B = a(() => z.value && !!S.likeInput?.()), V = a(() => !E.value.hideErrorMessage && !t(C, "description", E.value.description)), H = a(() => {
+		let e = w.value.inheritedAttrs.id;
+		return E.value.controlId ?? e ?? te;
+	}), U = a(() => M.value && !E.value.hideErrorMessage && t(C, "errorMessage", E.value.errorMessage)), W = a(() => t(C, "description", E.value.description) ? !U.value || E.value.showDescriptionOnError === !0 : !1), G = a(() => U.value || V.value), K = a(() => (I.value || L.value) && (t(C, "label", E.value.label) || t(C, "corner", E.value.corner))), q = a(() => t(C, "label", E.value.label) ? "justify-between items-end" : "justify-end"), J = a(() => {
 		let e = [];
-		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, D.value?.tokens?.size);
-		return u(e, [E.value.size, P.value]);
-	}), J = o(() => {
-		let e = v(f, D.value?.tokens?.color);
-		return _({
+		return W.value && e.push(`${H.value}-description`), U.value && e.push(`${H.value}-error`), e.length > 0 ? e.join(" ") : void 0;
+	}), Y = a(() => {
+		let e = _(p, l(O.value ?? D.value, ["tokens", "size"]));
+		return l(e, [E.value.size, F.value]);
+	}), X = a(() => {
+		let e = _(d, l(O.value ?? D.value, ["tokens", "color"]));
+		return g({
 			tokens: e,
 			color: E.value.color,
-			invalid: j.value
+			invalid: M.value
 		});
-	}), Y = o(() => {
-		let e = v(p, D.value?.tokens?.rounded);
-		return u(e, E.value.rounded);
-	}), X = o(() => {
-		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,
-			[q.value?.insetStart ?? ""]: !0,
-			[q.value?.insetEnd ?? ""]: !0
+	}), Z = a(() => {
+		let e = _(f, l(O.value ?? D.value, ["tokens", "rounded"]));
+		return l(e, E.value.rounded);
+	}), Q = a(() => {
+		let e = _(m, l(O.value ?? D.value, ["tokens", "variant"]));
+		return l(e, F.value);
+	}), re = a(() => R.value ? X.value?.underlined : X.value?.input), ie = a(() => {
+		if (L.value) return h({
+			[Y.value?.insetTop ?? ""]: !0,
+			[Y.value?.insetStart ?? ""]: !0,
+			[Y.value?.insetEnd ?? ""]: !0
 		});
-	}), te = o(() => {
-		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
+	}), ae = a(() => {
+		let t = S.reservedSlots?.() ?? [], n = e(C, "end") || t.includes("end"), r = e(C, "start") || t.includes("start");
+		if (!L.value) return !r && !n ? Y.value?.padding : h({
+			[Y.value?.insetStart ?? ""]: !r,
+			[Y.value?.insetEnd ?? ""]: !n
 		});
-	}), ne = o(() => r(O.value?.end, {}, g({
+	}), oe = a(() => r(k.value?.end, {}, h({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-500": !0,
-		[J.value?.end ?? ""]: !0,
-		[A.value.end ?? ""]: !0
-	}))), re = o(() => {
-		let e = T.value.inheritedAttrs;
-		return r(O.value?.root, {
-			class: g(e.class),
-			...d(e, ["class"])
-		}, g({
+		[X.value?.end ?? ""]: !0,
+		[j.value.end ?? ""]: !0
+	}))), se = a(() => {
+		let e = w.value.inheritedAttrs;
+		return r(k.value?.root, {
+			class: h(e.class),
+			...u(e, ["class"])
+		}, h({
 			"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,
-			[A.value.root ?? ""]: !0
+			[j.value.root ?? ""]: !0
 		}));
-	}), ie = o(() => r(O.value?.errorMessage, {}, g({
+	}), ce = a(() => r(k.value?.errorMessage, {}, h({
 		"mt-1": !0,
 		"min-h-[1lh]": V.value,
 		"text-error-600 dark:text-error-400": !0,
-		[q.value?.text ?? ""]: !0,
-		[q.value?.insetStart ?? ""]: !0,
-		[q.value?.insetEnd ?? ""]: !0,
-		[A.value.errorMessage ?? ""]: !0
-	}))), ae = o(() => r({
-		...O.value?.input,
+		[Y.value?.text ?? ""]: !0,
+		[Y.value?.insetStart ?? ""]: !0,
+		[Y.value?.insetEnd ?? ""]: !0,
+		[j.value.errorMessage ?? ""]: !0
+	}))), le = a(() => r({
+		...k.value?.input,
 		id: H.value,
-		disabled: M.value,
-		readonly: N.value,
-		"aria-describedby": K.value,
-		"aria-invalid": j.value || void 0
-	}, d(T.value.inheritedAttrs, [
+		disabled: N.value,
+		readonly: P.value,
+		"aria-describedby": J.value,
+		"aria-invalid": M.value || void 0
+	}, u(w.value.inheritedAttrs, [
 		"class",
 		"modelValue",
 		"onUpdate:modelValue"
-	]), g({
+	]), h({
 		"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,
 		"text-dark-900 dark:text-dark-100 placeholder:text-dark-400": !0,
 		"outline-none ring-0 focus:outline-none focus:ring-0": !0,
 		"disabled:cursor-not-allowed": !0,
-		[q.value?.input ?? ""]: !z.value,
-		[q.value?.textarea ?? ""]: z.value,
-		[q.value?.textareaLikeInput ?? ""]: B.value,
-		[A.value.input ?? ""]: !0
-	}))), oe = o(() => n(O.value?.label, {
+		[Y.value?.input ?? ""]: !z.value,
+		[Y.value?.textarea ?? ""]: z.value,
+		[Y.value?.textareaLikeInput ?? ""]: B.value,
+		[j.value.input ?? ""]: !0
+	}))), ue = a(() => n(k.value?.label, {
 		for: H.value,
 		size: E.value.size,
-		error: j.value,
+		error: M.value,
 		required: E.value.required,
 		classes: {
-			required: A.value.required,
-			root: g({
-				[X.value?.label ?? ""]: I.value,
-				[A.value.label ?? ""]: !0
+			required: j.value.required,
+			root: h({
+				[Q.value?.label ?? ""]: I.value,
+				[j.value.label ?? ""]: !0
 			})
 		}
-	})), $ = o(() => r(O.value?.start, {}, g({
+	})), de = a(() => r(k.value?.start, {}, h({
 		"shrink-0 self-center flex items-center whitespace-nowrap select-none pointer-events-none": !0,
 		"text-dark-400": !0,
-		[J.value?.start ?? ""]: !0,
-		[A.value.start ?? ""]: !0
-	}))), se = o(() => n(O.value?.corner, {
+		[X.value?.start ?? ""]: !0,
+		[j.value.start ?? ""]: !0
+	}))), fe = a(() => n(k.value?.corner, {
 		for: H.value,
 		size: E.value.size,
-		classes: { root: g({
-			[X.value?.corner ?? ""]: I.value,
-			[A.value.corner ?? ""]: !0
+		classes: { root: h({
+			[Q.value?.corner ?? ""]: I.value,
+			[j.value.corner ?? ""]: !0
 		}) }
-	})), ce = o(() => {
-		let e = t(w, "label", E.value.label);
-		return r(O.value?.header, {}, g({
+	})), pe = a(() => {
+		let e = t(C, "label", E.value.label);
+		return r(k.value?.header, {}, h({
 			flex: !0,
 			"w-full shrink-0": !0,
 			"justify-between": e,
 			"justify-end": !e,
 			"items-center": I.value,
 			"items-end": L.value,
-			[X.value?.labelRow ?? ""]: W.value,
-			[A.value.header ?? ""]: !0
+			[Q.value?.labelRow ?? ""]: K.value,
+			[j.value.header ?? ""]: !0
 		}));
-	}), le = o(() => r(O.value?.header, {}, g({
+	}), $ = a(() => r(k.value?.header, {}, h({
 		flex: !0,
 		"mb-1": !0,
-		[G.value]: !0,
-		[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({
+		[q.value]: !0,
+		[j.value.header ?? ""]: !0
+	}))), me = a(() => r(k.value?.endIcon, {}, h({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))), he = a(() => r(k.value?.end, {}, h({
 		"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,
-		[A.value.end ?? ""]: !0
-	}))), fe = o(() => r({}, {}, g({
+		[j.value.end ?? ""]: !0
+	}))), ge = a(() => r({}, {}, h({
 		"flex min-h-0 min-w-0 flex-1 flex-col": !0,
-		[Q.value ?? ""]: !0
-	}))), pe = o(() => r({}, {}, g({
+		[ie.value ?? ""]: !0
+	}))), _e = a(() => r({}, {}, h({
 		"flex w-full min-w-0 flex-1 items-stretch gap-x-2": !0,
-		[q.value?.controlRow ?? ""]: !0
+		[Y.value?.controlRow ?? ""]: !0
 	})));
 	return {
-		slots: w,
+		slots: C,
 		merged: E,
-		control: k,
-		endBind: ne,
-		rootBind: re,
+		control: A,
+		endBind: oe,
+		rootBind: se,
 		controlId: H,
-		errorBind: ie,
-		errorIcon: F,
-		inputBind: ae,
+		errorBind: ce,
+		errorIcon: ne,
+		inputBind: le,
 		isNotched: I,
 		isStacked: L,
-		startBind: $,
-		headerBind: le,
-		isDisabled: M,
-		isReadonly: N,
-		variantKey: P,
-		endIconBind: ue,
-		endSlotBind: de,
-		invalidated: j,
-		containerBind: o(() => r(O.value?.container, {
-			"data-bridge-variant": P.value,
+		startBind: de,
+		headerBind: $,
+		isDisabled: N,
+		isReadonly: P,
+		variantKey: F,
+		endIconBind: me,
+		endSlotBind: he,
+		invalidated: M,
+		containerBind: a(() => r(k.value?.container, {
+			"data-bridge-variant": F.value,
 			"data-bridge-rounded": E.value.rounded ?? "md"
-		}, g({
+		}, h({
 			"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": 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 ?? ""]: !R.value,
-			[te.value ?? ""]: !0,
-			[Z.value ?? ""]: !0,
+			"bg-dark-100 dark:bg-dark-800": N.value && !M.value,
+			[Y.value?.container ?? ""]: !z.value,
+			[Y.value?.containerTextareaLikeInput ?? ""]: B.value,
+			[Y.value?.containerTextarea ?? ""]: z.value && !B.value,
+			[Q.value?.container ?? ""]: !0,
+			[Z.value ?? ""]: !R.value,
+			[ae.value ?? ""]: !0,
+			[re.value ?? ""]: !0,
 			"rounded-none": R.value,
-			"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
+			"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
 		}))),
-		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({
+		startIconBind: a(() => r(k.value?.startIcon, {}, h({ "inline-flex shrink-0 items-center justify-center self-center": L.value }))),
+		startSlotBind: a(() => r(k.value?.start, {}, h({
 			"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,
-			[A.value.start ?? ""]: !0
+			[j.value.start ?? ""]: !0
 		}))),
-		fieldLabelProps: oe,
-		ariaDescribedBy: K,
-		descriptionBind: o(() => r(O.value?.description, {}, g({
+		fieldLabelProps: ue,
+		ariaDescribedBy: J,
+		descriptionBind: a(() => r(k.value?.description, {}, h({
 			"mt-1 text-dark-500 dark:text-dark-400": !0,
-			[q.value?.text ?? ""]: !0,
-			[q.value?.insetStart ?? ""]: !0,
-			[q.value?.insetEnd ?? ""]: !0,
-			[A.value.description ?? ""]: !0
+			[Y.value?.text ?? ""]: !0,
+			[Y.value?.insetStart ?? ""]: !0,
+			[Y.value?.insetEnd ?? ""]: !0,
+			[j.value.description ?? ""]: !0
 		}))),
-		stackedBodyBind: fe,
-		fieldCornerProps: se,
-		hasInsetLabelRow: W,
-		insetLabelRowBind: ce,
-		stackedInputRowBind: pe,
+		stackedBodyBind: ge,
+		fieldCornerProps: fe,
+		hasInsetLabelRow: K,
+		insetLabelRowBind: pe,
+		stackedInputRowBind: _e,
+		showErrorMessageRow: G,
+		showDescriptionContent: W,
 		showErrorMessageContent: U,
 		reservesErrorMessageSpace: V
 	};
 }
 //#endregion
-export { b as formFieldBridgeKeys, x as useFormField };
+export { y as formFieldBridgeKeys, b as useFormField };

package/dist/Components/FormField/formField.types.d.ts

@@ -142,7 +142,8 @@ export interface FormFieldOwnProps {
      */
     customProps?: FormFieldCustomProps;
     /**
-     * Helper text below the control (hidden when the field is invalid).
+     * Helper text below the control. Hidden when `error` is true and an error
+     * message is shown, unless `showDescriptionOnError` is true.
      *
      * @default undefined
      */
@@ -166,7 +167,8 @@ export interface FormFieldOwnProps {
      */
     endIcon?: IconSource;
     /**
-     * When `true`, applies invalid styling on the label and hides description.
+     * When `true`, applies invalid styling on the label. Hides description when
+     * an error message is shown, unless `showDescriptionOnError` is true.
      *
      * @default false
      */
@@ -192,7 +194,8 @@ export interface FormFieldOwnProps {
      */
     field?: UseFormFieldReturn;
     /**
-     * When `true`, does not reserve space below the control for error messages.
+     * When `true`, does not reserve the error row. That row is also omitted
+     * while a description is shown.
      *
      * @default false
      */
@@ -221,6 +224,12 @@ export interface FormFieldOwnProps {
      * @default "md"
      */
     rounded?: MergeProps<FormFieldRounded, FormFieldRoundedOverrides>;
+    /**
+     * When `true`, keeps the description visible while the field is invalid.
+     *
+     * @default false
+     */
+    showDescriptionOnError?: boolean;
     /**
      * When `true` and the field is invalid, shows an error icon at the inline end
      * when no `endIcon` or `end` slot is present.
@@ -269,7 +278,8 @@ export interface FormFieldSlots {
      */
     default?: Slot<undefined>;
     /**
-     * Helper text below the control (hidden when the field is invalid).
+     * Helper text below the control. Hidden when the field is invalid and an
+     * error message is shown, unless `showDescriptionOnError` is true.
      */
     description?: Slot<undefined>;
     /**

package/dist/Components/Listbox/Listbox.vue.d.ts

@@ -26,10 +26,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     overlay: import('@bridge-ui/core/Domain').FieldOverlayMode;
     showFooter: boolean;
     multiple: boolean;
+    hideEmptyMessage: boolean;
     loading: boolean;
     placement: import('@floating-ui/utils').Placement;
     disableAutoFocus: boolean;
-    hideEmptyMessage: boolean;
     highlightedIndex: number;
     showCheckmark: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -35,6 +35,7 @@ var M = /*@__PURE__*/ g({
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: { type: Boolean },
 		size: {},
 		slots: {},

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

@@ -435,7 +435,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -460,6 +460,8 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -685,7 +687,7 @@ export declare function useNumberField(props: NumberFieldOwnProps, model: Ref<nu
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, {
         min: number | undefined;
         max: number | undefined;
         type: string;

package/dist/Components/OtpField/OtpField.vue.d.ts

@@ -13,14 +13,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     onChange?: ((value: string) => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | null | undefined) => any) | undefined;
     onComplete?: ((value: string) => any) | undefined;
-}>, {
-    color: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').OtpFieldColor, import('./otpField.types').OtpFieldColorOverrides>;
-    type: import('@bridge-ui/core/Domain').OtpInputType;
-    size: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').BaseFieldSize, import('../BaseField').BaseFieldSizeOverrides>;
-    length: number;
-    rounded: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').OtpFieldRounded, import('./otpField.types').OtpFieldRoundedOverrides>;
-    variant: import('@bridge-ui/core/Utils').MergeProps<import('@bridge-ui/core/Tokens').OtpFieldVariant, import('./otpField.types').OtpFieldVariantOverrides>;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/Components/OtpField/OtpField.vue_vue_type_script_setup_true_lang.js

@@ -16,15 +16,15 @@ var b = [
 	props: /*@__PURE__*/ d({
 		autoFocus: { type: Boolean },
 		classes: {},
-		color: { default: "primary" },
+		color: {},
 		customProps: {},
 		defaultValue: {},
-		length: { default: 6 },
+		length: {},
 		mask: { type: Boolean },
 		placeholder: {},
-		rounded: { default: "md" },
-		type: { default: "numeric" },
-		variant: { default: "outline" },
+		rounded: {},
+		type: {},
+		variant: {},
 		controlId: {},
 		corner: {},
 		description: {},
@@ -35,7 +35,8 @@ var b = [
 		label: {},
 		readonly: { type: Boolean },
 		required: { type: Boolean },
-		size: { default: "md" }
+		showDescriptionOnError: { type: Boolean },
+		size: {}
 	}, {
 		modelValue: {},
 		modelModifiers: {}

package/dist/Components/OtpField/composables/useOtpField.d.ts

@@ -6,7 +6,7 @@ export type UseOtpFieldOptions = {
     onChange?: (value: string) => void;
     onComplete?: (value: string) => void;
 };
-export declare const otpFieldBridgeKeys: readonly ["mask", "type", "color", "length", "rounded", "variant", "autoFocus", "placeholder", "defaultValue", "size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage"];
+export declare const otpFieldBridgeKeys: readonly ["mask", "type", "color", "length", "rounded", "variant", "autoFocus", "placeholder", "defaultValue", "size", "error", "label", "corner", "classes", "disabled", "readonly", "required", "controlId", "customProps", "description", "errorMessage", "hideErrorMessage", "showDescriptionOnError"];
 type OtpFieldLibDefaults = LibDefaultsShape<OtpFieldOwnProps, "size" | "type" | "color" | "length" | "rounded" | "variant">;
 type OtpFieldMerged = MergeLibDefaults<OtpFieldOwnProps, OtpFieldLibDefaults>;
 /**
@@ -52,6 +52,8 @@ export declare function useOtpField(props: MaybeRefOrGetter<OtpFieldOwnProps>, m
         fieldLabelProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
         descriptionBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         fieldCornerProps: import('vue').ComputedRef<import('../../Label').LabelProps>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
     };
     inputBind: (index: number) => import('@bridge-ui/core/Utils').MergePartBind<object, "class", {

package/dist/Components/PasswordField/PasswordField.vue_vue_type_script_setup_true_lang.js

@@ -35,6 +35,7 @@ var A = /*@__PURE__*/ m({
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: { type: Boolean },
 		size: {},
 		slots: {},

package/dist/Components/PasswordField/composables/usePasswordField.d.ts

@@ -433,7 +433,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
             onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
             onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>>;
+        }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>>;
         isNotched: import('vue').ComputedRef<boolean>;
         isStacked: import('vue').ComputedRef<boolean>;
         startBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
@@ -458,6 +458,8 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         hasInsetLabelRow: import('vue').ComputedRef<boolean>;
         insetLabelRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", import('vue').HTMLAttributes | undefined, {}>>;
         stackedInputRowBind: import('vue').ComputedRef<import('@bridge-ui/core/Utils').MergePartBind<object, "class", {}, {}>>;
+        showErrorMessageRow: import('vue').ComputedRef<boolean>;
+        showDescriptionContent: import('vue').ComputedRef<boolean>;
         showErrorMessageContent: import('vue').ComputedRef<boolean>;
         reservesErrorMessageSpace: import('vue').ComputedRef<boolean>;
     };
@@ -682,7 +684,7 @@ export declare function usePasswordField(props: PasswordFieldOwnProps, options?:
         onTransitionend?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionrun?: ((payload: TransitionEvent) => void) | undefined;
         onTransitionstart?: ((payload: TransitionEvent) => void) | undefined;
-    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showErrorIcon" | "startIcon">>>, {
+    }, Partial<Omit<Omit<import('../../FormField').FormFieldOwnProps, "field">, "error" | "color" | "end" | "size" | "classes" | "customProps" | "rounded" | "variant" | "label" | "disabled" | "required" | "corner" | "description" | "errorMessage" | "start" | "endIcon" | "errorIcon" | "hideErrorMessage" | "readonly" | "showDescriptionOnError" | "showErrorIcon" | "startIcon">>>, {
         type: string;
     }>>;
     isVisible: import('vue').ComputedRef<boolean>;

package/dist/Components/Select/Select.vue_vue_type_script_setup_true_lang.js

@@ -72,6 +72,7 @@ var N = {
 		readonly: { type: Boolean },
 		required: { type: Boolean },
 		rounded: {},
+		showDescriptionOnError: { type: Boolean },
 		showErrorIcon: {
 			type: Boolean,
 			default: !0