tembro 2.0.4 → 2.0.5

package/dist/components/form/form-input.js

@@ -8,17 +8,18 @@ import { PhoneInput as o, formatPhoneDigits as s } from "../inputs/phone-input.j
 import { QuantityInput as c } from "../inputs/quantity-input.js";
 import { SearchInput as l } from "../inputs/search-input.js";
 import { Input as u } from "../ui/input/index.js";
-import { FormFieldShell as d } from "./form-field-shell.js";
+import { FormFieldShell as d, resolveFormFieldIds as f } from "./form-field-shell.js";
 import "react";
-import { jsx as f } from "react/jsx-runtime";
-import { Controller as p } from "react-hook-form";
+import { jsx as p } from "react/jsx-runtime";
+import { Controller as m } from "react-hook-form";
 //#region src/components/form/form-input.tsx
-function m(e) {
+function h(e) {
 	return {
 		label: e.label,
 		description: e.description,
 		required: e.required,
 		className: e.className,
+		htmlFor: e.id ?? e.name,
 		layout: e.layout,
 		descriptionPosition: e.descriptionPosition,
 		labelAction: e.labelAction,
@@ -34,306 +35,366 @@ function m(e) {
 		contentClassName: e.contentClassName
 	};
 }
-function h(h) {
-	let g = h.id ?? h.name, _ = m(h), v = h.kind ?? "text", y = h.fieldClassName ?? "w-full";
-	return /* @__PURE__ */ f(p, {
-		control: h.control,
-		name: h.name,
-		rules: h.rules,
-		render: ({ field: p, fieldState: m }) => {
-			let b = m.error?.message;
-			if (v === "search") {
-				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: o, descriptionPosition: s, labelAction: c, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, onValueChange: M, onBlur: N, ...P } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(l, {
-						...P,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: p.value ?? "",
-						disabled: S,
-						readOnly: h.readOnly,
-						inputClassName: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+function g(g) {
+	let _ = g.id ?? g.name, v = h(g), y = g.kind ?? "text", b = g.fieldClassName ?? "w-full";
+	return /* @__PURE__ */ p(m, {
+		control: g.control,
+		name: g.name,
+		rules: g.rules,
+		render: ({ field: m, fieldState: h }) => {
+			let x = h.error?.message, S = f(_, {
+				description: g.description,
+				error: x
+			});
+			if (y === "search") {
+				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: o, descriptionPosition: s, labelAction: c, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, onValueChange: N, onBlur: P, ...F } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(l, {
+						...F,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: m.value ?? "",
+						disabled: C,
+						readOnly: g.readOnly,
+						inputClassName: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), N?.(e);
+							m.onBlur(), P?.(e);
 						},
 						onValueChange: (e) => {
-							p.onChange(e), M?.(e);
+							m.onChange(e), N?.(e);
 						}
 					})
 				});
 			}
-			if (v === "password") {
-				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: o, descriptionPosition: s, labelAction: c, requiredIndicator: l, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, onValueChange: M, onBlur: N, ...P } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(u, {
-						...P,
+			if (y === "password") {
+				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: o, descriptionPosition: s, labelAction: c, requiredIndicator: l, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, onValueChange: N, onBlur: P, ...F } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(u, {
+						...F,
 						type: "password",
-						id: A ?? g,
-						ref: p.ref,
-						name: p.name,
-						value: p.value ?? "",
-						disabled: S,
-						readOnly: h.readOnly,
-						inputClassName: k ?? y,
+						id: j ?? _,
+						ref: m.ref,
+						name: m.name,
+						value: m.value ?? "",
+						disabled: C,
+						readOnly: g.readOnly,
+						inputClassName: A ?? b,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), N?.(e);
+							m.onBlur(), P?.(e);
 						},
 						onChange: (e) => {
 							let t = e.currentTarget.value;
-							p.onChange(t), M?.(t);
+							m.onChange(t), N?.(t);
 						},
-						"aria-invalid": m.invalid || void 0
+						"aria-invalid": h.invalid || void 0
 					})
 				});
 			}
-			if (v === "number") {
-				let { control: e, name: t, label: n, description: r, required: i, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, emptyValue: M = null, onNumberChange: N, onBlur: P, ...F } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(a, {
-						...F,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: p.value ?? "",
-						disabled: S,
-						readOnly: h.readOnly,
-						className: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "number") {
+				let { control: e, name: t, label: n, description: r, required: i, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, emptyValue: N = null, onNumberChange: P, onBlur: F, ...I } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(a, {
+						...I,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: m.value ?? "",
+						disabled: C,
+						readOnly: g.readOnly,
+						className: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), P?.(e);
+							m.onBlur(), F?.(e);
 						},
 						onNumberChange: (e) => {
-							p.onChange(e ?? M), N?.(e);
+							m.onChange(e ?? N), P?.(e);
 						}
 					})
 				});
 			}
-			if (v === "phone") {
-				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: c, descriptionPosition: l, labelAction: u, requiredIndicator: v, errorIcon: x, showErrorIcon: S, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, valueMode: N = "raw", countryCode: P = "+998", maxDigits: F = 12, onValueChange: I, onBlur: L, ...R } = h, z = p.value == null ? "" : String(p.value), B = N === "raw" ? s(z, P, F) : z;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: j ?? g,
-					children: /* @__PURE__ */ f(o, {
-						...R,
-						id: j ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: B,
-						disabled: C,
-						readOnly: h.readOnly,
-						countryCode: P,
-						maxDigits: F,
-						className: A ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "phone") {
+				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: c, descriptionPosition: l, labelAction: u, requiredIndicator: f, errorIcon: y, showErrorIcon: C, disabled: w, readOnly: T, labelClassName: E, labelRowClassName: D, descriptionClassName: O, errorClassName: k, contentClassName: A, fieldClassName: j, id: M, kind: N, valueMode: P = "raw", countryCode: F = "+998", maxDigits: I = 12, onValueChange: L, onBlur: R, ...z } = g, B = m.value == null ? "" : String(m.value), V = P === "raw" ? s(B, F, I) : B;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: M ?? _,
+					children: /* @__PURE__ */ p(o, {
+						...z,
+						id: M ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: V,
+						disabled: w,
+						readOnly: g.readOnly,
+						countryCode: F,
+						maxDigits: I,
+						className: j ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), L?.(e);
+							m.onBlur(), R?.(e);
 						},
 						onValueChange: (e, t) => {
-							let n = N === "raw" ? t : e;
-							p.onChange(n), I?.(n, t, e);
+							let n = P === "raw" ? t : e;
+							m.onChange(n), L?.(n, t, e);
 						}
 					})
 				});
 			}
-			if (v === "date") {
-				let { control: e, name: n, label: r, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, emptyValue: M = "", onValueChange: N, onBlur: P, ...F } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(t, {
-						...F,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: p.value ?? "",
-						disabled: S,
-						readOnly: h.readOnly,
-						className: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "date") {
+				let { control: e, name: n, label: r, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, emptyValue: N = "", onValueChange: P, onBlur: F, ...I } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(t, {
+						...I,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: m.value ?? "",
+						disabled: C,
+						readOnly: g.readOnly,
+						className: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), P?.(e);
+							m.onBlur(), F?.(e);
 						},
 						onValueChange: (e) => {
-							p.onChange(e || M), N?.(e);
+							m.onChange(e || N), P?.(e);
 						}
 					})
 				});
 			}
-			if (v === "clearable") {
-				let { control: t, name: n, label: r, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, emptyValue: M = "", onValueChange: N, onBlur: P, ...F } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(e, {
-						...F,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: p.value ?? "",
-						disabled: S,
-						readOnly: h.readOnly,
-						className: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "clearable") {
+				let { control: t, name: n, label: r, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, emptyValue: N = "", onValueChange: P, onBlur: F, ...I } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(e, {
+						...I,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: m.value ?? "",
+						disabled: C,
+						readOnly: g.readOnly,
+						className: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), P?.(e);
+							m.onBlur(), F?.(e);
 						},
 						onValueChange: (e) => {
-							p.onChange(e || M), N?.(e);
+							m.onChange(e || N), P?.(e);
 						}
 					})
 				});
 			}
-			if (v === "masked") {
-				let { control: e, name: t, label: n, description: r, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, valueMode: M = "raw", onValueChange: N, onBlur: P, ...F } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(i, {
-						...F,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: String(p.value ?? ""),
-						disabled: S,
-						readOnly: h.readOnly,
-						className: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "masked") {
+				let { control: e, name: t, label: n, description: r, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, valueMode: N = "raw", onValueChange: P, onBlur: F, ...I } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(i, {
+						...I,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: String(m.value ?? ""),
+						disabled: C,
+						readOnly: g.readOnly,
+						className: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), P?.(e);
+							m.onBlur(), F?.(e);
 						},
 						onValueChange: (e, t) => {
-							let n = M === "raw" ? t : e;
-							p.onChange(n), N?.(e, t);
+							let n = N === "raw" ? t : e;
+							m.onChange(n), P?.(e, t);
 						}
 					})
 				});
 			}
-			if (v === "money") {
-				let { control: e, name: t, label: n, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, emptyValue: M = null, onValueChange: N, onBlur: P, ...F } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(r, {
-						...F,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: p.value ?? null,
-						disabled: S,
-						readOnly: h.readOnly,
-						className: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "money") {
+				let { control: e, name: t, label: n, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, emptyValue: N = null, onValueChange: P, onBlur: F, ...I } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(r, {
+						...I,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: m.value ?? null,
+						disabled: C,
+						readOnly: g.readOnly,
+						className: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), P?.(e);
+							m.onBlur(), F?.(e);
 						},
 						onValueChange: (e, t) => {
-							p.onChange(e ?? M), N?.(e, t);
+							m.onChange(e ?? N), P?.(e, t);
 						}
 					})
 				});
 			}
-			if (v === "quantity") {
-				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: o, descriptionPosition: s, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: x, disabled: S, readOnly: C, labelClassName: w, labelRowClassName: T, descriptionClassName: E, errorClassName: D, contentClassName: O, fieldClassName: k, id: A, kind: j, emptyValue: M = null, onValueChange: N, onBlur: P, ...F } = h;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: A ?? g,
-					children: /* @__PURE__ */ f(c, {
-						...F,
-						id: A ?? g,
-						name: p.name,
-						ref: p.ref,
-						value: p.value,
-						disabled: S,
-						readOnly: h.readOnly,
-						className: k ?? y,
-						"aria-invalid": m.invalid || void 0,
+			if (y === "quantity") {
+				let { control: e, name: t, label: n, description: r, required: i, className: a, layout: o, descriptionPosition: s, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: C, readOnly: w, labelClassName: T, labelRowClassName: E, descriptionClassName: D, errorClassName: O, contentClassName: k, fieldClassName: A, id: j, kind: M, emptyValue: N = null, onValueChange: P, onBlur: F, ...I } = g;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: j ?? _,
+					children: /* @__PURE__ */ p(c, {
+						...I,
+						id: j ?? _,
+						name: m.name,
+						ref: m.ref,
+						value: m.value,
+						disabled: C,
+						readOnly: g.readOnly,
+						className: A ?? b,
+						"aria-invalid": h.invalid || void 0,
+						"aria-describedby": S.describedBy,
+						"aria-errormessage": x ? S.errorId : void 0,
 						onBlur: (e) => {
-							p.onBlur(), P?.(e);
+							m.onBlur(), F?.(e);
 						},
 						onValueChange: (e) => {
-							p.onChange(e ?? M), N?.(e);
+							m.onChange(e ?? N), P?.(e);
 						}
 					})
 				});
 			}
-			if (v === "date-range") {
-				let { control: e, name: t, label: r, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: v, showErrorIcon: y, disabled: x, labelClassName: S, labelRowClassName: C, descriptionClassName: w, errorClassName: T, contentClassName: E, fieldClassName: D, id: O, kind: k, onValueChange: A, onBlur: j, ...M } = h, N = p.value;
-				return /* @__PURE__ */ f(d, {
-					..._,
-					error: b,
-					htmlFor: O ?? g,
-					children: /* @__PURE__ */ f(n, {
-						...M,
-						id: O ?? g,
-						value: N && typeof N == "object" ? {
-							from: N.from,
-							to: N.to
+			if (y === "date-range") {
+				let { control: e, name: t, label: r, description: i, required: a, className: o, layout: s, descriptionPosition: c, labelAction: l, requiredIndicator: u, errorIcon: f, showErrorIcon: y, disabled: b, labelClassName: C, labelRowClassName: w, descriptionClassName: T, errorClassName: E, contentClassName: D, fieldClassName: O, id: k, kind: A, onValueChange: j, onBlur: M, ...N } = g, P = m.value;
+				return /* @__PURE__ */ p(d, {
+					...v,
+					labelId: S.labelId,
+					descriptionId: S.descriptionId,
+					errorId: S.errorId,
+					error: x,
+					htmlFor: k ?? _,
+					children: /* @__PURE__ */ p(n, {
+						...N,
+						id: k ?? _,
+						value: P && typeof P == "object" ? {
+							from: P.from,
+							to: P.to
 						} : {
 							from: "",
 							to: ""
 						},
 						fromInputProps: {
-							...M.fromInputProps ?? {},
-							disabled: x,
-							readOnly: h.readOnly
+							...N.fromInputProps ?? {},
+							disabled: b,
+							readOnly: g.readOnly,
+							"aria-describedby": S.describedBy,
+							"aria-errormessage": x ? S.errorId : void 0
 						},
 						toInputProps: {
-							...M.toInputProps ?? {},
-							disabled: x,
-							readOnly: h.readOnly
+							...N.toInputProps ?? {},
+							disabled: b,
+							readOnly: g.readOnly,
+							"aria-describedby": S.describedBy,
+							"aria-errormessage": x ? S.errorId : void 0
 						},
 						onValueChange: (e) => {
-							p.onChange(e), A?.(e);
+							m.onChange(e), j?.(e);
 						},
-						"aria-invalid": m.invalid || void 0,
+						"aria-invalid": h.invalid || void 0,
 						onBlur: (e) => {
-							p.onBlur(), j?.(e);
+							m.onBlur(), M?.(e);
 						}
 					})
 				});
 			}
-			let { control: x, name: S, label: C, description: w, required: T, className: E, layout: D, descriptionPosition: O, labelAction: k, requiredIndicator: A, errorIcon: j, showErrorIcon: M, disabled: N, readOnly: P, labelClassName: F, labelRowClassName: I, descriptionClassName: L, errorClassName: R, contentClassName: z, fieldClassName: B, transformIn: V, transformOut: H, id: U, kind: W, onChange: G, onBlur: K, ...q } = h;
-			return /* @__PURE__ */ f(d, {
-				..._,
-				error: b,
-				htmlFor: U ?? g,
-				children: /* @__PURE__ */ f(u, {
-					...q,
-					id: U ?? g,
-					ref: p.ref,
-					name: p.name,
-					value: V ? V(p.value) : p.value ?? "",
-					disabled: N,
-					readOnly: P,
+			let { control: C, name: w, label: T, description: E, required: D, className: O, layout: k, descriptionPosition: A, labelAction: j, requiredIndicator: M, errorIcon: N, showErrorIcon: P, disabled: F, readOnly: I, labelClassName: L, labelRowClassName: R, descriptionClassName: z, errorClassName: B, contentClassName: V, fieldClassName: H, transformIn: U, transformOut: W, id: G, kind: K, onChange: q, onBlur: J, ...Y } = g;
+			return /* @__PURE__ */ p(d, {
+				...v,
+				labelId: S.labelId,
+				descriptionId: S.descriptionId,
+				errorId: S.errorId,
+				error: x,
+				htmlFor: G ?? _,
+				children: /* @__PURE__ */ p(u, {
+					...Y,
+					id: G ?? _,
+					ref: m.ref,
+					name: m.name,
+					value: U ? U(m.value) : m.value ?? "",
+					disabled: F,
+					readOnly: I,
 					onBlur: (e) => {
-						p.onBlur(), K?.(e);
+						m.onBlur(), J?.(e);
 					},
 					onChange: (e) => {
-						p.onChange(H ? H(e) : e.target.value), G?.(e);
+						m.onChange(W ? W(e) : e.target.value), q?.(e);
 					},
-					"aria-invalid": m.invalid || void 0,
-					className: B ?? y
+					"aria-invalid": h.invalid || void 0,
+					"aria-describedby": S.describedBy,
+					"aria-errormessage": x ? S.errorId : void 0,
+					className: H ?? b
 				})
 			});
 		}
 	});
 }
 //#endregion
-export { h as FormInput };
+export { g as FormInput };

package/dist/components/form/form-select.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../inputs/async-select.cjs"),t=require("../inputs/simple-select.cjs"),n=require("./form-field-shell.cjs");let r=require("react/jsx-runtime"),i=require("react-hook-form");function a(e){return{label:e.label,description:e.description,required:e.required,className:e.className,layout:e.layout,descriptionPosition:e.descriptionPosition,labelAction:e.labelAction,requiredIndicator:e.requiredIndicator,errorIcon:e.errorIcon,showErrorIcon:e.showErrorIcon,disabled:e.disabled,readOnly:e.readOnly,labelClassName:e.labelClassName,labelRowClassName:e.labelRowClassName,descriptionClassName:e.descriptionClassName,errorClassName:e.errorClassName,contentClassName:e.contentClassName}}function o(o){let s=a(o),c=o.kind??`simple`,l=o.fieldClassName??`w-full`;return(0,r.jsx)(i.Controller,{control:o.control,name:o.name,render:({field:i,fieldState:a})=>{let u=a.error?.message;if(c===`async`){let{control:t,name:a,label:c,description:d,required:f,className:p,layout:m,descriptionPosition:h,labelAction:g,requiredIndicator:_,errorIcon:v,showErrorIcon:y,disabled:b,readOnly:x,labelClassName:S,labelRowClassName:C,descriptionClassName:w,errorClassName:T,contentClassName:E,fieldClassName:D,emptyValue:O,kind:k,onValueChange:A,...j}=o;return(0,r.jsx)(n.FormFieldShell,{...s,error:u,children:(0,r.jsx)(e.AsyncSelect,{...j,value:i.value==null||i.value===``?void 0:String(i.value),disabled:b||x,onValueChange:(e,t)=>{i.onChange(e??O),A?.(e,t)},triggerClassName:D??l})})}let{control:d,name:f,label:p,description:m,required:h,className:g,layout:_,descriptionPosition:v,labelAction:y,requiredIndicator:b,errorIcon:x,showErrorIcon:S,disabled:C,readOnly:w,labelClassName:T,labelRowClassName:E,descriptionClassName:D,errorClassName:O,contentClassName:k,fieldClassName:A,emptyValue:j,kind:M,onValueChange:N,...P}=o;return(0,r.jsx)(n.FormFieldShell,{...s,error:u,children:(0,r.jsx)(t.SimpleSelect,{...P,value:i.value==null?``:String(i.value),disabled:C||w,onValueChange:e=>{i.onChange(e||j),N?.(e)},triggerClassName:A??l})})}})}exports.FormSelect=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../inputs/async-select.cjs"),t=require("../inputs/simple-select.cjs"),n=require("./form-field-shell.cjs");let r=require("react/jsx-runtime"),i=require("react-hook-form");function a(e){return{label:e.label,description:e.description,required:e.required,className:e.className,htmlFor:e.name,layout:e.layout,descriptionPosition:e.descriptionPosition,labelAction:e.labelAction,requiredIndicator:e.requiredIndicator,errorIcon:e.errorIcon,showErrorIcon:e.showErrorIcon,disabled:e.disabled,readOnly:e.readOnly,labelClassName:e.labelClassName,labelRowClassName:e.labelRowClassName,descriptionClassName:e.descriptionClassName,errorClassName:e.errorClassName,contentClassName:e.contentClassName}}function o(o){let s=a(o),c=o.kind??`simple`,l=o.fieldClassName??`w-full`;return(0,r.jsx)(i.Controller,{control:o.control,name:o.name,render:({field:i,fieldState:a})=>{let u=a.error?.message,d=n.resolveFormFieldIds(`${o.name}`,{description:o.description,error:u});if(c===`async`){let{control:t,name:a,label:c,description:f,required:p,className:m,layout:h,descriptionPosition:g,labelAction:_,requiredIndicator:v,errorIcon:y,showErrorIcon:b,disabled:x,readOnly:S,labelClassName:C,labelRowClassName:w,descriptionClassName:T,errorClassName:E,contentClassName:D,fieldClassName:O,emptyValue:k,kind:A,onValueChange:j,...M}=o;return(0,r.jsx)(n.FormFieldShell,{...s,labelId:d.labelId,descriptionId:d.descriptionId,errorId:d.errorId,error:u,children:(0,r.jsx)(e.AsyncSelect,{...M,value:i.value==null||i.value===``?void 0:String(i.value),disabled:x||S,"aria-describedby":d.describedBy,"aria-errormessage":u?d.errorId:void 0,onValueChange:(e,t)=>{i.onChange(e??k),j?.(e,t)},triggerClassName:O??l})})}let{control:f,name:p,label:m,description:h,required:g,className:_,layout:v,descriptionPosition:y,labelAction:b,requiredIndicator:x,errorIcon:S,showErrorIcon:C,disabled:w,readOnly:T,labelClassName:E,labelRowClassName:D,descriptionClassName:O,errorClassName:k,contentClassName:A,fieldClassName:j,emptyValue:M,kind:N,onValueChange:P,...F}=o;return(0,r.jsx)(n.FormFieldShell,{...s,labelId:d.labelId,descriptionId:d.descriptionId,errorId:d.errorId,error:u,children:(0,r.jsx)(t.SimpleSelect,{...F,value:i.value==null?``:String(i.value),disabled:w||T,"aria-describedby":d.describedBy,"aria-errormessage":u?d.errorId:void 0,onValueChange:e=>{i.onChange(e||M),P?.(e)},triggerClassName:j??l})})}})}exports.FormSelect=o;