themelia-ui 3.0.0 → 3.2.0

package/dist/forms-C0WeNPFF.js

@@ -0,0 +1,250 @@
+import "#core.css";
+import { c as e, s as t } from "./typography-DmeR05Er.js";
+import { t as n } from "./cx--CBrhWH0.js";
+import { c as r } from "./buttons-BX2JfL5X.js";
+import { _ as i, g as a, h as o, v as s } from "./feedback-D4qVsKlD.js";
+import { i as c } from "./cards-Ddhz43Bz.js";
+import { CheckIcon as l, Loader2Icon as u } from "lucide-react";
+import * as d from "react";
+import { useEffect as f, useId as p, useRef as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import "#css/forms.css";
+var _ = {
+	field: "forms__field___CS1SW",
+	label: "forms__label___7tlbb",
+	required: "forms__required___vJSC3",
+	fieldHorizontal: "forms__fieldHorizontal___3ZdRI",
+	fieldHorizontalBody: "forms__fieldHorizontalBody___ErAT_",
+	group: "forms__group___JNMtG",
+	groupLegend: "forms__groupLegend___9b2_z",
+	section: "forms__section___QDpS4",
+	actionsBar: "forms__actionsBar___OkDbb",
+	actionsBarSticky: "forms__actionsBarSticky___S55H3",
+	actionsRow: "forms__actionsRow___zvQ1p",
+	actionsLayout: "forms__actionsLayout___IMw2A",
+	actionsLeading: "forms__actionsLeading___ZQlt4",
+	actionsTrailing: "forms__actionsTrailing___jFm6X",
+	summaryList: "forms__summaryList___ZCsB4",
+	submitSpinner: "forms__submitSpinner___m_b6H"
+};
+//#endregion
+//#region src/components/base/forms/form-field.tsx
+function v({ label: r, required: i = !1, hint: a, helperText: o, error: s, orientation: c = "vertical", htmlFor: l, className: u, children: f, ...p }) {
+	let m = d.useId(), v = typeof f == "function", y = v ? [] : d.Children.toArray(f), b = !v && d.isValidElement(f) ? -1 : y.findIndex((e) => d.isValidElement(e)), x = !v && d.isValidElement(f) ? f : b === -1 ? null : y[b], S = l === !1, C = S ? void 0 : l ?? x?.props.id ?? `${m}-control`, w = `${m}-support`, T = `${m}-label`, E = s != null && s !== !1 && s !== "", D = (E ? s : void 0) ?? o ?? a, O = {
+		id: C,
+		"aria-labelledby": r ? T : void 0,
+		"aria-invalid": E || void 0,
+		"aria-describedby": D ? w : void 0,
+		"aria-required": i || void 0
+	}, k = (e) => d.cloneElement(e, {
+		id: O.id ?? e.props.id,
+		"aria-labelledby": e.props["aria-labelledby"] ?? (e.props["aria-label"] === void 0 ? O["aria-labelledby"] : void 0),
+		"aria-invalid": e.props["aria-invalid"] ?? O["aria-invalid"],
+		"aria-describedby": e.props["aria-describedby"] ?? O["aria-describedby"],
+		"aria-required": e.props["aria-required"] ?? O["aria-required"]
+	}), A = v ? f(O) : d.isValidElement(f) ? k(f) : b === -1 ? f : y.map((e, t) => t === b ? k(e) : e), j = S && D ? w : void 0, M = !!D && /* @__PURE__ */ h(t, {
+		id: w,
+		size: "xs",
+		type: E ? "error" : "secondary",
+		role: E ? "status" : void 0,
+		children: D
+	}), N = !!r && /* @__PURE__ */ g("label", {
+		id: T,
+		htmlFor: C,
+		className: n("form-field--label", _.label, e({
+			size: "sm",
+			weight: "medium",
+			type: "main"
+		})),
+		children: [r, !!i && /* @__PURE__ */ h("span", {
+			className: _.required,
+			"aria-hidden": !0,
+			children: "*"
+		})]
+	});
+	return c === "horizontal" ? /* @__PURE__ */ g("div", {
+		"data-slot": "form-field",
+		"data-orientation": "horizontal",
+		role: S ? "group" : void 0,
+		"aria-labelledby": S ? T : void 0,
+		"aria-describedby": j,
+		className: n("form-field--component", _.field, _.fieldHorizontal, u),
+		...p,
+		children: [N, /* @__PURE__ */ g("div", {
+			className: _.fieldHorizontalBody,
+			children: [A, M]
+		})]
+	}) : /* @__PURE__ */ g("div", {
+		"data-slot": "form-field",
+		"data-orientation": "vertical",
+		role: S ? "group" : void 0,
+		"aria-labelledby": S ? T : void 0,
+		"aria-describedby": j,
+		className: n("form-field--component", _.field, u),
+		...p,
+		children: [
+			N,
+			A,
+			M
+		]
+	});
+}
+//#endregion
+//#region src/components/base/forms/field-group.tsx
+function y({ legend: e, description: r, className: i, children: a, ...o }) {
+	let s = d.useId();
+	return /* @__PURE__ */ g("fieldset", {
+		"data-slot": "field-group",
+		"aria-describedby": r ? s : void 0,
+		className: n("field-group--component", _.group, i),
+		...o,
+		children: [
+			!!e && /* @__PURE__ */ h("legend", {
+				className: _.groupLegend,
+				children: /* @__PURE__ */ h(t, {
+					tag: "span",
+					weight: "medium",
+					children: e
+				})
+			}),
+			!!r && /* @__PURE__ */ h(t, {
+				id: s,
+				type: "secondary",
+				size: "xs",
+				children: r
+			}),
+			a
+		]
+	});
+}
+//#endregion
+//#region src/components/base/forms/workflow.strings.ts
+var b = { title: (e) => e === 1 ? "1 problem to fix" : `${e} problems to fix` }, x = {
+	title: "You have unsaved changes",
+	description: "Leaving this page will discard them."
+}, S = {
+	idle: "Save",
+	submitting: "Saving…",
+	succeeded: "Saved"
+};
+//#endregion
+//#region src/components/base/forms/workflow.tsx
+function C(e) {
+	return typeof e == "string" || typeof e == "number" || typeof e == "bigint";
+}
+function w({ title: e, description: t, actions: r, children: i, footer: a, surface: o = "bordered", className: s }) {
+	return /* @__PURE__ */ h(c, {
+		surface: o,
+		title: e,
+		description: t,
+		headerEnd: r,
+		footerSlot: a,
+		className: n("form-section--component", s),
+		children: /* @__PURE__ */ h("div", {
+			className: _.section,
+			children: i
+		})
+	});
+}
+function T({ children: r, leading: i, trailing: a, sticky: o = !1, className: s }) {
+	let c = a ?? r;
+	return /* @__PURE__ */ h("div", {
+		className: n("form-actions-bar--component", _.actionsBar, o && _.actionsBarSticky, s),
+		children: /* @__PURE__ */ h("div", {
+			"data-slot": "form-actions-bar",
+			className: _.actionsRow,
+			children: /* @__PURE__ */ g("div", {
+				className: _.actionsLayout,
+				children: [i != null && /* @__PURE__ */ h("div", {
+					className: n(_.actionsLeading, e({
+						size: "xs",
+						type: "secondary"
+					})),
+					children: C(i) ? /* @__PURE__ */ h(t, {
+						tag: "span",
+						size: "xs",
+						type: "secondary",
+						children: i
+					}) : i
+				}), c != null && /* @__PURE__ */ h("div", {
+					className: _.actionsTrailing,
+					children: c
+				})]
+			})
+		})
+	});
+}
+function E({ title: t, description: r, errors: c = [], action: l, autoFocus: u = !1, strings: d, className: v }) {
+	let y = {
+		...b,
+		...d
+	}, x = m(null), S = p(), C = c.length;
+	return f(() => {
+		u && C > 0 && x.current?.focus();
+	}, [u, C]), C === 0 && !t && !r ? null : /* @__PURE__ */ g(o, {
+		ref: x,
+		tone: "destructive",
+		tabIndex: -1,
+		"aria-labelledby": S,
+		className: n("error-summary--component", v),
+		children: [
+			/* @__PURE__ */ h(s, {
+				id: S,
+				children: t ?? y.title(C)
+			}),
+			!!r && /* @__PURE__ */ h(i, { children: r }),
+			c.length > 0 && /* @__PURE__ */ h("ul", {
+				className: n(_.summaryList, e({ size: "xs" })),
+				children: c.map((e, t) => /* @__PURE__ */ h("li", { children: e }, t))
+			}),
+			!!l && /* @__PURE__ */ h(a, { children: l })
+		]
+	});
+}
+function D({ title: e, description: t, actions: r, tone: c = "warning", strings: l, className: u }) {
+	let d = {
+		...x,
+		...l
+	};
+	return /* @__PURE__ */ g(o, {
+		tone: c,
+		className: n("dirty-state-banner--component", u),
+		children: [
+			/* @__PURE__ */ h(s, { children: e ?? d.title }),
+			/* @__PURE__ */ h(i, { children: t ?? d.description }),
+			!!r && /* @__PURE__ */ h(a, { children: r })
+		]
+	});
+}
+function O({ state: e = "idle", strings: t, disabled: i, onClick: a, className: o, ...s }) {
+	let c = {
+		...S,
+		...t
+	}, d = e === "submitting";
+	return /* @__PURE__ */ g(r, {
+		type: "submit",
+		disabled: i,
+		"aria-disabled": d || void 0,
+		"aria-busy": d || void 0,
+		"data-submit-state": e,
+		className: n("submit-state-button--component", o),
+		onClick: (e) => {
+			if (d) {
+				e.preventDefault();
+				return;
+			}
+			a?.(e);
+		},
+		...s,
+		children: [
+			d && /* @__PURE__ */ h(u, {
+				"aria-hidden": !0,
+				className: _.submitSpinner
+			}),
+			e === "succeeded" && /* @__PURE__ */ h(l, { "aria-hidden": !0 }),
+			c[e]
+		]
+	});
+}
+//#endregion
+export { O as a, S as c, w as i, y as l, E as n, x as o, T as r, b as s, D as t, v as u };