@webority/ui-react 0.34.0 → 0.35.0

package/dist/components/AppFileAttachment.js

@@ -0,0 +1,140 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import { keyOf as n, nameOf as r, sizeLabelOf as i, useItemUrl as a } from "../lib/fileItem.js";
+import o from "../lib/FileItemRow.js";
+import { DEFAULT_IMAGE_ACCEPT as s, DEFAULT_MAX_SIZE_MB as c, acceptLabel as l, isImageFile as u, isImageOnlyAccept as d, validateFile as f } from "@webority/ui-elements/helpers";
+import { useId as p, useState as m } from "react";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+//#region src/components/AppFileAttachment.jsx
+function v({ label: r = "Attachment", value: i, name: a, onChange: l, multiple: v = !1, accept: x = s, maxSizeMb: S = c, optional: C = !1, validate: w = !0, error: T, id: E, ...D }) {
+	e("AppFileAttachment", D);
+	let O = p(), k = E || O, [A, j] = m(""), M = v && Array.isArray(i) ? i : i ? [i] : [], N = d(x), P = (e) => e instanceof File ? u(e) : N || u(e), F = !v && M.length === 1 && P(M[0]), I = y(x, S);
+	function L(e) {
+		let t = Array.from(e.target.files || []);
+		if (e.target.value = "", !t.length) return;
+		let r = [], a = "";
+		for (let e of t) {
+			let t = w ? f(e, {
+				accept: x,
+				maxSizeMb: S
+			}) : null;
+			if (t) {
+				a ||= t;
+				continue;
+			}
+			r.push(e);
+		}
+		if (j(a), r.length) if (v) {
+			let e = Array.isArray(i) ? i : i ? [i] : [], t = new Set(e.map(n));
+			l(e.concat(r.filter((e) => !t.has(n(e)))));
+		} else l(r[0]);
+	}
+	function R(e) {
+		j(""), l(v ? M.filter((t, n) => n !== e) : null);
+	}
+	let z = T || A, B = z ? `${k}-error` : void 0, V = v || M.length === 0, H = N ? "image" : "file", U = v ? `Add ${H}s` : `Add ${N ? "an" : "a"} ${H}`;
+	return /* @__PURE__ */ _("div", {
+		className: "field",
+		children: [
+			/* @__PURE__ */ _("label", {
+				className: "label",
+				htmlFor: k,
+				children: [r, C && /* @__PURE__ */ g("span", {
+					className: "label-optional",
+					children: " (optional)"
+				})]
+			}),
+			V && /* @__PURE__ */ _(h, { children: [/* @__PURE__ */ _("label", {
+				className: "attach-drop",
+				htmlFor: k,
+				children: [
+					/* @__PURE__ */ g("span", {
+						className: "attach-drop-icon",
+						children: /* @__PURE__ */ g(t, {
+							name: N ? "image" : "file-text",
+							size: 18
+						})
+					}),
+					/* @__PURE__ */ _("span", {
+						className: "attach-drop-copy",
+						children: [/* @__PURE__ */ g("span", {
+							className: "attach-drop-title",
+							children: U
+						}), I && /* @__PURE__ */ g("span", {
+							className: "attach-drop-hint",
+							children: I
+						})]
+					}),
+					/* @__PURE__ */ g("span", {
+						className: "attach-drop-cta",
+						children: "Browse"
+					})
+				]
+			}), /* @__PURE__ */ g("input", {
+				id: k,
+				type: "file",
+				className: "visually-hidden",
+				name: a,
+				accept: x || void 0,
+				multiple: v || void 0,
+				"aria-describedby": B,
+				onChange: L,
+				...D
+			})] }),
+			F ? /* @__PURE__ */ g(b, {
+				item: M[0],
+				isImage: !0,
+				onRemove: () => R(0)
+			}) : M.length > 0 && /* @__PURE__ */ g("div", {
+				className: "attach-list",
+				children: M.map((e, t) => /* @__PURE__ */ g(o, {
+					item: e,
+					isImage: P(e),
+					onRemove: () => R(t)
+				}, n(e)))
+			}),
+			z && /* @__PURE__ */ g("div", {
+				className: "field-error",
+				id: `${k}-error`,
+				children: z
+			})
+		]
+	});
+}
+function y(e, t) {
+	let n = e?.trim() ? l(e) : "", r = t > 0 ? `up to ${t} MB` : "";
+	return n && r ? `${n}, ${r}` : r ? `Up to ${t} MB` : n;
+}
+function b({ item: e, isImage: n, onRemove: o }) {
+	let s = a(e, n), c = r(e), l = i(e);
+	return /* @__PURE__ */ _("div", {
+		className: "attach-preview",
+		children: [/* @__PURE__ */ _("div", {
+			className: "attach-figure",
+			children: [/* @__PURE__ */ g("img", {
+				src: s,
+				alt: c
+			}), /* @__PURE__ */ g("button", {
+				type: "button",
+				className: "attach-remove",
+				"aria-label": "Remove attachment",
+				onClick: o,
+				children: /* @__PURE__ */ g(t, {
+					name: "x",
+					size: 18
+				})
+			})]
+		}), /* @__PURE__ */ _("div", {
+			className: "attach-meta",
+			children: [/* @__PURE__ */ g("div", {
+				className: "attach-name",
+				children: c
+			}), l && /* @__PURE__ */ g("div", {
+				className: "attach-size",
+				children: l
+			})]
+		})]
+	});
+}
+//#endregion
+export { v as default };

package/dist/components/AppFilePicker.js

@@ -0,0 +1,220 @@
+import e from "./warnUnknownProps.js";
+import t from "./withTooltip.js";
+import n from "./AppIcon.js";
+import r from "./AppRequiredMark.js";
+import { keyOf as i } from "../lib/fileItem.js";
+import a from "../lib/FileItemRow.js";
+import { DEFAULT_MAX_SIZE_MB as o, acceptLabel as s, isImageFile as c, isImageOnlyAccept as ee, isPdfFile as l, validateFile as u } from "@webority/ui-elements/helpers";
+import { useEffect as d, useId as te, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/components/AppFilePicker.jsx
+function g({ label: g, value: _, name: ne, id: re, onPick: v, multiple: y = !1, maxFiles: b, accept: x = ".jpg,.jpeg,.png", maxSizeMb: S = o, required: ie, error: ae, hint: C, loading: w = !1, className: T = "", fieldClassName: E = "", style: D, ...O }) {
+	e("AppFilePicker", O);
+	let [oe, k] = p(null), [se, A] = p(null), [j, M] = p(!1), [N, P] = p(""), F = f(null), ce = te(), I = re || ce;
+	d(() => {
+		if (!y && _ instanceof File && c(_)) {
+			let e = URL.createObjectURL(_);
+			return k(e), () => URL.revokeObjectURL(e);
+		}
+		k(null);
+	}, [_, y]);
+	let L = !y && _ && !c(_) && l(_) ? _ instanceof File ? _ : _.url : null;
+	d(() => {
+		if (!L) {
+			A(null);
+			return;
+		}
+		let e = !0, t = null;
+		return import("@webority/ui-elements/file-viewer").then((e) => e.renderPdfFirstPage(typeof L == "string" ? { url: L } : L)).then((n) => {
+			e && (t = URL.createObjectURL(n), A(t));
+		}).catch((e) => console.warn("[AppFilePicker] the PDF preview failed:", e?.message)), () => {
+			e = !1, A(null), t && URL.revokeObjectURL(t);
+		};
+	}, [L]);
+	let R = y ? Array.isArray(_) ? _ : _ ? [_] : [] : [], z = ae || N, B = z ? `${I}-error` : void 0, V = C && !z ? `${I}-hint` : void 0, H = B || V, U = ee(x), W = !y && !!_, G = W && (_ instanceof File ? c(_) : U || c(_)), le = _?.name, K = G ? _?.url || oe : se, q = G ? "image" : "file", ue = g ? `Change ${g}` : `Change ${q}`, J = g ? `Remove ${g}` : `Remove ${q}`, Y = g ? `${g} preview` : `Selected ${q} preview`, X = (e) => {
+		let t = u(e, {
+			accept: x,
+			maxSizeMb: S
+		});
+		return t ? (P(t), !1) : (P(""), v(e), !0);
+	}, Z = (e) => {
+		let t = Array.from(e || []);
+		if (!t.length) return;
+		let n = Array.isArray(_) ? _ : _ ? [_] : [], r = new Set(n.map(i)), a = "", o = [];
+		for (let e of t) {
+			let t = u(e, {
+				accept: x,
+				maxSizeMb: S
+			});
+			if (t) {
+				a ||= t;
+				continue;
+			}
+			r.has(i(e)) || (r.add(i(e)), o.push(e));
+		}
+		let s = n.concat(o);
+		b && s.length > b && (s = s.slice(0, b), a ||= `Up to ${b} files.`), P(a), v(s);
+	}, de = (e) => {
+		if (y) {
+			Z(e.target.files);
+			return;
+		}
+		let t = e.target.files?.[0] || null;
+		t && (X(t) || (e.target.value = ""));
+	}, fe = (e) => {
+		if (e.preventDefault(), M(!1), w) return;
+		if (y) {
+			Z(e.dataTransfer.files);
+			return;
+		}
+		let t = e.dataTransfer.files?.[0];
+		t && X(t);
+	}, pe = (e) => {
+		P(""), v(R.filter((t, n) => n !== e));
+	}, me = () => F.current?.click(), Q = w ? /* @__PURE__ */ m("span", {
+		className: "wui-file-busy",
+		children: /* @__PURE__ */ m("span", {
+			className: "spinner-border spinner-border-sm",
+			role: "status",
+			"aria-label": "Loading"
+		})
+	}) : null, $ = /* @__PURE__ */ m("input", {
+		id: I,
+		name: ne,
+		ref: F,
+		type: "file",
+		"aria-describedby": H,
+		accept: x,
+		multiple: y || void 0,
+		disabled: w || void 0,
+		className: "visually-hidden",
+		onClick: (e) => {
+			e.currentTarget.value = "";
+		},
+		onChange: de,
+		...O
+	});
+	return /* @__PURE__ */ h("div", {
+		className: `field${E ? ` ${E}` : ""}`,
+		children: [
+			/* @__PURE__ */ h("label", {
+				className: "label",
+				htmlFor: I,
+				children: [g, ie && /* @__PURE__ */ m(r, {})]
+			}),
+			W ? /* @__PURE__ */ h("div", {
+				className: `file-preview${z ? " error" : ""}${T ? ` ${T}` : ""}`,
+				style: D,
+				"aria-busy": w || void 0,
+				children: [
+					/* @__PURE__ */ h("button", {
+						type: "button",
+						className: "file-preview-open",
+						"aria-label": ue,
+						onClick: me,
+						disabled: w,
+						children: [K ? /* @__PURE__ */ m("img", {
+							src: K,
+							alt: Y,
+							className: "file-preview-img"
+						}) : /* @__PURE__ */ h("span", {
+							className: "file-preview-file",
+							children: [/* @__PURE__ */ m(n, {
+								name: "file-text",
+								size: 28
+							}), /* @__PURE__ */ m("span", {
+								className: "file-preview-file-name",
+								children: le
+							})]
+						}), /* @__PURE__ */ m("span", {
+							className: "file-preview-overlay",
+							children: /* @__PURE__ */ h("span", {
+								className: "file-preview-cta",
+								children: [
+									/* @__PURE__ */ m(n, {
+										name: G ? "image" : "file-text",
+										size: 16
+									}),
+									" ",
+									G ? "Change image" : "Change file"
+								]
+							})
+						})]
+					}),
+					t(/* @__PURE__ */ m("button", {
+						type: "button",
+						className: "file-preview-remove",
+						"aria-label": J,
+						onClick: () => v(null),
+						disabled: w,
+						children: /* @__PURE__ */ m(n, {
+							name: "x",
+							size: 16
+						})
+					}), J),
+					$,
+					Q
+				]
+			}) : /* @__PURE__ */ h("div", {
+				className: `file-input file-input-tall${j ? " dragging" : ""}${z ? " error" : ""}${y && R.length > 0 ? " has-files" : ""}${T ? ` ${T}` : ""}`,
+				style: D,
+				"aria-busy": w || void 0,
+				onDragOver: (e) => {
+					e.preventDefault(), !w && !j && M(!0);
+				},
+				onDragLeave: (e) => {
+					e.preventDefault(), M(!1);
+				},
+				onDrop: fe,
+				children: [
+					/* @__PURE__ */ h("label", {
+						htmlFor: I,
+						className: "file-input-zone-label",
+						children: [
+							/* @__PURE__ */ m("span", {
+								className: "file-input-icon",
+								children: /* @__PURE__ */ m(n, {
+									name: "upload",
+									size: 24
+								})
+							}),
+							/* @__PURE__ */ h("span", {
+								className: "file-input-title",
+								children: [/* @__PURE__ */ m("span", {
+									className: "browse",
+									children: "Click to upload"
+								}), " or drag & drop"]
+							}),
+							/* @__PURE__ */ m("span", {
+								className: "file-input-text",
+								children: S > 0 ? `${s(x)} · up to ${S} MB` : s(x)
+							})
+						]
+					}),
+					$,
+					Q,
+					y && R.length > 0 && /* @__PURE__ */ m("div", {
+						className: "attach-list",
+						children: R.map((e, t) => /* @__PURE__ */ m(a, {
+							item: e,
+							isImage: e instanceof File ? c(e) : U || c(e),
+							noun: "file",
+							onRemove: () => pe(t)
+						}, i(e)))
+					})
+				]
+			}),
+			z ? /* @__PURE__ */ m("div", {
+				className: "field-error",
+				id: B,
+				children: z
+			}) : C ? /* @__PURE__ */ m("div", {
+				className: "field-hint",
+				id: V,
+				children: C
+			}) : null
+		]
+	});
+}
+//#endregion
+export { g as default };

package/dist/components/AppFileViewer.js

@@ -0,0 +1,50 @@
+import e from "./warnUnknownProps.js";
+import { forwardRef as t, useCallback as n, useEffect as r, useLayoutEffect as i, useRef as a, useState as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { createPortal as u } from "react-dom";
+//#region src/components/AppFileViewer.jsx
+var d = "wui-file-viewer:load", f = "wui-file-viewer:error", p = "wui-file-viewer:prefs-change", m = t(function({ src: t, name: m, type: h, prefs: g, onPrefsChange: _, viewKey: v, download: y = !1, workerSrc: b, assetBase: x, captions: S, actions: C, onLoad: w, onError: T, className: E = "", style: D, ...O }, k) {
+	e("AppFileViewer", O);
+	let A = a(null), j = a(w), M = a(T), N = a(_), [P, F] = o(null), I = n((e) => {
+		A.current = e, typeof k == "function" ? k(e) : k && (k.current = e);
+	}, [k]);
+	return i(() => {
+		g !== void 0 && (A.current.prefs = g);
+	}, [g]), r(() => {
+		j.current = w, M.current = T, N.current = _;
+	}), r(() => {
+		let e = A.current, t = (e) => j.current?.(e.detail), n = (e) => M.current?.(e.detail), r = (e) => N.current?.(e.detail);
+		return e.addEventListener(d, t), e.addEventListener(f, n), e.addEventListener(p, r), () => {
+			e.removeEventListener(d, t), e.removeEventListener(f, n), e.removeEventListener(p, r);
+		};
+	}, []), r(() => {
+		let e = !0;
+		return import("@webority/ui-elements/file-viewer").then(() => {
+			let t = A.current;
+			e && t?.isConnected && F(t.actionsContainer);
+		}).catch((t) => {
+			console.warn("[AppFileViewer] the viewer failed to load:", t?.message), e && M.current?.({ message: t?.message ?? String(t) });
+		}), () => {
+			e = !1;
+		};
+	}, []), /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("wui-file-viewer", {
+		ref: I,
+		src: t,
+		name: m || void 0,
+		type: h || void 0,
+		"view-key": v || void 0,
+		download: y ? "" : void 0,
+		"worker-src": b || void 0,
+		"asset-base": x || void 0,
+		captions: S || void 0,
+		className: E || void 0,
+		style: D,
+		...O
+	}), P && C != null && u(/* @__PURE__ */ c("div", {
+		slot: "actions",
+		className: "wui-file-viewer-slot",
+		children: C
+	}), P)] });
+});
+//#endregion
+export { m as default };

package/dist/components/AppFilterBar.js

@@ -0,0 +1,129 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppButton.js";
+import r from "./AppSegmented.js";
+import i from "./AppChip.js";
+import a from "./AppDateRangePicker.js";
+import { emptyFacetValue as o, isFacetActive as s } from "../lib/listQuery.js";
+import c from "./AppMultiSelect.js";
+import l from "./AppSearch.js";
+import u from "./AppSelect.js";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/components/AppFilterBar.jsx
+var p = [
+	"enum",
+	"multiEnum",
+	"dateRange",
+	"text"
+], m = 4, h = (e) => (e.type === "enum" || e.type === "multiEnum") && !e.options?.length, g = (e, t) => e.options?.find((e) => e.value === t)?.label ?? t;
+function _(e, t) {
+	if (!s(e, t)) return [];
+	if (e.type === "enum") return [{
+		id: e.key,
+		text: g(e, t),
+		clear: () => o(e)
+	}];
+	if (e.type === "multiEnum") return t.map((n) => ({
+		id: `${e.key}:${n}`,
+		text: g(e, n),
+		clear: () => t.filter((e) => e !== n)
+	}));
+	if (e.type === "dateRange") {
+		let n = t.from && t.to ? `${t.from} to ${t.to}` : t.from ? `From ${t.from}` : `Until ${t.to}`;
+		return [{
+			id: e.key,
+			text: n,
+			clear: () => o(e)
+		}];
+	}
+	return [];
+}
+function v({ facets: r, value: a, onChange: c, className: l = "", ...u }) {
+	t("AppFilterBar", u);
+	for (let t of r) e("AppFilterBar", "facets[].type", t.type, p);
+	let m = r.filter((e) => !h(e)), g = m.flatMap((e) => _(e, a[e.key]).map((t) => ({
+		...t,
+		facet: e
+	}))), v = m.filter((e) => s(e, a[e.key]));
+	return /* @__PURE__ */ f("div", {
+		className: `wui-filter-bar d-flex flex-wrap align-items-center gap-2${l ? ` ${l}` : ""}`,
+		...u,
+		children: [
+			m.map((e) => /* @__PURE__ */ d(y, {
+				facet: e,
+				value: a[e.key],
+				onChange: (t) => c(e.key, t)
+			}, e.key)),
+			g.map((e) => /* @__PURE__ */ d(i, {
+				size: "sm",
+				label: `${e.facet.label}: ${e.text}`,
+				removeLabel: `Remove ${e.facet.label} filter ${e.text}`,
+				onRemove: () => c(e.facet.key, e.clear())
+			}, e.id)),
+			v.length > 1 && /* @__PURE__ */ d(n, {
+				variant: "ghost",
+				size: "sm",
+				onClick: () => {
+					for (let e of v) c(e.key, o(e));
+				},
+				children: "Clear all"
+			})
+		]
+	});
+}
+function y({ facet: e, value: t, onChange: n }) {
+	if (e.type === "enum") {
+		let i = e.options ?? [];
+		return i.length < m ? /* @__PURE__ */ d(r, {
+			label: e.label,
+			name: e.key,
+			size: "sm",
+			value: t ?? "",
+			onChange: n,
+			options: [{
+				value: "",
+				label: "All"
+			}, ...i]
+		}) : /* @__PURE__ */ d(u, {
+			"aria-label": e.label,
+			name: e.key,
+			placeholder: e.label,
+			size: "sm",
+			clearable: !0,
+			value: t ?? "",
+			onChange: n,
+			options: i
+		});
+	}
+	return e.type === "multiEnum" ? /* @__PURE__ */ d(c, {
+		"aria-label": e.label,
+		name: e.key,
+		placeholder: e.label,
+		size: "sm",
+		collapseChips: !0,
+		values: t ?? [],
+		onChange: n,
+		options: e.options ?? []
+	}) : e.type === "dateRange" ? /* @__PURE__ */ d(a, {
+		ariaLabel: e.label,
+		startName: `${e.key}From`,
+		endName: `${e.key}To`,
+		placeholder: e.label,
+		size: "sm",
+		start: t?.from ?? "",
+		end: t?.to ?? "",
+		onChange: (e) => n({
+			from: e.start ?? "",
+			to: e.end ?? ""
+		})
+	}) : /* @__PURE__ */ d(l, {
+		ariaLabel: e.label,
+		name: e.key,
+		placeholder: e.label,
+		size: "sm",
+		value: t ?? "",
+		onChange: n
+	});
+}
+//#endregion
+export { v as default };

package/dist/components/AppFloatingDock.js

@@ -0,0 +1,47 @@
+import e from "./warnUnknownProps.js";
+import t from "./renderIconProp.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/dock";
+//#region src/components/AppFloatingDock.jsx
+function a({ items: a = [], linkComponent: o, ariaLabel: s = "Quick navigation", magnify: c = !0, maxScale: l, radius: u, className: d = "", ...f }) {
+	return e("AppFloatingDock", f), /* @__PURE__ */ r("wui-dock", {
+		role: "navigation",
+		"aria-label": s,
+		static: c ? void 0 : "",
+		"max-scale": l ?? void 0,
+		radius: u ?? void 0,
+		class: d || void 0,
+		...f,
+		children: a.map((e, a) => {
+			let s = e.key ?? `${e.title}-${a}`, c = /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+				className: "dock-item-tip",
+				"aria-hidden": "true",
+				children: e.title
+			}), /* @__PURE__ */ r("span", {
+				className: "dock-item-icon",
+				children: t(e.icon, { size: 18 })
+			})] });
+			if (e.to && o) return /* @__PURE__ */ r(o, {
+				className: "dock-item",
+				to: e.to,
+				"aria-label": e.title,
+				children: c
+			}, s);
+			let l = e.href ?? e.to;
+			return l ? /* @__PURE__ */ r("a", {
+				className: "dock-item",
+				href: l,
+				"aria-label": e.title,
+				children: c
+			}, s) : /* @__PURE__ */ r("button", {
+				type: "button",
+				className: "dock-item",
+				onClick: e.onClick,
+				"aria-label": e.title,
+				children: c
+			}, s);
+		})
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/AppFormActions.js

@@ -0,0 +1,23 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/AppFormActions.jsx
+var r = [
+	"end",
+	"start",
+	"between"
+];
+function i({ children: i, sticky: a = !1, align: o = "end", className: s = "", ...c }) {
+	return t("AppFormActions", c), e("AppFormActions", "align", o, r), /* @__PURE__ */ n("div", {
+		className: [
+			"form-actions",
+			a ? "form-actions-sticky" : "",
+			o && o !== "end" ? `form-actions-${o}` : "",
+			s
+		].filter(Boolean).join(" "),
+		...c,
+		children: i
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/AppFormRow.js

@@ -0,0 +1,24 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/AppFormRow.jsx
+var r = [
+	1,
+	2,
+	3
+];
+function i({ children: i, columns: a = 2, className: o = "", ...s }) {
+	t("AppFormRow", s), e("AppFormRow", "columns", a, r);
+	let { style: c, ...l } = s;
+	return /* @__PURE__ */ n("div", {
+		className: ["form-row-grid", o].filter(Boolean).join(" "),
+		style: {
+			"--form-cols": a,
+			...c
+		},
+		...l,
+		children: i
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/AppFormSection.js

@@ -0,0 +1,32 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/AppFormSection.jsx
+var i = ["stacked", "side"], a = ["top", "start"], o = ["comfortable", "compact"];
+function s({ children: s, title: c, description: l, layout: u = "stacked", labels: d = "top", density: f = "comfortable", className: p = "", ...m }) {
+	return t("AppFormSection", m), e("AppFormSection", "layout", u, i), e("AppFormSection", "labels", d, a), e("AppFormSection", "density", f, o), /* @__PURE__ */ r("section", {
+		className: [
+			"form-section",
+			u === "side" ? "wui-form-side" : "",
+			d === "start" ? "wui-form-labels-start" : "",
+			f === "compact" ? "wui-form-compact" : "",
+			p
+		].filter(Boolean).join(" "),
+		...m,
+		children: [(c != null || l != null) && /* @__PURE__ */ r("div", {
+			className: "form-section-head",
+			children: [c != null && /* @__PURE__ */ n("h3", {
+				className: "form-section-title",
+				children: c
+			}), l != null && /* @__PURE__ */ n("p", {
+				className: "form-section-desc",
+				children: l
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: "form-section-body",
+			children: s
+		})]
+	});
+}
+//#endregion
+export { s as default };