@primer/react-brand/esm/forms/FormControl/FormControl.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../../node_modules/clsx/dist/clsx.js";
import { useId as t } from "../../hooks/useId.js";
import { Text as n } from "../../Text/Text.js";
import { AlertFillIcon as r, CheckCircleFillIcon as i } from "../../node_modules/@primer/octicons-react/dist/index.esm.js";
import { Checkbox as a } from "../Checkbox/Checkbox.js";
import { Textarea as o } from "../Textarea/Textarea.js";
import { TextInput as s } from "../TextInput/TextInput.js";
import { Select as c } from "../Select/Select.js";
import { Radio as l } from "../Radio/Radio.js";
import u from "./FormControl.module.js";
import d from "react";
import { jsx as f, jsxs as p } from "react/jsx-runtime";
//#region src/forms/FormControl/FormControl.tsx
var m = ({ children: n, className: r, hasBorder: i, fullWidth: p, id: m, required: v, size: y = "medium", validationStatus: b, ...x }) => {
	let S = t(m), C = d.Children.toArray(n), w = C.some((e) => d.isValidElement(e) && (e.type === a || e.type === l)), T = C.some((e) => d.isValidElement(e) && e.type === _), E = C.some((e) => d.isValidElement(e) && e.type === g);
	return /* @__PURE__ */ f("section", {
		id: `FormControl--${S}`,
		className: e(u.FormControl, p && u["FormControl--fullWidth"], w && u["FormControl--checkbox"], i && u["FormControl--border"], r),
		...x,
		children: d.Children.map(n, (t) => {
			if (!d.isValidElement(t)) return t;
			let n = [T && `${S}-hint`, E && `${S}-validation`].filter(Boolean).join(" ") || void 0;
			if (t.type === s) {
				let r = t;
				return d.cloneElement(r, {
					className: e(r.props.className),
					id: S,
					name: r.props.name || S,
					required: r.props.required || v,
					validationStatus: r.props.validationStatus || b,
					fullWidth: p,
					size: y,
					"aria-describedby": n
				});
			}
			if (t.type === o) {
				let r = t;
				return d.cloneElement(r, {
					className: e(r.props.className),
					id: S,
					name: r.props.name || S,
					required: r.props.required || v,
					validationStatus: r.props.validationStatus || b,
					fullWidth: p,
					size: y,
					"aria-describedby": n
				});
			}
			if (t.type === c) {
				let r = t;
				return d.cloneElement(r, {
					className: e(r.props.className),
					id: S,
					name: r.props.name || S,
					required: r.props.required || v,
					validationStatus: r.props.validationStatus || b,
					fullWidth: p,
					size: y,
					"aria-describedby": n
				});
			}
			if (t.type === a) {
				let r = t;
				return d.cloneElement(r, {
					className: e(r.props.className, u["FormControl-control--checkbox"]),
					id: S,
					name: r.props.name || S,
					required: r.props.required || v,
					validationStatus: r.props.validationStatus || b,
					"aria-describedby": n
				});
			}
			if (t.type === l) {
				let r = t;
				return d.cloneElement(r, {
					className: e(w && u["FormControl-control--radio"], r.props.className),
					id: S,
					name: r.props.name,
					required: r.props.required || v,
					"aria-describedby": n
				});
			}
			if (t.type === h) {
				let n = t;
				return d.cloneElement(n, {
					className: e(w && u["FormControl-label--checkbox"], n.props.className),
					htmlFor: S,
					children: n.props.children,
					required: v,
					validationStatus: b,
					size: y,
					showRequiredIndicator: w ? !1 : n.props.showRequiredIndicator
				});
			}
			if (t.type === g) {
				let n = t;
				return d.cloneElement(n, {
					className: e(w && u["FormControl-validation-checkbox"], n.props.className),
					validationStatus: b,
					id: `${S}-validation`
				});
			}
			if (t.type === _) {
				let e = t;
				return d.cloneElement(e, { id: `${S}-hint` });
			}
			return t;
		})
	});
}, h = ({ children: t, className: n, htmlFor: r, required: i, showRequiredIndicator: a = !0, size: o = "medium", validationStatus: s, visuallyHidden: c, ...l }) => /* @__PURE__ */ p("label", {
	htmlFor: r,
	className: e(u["FormControl-label"], s && u[`FormControl-label--${s}`], u[`FormControl-label--${o}`], c && u["FormControl-label--visually-hidden"], n),
	...l,
	children: [d.Children.map(t, (t) => d.isValidElement(t) && t.type === _ ? d.cloneElement(t, { className: e(u["FormControl--visible"], t.props.className) }) : t), i && a && /* @__PURE__ */ p("span", {
		className: u["FormControl-label-required"],
		"aria-hidden": !0,
		children: [" ", "*"]
	})]
}), g = ({ children: t, validationStatus: a, className: o, ...s }) => /* @__PURE__ */ p(n, {
	as: "span",
	size: "100",
	className: e(u["FormControl-validation"], a && u["FormControl-validation--animate-in"], a && u[`FormControl-validation--${a}`], o),
	...s,
	children: [
		a === "error" && /* @__PURE__ */ f("span", {
			className: u["FormControl-validation-error-icon"],
			children: /* @__PURE__ */ f(r, {})
		}),
		a === "success" && /* @__PURE__ */ f("span", {
			className: u["FormControl-validation-success-icon"],
			children: /* @__PURE__ */ f(i, {})
		}),
		t
	]
}), _ = ({ className: t, ...r }) => /* @__PURE__ */ f(n, {
	as: "span",
	size: "100",
	variant: "muted",
	className: e(u["FormControl-hint"], t),
	...r
}), v = Object.assign(m, {
	Label: h,
	Validation: g,
	Hint: _
});
//#endregion
export { v as FormControl };

//# sourceMappingURL=FormControl.js.map