@webority/ui-react 0.33.0 → 0.35.0

package/dist/components/AppDataTable.js

@@ -0,0 +1,213 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { AppSkeletonRows as r } from "./AppSkeleton.js";
+import i from "./AppTablePagination.js";
+import { Fragment as a, useEffect as o, useRef as s, useState as ee } from "react";
+import { Fragment as te, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/AppDataTable.jsx
+var u = [
+	"comfortable",
+	"cozy",
+	"compact"
+];
+function d(e) {
+	return e === "end" ? "wui-cell-end" : e === "num" ? "num" : e === "center" ? "text-center" : "";
+}
+function f(e) {
+	return e == null || e === "" ? "-" : typeof e == "boolean" ? String(e) : e;
+}
+function p({ columns: p, rows: m, rowKey: h = (e) => e.id, sort: g, onSort: _, loading: v = !1, skeletonRows: y = 5, empty: ne = "No records found.", emptyFiltered: b, sourceCount: re, rowActions: x, rowActionsLabel: S, pagination: C, ariaLabel: w, className: T = "", wrapperClassName: E = "", selectable: D = !1, selectedIds: O, onToggleRow: ie, onToggleAll: ae, renderExpanded: k, density: A = "comfortable", striped: oe = !1, maxHeight: j, stickyFirstColumn: se = !1, stackOnMobile: M = !1, hiddenColumns: N, rowStatus: P, rowHref: F, onRowClick: I, ...L }) {
+	t("AppDataTable", L);
+	let R = N?.length ? new Set(N) : null;
+	p = R ? p.filter((e) => !(e.hideable && R.has(e.key))) : p, e("AppDataTable", "density", A, u);
+	let z = [
+		"table table-ledger",
+		A === "cozy" || A === "compact" ? `wui-table-${A}` : "",
+		oe ? "wui-table-striped" : "",
+		se ? "wui-table-sticky-first" : "",
+		M ? "wui-table-stack" : "",
+		T
+	].filter(Boolean).join(" "), B = typeof k == "function", [V, H] = ee(() => /* @__PURE__ */ new Set()), U = (e) => H((t) => {
+		let n = new Set(t);
+		return n.has(e) ? n.delete(e) : n.add(e), n;
+	}), W = p.some((e) => typeof e.footer == "function"), G = typeof F == "function" || typeof I == "function", K = (e) => !!e.target.closest("a, button, input, select, textarea, label, [role='menu'], [role='menuitem'], .dropdown"), q = (e, t) => {
+		if (K(t) || (I && I(e), !F)) return;
+		let n = F(e);
+		n && (t.ctrlKey || t.metaKey || t.button === 1 ? window.open(n, "_blank", "noopener") : window.location.assign(n));
+	}, J = j !== void 0, ce = [
+		"table-wrap",
+		J ? "wui-table-scroll" : "",
+		E
+	].filter(Boolean).join(" "), le = J ? { maxHeight: j } : void 0, Y = Math.max(1, p.length + +!!x + +!!D + +!!B), X = D && m ? m.reduce((e, t, n) => e + +!!O?.has(h(t, n)), 0) : 0, Z = D && m && m.length > 0 && X === m.length, ue = X > 0 && !Z, de = (e) => {
+		e && (e.indeterminate = ue);
+	}, Q = s(null);
+	o(() => {
+		let e = Q.current;
+		if (!e) return;
+		let t = (e) => {
+			let t = e.target.closest?.(".u-name");
+			t && !t.title && (t.scrollWidth > t.clientWidth || t.scrollHeight > t.clientHeight) && (t.title = t.textContent.trim());
+		};
+		return e.addEventListener("mouseover", t), e.addEventListener("focusin", t), () => {
+			e.removeEventListener("mouseover", t), e.removeEventListener("focusin", t);
+		};
+	}, []);
+	let $ = b !== void 0 && re > 0 ? b : ne;
+	return /* @__PURE__ */ l(te, { children: [/* @__PURE__ */ l("div", {
+		ref: Q,
+		className: ce,
+		style: le,
+		tabIndex: 0,
+		...L,
+		children: [/* @__PURE__ */ l("table", {
+			className: z,
+			"aria-label": w,
+			children: [
+				/* @__PURE__ */ c("thead", { children: /* @__PURE__ */ l("tr", { children: [
+					B && /* @__PURE__ */ c("th", {
+						className: "wui-expand-cell",
+						children: /* @__PURE__ */ c("span", {
+							className: "visually-hidden",
+							children: "Expand"
+						})
+					}),
+					D && /* @__PURE__ */ c("th", {
+						className: "wui-select-cell",
+						children: /* @__PURE__ */ c("input", {
+							ref: de,
+							type: "checkbox",
+							className: "wui-check",
+							checked: Z,
+							onChange: (e) => ae?.(e.target.checked),
+							"aria-label": "Select all rows"
+						})
+					}),
+					p.map((e, t) => {
+						let r = !!(e.sortable && _), i = g && g.key === e.key, a = e.align === "num" || e.align === "end", o = r && /* @__PURE__ */ c("span", {
+							className: `sort-icon${a ? " wui-sort-lead" : ""}`,
+							children: /* @__PURE__ */ c(n, {
+								name: "chevrons-up-down",
+								size: 14
+							})
+						});
+						return /* @__PURE__ */ l("th", {
+							className: (r ? "sortable " : "") + (t === 0 ? "wui-name-cell " : "") + (e.nowrap ? "text-nowrap " : "") + d(e.align),
+							style: e.width || e.minWidth ? {
+								width: e.width,
+								minWidth: e.minWidth
+							} : void 0,
+							tabIndex: r ? 0 : void 0,
+							"aria-sort": i ? g.dir === "asc" ? "ascending" : "descending" : r ? "none" : void 0,
+							onClick: r ? () => _(e.key) : void 0,
+							onKeyDown: r ? (t) => {
+								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), _(e.key));
+							} : void 0,
+							children: [
+								a && o,
+								e.label,
+								!a && o
+							]
+						}, e.key);
+					}),
+					x && (S ? /* @__PURE__ */ c("th", {
+						className: "wui-cell-end",
+						children: S
+					}) : /* @__PURE__ */ c("th", {
+						className: "wui-cell-end",
+						children: /* @__PURE__ */ c("span", {
+							className: "visually-hidden",
+							children: "Actions"
+						})
+					}))
+				] }) }),
+				/* @__PURE__ */ c("tbody", { children: v ? /* @__PURE__ */ c(r, {
+					rows: y,
+					cols: Y
+				}) : m?.length ? m.map((e, t) => {
+					let r = h(e, t), i = B && V.has(r), o = String(r).replace(/[^a-z0-9]/gi, "_");
+					return /* @__PURE__ */ l(a, { children: [/* @__PURE__ */ l("tr", {
+						className: [D && O?.has(r) ? "is-selected" : "", G ? "wui-row-link" : ""].filter(Boolean).join(" ") || void 0,
+						"data-status": P?.(e) || void 0,
+						"data-href": F?.(e) || void 0,
+						tabIndex: G ? 0 : void 0,
+						onClick: G ? (t) => q(e, t) : void 0,
+						onAuxClick: G && F ? (t) => t.button === 1 && q(e, t) : void 0,
+						onKeyDown: G ? (t) => {
+							t.key === "Enter" && t.target === t.currentTarget && q(e, t);
+						} : void 0,
+						children: [
+							B && /* @__PURE__ */ c("td", {
+								className: "wui-expand-cell",
+								children: /* @__PURE__ */ c("button", {
+									type: "button",
+									className: `wui-expand-toggle${i ? " is-open" : ""}`,
+									"aria-expanded": i,
+									"aria-controls": i ? `${o}-expanded` : void 0,
+									"aria-label": i ? "Collapse row" : "Expand row",
+									onClick: () => U(r),
+									children: /* @__PURE__ */ c(n, {
+										name: "chevron-down",
+										size: 16
+									})
+								})
+							}),
+							D && /* @__PURE__ */ c("td", {
+								className: "wui-select-cell",
+								children: /* @__PURE__ */ c("input", {
+									type: "checkbox",
+									className: "wui-check",
+									checked: O?.has(r) || !1,
+									onChange: () => ie?.(r),
+									"aria-label": "Select row"
+								})
+							}),
+							p.map((t, n) => /* @__PURE__ */ c("td", {
+								className: (n === 0 ? "wui-name-cell " : "") + (t.nowrap ? "text-nowrap " : "") + d(t.align) + (t.cellClassName ? ` ${t.cellClassName}` : ""),
+								style: t.cellStyle,
+								"data-label": M && typeof t.label == "string" ? t.label : void 0,
+								children: t.render ? t.render(e) : f(e[t.key])
+							}, t.key)),
+							x && /* @__PURE__ */ c("td", { children: /* @__PURE__ */ c("div", {
+								className: "u-row-actions",
+								children: x(e)
+							}) })
+						]
+					}), i && /* @__PURE__ */ c("tr", {
+						className: "wui-row-expanded",
+						children: /* @__PURE__ */ c("td", {
+							id: `${o}-expanded`,
+							colSpan: Y,
+							children: k(e)
+						})
+					})] }, r);
+				}) : null }),
+				W && !v && m?.length > 0 && /* @__PURE__ */ c("tfoot", { children: /* @__PURE__ */ l("tr", { children: [
+					B && /* @__PURE__ */ c("td", { className: "wui-expand-cell" }),
+					D && /* @__PURE__ */ c("td", { className: "wui-select-cell" }),
+					p.map((e, t) => /* @__PURE__ */ c("td", {
+						className: (t === 0 ? "wui-name-cell " : "") + (e.nowrap ? "text-nowrap " : "") + d(e.align),
+						children: e.footer ? e.footer(m) : null
+					}, e.key)),
+					x && /* @__PURE__ */ c("td", {})
+				] }) })
+			]
+		}), !v && !m?.length && /* @__PURE__ */ c("div", {
+			className: "tbl-empty-block",
+			children: typeof $ == "string" ? /* @__PURE__ */ c("div", {
+				className: "tbl-empty-plain",
+				children: $
+			}) : $
+		})]
+	}), C && C.total > 0 && /* @__PURE__ */ c(i, {
+		page: C.page,
+		totalPages: C.totalPages,
+		pageSize: C.pageSize,
+		onPageChange: C.setPage,
+		onPageSizeChange: C.setPageSize,
+		pageSizes: C.pageSizes,
+		mode: C.mode
+	})] });
+}
+//#endregion
+export { p as default };

package/dist/components/AppDatePicker.js

@@ -0,0 +1,59 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppRequiredMark.js";
+import r from "./useWuiControl.js";
+import { forwardRef as i, useId as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/datepicker";
+//#region src/components/AppDatePicker.jsx
+var c = [
+	"sm",
+	"md",
+	"lg"
+], l = i(function({ value: i, onChange: l, label: u, required: d = !1, hint: f, error: p, name: m, min: h, max: g, placeholder: _ = "Enter Date", disabled: v, size: y, firstDay: b, id: x, ariaLabel: S, className: C = "", fieldClassName: w = "", ...T }, E) {
+	t("AppDatePicker", T), e("AppDatePicker", "size", y, c);
+	let D = a(), O = x || D, { setRef: k } = r({
+		ref: E,
+		value: i ?? "",
+		onChange: l
+	}), A = !u && !p && !f, j = p ? `${O}-error` : void 0, M = f ? `${O}-hint` : void 0, N = /* @__PURE__ */ o("wui-datepicker", {
+		ref: k,
+		id: O,
+		name: m,
+		min: h,
+		max: g,
+		placeholder: _,
+		size: y || void 0,
+		"first-day": b == null ? void 0 : String(b),
+		"aria-label": S || (typeof u == "string" ? u : void 0),
+		"aria-describedby": j || M,
+		"aria-invalid": p ? "true" : void 0,
+		disabled: v ? "" : void 0,
+		required: d ? "" : void 0,
+		className: C || void 0,
+		...T
+	});
+	return A ? N : /* @__PURE__ */ s("div", {
+		className: `field${w ? ` ${w}` : ""}`,
+		children: [
+			u && /* @__PURE__ */ s("label", {
+				className: "label",
+				htmlFor: O,
+				children: [u, d && /* @__PURE__ */ o(n, {})]
+			}),
+			N,
+			p && /* @__PURE__ */ o("div", {
+				className: "field-error",
+				id: j,
+				children: p
+			}),
+			!p && f && /* @__PURE__ */ o("div", {
+				className: "field-hint",
+				id: M,
+				children: f
+			})
+		]
+	});
+});
+//#endregion
+export { l as default };

package/dist/components/AppDateRangePicker.js

@@ -0,0 +1,73 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppRequiredMark.js";
+import r from "./useWuiControl.js";
+import { forwardRef as i, useEffect as a, useId as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import "@webority/ui-elements/elements/date-range";
+//#region src/components/AppDateRangePicker.jsx
+var l = [
+	"sm",
+	"md",
+	"lg"
+], u = i(function({ start: i, end: u, onChange: d, label: f, required: p = !1, hint: m, error: h, startName: g, endName: _, min: v, max: y, placeholder: b = "Start to End", disabled: x, size: S, firstDay: C, id: w, ariaLabel: T, className: E = "", fieldClassName: D = "", ...O }, k) {
+	t("AppDateRangePicker", O), e("AppDateRangePicker", "size", S, l);
+	let A = o(), j = w || A, { setRef: M, innerRef: N } = r({
+		ref: k,
+		onChange: d
+	});
+	a(() => {
+		let e = N.current;
+		if (!e) return;
+		let t = i === void 0 ? e.value.start : i, n = u === void 0 ? e.value.end : u;
+		(e.value.start !== t || e.value.end !== n) && (e.value = {
+			start: t,
+			end: n
+		});
+	}, [
+		i,
+		u,
+		N
+	]);
+	let P = !f && !h && !m, F = h ? `${j}-error` : void 0, I = m ? `${j}-hint` : void 0, L = /* @__PURE__ */ s("wui-date-range", {
+		ref: M,
+		id: j,
+		"start-name": g,
+		"end-name": _,
+		min: v,
+		max: y,
+		placeholder: b,
+		size: S || void 0,
+		"first-day": C == null ? void 0 : String(C),
+		"aria-label": T || (typeof f == "string" ? f : void 0),
+		"aria-describedby": F || I,
+		"aria-invalid": h ? "true" : void 0,
+		disabled: x ? "" : void 0,
+		required: p ? "" : void 0,
+		className: E || void 0,
+		...O
+	});
+	return P ? L : /* @__PURE__ */ c("div", {
+		className: `field${D ? ` ${D}` : ""}`,
+		children: [
+			f && /* @__PURE__ */ c("label", {
+				className: "label",
+				htmlFor: j,
+				children: [f, p && /* @__PURE__ */ s(n, {})]
+			}),
+			L,
+			h && /* @__PURE__ */ s("div", {
+				className: "field-error",
+				id: F,
+				children: h
+			}),
+			!h && m && /* @__PURE__ */ s("div", {
+				className: "field-hint",
+				id: I,
+				children: m
+			})
+		]
+	});
+});
+//#endregion
+export { u as default };

package/dist/components/AppDescriptions.js

@@ -0,0 +1,40 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { isEmpty as n } from "../lib/emptyValue.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AppDescriptions.jsx
+var a = ["sm", "md"];
+function o({ items: o = [], columns: s = 2, size: c = "md", bordered: l = !1, title: u, className: d = "", ...f }) {
+	return t("AppDescriptions", f), e("AppDescriptions", "size", c, a), /* @__PURE__ */ i("div", {
+		className: [
+			"descs",
+			`descs-col-${s}`,
+			c && c !== "md" ? `descs-${c}` : "",
+			l ? "descs-bordered" : "",
+			d
+		].filter(Boolean).join(" ") || void 0,
+		...f,
+		children: [u && /* @__PURE__ */ r("div", {
+			className: "descs-title",
+			children: u
+		}), /* @__PURE__ */ r("dl", {
+			className: "descs-list",
+			children: o.map((e, t) => {
+				let a = n(e.value), o = e.span ?? 1, s = e.key ?? `${e.label}-${t}`;
+				return /* @__PURE__ */ i("div", {
+					className: "descs-item",
+					style: { "--descs-span": o },
+					children: [/* @__PURE__ */ r("dt", {
+						className: "descs-label",
+						children: e.label
+					}), /* @__PURE__ */ r("dd", {
+						className: `descs-value${a ? " is-empty" : ""}`,
+						children: a ? "-" : e.value
+					})]
+				}, s);
+			})
+		})]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppDropZone.js

@@ -0,0 +1,106 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import { DEFAULT_MAX_SIZE_MB as n, acceptLabel as r, validateFile as i } from "@webority/ui-elements/helpers";
+import { useId as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/AppDropZone.jsx
+function l({ label: l, id: u, onChange: d, multiple: f = !1, accept: p = "", maxSizeMb: m = n, error: h, hint: g, disabled: _ = !1, className: v = "", fieldClassName: y = "", style: b, ...x }) {
+	e("AppDropZone", x);
+	let [S, C] = o(!1), [w, T] = o(""), E = a(), D = u || E, O = h || w, k = O ? `${D}-error` : void 0, A = g && !O ? `${D}-hint` : void 0, j = k || A, M = p ? r(p) : "Any file type", N = (e) => {
+		let t = Array.from(e || []);
+		if (!t.length) return;
+		if (!f) {
+			let e = i(t[0], {
+				accept: p,
+				maxSizeMb: m
+			});
+			T(e || ""), e || d(t[0]);
+			return;
+		}
+		let n = "", r = [];
+		for (let e of t) {
+			let t = i(e, {
+				accept: p,
+				maxSizeMb: m
+			});
+			if (t) {
+				n ||= t;
+				continue;
+			}
+			r.push(e);
+		}
+		T(n), r.length && d(r);
+	};
+	return /* @__PURE__ */ c("div", {
+		className: `field${y ? ` ${y}` : ""}`,
+		children: [
+			l ? /* @__PURE__ */ s("label", {
+				className: "label",
+				htmlFor: D,
+				children: l
+			}) : null,
+			/* @__PURE__ */ c("div", {
+				className: `file-input file-input-tall${S ? " dragging" : ""}${O ? " error" : ""}${v ? ` ${v}` : ""}`,
+				style: b,
+				"aria-disabled": _ || void 0,
+				onDragOver: (e) => {
+					e.preventDefault(), !_ && !S && C(!0);
+				},
+				onDragLeave: (e) => {
+					e.preventDefault(), C(!1);
+				},
+				onDrop: (e) => {
+					e.preventDefault(), C(!1), _ || N(e.dataTransfer.files);
+				},
+				children: [/* @__PURE__ */ c("label", {
+					htmlFor: D,
+					className: "file-input-zone-label",
+					children: [
+						/* @__PURE__ */ s("span", {
+							className: "file-input-icon",
+							children: /* @__PURE__ */ s(t, {
+								name: "upload",
+								size: 24
+							})
+						}),
+						/* @__PURE__ */ c("span", {
+							className: "file-input-title",
+							children: [/* @__PURE__ */ s("span", {
+								className: "browse",
+								children: "Click to upload"
+							}), " or drag & drop"]
+						}),
+						/* @__PURE__ */ s("span", {
+							className: "file-input-text",
+							children: m > 0 ? `${M} · up to ${m} MB` : M
+						})
+					]
+				}), /* @__PURE__ */ s("input", {
+					id: D,
+					type: "file",
+					"aria-describedby": j,
+					accept: p,
+					multiple: f || void 0,
+					disabled: _ || void 0,
+					className: "visually-hidden",
+					onClick: (e) => {
+						e.currentTarget.value = "";
+					},
+					onChange: (e) => N(e.target.files),
+					...x
+				})]
+			}),
+			O ? /* @__PURE__ */ s("div", {
+				className: "field-error",
+				id: k,
+				children: O
+			}) : g ? /* @__PURE__ */ s("div", {
+				className: "field-hint",
+				id: A,
+				children: g
+			}) : null
+		]
+	});
+}
+//#endregion
+export { l as default };

package/dist/components/AppDropdown.js

@@ -0,0 +1,90 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import n from "./renderIconProp.js";
+import { forwardRef as r, useEffect as i, useRef as a, useState as o } from "react";
+import { Dropdown as s } from "react-bootstrap";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/AppDropdown.jsx
+var u = !1;
+function d() {
+	let e = !0;
+	try {
+		e = process.env.NODE_ENV !== "production";
+	} catch {
+		e = !0;
+	}
+	!e || u || (u = !0, console.warn("[@webority/ui-react] <AppDropdown> icon-only toggle has no accessible name — pass `label` or `ariaLabel`."));
+}
+function f({ icon: t, iconSize: r, toggleClassName: u, label: f, ariaLabel: m, align: h = "end", items: g = [], menuClassName: _ = "", linkComponent: v, children: y, trigger: b, ...x }) {
+	e("AppDropdown", x), !b && !m && !f && d();
+	let S = u ?? (b ? "wui-dropdown-trigger" : "topbar-icon-btn"), [C, w] = o(!1), T = a(null);
+	return i(() => {
+		if (!C) return;
+		let e = T.current?.getBoundingClientRect(), t = () => {
+			let t = T.current?.getBoundingClientRect();
+			(!e || !t || Math.abs(t.top - e.top) > 2 || Math.abs(t.left - e.left) > 2) && w(!1);
+		}, n = () => w(!1);
+		return window.addEventListener("scroll", t, {
+			capture: !0,
+			passive: !0
+		}), window.addEventListener("resize", n), () => {
+			window.removeEventListener("scroll", t, { capture: !0 }), window.removeEventListener("resize", n);
+		};
+	}, [C]), /* @__PURE__ */ l(s, {
+		ref: T,
+		align: h,
+		show: C,
+		onToggle: (e) => w(e),
+		...x,
+		children: [/* @__PURE__ */ c(s.Toggle, {
+			as: p,
+			icon: t,
+			iconSize: r,
+			btnClassName: S,
+			trigger: b,
+			title: f,
+			"aria-label": m ?? (b ? void 0 : f)
+		}), /* @__PURE__ */ c(s.Menu, {
+			className: _,
+			renderOnMount: !0,
+			popperConfig: { strategy: "fixed" },
+			children: y ?? g.map((e) => {
+				if (e.divider) return /* @__PURE__ */ c(s.Divider, {}, e.key);
+				let t = e.to ? v ? {
+					as: v,
+					to: e.to
+				} : {
+					as: "a",
+					href: e.to
+				} : {
+					as: "button",
+					type: "button"
+				};
+				return /* @__PURE__ */ l(s.Item, {
+					...t,
+					onClick: e.onClick,
+					className: e.danger ? "danger" : void 0,
+					children: [e.image ? /* @__PURE__ */ c("img", {
+						src: e.image,
+						alt: ""
+					}) : n(e.icon, { size: 16 }), e.label]
+				}, e.key);
+			})
+		})]
+	});
+}
+var p = r(function({ icon: e, iconSize: n = 20, btnClassName: r = "topbar-icon-btn", trigger: i, "aria-label": a, className: o, ...s }, l) {
+	return /* @__PURE__ */ c("button", {
+		ref: l,
+		type: "button",
+		className: r,
+		"aria-label": a,
+		...s,
+		children: i ?? /* @__PURE__ */ c(t, {
+			name: e,
+			size: n
+		})
+	});
+});
+//#endregion
+export { f as default };

package/dist/components/AppEmptyState.js

@@ -0,0 +1,37 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./renderIconProp.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AppEmptyState.jsx
+var a = ["md", "sm"];
+function o({ icon: o, iconSize: s = 24, size: c = "md", title: l, text: u, action: d, className: f = "", style: p, ...m }) {
+	return t("AppEmptyState", m), e("AppEmptyState", "size", c, a), /* @__PURE__ */ i("div", {
+		className: [
+			"empty-state",
+			c === "sm" ? "empty-state-sm" : "",
+			f
+		].filter(Boolean).join(" "),
+		style: p,
+		...m,
+		children: [
+			o ? /* @__PURE__ */ r("div", {
+				className: "empty-state-icon",
+				children: n(o, { size: s })
+			}) : null,
+			l != null && /* @__PURE__ */ r("div", {
+				className: "empty-state-title",
+				children: l
+			}),
+			u != null && /* @__PURE__ */ r("div", {
+				className: "empty-state-message",
+				children: u
+			}),
+			d && /* @__PURE__ */ r("div", {
+				className: "empty-state-action",
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppErrorSummary.js

@@ -0,0 +1,37 @@
+import e from "./warnUnknownProps.js";
+import t from "../lib/focusField.js";
+import { useEffect as n, useId as r, useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/AppErrorSummary.jsx
+function s({ errors: s = [], title: c, autoFocus: l = !0, id: u, className: d = "", ...f }) {
+	e("AppErrorSummary", f);
+	let p = r(), m = u || p, h = i(null), g = i(0), _ = s.length;
+	return n(() => {
+		l && _ > 0 && g.current === 0 && h.current?.focus(), g.current = _;
+	}, [_, l]), _ ? /* @__PURE__ */ o("div", {
+		ref: h,
+		className: ["alert alert-danger wui-error-summary", d].filter(Boolean).join(" "),
+		role: "alert",
+		tabIndex: -1,
+		"aria-labelledby": `${m}-title`,
+		id: m,
+		"data-autofocus": l ? "" : void 0,
+		...f,
+		children: [/* @__PURE__ */ a("h2", {
+			className: "wui-error-summary-title",
+			id: `${m}-title`,
+			children: c ?? `Fix ${_} field${_ > 1 ? "s" : ""} to continue`
+		}), /* @__PURE__ */ a("ul", {
+			className: "wui-error-summary-list",
+			children: s.map((e) => /* @__PURE__ */ a("li", { children: /* @__PURE__ */ a("a", {
+				href: `#${e.field}`,
+				onClick: (n) => {
+					n.preventDefault(), t(e.field);
+				},
+				children: e.message
+			}) }, `${e.field}:${e.message}`))
+		})]
+	}) : null;
+}
+//#endregion
+export { s as default };