@leabankab/component-library 8.2.0 → 8.3.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 8.3.0
+
+### Minor Changes
+
+- fa6fad5: `Input` takes `labelPlacement` and `tooltip`, as `NumberInput` does: `labelPlacement="outside"` puts the label above the field, where it can carry help text behind an info button. With the label outside, a start icon in `Input` or `NumberInput` is now centred on the value.
+
 ## 8.2.0
 
 ### Minor Changes

package/dist/component-library.es.js

@@ -1,7 +1,7 @@
 "use client";
 import { AnimatePresence as e, animate as t, motion as n, useMotionValue as r, useReducedMotion as i } from "motion/react";
 import { Children as a, Fragment as o, createContext as s, isValidElement as c, useCallback as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
-import { ArrowLeft as _, ArrowRight as v, Check as y, ChevronDown as b, CircleAlert as x, CircleCheck as S, CircleX as C, Info as w, InfoIcon as T, Minus as E, Plus as D, Search as O, TriangleAlert as ee, X as k } from "lucide-react";
+import { ArrowLeft as _, ArrowRight as v, Check as y, ChevronDown as b, CircleAlert as x, CircleCheck as S, CircleX as C, Info as w, InfoIcon as T, Minus as E, Plus as ee, Search as D, TriangleAlert as O, X as k } from "lucide-react";
 import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
 import { Button as te } from "@base-ui/react/button";
 import { useRender as N } from "@base-ui/react/use-render";
@@ -1018,7 +1018,7 @@ var kt = {
 		size: "1em",
 		"aria-hidden": !0
 	}),
-	warning: /* @__PURE__ */ j(ee, {
+	warning: /* @__PURE__ */ j(O, {
 		size: "1em",
 		"aria-hidden": !0
 	}),
@@ -1506,12 +1506,12 @@ function An({ id: e, htmlFor: t, tooltip: n, required: r, error: i, disabled: a,
 	});
 }
 var J = {
-	Field: "_Field_dhdlj_11",
-	Box: "_Box_dhdlj_19",
-	Inner: "_Inner_dhdlj_87",
-	Adornment: "_Adornment_dhdlj_96",
-	Control: "_Control_dhdlj_100",
-	Label: "_Label_dhdlj_145"
+	Field: "_Field_fj1it_11",
+	Box: "_Box_fj1it_19",
+	Inner: "_Inner_fj1it_87",
+	Adornment: "_Adornment_fj1it_96",
+	Control: "_Control_fj1it_100",
+	Label: "_Label_fj1it_152"
 }, Y = {
 	Positioner: "_Positioner_1lvwd_12",
 	Popup: "_Popup_1lvwd_17",
@@ -1564,8 +1564,8 @@ function Mn(e, t) {
 //#endregion
 //#region src/components/form/combo-field.tsx
 var Nn = (...e) => e.filter(Boolean).join(" ") || void 0;
-function Pn({ label: e, helperText: t, error: n = !1, warning: r, required: i = !1, disabled: a = !1, placeholder: o, onBlur: s, id: c, "aria-label": l, "aria-labelledby": u, "aria-describedby": d, className: p, style: m, ref: _, renderRoot: v, inputProps: y, chips: x, filled: S = !1, clearable: C = !1, trigger: w = !1, selectTextOnClick: T = !1, children: E, afterHelperText: D }) {
-	let O = jn(), ee = f(), te = c ?? ee, N = f(), P = f(), F = e != null, I = kn(t, r, n), L = I.content != null, ne = x !== void 0, R = h(null), z = h(null), re = Mn(s, [R, z]), [ie, ae] = g(!1), V = h(!1), oe = /* @__PURE__ */ j(B.Input, {
+function Pn({ label: e, helperText: t, error: n = !1, warning: r, required: i = !1, disabled: a = !1, placeholder: o, onBlur: s, id: c, "aria-label": l, "aria-labelledby": u, "aria-describedby": d, className: p, style: m, ref: _, renderRoot: v, inputProps: y, chips: x, filled: S = !1, clearable: C = !1, trigger: w = !1, selectTextOnClick: T = !1, children: E, afterHelperText: ee }) {
+	let D = jn(), O = f(), te = c ?? O, N = f(), P = f(), F = e != null, I = kn(t, r, n), L = I.content != null, ne = x !== void 0, R = h(null), z = h(null), re = Mn(s, [R, z]), [ie, ae] = g(!1), V = h(!1), oe = /* @__PURE__ */ j(B.Input, {
 		...y,
 		ref: _,
 		id: te,
@@ -1616,7 +1616,7 @@ function Pn({ label: e, helperText: t, error: n = !1, warning: r, required: i =
 					className: q.Buttons,
 					children: [C && /* @__PURE__ */ j(B.Clear, {
 						className: Nn(q.Button, q.Clear),
-						"aria-label": O.clear,
+						"aria-label": D.clear,
 						tabIndex: -1,
 						children: /* @__PURE__ */ j(k, { "aria-hidden": !0 })
 					}), w && /* @__PURE__ */ j(B.Trigger, {
@@ -1627,7 +1627,7 @@ function Pn({ label: e, helperText: t, error: n = !1, warning: r, required: i =
 							role: void 0,
 							"aria-haspopup": "listbox",
 							"aria-required": void 0,
-							"aria-label": t.open ? O.close : O.open
+							"aria-label": t.open ? D.close : D.open
 						}),
 						children: /* @__PURE__ */ j(b, { "aria-hidden": !0 })
 					})]
@@ -1653,7 +1653,7 @@ function Pn({ label: e, helperText: t, error: n = !1, warning: r, required: i =
 				warning: I.warning,
 				children: I.content
 			}),
-			D
+			ee
 		]
 	});
 }
@@ -2233,7 +2233,7 @@ function ei({ value: e, defaultValue: t = "", onValueChange: n, domains: r = Pr,
 		f || _(e), S(void 0), n?.(e);
 	}, T = () => {
 		x != null && (w(x), y.current?.focus());
-	}, [E, D] = g(!1), O = m(() => Lr(v, r).slice(0, i), [
+	}, [E, ee] = g(!1), D = m(() => Lr(v, r).slice(0, i), [
 		v,
 		r,
 		i
@@ -2269,10 +2269,10 @@ function ei({ value: e, defaultValue: t = "", onValueChange: n, domains: r = Pr,
 			spellCheck: !1
 		},
 		renderRoot: (e) => /* @__PURE__ */ j(ie.Root, {
-			items: O,
+			items: D,
 			filter: null,
-			open: E && O.length > 0,
-			onOpenChange: D,
+			open: E && D.length > 0,
+			onOpenChange: ee,
 			value: v,
 			onValueChange: w,
 			disabled: u.disabled,
@@ -2327,62 +2327,75 @@ function ii(e, t) {
 		};
 	}, [e, t]), n;
 }
-function ai({ label: e, helperText: t, error: n = !1, warning: r, value: i, defaultValue: a, onValueChange: o, startAdornment: s, endAdornment: c, multiline: l = !1, rows: u, minRows: d, maxRows: p, className: m, style: h, ref: g, id: _, disabled: v = !1, required: y = !1, placeholder: b, "aria-describedby": x, ...S }) {
-	let C = f(), w = _ ?? C, T = f(), E = e != null, D = kn(t, r, n), O = D.content != null, ee = ii(l && u == null, p), k = (e) => {
-		if (ee.current = e, typeof g == "function") return g(e);
-		g && (g.current = e);
+function ai({ label: e, labelPlacement: t = "inside", tooltip: n, helperText: r, error: i = !1, warning: a, value: o, defaultValue: s, onValueChange: c, startAdornment: l, endAdornment: u, multiline: d = !1, rows: p, minRows: m, maxRows: h, className: g, style: _, ref: v, id: y, disabled: b = !1, required: x = !1, placeholder: S, "aria-describedby": C, ...w }) {
+	let T = f(), E = y ?? T, ee = f(), D = f(), O = e != null, k = O && t === "outside", A = kn(r, a, i), te = A.content != null, N = ii(d && p == null, h), P = (e) => {
+		if (N.current = e, typeof v == "function") return v(e);
+		v && (v.current = e);
 	};
 	return /* @__PURE__ */ M("div", {
-		className: ni(J.Field, m),
-		style: h,
-		children: [/* @__PURE__ */ M("div", {
-			className: J.Box,
-			"data-invalid": n ? "" : void 0,
-			"data-disabled": v ? "" : void 0,
-			"data-has-label": E ? "" : void 0,
-			onClick: (e) => {
-				e.target.closest("button, a, input, textarea, select, [tabindex]") || e.currentTarget.querySelector("input, textarea")?.focus();
-			},
-			children: [
-				s != null && /* @__PURE__ */ j("span", {
-					className: J.Adornment,
-					"data-position": "start",
-					children: s
-				}),
-				/* @__PURE__ */ M("div", {
-					className: J.Inner,
-					children: [E && /* @__PURE__ */ M("label", {
-						htmlFor: w,
-						className: J.Label,
-						children: [e, y && /* @__PURE__ */ j(Dn, {})]
-					}), /* @__PURE__ */ j(ce, {
-						...S,
-						ref: k,
-						id: w,
-						value: i,
-						defaultValue: a,
-						onValueChange: (e) => o?.(e),
-						disabled: v,
-						required: y,
-						placeholder: b || " ",
-						"aria-invalid": n,
-						"aria-describedby": ni(O && T, x),
-						className: J.Control,
-						render: l ? /* @__PURE__ */ j("textarea", { rows: u ?? d ?? 1 }) : void 0
-					})]
-				}),
-				c != null && /* @__PURE__ */ j("span", {
-					className: J.Adornment,
-					"data-position": "end",
-					children: c
-				})
-			]
-		}), O && /* @__PURE__ */ j(On, {
-			id: T,
-			error: n,
-			warning: D.warning,
-			children: D.content
-		})]
+		className: ni(J.Field, g),
+		style: _,
+		children: [
+			k && /* @__PURE__ */ j(An, {
+				id: ee,
+				htmlFor: E,
+				tooltip: n,
+				required: x,
+				error: i,
+				disabled: b,
+				children: e
+			}),
+			/* @__PURE__ */ M("div", {
+				className: J.Box,
+				"data-invalid": i ? "" : void 0,
+				"data-disabled": b ? "" : void 0,
+				"data-has-label": O && !k ? "" : void 0,
+				"data-label-outside": k ? "" : void 0,
+				onClick: (e) => {
+					e.target.closest("button, a, input, textarea, select, [tabindex]") || e.currentTarget.querySelector("input, textarea")?.focus();
+				},
+				children: [
+					l != null && /* @__PURE__ */ j("span", {
+						className: J.Adornment,
+						"data-position": "start",
+						children: l
+					}),
+					/* @__PURE__ */ M("div", {
+						className: J.Inner,
+						children: [O && !k && /* @__PURE__ */ M("label", {
+							htmlFor: E,
+							className: J.Label,
+							children: [e, x && /* @__PURE__ */ j(Dn, {})]
+						}), /* @__PURE__ */ j(ce, {
+							...w,
+							ref: P,
+							id: E,
+							value: o,
+							defaultValue: s,
+							onValueChange: (e) => c?.(e),
+							disabled: b,
+							required: x,
+							placeholder: S || " ",
+							"aria-invalid": i,
+							"aria-describedby": ni(te && D, C),
+							className: J.Control,
+							render: d ? /* @__PURE__ */ j("textarea", { rows: p ?? m ?? 1 }) : void 0
+						})]
+					}),
+					u != null && /* @__PURE__ */ j("span", {
+						className: J.Adornment,
+						"data-position": "end",
+						children: u
+					})
+				]
+			}),
+			te && /* @__PURE__ */ j(On, {
+				id: D,
+				error: i,
+				warning: A.warning,
+				children: A.content
+			})
+		]
 	});
 }
 var Q = {
@@ -2405,7 +2418,7 @@ function si({ side: e, onSideChange: t, ...n }) {
 		t(e === "top" ? "top" : "bottom");
 	}, [e, t]), /* @__PURE__ */ j("div", { ...n });
 }
-function ci({ label: e, helperText: t, error: n = !1, required: r = !1, disabled: i = !1, placeholder: a, startAdornment: o, endAdornment: s, open: c, onOpenChange: l, onBlur: u, name: d, id: p, "aria-label": m, "aria-labelledby": _, "aria-describedby": v, className: y, style: x, ref: S, multiple: C, value: w, onValueChange: T, filled: E, display: D, displayHidden: O = !1, valueText: ee, children: k }) {
+function ci({ label: e, helperText: t, error: n = !1, required: r = !1, disabled: i = !1, placeholder: a, startAdornment: o, endAdornment: s, open: c, onOpenChange: l, onBlur: u, name: d, id: p, "aria-label": m, "aria-labelledby": _, "aria-describedby": v, className: y, style: x, ref: S, multiple: C, value: w, onValueChange: T, filled: E, display: ee, displayHidden: D = !1, valueText: O, children: k }) {
 	let A = f(), te = p ?? A, N = f(), P = f(), F = e != null, I = t != null, [L, ne] = g(!1), R = c ?? L, [z, B] = g("bottom"), re = h(null), ie = h(null), ae = Mn(u, [re, ie]);
 	return /* @__PURE__ */ M("div", {
 		className: oi(J.Field, Q.Field, y),
@@ -2447,7 +2460,7 @@ function ci({ label: e, helperText: t, error: n = !1, required: r = !1, disabled
 						className: Q.Trigger,
 						children: /* @__PURE__ */ j("span", {
 							className: Q.SrOnly,
-							children: ee
+							children: O
 						})
 					}),
 					o != null && /* @__PURE__ */ j("span", {
@@ -2463,8 +2476,8 @@ function ci({ label: e, helperText: t, error: n = !1, required: r = !1, disabled
 							children: [e, r && /* @__PURE__ */ j(Dn, {})]
 						}), /* @__PURE__ */ j("div", {
 							className: Q.Display,
-							"aria-hidden": O || void 0,
-							children: E ? D : a && /* @__PURE__ */ j("span", {
+							"aria-hidden": D || void 0,
+							children: E ? ee : a && /* @__PURE__ */ j("span", {
 								className: Q.Placeholder,
 								"aria-hidden": !0,
 								children: a
@@ -2663,13 +2676,13 @@ function _i(e, t, n) {
 	return new Intl.NumberFormat(r, a).formatToParts(e.type === "years" ? n ?? 0 : 0).find((t) => t.type === (e.type === "years" ? "unit" : "currency"))?.value ?? "";
 }
 var vi = {
-	Box: "_Box_1nhal_11",
-	Unit: "_Unit_1nhal_18",
-	Steppers: "_Steppers_1nhal_36",
-	Stepper: "_Stepper_1nhal_36"
+	Unit: "_Unit_1g5fk_11",
+	Box: "_Box_1g5fk_25",
+	Steppers: "_Steppers_1g5fk_29",
+	Stepper: "_Stepper_1g5fk_29"
 }, yi = (...e) => e.filter(Boolean).join(" ") || void 0;
 function bi({ label: e, labelPlacement: t = "inside", tooltip: n, helperText: r, error: i = !1, warning: a, required: o = !1, disabled: s = !1, id: c, placeholder: l, startIcon: u, unit: d, showSteppers: p = !0, className: m, style: h, ref: _, value: v, defaultValue: y, onValueChange: b, ...x }) {
-	let S = Te(), [C, w] = g(y ?? null), T = v === void 0 ? C : v, O = gi(d) ? _i(d, S, T) : d, ee = f(), k = c ?? ee, A = f(), te = f(), N = f(), P = xi(), F = e != null, I = F && t === "outside", L = kn(r, a, i), ne = L.content != null, z = yi(ne && te, O != null && O !== "" && N), B = (e) => {
+	let S = Te(), [C, w] = g(y ?? null), T = v === void 0 ? C : v, D = gi(d) ? _i(d, S, T) : d, O = f(), k = c ?? O, A = f(), te = f(), N = f(), P = xi(), F = e != null, I = F && t === "outside", L = kn(r, a, i), ne = L.content != null, z = yi(ne && te, D != null && D !== "" && N), B = (e) => {
 		e.target.closest("button, a, input, [tabindex]") || e.currentTarget.querySelector("input")?.focus();
 	};
 	return /* @__PURE__ */ M(R.Root, {
@@ -2722,10 +2735,10 @@ function bi({ label: e, labelPlacement: t = "inside", tooltip: n, helperText: r,
 							className: J.Control
 						})]
 					}),
-					O != null && O !== "" && /* @__PURE__ */ j("span", {
+					D != null && D !== "" && /* @__PURE__ */ j("span", {
 						id: N,
 						className: vi.Unit,
-						children: O
+						children: D
 					}),
 					p && /* @__PURE__ */ M("span", {
 						className: vi.Steppers,
@@ -2739,7 +2752,7 @@ function bi({ label: e, labelPlacement: t = "inside", tooltip: n, helperText: r,
 						}), /* @__PURE__ */ j(R.Increment, {
 							"aria-label": P.increase,
 							className: vi.Stepper,
-							children: /* @__PURE__ */ j(D, {
+							children: /* @__PURE__ */ j(ee, {
 								size: 16,
 								"aria-hidden": !0
 							})
@@ -2939,7 +2952,7 @@ function Ii({ options: e, value: t, onChange: n, ariaLabel: r, searchLabel: i, n
 				children: [
 					/* @__PURE__ */ M("div", {
 						className: $.Search,
-						children: [/* @__PURE__ */ j(O, { "aria-hidden": !0 }), /* @__PURE__ */ j(B.Input, {
+						children: [/* @__PURE__ */ j(D, { "aria-hidden": !0 }), /* @__PURE__ */ j(B.Input, {
 							className: $.SearchInput,
 							placeholder: i,
 							"aria-label": i
@@ -2980,7 +2993,7 @@ function Ii({ options: e, value: t, onChange: n, ariaLabel: r, searchLabel: i, n
 	});
 }
 function Li({ label: e, helperText: t, error: n, required: r = !1, disabled: i = !1, id: a, country: o, defaultCountry: s, onCountryChange: c, value: l, defaultValue: u, onValueChange: d, onBlur: p, countries: _, mobileOnly: v = !1, validateOnBlur: y = !0, className: b, style: x, ref: S, "aria-describedby": C, ...w }) {
-	let T = Te(), E = Mi(), D = f(), O = a ?? D, ee = f(), k = f(), A = h(null), [te, N] = g(!1), P = _ != null && _.length > 0 ? _ : null, F = P?.length === 1, I = P?.join(","), L = m(() => {
+	let T = Te(), E = Mi(), ee = f(), D = a ?? ee, O = f(), k = f(), A = h(null), [te, N] = g(!1), P = _ != null && _.length > 0 ? _ : null, F = P?.length === 1, I = P?.join(","), L = m(() => {
 		let e = wi(Ei[T]), t = I?.split(",");
 		return t ? e.filter((e) => t.includes(e.code)) : e;
 	}, [T, I]), ne = s ?? Ti[T], [R, z] = g(P && !P.includes(ne) ? P[0] : ne), B = o ?? R, re = {
@@ -3058,7 +3071,7 @@ function Li({ label: e, helperText: t, error: n, required: r = !1, disabled: i =
 			}), /* @__PURE__ */ M("div", {
 				className: Ni(J.Inner, $.Inner),
 				children: [e != null && /* @__PURE__ */ M("label", {
-					htmlFor: O,
+					htmlFor: D,
 					className: Ni(J.Label, $.Label),
 					children: [e, r && /* @__PURE__ */ j(Dn, {})]
 				}), /* @__PURE__ */ j("input", {
@@ -3066,7 +3079,7 @@ function Li({ label: e, helperText: t, error: n, required: r = !1, disabled: i =
 					autoComplete: "tel-national",
 					...w,
 					ref: S,
-					id: O,
+					id: D,
 					type: "tel",
 					value: V,
 					onChange: U,
@@ -3074,12 +3087,12 @@ function Li({ label: e, helperText: t, error: n, required: r = !1, disabled: i =
 					disabled: i,
 					required: r,
 					"aria-invalid": de,
-					"aria-describedby": Ni(ve && k, pe && ee, C),
+					"aria-describedby": Ni(ve && k, pe && O, C),
 					className: J.Control
 				})]
 			})]
 		}), pe && /* @__PURE__ */ j(On, {
-			id: ee,
+			id: O,
 			error: de,
 			children: fe
 		})]
@@ -3101,7 +3114,7 @@ var Ri = {
 	return t;
 }, Gi = (...e) => e.filter(Boolean).join(" ") || void 0;
 function Ki({ label: e, tooltip: t, helperText: n, error: r = !1, value: i, defaultValue: a, onValueChange: o, name: s, disabled: c = !1, required: l = !1, onBlur: u, id: d, "aria-label": p, "aria-labelledby": h, "aria-describedby": g, className: _, style: v, ref: y, size: b, cardSize: x, optionsClassName: S, optionsStyle: C, optionsDataColumns: w, children: T }) {
-	let E = f(), D = f(), O = e != null, ee = n != null, k = m(() => ({
+	let E = f(), ee = f(), D = e != null, O = n != null, k = m(() => ({
 		size: b,
 		cardSize: x
 	}), [b, x]);
@@ -3109,7 +3122,7 @@ function Ki({ label: e, tooltip: t, helperText: n, error: r = !1, value: i, defa
 		className: Gi(Hi.Group, _),
 		style: v,
 		children: [
-			O && /* @__PURE__ */ j(An, {
+			D && /* @__PURE__ */ j(An, {
 				id: E,
 				tooltip: t,
 				required: l,
@@ -3129,8 +3142,8 @@ function Ki({ label: e, tooltip: t, helperText: n, error: r = !1, value: i, defa
 					disabled: c,
 					required: l,
 					"aria-label": p,
-					"aria-labelledby": O ? E : h,
-					"aria-describedby": Gi(ee && D, g),
+					"aria-labelledby": D ? E : h,
+					"aria-describedby": Gi(O && ee, g),
 					"aria-invalid": r ? !0 : void 0,
 					onBlur: (e) => {
 						e.currentTarget.contains(e.relatedTarget) || u?.(e);
@@ -3141,8 +3154,8 @@ function Ki({ label: e, tooltip: t, helperText: n, error: r = !1, value: i, defa
 					children: T
 				})
 			}),
-			ee && /* @__PURE__ */ j(On, {
-				id: D,
+			O && /* @__PURE__ */ j(On, {
+				id: ee,
 				error: r,
 				children: n
 			})