@declarion/react 0.66.1 → 0.80.0

package/dist-lib/components/primitives/Fields.js

@@ -1,15 +1,16 @@
-import { Icon as e } from "./Icons.js";
-import { Btn as t } from "./Btn.js";
-import { IconBtn as n } from "./IconBtn.js";
-import { Dropdown as r } from "./Dropdown.js";
-import { Chip as i } from "./Chip.js";
-import { useText as a } from "../../hooks/useText.js";
-import { BoolToggle as o } from "./BoolToggle.js";
-import { MenuItem as s } from "./MenuItem.js";
-import { useMemo as c, useRef as l, useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
+import { formatDateText as e, isDateDraft as t, parseDateText as n } from "../../lib/date-text.js";
+import { Icon as r } from "./Icons.js";
+import { Btn as i } from "./Btn.js";
+import { IconBtn as a } from "./IconBtn.js";
+import { Dropdown as o } from "./Dropdown.js";
+import { Chip as s } from "./Chip.js";
+import { useText as c } from "../../hooks/useText.js";
+import { BoolToggle as l } from "./BoolToggle.js";
+import { MenuItem as u } from "./MenuItem.js";
+import { useId as d, useMemo as f, useRef as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
 //#region src/components/primitives/Fields.tsx
-var m = ({ children: t, required: n, hint: r, htmlFor: i, id: a }) => /* @__PURE__ */ p("div", {
+var v = ({ children: e, required: t, hint: n, htmlFor: i, id: a }) => /* @__PURE__ */ _("div", {
 	style: {
 		display: "flex",
 		alignItems: "center",
@@ -21,30 +22,30 @@ var m = ({ children: t, required: n, hint: r, htmlFor: i, id: a }) => /* @__PURE
 		letterSpacing: "0.01em"
 	},
 	children: [
-		i ? /* @__PURE__ */ f("label", {
+		i ? /* @__PURE__ */ g("label", {
 			id: a,
 			htmlFor: i,
-			children: t
-		}) : /* @__PURE__ */ f("span", {
+			children: e
+		}) : /* @__PURE__ */ g("span", {
 			id: a,
-			children: t
+			children: e
 		}),
-		n && /* @__PURE__ */ f("span", {
+		t && /* @__PURE__ */ g("span", {
 			"aria-hidden": "true",
 			style: { color: "var(--danger)" },
 			children: "*"
 		}),
-		r && /* @__PURE__ */ f("span", {
-			title: r,
+		n && /* @__PURE__ */ g("span", {
+			title: n,
 			style: {
 				cursor: "help",
 				color: "var(--text-4)",
 				display: "flex"
 			},
-			children: /* @__PURE__ */ f(e.info, { size: 11 })
+			children: /* @__PURE__ */ g(r.info, { size: 11 })
 		})
 	]
-}), h = {
+}), y = {
 	width: "100%",
 	height: "var(--control-height)",
 	padding: "0 10px",
@@ -57,33 +58,37 @@ var m = ({ children: t, required: n, hint: r, htmlFor: i, id: a }) => /* @__PURE
 	outline: "none",
 	transition: "border-color .12s, box-shadow .12s"
 };
-function g({ value: e, onChange: t, placeholder: n, prefix: r, suffix: i, style: a, ...o }) {
-	let [s, c] = u(!1);
-	return /* @__PURE__ */ p("div", {
+function b({ value: e, onChange: t, placeholder: n, prefix: r, suffix: i, style: a, onFocus: o, onBlur: s, ...c }) {
+	let [l, u] = m(!1);
+	return /* @__PURE__ */ _("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
 			gap: 6,
-			...h,
+			...y,
 			padding: r || i ? "0 8px" : "0 10px",
-			borderColor: s ? "var(--accent)" : "var(--border)",
-			boxShadow: s ? "0 0 0 3px var(--accent-ring)" : "none",
+			borderColor: l ? "var(--accent)" : "var(--border)",
+			boxShadow: l ? "0 0 0 3px var(--accent-ring)" : "none",
 			...a
 		},
 		children: [
-			r && /* @__PURE__ */ f("span", {
+			r && /* @__PURE__ */ g("span", {
 				style: {
 					color: "var(--text-3)",
 					display: "flex"
 				},
 				children: r
 			}),
-			/* @__PURE__ */ f("input", {
+			/* @__PURE__ */ g("input", {
 				value: e ?? "",
 				onChange: (e) => t?.(e.target.value),
 				placeholder: n,
-				onFocus: () => c(!0),
-				onBlur: () => c(!1),
+				onFocus: (e) => {
+					u(!0), o?.(e);
+				},
+				onBlur: (e) => {
+					u(!1), s?.(e);
+				},
 				style: {
 					border: 0,
 					outline: 0,
@@ -94,9 +99,9 @@ function g({ value: e, onChange: t, placeholder: n, prefix: r, suffix: i, style:
 					padding: 0,
 					minWidth: 0
 				},
-				...o
+				...c
 			}),
-			i && /* @__PURE__ */ f("span", {
+			i && /* @__PURE__ */ g("span", {
 				style: {
 					color: "var(--text-3)",
 					display: "flex"
@@ -106,8 +111,8 @@ function g({ value: e, onChange: t, placeholder: n, prefix: r, suffix: i, style:
 		]
 	});
 }
-function _({ value: e, onChange: t, placeholder: n, rows: r = 4, fill: i, id: a, name: o, ariaRequired: s }) {
-	let [c, l] = u(!1), d = i ? {
+function x({ value: e, onChange: t, placeholder: n, rows: r = 4, fill: i, id: a, name: o, ariaRequired: s }) {
+	let [c, l] = m(!1), u = i ? {
 		flex: 1,
 		height: "100%",
 		minHeight: 0,
@@ -116,7 +121,7 @@ function _({ value: e, onChange: t, placeholder: n, rows: r = 4, fill: i, id: a,
 		height: "auto",
 		resize: "vertical"
 	};
-	return /* @__PURE__ */ f("textarea", {
+	return /* @__PURE__ */ g("textarea", {
 		id: a,
 		name: o,
 		"aria-required": s || void 0,
@@ -127,55 +132,55 @@ function _({ value: e, onChange: t, placeholder: n, rows: r = 4, fill: i, id: a,
 		onFocus: () => l(!0),
 		onBlur: () => l(!1),
 		style: {
-			...h,
+			...y,
 			padding: "8px 10px",
 			lineHeight: 1.5,
-			...d,
+			...u,
 			borderColor: c ? "var(--accent)" : "var(--border)",
 			boxShadow: c ? "0 0 0 3px var(--accent-ring)" : "none",
 			fontFamily: "inherit"
 		}
 	});
 }
-var v = 20, y = 100;
-function b(e) {
+var S = 20, C = 100;
+function w(e) {
 	return typeof e.label == "string" || typeof e.label == "number" ? String(e.label) : e.value;
 }
-function x({ value: t, options: n, onChange: i, placeholder: o, onSearchChange: m, ..._ }) {
-	let x = a(), [S, C] = u(!1), [w, T] = u(""), E = l(null), D = n.find((e) => !e.heading && !e.divider && e.value === t), O = n.filter((e) => !e.heading && !e.divider).length, k = !!m, A = k || O > v, j = (e) => {
-		T(e), m?.(e);
-	}, M = c(() => {
-		if (k) return n.slice(0, y);
-		let e = w.trim().toLowerCase();
-		return e ? n.filter((t) => !t.heading && !t.divider && b(t).toLowerCase().includes(e)).slice(0, y) : n.slice(0, y);
+function T({ value: e, options: t, onChange: n, placeholder: i, onSearchChange: a, ...s }) {
+	let l = c(), [d, v] = m(!1), [x, T] = m(""), E = p(null), D = t.find((t) => !t.heading && !t.divider && t.value === e), O = t.filter((e) => !e.heading && !e.divider).length, k = !!a, A = k || O > S, j = (e) => {
+		T(e), a?.(e);
+	}, M = f(() => {
+		if (k) return t.slice(0, C);
+		let e = x.trim().toLowerCase();
+		return e ? t.filter((t) => !t.heading && !t.divider && w(t).toLowerCase().includes(e)).slice(0, C) : t.slice(0, C);
 	}, [
-		n,
-		w,
+		t,
+		x,
 		k
 	]);
-	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
-		..._,
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("button", {
+		...s,
 		type: "button",
 		ref: E,
 		"aria-haspopup": "listbox",
-		"aria-expanded": S,
+		"aria-expanded": d,
 		onClick: () => {
-			C((e) => {
+			v((e) => {
 				let t = !e;
 				return t && j(""), t;
 			});
 		},
 		style: {
-			...h,
+			...y,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
 			textAlign: "left",
 			cursor: "pointer",
-			..._.style,
+			...s.style,
 			color: D ? "var(--text)" : "var(--text-placeholder)"
 		},
-		children: [/* @__PURE__ */ f("span", {
+		children: [/* @__PURE__ */ g("span", {
 			style: {
 				display: "flex",
 				alignItems: "center",
@@ -184,8 +189,8 @@ function x({ value: t, options: n, onChange: i, placeholder: o, onSearchChange:
 				textOverflow: "ellipsis",
 				whiteSpace: "nowrap"
 			},
-			children: D ? D.label : o ?? x("control.select.placeholder", "Select…")
-		}), /* @__PURE__ */ f(e.down, {
+			children: D ? D.label : i ?? l("control.select.placeholder", "Select…")
+		}), /* @__PURE__ */ g(r.down, {
 			size: 12,
 			cls: "",
 			style: {
@@ -193,17 +198,17 @@ function x({ value: t, options: n, onChange: i, placeholder: o, onSearchChange:
 				flexShrink: 0
 			}
 		})]
-	}), /* @__PURE__ */ p(r, {
-		open: S,
+	}), /* @__PURE__ */ _(o, {
+		open: d,
 		anchor: E.current,
-		onClose: () => C(!1),
+		onClose: () => v(!1),
 		width: E.current?.offsetWidth,
 		style: {
 			maxHeight: "min(360px, calc(var(--app-height) - 24px))",
 			overflowY: "auto"
 		},
 		children: [
-			A && /* @__PURE__ */ f("div", {
+			A && /* @__PURE__ */ g("div", {
 				style: {
 					padding: 6,
 					position: "sticky",
@@ -211,18 +216,18 @@ function x({ value: t, options: n, onChange: i, placeholder: o, onSearchChange:
 					background: "var(--surface)",
 					zIndex: 1
 				},
-				children: /* @__PURE__ */ f(g, {
-					value: w,
+				children: /* @__PURE__ */ g(b, {
+					value: x,
 					onChange: j,
-					placeholder: x("control.search", "Search…"),
-					prefix: /* @__PURE__ */ f(e.search, { size: 12 }),
+					placeholder: l("control.search", "Search…"),
+					prefix: /* @__PURE__ */ g(r.search, { size: 12 }),
 					autoFocus: !0
 				})
 			}),
-			M.map((e, n) => e.divider ? /* @__PURE__ */ f("div", { style: {
+			M.map((t, r) => t.divider ? /* @__PURE__ */ g("div", { style: {
 				borderTop: "1px solid var(--divider)",
 				margin: "4px 0"
-			} }, `divider-${n}`) : e.heading ? /* @__PURE__ */ f("div", {
+			} }, `divider-${r}`) : t.heading ? /* @__PURE__ */ g("div", {
 				style: {
 					padding: "6px 10px 2px",
 					fontSize: 10.5,
@@ -231,47 +236,47 @@ function x({ value: t, options: n, onChange: i, placeholder: o, onSearchChange:
 					textTransform: "uppercase",
 					letterSpacing: "0.06em"
 				},
-				children: e.label
-			}, `heading-${n}`) : /* @__PURE__ */ f(s, {
+				children: t.label
+			}, `heading-${r}`) : /* @__PURE__ */ g(u, {
 				onClick: () => {
-					i(e.value), C(!1);
+					n(t.value), v(!1);
 				},
-				active: e.value === t,
-				children: e.label
-			}, e.value)),
-			M.length === 0 && /* @__PURE__ */ f("div", {
+				active: t.value === e,
+				children: t.label
+			}, t.value)),
+			M.length === 0 && /* @__PURE__ */ g("div", {
 				style: {
 					padding: "8px 10px",
 					fontSize: 12.5,
 					color: "var(--text-3)"
 				},
-				children: x("control.no_matches", "No matches")
+				children: l("control.no_matches", "No matches")
 			})
 		]
 	})] });
 }
-function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
-	let _ = a(), [x, S] = u(!1), [C, w] = u(""), T = l(null), E = n.filter((e) => !e.heading && !e.divider), D = E.length > v, O = t.map((e) => E.find((t) => t.value === e) ?? {
+function E({ value: e = [], options: t, onChange: n, placeholder: i, ...a }) {
+	let s = c(), [l, d] = m(!1), [v, x] = m(""), T = p(null), E = t.filter((e) => !e.heading && !e.divider), D = E.length > S, O = e.map((e) => E.find((t) => t.value === e) ?? {
 		value: e,
 		label: e
-	}), k = c(() => {
-		let e = C.trim().toLowerCase();
-		return e ? n.filter((t) => !t.heading && !t.divider && b(t).toLowerCase().includes(e)).slice(0, y) : n.slice(0, y);
-	}, [n, C]), A = (e) => i(t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
-	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
-		...m,
+	}), k = f(() => {
+		let e = v.trim().toLowerCase();
+		return e ? t.filter((t) => !t.heading && !t.divider && w(t).toLowerCase().includes(e)).slice(0, C) : t.slice(0, C);
+	}, [t, v]), A = (t) => n(e.includes(t) ? e.filter((e) => e !== t) : [...e, t]);
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("button", {
+		...a,
 		type: "button",
 		ref: T,
 		"aria-haspopup": "listbox",
-		"aria-expanded": x,
+		"aria-expanded": l,
 		onClick: () => {
-			S((e) => {
+			d((e) => {
 				let t = !e;
-				return t && w(""), t;
+				return t && x(""), t;
 			});
 		},
 		style: {
-			...h,
+			...y,
 			height: "auto",
 			minHeight: "var(--control-height)",
 			display: "flex",
@@ -281,15 +286,15 @@ function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
 			padding: O.length ? "3px 8px" : "0 10px",
 			textAlign: "left",
 			cursor: "pointer",
-			...m.style
+			...a.style
 		},
-		children: [O.length === 0 ? /* @__PURE__ */ f("span", {
+		children: [O.length === 0 ? /* @__PURE__ */ g("span", {
 			style: {
 				flex: 1,
 				color: "var(--text-placeholder)"
 			},
-			children: o ?? _("control.select.placeholder", "Select…")
-		}) : O.map((t) => /* @__PURE__ */ p("span", {
+			children: i ?? s("control.select.placeholder", "Select…")
+		}) : O.map((e) => /* @__PURE__ */ _("span", {
 			style: {
 				display: "inline-flex",
 				alignItems: "center",
@@ -303,18 +308,18 @@ function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
 				color: "var(--text-2)",
 				maxWidth: "100%"
 			},
-			children: [/* @__PURE__ */ f("span", {
+			children: [/* @__PURE__ */ g("span", {
 				style: {
 					overflow: "hidden",
 					textOverflow: "ellipsis",
 					whiteSpace: "nowrap"
 				},
-				children: t.label
-			}), /* @__PURE__ */ f("span", {
+				children: e.label
+			}), /* @__PURE__ */ g("span", {
 				role: "button",
-				"aria-label": _("control.remove_value", "Remove {value}", { value: b(t) }),
-				onClick: (e) => {
-					e.stopPropagation(), A(t.value);
+				"aria-label": s("control.remove_value", "Remove {value}", { value: w(e) }),
+				onClick: (t) => {
+					t.stopPropagation(), A(e.value);
 				},
 				style: {
 					display: "flex",
@@ -322,9 +327,9 @@ function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
 					cursor: "pointer",
 					flexShrink: 0
 				},
-				children: /* @__PURE__ */ f(e.x, { size: 12 })
+				children: /* @__PURE__ */ g(r.x, { size: 12 })
 			})]
-		}, t.value)), /* @__PURE__ */ f(e.down, {
+		}, e.value)), /* @__PURE__ */ g(r.down, {
 			size: 12,
 			cls: "",
 			style: {
@@ -333,17 +338,17 @@ function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
 				flexShrink: 0
 			}
 		})]
-	}), /* @__PURE__ */ p(r, {
-		open: x,
+	}), /* @__PURE__ */ _(o, {
+		open: l,
 		anchor: T.current,
-		onClose: () => S(!1),
+		onClose: () => d(!1),
 		width: T.current?.offsetWidth,
 		style: {
 			maxHeight: "min(360px, calc(var(--app-height) - 24px))",
 			overflowY: "auto"
 		},
 		children: [
-			D && /* @__PURE__ */ f("div", {
+			D && /* @__PURE__ */ g("div", {
 				style: {
 					padding: 6,
 					position: "sticky",
@@ -351,20 +356,20 @@ function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
 					background: "var(--surface)",
 					zIndex: 1
 				},
-				children: /* @__PURE__ */ f(g, {
-					value: C,
-					onChange: w,
-					placeholder: _("control.search", "Search…"),
-					prefix: /* @__PURE__ */ f(e.search, { size: 12 }),
+				children: /* @__PURE__ */ g(b, {
+					value: v,
+					onChange: x,
+					placeholder: s("control.search", "Search…"),
+					prefix: /* @__PURE__ */ g(r.search, { size: 12 }),
 					autoFocus: !0
 				})
 			}),
-			k.map((n, r) => {
-				if (n.divider) return /* @__PURE__ */ f("div", { style: {
+			k.map((t, n) => {
+				if (t.divider) return /* @__PURE__ */ g("div", { style: {
 					borderTop: "1px solid var(--divider)",
 					margin: "4px 0"
-				} }, `divider-${r}`);
-				if (n.heading) return /* @__PURE__ */ f("div", {
+				} }, `divider-${n}`);
+				if (t.heading) return /* @__PURE__ */ g("div", {
 					style: {
 						padding: "6px 10px 2px",
 						fontSize: 10.5,
@@ -373,70 +378,143 @@ function S({ value: t = [], options: n, onChange: i, placeholder: o, ...m }) {
 						textTransform: "uppercase",
 						letterSpacing: "0.06em"
 					},
-					children: n.label
-				}, `heading-${r}`);
-				let i = t.includes(n.value);
-				return /* @__PURE__ */ f(s, {
+					children: t.label
+				}, `heading-${n}`);
+				let i = e.includes(t.value);
+				return /* @__PURE__ */ g(u, {
 					active: i,
-					icon: i ? /* @__PURE__ */ f(e.check, { size: 13 }) : /* @__PURE__ */ f("span", { style: {
+					icon: i ? /* @__PURE__ */ g(r.check, { size: 13 }) : /* @__PURE__ */ g("span", { style: {
 						display: "inline-block",
 						width: 13
 					} }),
-					onClick: () => A(n.value),
-					children: n.label
-				}, n.value);
+					onClick: () => A(t.value),
+					children: t.label
+				}, t.value);
 			}),
-			k.length === 0 && /* @__PURE__ */ f("div", {
+			k.length === 0 && /* @__PURE__ */ g("div", {
 				style: {
 					padding: "8px 10px",
 					fontSize: 12.5,
 					color: "var(--text-3)"
 				},
-				children: _("control.no_matches", "No matches")
+				children: s("control.no_matches", "No matches")
 			})
 		]
 	})] });
 }
-function C({ value: t, onChange: n }) {
-	let r = a();
-	return /* @__PURE__ */ f(g, {
-		value: t || "",
-		onChange: n,
-		placeholder: r("control.date.placeholder", "YYYY-MM-DD HH:mm"),
-		prefix: /* @__PURE__ */ f(e.calendar, { size: 13 })
+function D({ kind: i, value: o, onChange: s, id: l, name: u, ariaRequired: f }) {
+	let h = c(), v = `${d()}-error`, y = p(null), x = o ? e(i, o) : "", [S, C] = m(x), [w, T] = m(o), [E, D] = m(!1);
+	o !== w && (T(o), (o === null ? S !== "" : n(i, S) !== (o || null)) && (C(x), D(!1)));
+	let O = i === "date" ? {
+		placeholder: h("control.date.placeholder", "DD-MM-YYYY"),
+		invalid: h("control.date.invalid", "Enter the date as DD-MM-YYYY.")
+	} : {
+		placeholder: h("control.datetime.placeholder", "DD-MM-YYYY HH:mm"),
+		invalid: h("control.datetime.invalid", "Enter the date and time as DD-MM-YYYY HH:mm.")
+	}, k = h("control.date.pick", "Choose a date");
+	return /* @__PURE__ */ _("div", {
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 4
+		},
+		children: [/* @__PURE__ */ g(b, {
+			id: l,
+			name: u,
+			"aria-required": f || void 0,
+			"aria-invalid": E || void 0,
+			"aria-describedby": E ? v : void 0,
+			type: "text",
+			inputMode: i === "date" ? "numeric" : void 0,
+			autoComplete: "off",
+			placeholder: O.placeholder,
+			value: S,
+			onChange: (e) => {
+				t(e) && (C(e), D(!1), s(e.trim() === "" ? null : n(i, e), e));
+			},
+			onBlur: () => {
+				if (S.trim() === "") return;
+				let t = n(i, S);
+				t ? C(e(i, t)) : D(!0);
+			},
+			suffix: /* @__PURE__ */ _("span", {
+				style: {
+					position: "relative",
+					display: "flex"
+				},
+				children: [/* @__PURE__ */ g(a, {
+					icon: /* @__PURE__ */ g(r.calendar, { size: 13 }),
+					title: k,
+					size: 22,
+					onClick: () => {
+						let e = y.current;
+						if (e) try {
+							e.showPicker();
+						} catch {
+							e.focus(), e.click();
+						}
+					}
+				}), /* @__PURE__ */ g("input", {
+					ref: y,
+					type: i === "date" ? "date" : "datetime-local",
+					tabIndex: -1,
+					"aria-hidden": "true",
+					value: o ?? "",
+					onChange: (t) => {
+						let n = t.target.value, r = n ? e(i, n) : "";
+						C(r), D(!1), s(n || null, r);
+					},
+					style: {
+						position: "absolute",
+						inset: 0,
+						width: "100%",
+						height: "100%",
+						opacity: 0,
+						pointerEvents: "none",
+						border: 0,
+						padding: 0
+					}
+				})]
+			})
+		}), E && /* @__PURE__ */ g("span", {
+			id: v,
+			role: "alert",
+			className: "text-xs text-destructive",
+			children: O.invalid
+		})]
 	});
 }
-function w(e) {
+function O(e) {
 	if (!e) return 0;
 	let t = 0;
 	return e.length >= 8 && t++, e.length >= 12 && t++, /[A-Z]/.test(e) && /[a-z]/.test(e) && t++, /\d/.test(e) && t++, /[^A-Za-z0-9]/.test(e) && t++, Math.min(4, t);
 }
-var T = [
+var k = [
 	(e) => e("control.password.strength.too_short", "Too short"),
 	(e) => e("control.password.strength.weak", "Weak"),
 	(e) => e("control.password.strength.fair", "Fair"),
 	(e) => e("control.password.strength.good", "Good"),
 	(e) => e("control.password.strength.strong", "Strong")
-], E = [
+], A = [
 	"var(--danger)",
 	"var(--danger)",
 	"var(--warning, #B45309)",
 	"var(--accent)",
 	"var(--success, #3FBF8F)"
 ];
-function D({ value: t, onChange: n, placeholder: r, showStrength: i, id: o, name: s, ariaRequired: c }) {
-	let l = a(), [d, m] = u(!1), h = t || "", _ = w(h);
-	return /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(g, {
-		id: o,
-		name: s,
-		"aria-required": c || void 0,
-		type: d ? "text" : "password",
-		value: h,
-		onChange: n,
-		placeholder: r ?? l("control.password.placeholder", "Enter password"),
-		suffix: /* @__PURE__ */ f("button", {
+function j({ value: e, onChange: t, placeholder: n, showStrength: i, id: a, name: o, ariaRequired: s }) {
+	let l = c(), [u, d] = m(!1), f = e || "", p = O(f);
+	return /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g(b, {
+		id: a,
+		name: o,
+		"aria-required": s || void 0,
+		type: u ? "text" : "password",
+		value: f,
+		onChange: t,
+		placeholder: n ?? l("control.password.placeholder", "Enter password"),
+		suffix: /* @__PURE__ */ g("button", {
 			type: "button",
-			"aria-label": d ? l("control.password.hide", "Hide password") : l("control.password.show", "Show password"),
+			"aria-label": u ? l("control.password.hide", "Hide password") : l("control.password.show", "Show password"),
 			style: {
 				background: "none",
 				border: 0,
@@ -445,17 +523,17 @@ function D({ value: t, onChange: n, placeholder: r, showStrength: i, id: o, name
 				color: "var(--text-3)",
 				display: "flex"
 			},
-			onClick: () => m((e) => !e),
-			children: f(d ? e.eyeOff : e.eye, { size: 14 })
+			onClick: () => d((e) => !e),
+			children: g(u ? r.eyeOff : r.eye, { size: 14 })
 		})
-	}), i && /* @__PURE__ */ p("div", {
+	}), i && /* @__PURE__ */ _("div", {
 		style: {
 			marginTop: 6,
 			display: "flex",
 			alignItems: "center",
 			gap: 8
 		},
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ g("div", {
 			style: {
 				display: "flex",
 				gap: 3,
@@ -466,29 +544,29 @@ function D({ value: t, onChange: n, placeholder: r, showStrength: i, id: o, name
 				1,
 				2,
 				3
-			].map((e) => /* @__PURE__ */ f("span", { style: {
+			].map((e) => /* @__PURE__ */ g("span", { style: {
 				flex: 1,
 				height: 3,
 				borderRadius: 999,
-				background: e < _ ? E[_] : "var(--surface-3)",
+				background: e < p ? A[p] : "var(--surface-3)",
 				transition: "background .15s"
 			} }, e))
-		}), /* @__PURE__ */ f("span", {
+		}), /* @__PURE__ */ g("span", {
 			style: {
 				fontSize: 10.5,
 				color: "var(--text-3)",
 				minWidth: 54,
 				textAlign: "right"
 			},
-			children: h ? T[_](l) : ""
+			children: f ? k[p](l) : ""
 		})]
 	})] });
 }
-function O({ value: e = [], onChange: t }) {
-	let n = a(), [r, o] = u("");
-	return /* @__PURE__ */ p("div", {
+function M({ value: e = [], onChange: t }) {
+	let n = c(), [r, i] = m("");
+	return /* @__PURE__ */ _("div", {
 		style: {
-			...h,
+			...y,
 			height: "auto",
 			minHeight: "var(--control-height)",
 			display: "flex",
@@ -497,15 +575,15 @@ function O({ value: e = [], onChange: t }) {
 			padding: "4px 6px",
 			alignItems: "center"
 		},
-		children: [e.map((n, r) => /* @__PURE__ */ f(i, {
+		children: [e.map((n, r) => /* @__PURE__ */ g(s, {
 			tone: "slate",
 			onRemove: () => t(e.filter((e, t) => t !== r)),
 			children: n
-		}, r)), /* @__PURE__ */ f("input", {
+		}, r)), /* @__PURE__ */ g("input", {
 			value: r,
-			onChange: (e) => o(e.target.value),
+			onChange: (e) => i(e.target.value),
 			onKeyDown: (n) => {
-				n.key === "Enter" && r.trim() && (t([...e, r.trim()]), o(""), n.preventDefault()), n.key === "Backspace" && !r && e.length && t(e.slice(0, -1));
+				n.key === "Enter" && r.trim() && (t([...e, r.trim()]), i(""), n.preventDefault()), n.key === "Backspace" && !r && e.length && t(e.slice(0, -1));
 			},
 			placeholder: e.length ? "" : n("control.tags.placeholder", "Add tag… (Enter)"),
 			style: {
@@ -520,17 +598,17 @@ function O({ value: e = [], onChange: t }) {
 		})]
 	});
 }
-var k = "JSON";
-function A({ value: e, onChange: n }) {
-	let r = a();
-	return /* @__PURE__ */ p("div", {
+var N = "JSON";
+function P({ value: e, onChange: t }) {
+	let n = c();
+	return /* @__PURE__ */ _("div", {
 		style: {
 			border: "1px solid var(--border)",
 			borderRadius: "var(--radius-md)",
 			background: "var(--surface-2)",
 			overflow: "hidden"
 		},
-		children: [/* @__PURE__ */ p("div", {
+		children: [/* @__PURE__ */ _("div", {
 			style: {
 				padding: "6px 10px",
 				background: "var(--surface-3)",
@@ -540,7 +618,7 @@ function A({ value: e, onChange: n }) {
 				gap: 8
 			},
 			children: [
-				/* @__PURE__ */ f("span", {
+				/* @__PURE__ */ g("span", {
 					className: "mono",
 					style: {
 						fontSize: 10.5,
@@ -548,24 +626,24 @@ function A({ value: e, onChange: n }) {
 						textTransform: "uppercase",
 						letterSpacing: "0.04em"
 					},
-					children: k
+					children: N
 				}),
-				/* @__PURE__ */ f("span", { style: { flex: 1 } }),
-				/* @__PURE__ */ f(t, {
+				/* @__PURE__ */ g("span", { style: { flex: 1 } }),
+				/* @__PURE__ */ g(i, {
 					size: "xs",
 					kind: "ghost",
-					children: r("control.json.format", "Format")
+					children: n("control.json.format", "Format")
 				}),
-				/* @__PURE__ */ f(t, {
+				/* @__PURE__ */ g(i, {
 					size: "xs",
 					kind: "ghost",
-					children: r("control.json.validate", "Validate")
+					children: n("control.json.validate", "Validate")
 				})
 			]
-		}), /* @__PURE__ */ f("textarea", {
+		}), /* @__PURE__ */ g("textarea", {
 			className: "mono",
 			value: e || "",
-			onChange: (e) => n?.(e.target.value),
+			onChange: (e) => t?.(e.target.value),
 			style: {
 				width: "100%",
 				minHeight: 140,
@@ -581,31 +659,31 @@ function A({ value: e, onChange: n }) {
 		})]
 	});
 }
-function j({ value: t, entity: n = "company", onChange: i, items: o = [], id: c, ariaLabelledby: m, ariaRequired: _ }) {
-	let v = a(), [y, b] = u(!1), x = l(null);
-	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p("button", {
+function F({ value: e, entity: t = "company", onChange: n, items: i = [], id: a, ariaLabelledby: s, ariaRequired: l }) {
+	let d = c(), [f, v] = m(!1), x = p(null);
+	return /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("button", {
 		type: "button",
-		id: c,
-		"aria-labelledby": m,
-		"aria-required": _ || void 0,
+		id: a,
+		"aria-labelledby": s,
+		"aria-required": l || void 0,
 		ref: x,
-		onClick: () => b(!0),
+		onClick: () => v(!0),
 		style: {
-			...h,
+			...y,
 			display: "flex",
 			alignItems: "center",
 			justifyContent: "space-between",
 			textAlign: "left",
 			cursor: "pointer"
 		},
-		children: [/* @__PURE__ */ p("span", {
+		children: [/* @__PURE__ */ _("span", {
 			style: {
 				display: "flex",
 				alignItems: "center",
 				gap: 8,
 				overflow: "hidden"
 			},
-			children: [/* @__PURE__ */ f("span", {
+			children: [/* @__PURE__ */ g("span", {
 				style: {
 					width: 18,
 					height: 18,
@@ -616,39 +694,39 @@ function j({ value: t, entity: n = "company", onChange: i, items: o = [], id: c,
 					alignItems: "center",
 					justifyContent: "center"
 				},
-				children: /* @__PURE__ */ f(e.link, { size: 11 })
-			}), /* @__PURE__ */ f("span", {
-				style: { color: t ? "var(--accent)" : "var(--text-placeholder)" },
-				children: t || v("control.ref.link_to", "Link to {entity}…", { entity: n })
+				children: /* @__PURE__ */ g(r.link, { size: 11 })
+			}), /* @__PURE__ */ g("span", {
+				style: { color: e ? "var(--accent)" : "var(--text-placeholder)" },
+				children: e || d("control.ref.link_to", "Link to {entity}…", { entity: t })
 			})]
-		}), /* @__PURE__ */ f(e.search, {
+		}), /* @__PURE__ */ g(r.search, {
 			size: 12,
 			cls: "",
 			style: { color: "var(--text-3)" }
 		})]
-	}), /* @__PURE__ */ p(r, {
-		open: y,
+	}), /* @__PURE__ */ _(o, {
+		open: f,
 		anchor: x.current,
-		onClose: () => b(!1),
+		onClose: () => v(!1),
 		width: x.current?.offsetWidth,
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ g("div", {
 			style: { padding: 4 },
-			children: /* @__PURE__ */ f(g, {
-				placeholder: v("control.ref.search", "Search {entity}…", { entity: n }),
-				prefix: /* @__PURE__ */ f(e.search, { size: 12 }),
+			children: /* @__PURE__ */ g(b, {
+				placeholder: d("control.ref.search", "Search {entity}…", { entity: t }),
+				prefix: /* @__PURE__ */ g(r.search, { size: 12 }),
 				style: { marginBottom: 4 }
 			})
-		}), o.slice(0, 6).map((t) => /* @__PURE__ */ f(s, {
-			icon: /* @__PURE__ */ f(e.building, { size: 13 }),
+		}), i.slice(0, 6).map((e) => /* @__PURE__ */ g(u, {
+			icon: /* @__PURE__ */ g(r.building, { size: 13 }),
 			onClick: () => {
-				i?.(t.name), b(!1);
+				n?.(e.name), v(!1);
 			},
-			children: t.name
-		}, t.id))]
+			children: e.name
+		}, e.id))]
 	})] });
 }
-function M({ label: e, children: t, mono: n, wide: r, empty: i }) {
-	return /* @__PURE__ */ p("div", {
+function I({ label: e, children: t, mono: n, wide: r, empty: i }) {
+	return /* @__PURE__ */ _("div", {
 		style: {
 			display: "flex",
 			flexDirection: r ? "column" : "row",
@@ -656,7 +734,7 @@ function M({ label: e, children: t, mono: n, wide: r, empty: i }) {
 			minHeight: 24,
 			alignItems: "baseline"
 		},
-		children: [/* @__PURE__ */ f("div", {
+		children: [/* @__PURE__ */ g("div", {
 			style: {
 				width: r ? "auto" : 140,
 				flexShrink: 0,
@@ -666,7 +744,7 @@ function M({ label: e, children: t, mono: n, wide: r, empty: i }) {
 				letterSpacing: "0.01em"
 			},
 			children: e
-		}), /* @__PURE__ */ f("div", {
+		}), /* @__PURE__ */ g("div", {
 			className: n ? "mono num" : "num",
 			style: {
 				flex: 1,
@@ -680,50 +758,50 @@ function M({ label: e, children: t, mono: n, wide: r, empty: i }) {
 		})]
 	});
 }
-function N({ value: t, onChange: r, type: i = "text", options: s }) {
-	let c = a(), [l, m] = u(!1), [h, _] = u(t), v = () => {
-		h !== void 0 && r?.(h), m(!1);
-	}, y = () => {
-		_(t), m(!1);
+function L({ value: e, onChange: t, type: n = "text", options: i }) {
+	let o = c(), [s, u] = m(!1), [d, f] = m(e), p = () => {
+		d !== void 0 && t?.(d), u(!1);
+	}, v = () => {
+		f(e), u(!1);
 	};
-	return l ? /* @__PURE__ */ p("div", {
+	return s ? /* @__PURE__ */ _("div", {
 		style: {
 			display: "flex",
 			alignItems: "center",
 			gap: 4
 		},
 		onKeyDown: (e) => {
-			e.key === "Enter" && v(), e.key === "Escape" && y();
+			e.key === "Enter" && p(), e.key === "Escape" && v();
 		},
-		children: [i === "select" ? /* @__PURE__ */ f(x, {
-			value: h,
-			options: s || [],
+		children: [n === "select" ? /* @__PURE__ */ g(T, {
+			value: d,
+			options: i || [],
 			onChange: (e) => {
-				_(e), r?.(e), m(!1);
+				f(e), t?.(e), u(!1);
 			}
-		}) : i === "bool" ? /* @__PURE__ */ f(o, {
-			value: h === "true",
+		}) : n === "bool" ? /* @__PURE__ */ g(l, {
+			value: d === "true",
 			onChange: (e) => {
-				let t = String(e);
-				_(t), r?.(t), m(!1);
+				let n = String(e);
+				f(n), t?.(n), u(!1);
 			}
-		}) : /* @__PURE__ */ f(g, {
-			value: h ?? "",
-			onChange: _,
+		}) : /* @__PURE__ */ g(b, {
+			value: d ?? "",
+			onChange: f,
 			autoFocus: !0
-		}), i !== "select" && i !== "bool" && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(n, {
+		}), n !== "select" && n !== "bool" && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ g(a, {
 			size: 24,
-			icon: /* @__PURE__ */ f(e.check, { size: 13 }),
-			onClick: v,
-			title: c("dialog.save", "Save")
-		}), /* @__PURE__ */ f(n, {
+			icon: /* @__PURE__ */ g(r.check, { size: 13 }),
+			onClick: p,
+			title: o("dialog.save", "Save")
+		}), /* @__PURE__ */ g(a, {
 			size: 24,
-			icon: /* @__PURE__ */ f(e.x, { size: 13 }),
-			onClick: y,
-			title: c("dialog.cancel", "Cancel")
+			icon: /* @__PURE__ */ g(r.x, { size: 13 }),
+			onClick: v,
+			title: o("dialog.cancel", "Cancel")
 		})] })]
-	}) : /* @__PURE__ */ f("div", {
-		onClick: () => m(!0),
+	}) : /* @__PURE__ */ g("div", {
+		onClick: () => u(!0),
 		style: {
 			padding: "4px 6px",
 			margin: "-4px -6px",
@@ -741,11 +819,11 @@ function N({ value: t, onChange: r, type: i = "text", options: s }) {
 		onMouseLeave: (e) => {
 			e.currentTarget.style.borderColor = "transparent";
 		},
-		children: t || /* @__PURE__ */ f("span", {
+		children: e || /* @__PURE__ */ g("span", {
 			style: { color: "var(--text-4)" },
-			children: c("control.click_to_edit", "Click to edit")
+			children: o("control.click_to_edit", "Click to edit")
 		})
 	});
 }
 //#endregion
-export { C as DateInput, m as FieldLabel, A as JsonField, S as MultiSelect, D as PasswordInput, N as QuickEditCell, j as RefField, x as Select, O as TagsInput, _ as TextArea, g as TextInput, M as ViewField };
+export { D as DateInput, v as FieldLabel, P as JsonField, E as MultiSelect, j as PasswordInput, L as QuickEditCell, F as RefField, T as Select, M as TagsInput, x as TextArea, b as TextInput, I as ViewField };