@protobase/ui 0.21.0 → 0.21.1

package/dist/record-view/field.js

@@ -1,65 +1,92 @@
 import { Avatar } from "../primitives/avatar.js";
+import { FieldControlContext } from "../primitives/field-control.js";
 import { Button } from "../primitives/button.js";
+import { useId } from "react";
 import { TriangleAlert } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/record-view/field.tsx
-const Field = ({ label, required, help, example, error, conflict, wide, children }) => /* @__PURE__ */ jsxs("div", {
-	className: wide ? "sm:col-span-2" : void 0,
-	children: [
-		/* @__PURE__ */ jsxs("div", {
-			className: "mb-1.5 flex items-center gap-2",
-			children: [/* @__PURE__ */ jsxs("label", {
-				className: "font-medium text-foreground",
-				children: [label, required && /* @__PURE__ */ jsx("span", {
-					className: "ml-0.5 text-danger-text",
-					"aria-label": "required",
-					children: "*"
+/**
+* A labelled form field. The `Input` or `Textarea` inside takes its label, its name, the help and error that describe
+* it and whether it is invalid or required from the field; another control uses `useFieldControl`.
+*/
+const Field = ({ name, label, required, help, example, error, conflict, wide, children }) => {
+	const id = useId();
+	const describedBy = [
+		help && `${id}-help`,
+		example && `${id}-example`,
+		error && `${id}-error`
+	].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: wide ? "sm:col-span-2" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "mb-1.5 flex items-center gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: id,
+					className: "font-medium text-foreground",
+					children: [label, required && /* @__PURE__ */ jsx("span", {
+						className: "ml-0.5 text-danger-text",
+						"aria-hidden": "true",
+						children: "*"
+					})]
+				}), conflict && /* @__PURE__ */ jsxs("span", {
+					className: "inline-flex items-center gap-1.5 text-warning-text",
+					title: `${conflict.user.name} saved a different value`,
+					children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
+						initials: conflict.user.initials,
+						hue: conflict.user.hue,
+						size: "xs"
+					})]
 				})]
-			}), conflict && /* @__PURE__ */ jsxs("span", {
-				className: "inline-flex items-center gap-1.5 text-warning-text",
-				title: `${conflict.user.name} saved a different value`,
-				children: [/* @__PURE__ */ jsx(TriangleAlert, { className: "size-3.5" }), /* @__PURE__ */ jsx(Avatar, {
-					initials: conflict.user.initials,
-					hue: conflict.user.hue,
-					size: "xs"
+			}),
+			/* @__PURE__ */ jsx(FieldControlContext, {
+				value: {
+					id,
+					name,
+					describedBy,
+					invalid: Boolean(error),
+					required: Boolean(required)
+				},
+				children
+			}),
+			help && /* @__PURE__ */ jsx("p", {
+				id: `${id}-help`,
+				className: "mt-1.5 text-xs text-muted-foreground",
+				children: help
+			}),
+			example && /* @__PURE__ */ jsxs("p", {
+				id: `${id}-example`,
+				className: "mt-0.5 text-xs text-faint-foreground",
+				children: ["Example: ", example]
+			}),
+			error && /* @__PURE__ */ jsx("p", {
+				id: `${id}-error`,
+				className: "mt-1.5 text-xs font-medium text-danger-text",
+				children: error
+			}),
+			conflict && /* @__PURE__ */ jsxs("div", {
+				className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
+				children: [/* @__PURE__ */ jsxs("span", { children: [
+					/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
+					" saved this ",
+					conflict.ago,
+					": ",
+					/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
+				] }), /* @__PURE__ */ jsxs("span", {
+					className: "flex gap-1.5",
+					children: [/* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: conflict.onKeepMine,
+						children: "Keep mine"
+					}), /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						onClick: conflict.onUseTheirs,
+						children: "Use theirs"
+					})]
 				})]
-			})]
-		}),
-		children,
-		help && /* @__PURE__ */ jsx("p", {
-			className: "mt-1.5 text-xs text-muted-foreground",
-			children: help
-		}),
-		example && /* @__PURE__ */ jsxs("p", {
-			className: "mt-0.5 text-xs text-faint-foreground",
-			children: ["Example: ", example]
-		}),
-		error && /* @__PURE__ */ jsx("p", {
-			className: "mt-1.5 text-xs font-medium text-danger-text",
-			children: error
-		}),
-		conflict && /* @__PURE__ */ jsxs("div", {
-			className: "mt-2 flex items-center justify-between gap-3 rounded-md border border-warning/30 bg-warning-soft px-3 py-2 text-xs text-warning-text",
-			children: [/* @__PURE__ */ jsxs("span", { children: [
-				/* @__PURE__ */ jsx("strong", { children: conflict.user.name }),
-				" saved this ",
-				conflict.ago,
-				": ",
-				/* @__PURE__ */ jsx("strong", { children: conflict.theirValue })
-			] }), /* @__PURE__ */ jsxs("span", {
-				className: "flex gap-1.5",
-				children: [/* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					onClick: conflict.onKeepMine,
-					children: "Keep mine"
-				}), /* @__PURE__ */ jsx(Button, {
-					size: "sm",
-					onClick: conflict.onUseTheirs,
-					children: "Use theirs"
-				})]
-			})]
-		})
-	]
-});
+			})
+		]
+	});
+};
 //#endregion
 export { Field };