@webority/ui-react 0.34.0 → 0.35.0

package/dist/components/AppPricingCard.js

@@ -0,0 +1,58 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/AppPricingCard.jsx
+function i({ name: i, price: a, unit: o, tagline: s, features: c = [], cta: l, featured: u = !1, current: d = !1, badge: f = "Most popular", className: p = "", ...m }) {
+	return e("AppPricingCard", m), /* @__PURE__ */ r("div", {
+		className: [
+			"plan-card",
+			u ? "featured" : "",
+			d ? "current" : "",
+			p
+		].filter(Boolean).join(" "),
+		...m,
+		children: [
+			u && f && /* @__PURE__ */ n("span", {
+				className: "plan-badge",
+				children: f
+			}),
+			/* @__PURE__ */ n("div", {
+				className: "plan-name",
+				children: i
+			}),
+			/* @__PURE__ */ r("div", {
+				className: "plan-price",
+				children: [a, o && /* @__PURE__ */ n("span", {
+					className: "plan-price-unit",
+					children: o
+				})]
+			}),
+			s && /* @__PURE__ */ n("div", {
+				className: "plan-tagline",
+				children: s
+			}),
+			c.length > 0 && /* @__PURE__ */ n("ul", {
+				className: "plan-features",
+				children: c.map((e, i) => {
+					let a = e.included !== !1;
+					return /* @__PURE__ */ r("li", {
+						className: a ? void 0 : "excluded",
+						children: [/* @__PURE__ */ n("span", {
+							className: "plan-feature-icon",
+							children: /* @__PURE__ */ n(t, {
+								name: a ? "check" : "x",
+								size: 16
+							})
+						}), e.text]
+					}, e.text ? `feat-${i}-${e.text}` : `feat-${i}`);
+				})
+			}),
+			l && /* @__PURE__ */ n("div", {
+				className: "plan-cta",
+				children: l
+			})
+		]
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/AppProgress.js

@@ -0,0 +1,42 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/AppProgress.jsx
+var r = ["sm", "md"], i = [
+	"info",
+	"success",
+	"warning",
+	"danger",
+	"neutral"
+];
+function a(e, t) {
+	if (!(t > 0)) return 0;
+	let n = Math.min(100, Math.max(0, e / t * 100));
+	return Number(n.toFixed(2));
+}
+function o({ value: o = 0, max: s = 100, tone: c = "info", size: l = "md", label: u, showLabel: d = !1, striped: f = !1, animated: p = !1, indeterminate: m = !1, className: h = "", ...g }) {
+	t("AppProgress", g), e("AppProgress", "tone", c, i), e("AppProgress", "size", l, r);
+	let _ = i.includes(c) ? c : "info", v = a(o, s), y = `progress${l === "sm" ? " progress-sm" : ""}${h ? ` ${h}` : ""}`, b = [
+		"progress-bar",
+		`wui-progress-${_}`,
+		f || p ? "progress-bar-striped" : "",
+		p ? "progress-bar-animated" : "",
+		m ? "wui-progress-indeterminate" : ""
+	].filter(Boolean).join(" ");
+	return /* @__PURE__ */ n("div", {
+		className: y,
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": s,
+		...m ? {} : { "aria-valuenow": o },
+		"aria-label": u || void 0,
+		...g,
+		children: /* @__PURE__ */ n("div", {
+			className: b,
+			style: m ? void 0 : { width: `${v}%` },
+			children: !m && d && u
+		})
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppQrCode.js

@@ -0,0 +1,40 @@
+import e from "./warnUnknownProps.js";
+import { encodeQr as t, qrSvgPath as n } from "../lib/qrCode.js";
+import { useMemo as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppQrCode.jsx
+var o = 4;
+function s({ value: s, size: c = 240, title: l = "QR code", className: u, style: d, ...f }) {
+	e("AppQrCode", f);
+	let p = r(() => {
+		if (!s) return null;
+		let e = t(String(s));
+		return {
+			modules: e.size + o * 2,
+			path: n(e, o)
+		};
+	}, [s]);
+	if (!p) return null;
+	let { modules: m, path: h } = p, g = Math.max(1, Math.floor(Number(c) / m) || 1) * m;
+	return /* @__PURE__ */ a("svg", {
+		viewBox: `0 0 ${m} ${m}`,
+		width: g,
+		height: g,
+		role: "img",
+		"aria-label": l,
+		shapeRendering: "crispEdges",
+		className: u || void 0,
+		style: d,
+		...f,
+		children: [/* @__PURE__ */ i("rect", {
+			width: m,
+			height: m,
+			fill: "#ffffff"
+		}), /* @__PURE__ */ i("path", {
+			d: h,
+			fill: "#000000"
+		})]
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/AppRadio.js

@@ -0,0 +1,21 @@
+import e from "./warnUnknownProps.js";
+import t from "../lib/CheckField.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/AppRadio.jsx
+var i = n(function({ label: n, id: i, name: a, error: o, hint: s, className: c = "", ...l }, u) {
+	return e("AppRadio", l), /* @__PURE__ */ r(t, {
+		ref: u,
+		label: n,
+		id: i,
+		name: a,
+		error: o,
+		hint: s,
+		className: c,
+		rest: l,
+		inputType: "radio",
+		wrapperClass: "form-check"
+	});
+});
+//#endregion
+export { i as default };

package/dist/components/AppRadioGroup.js

@@ -0,0 +1,79 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppInfoTip.js";
+import n from "./AppRequiredMark.js";
+import { useId as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppRadioGroup.jsx
+function o({ label: o, options: s = [], name: c, value: l, defaultValue: u, onChange: d, inline: f = !1, required: p = !1, disabled: m = !1, error: h, hint: g, help: _, helpLabel: v = "More information", id: y, className: b = "", fieldClassName: x = "", style: S, ...C }) {
+	e("AppRadioGroup", C);
+	let w = r(), T = y || w, E = c || T, D = `${T}-error`, O = `${T}-hint`, k = l !== void 0;
+	return /* @__PURE__ */ a("div", {
+		className: `field${x ? ` ${x}` : ""}`,
+		children: [
+			o != null && /* @__PURE__ */ a("span", {
+				className: "label",
+				id: `${T}-label`,
+				children: [
+					o,
+					p && /* @__PURE__ */ i(n, {}),
+					_ && /* @__PURE__ */ i(t, {
+						label: v,
+						children: _
+					})
+				]
+			}),
+			/* @__PURE__ */ i("div", {
+				className: [
+					"wui-radio-group",
+					f ? "wui-radio-group-inline" : "",
+					b
+				].filter(Boolean).join(" "),
+				style: S,
+				id: T,
+				role: "radiogroup",
+				"aria-labelledby": o == null ? void 0 : `${T}-label`,
+				"aria-required": p ? "true" : void 0,
+				"aria-invalid": h ? "true" : void 0,
+				"aria-describedby": h ? D : g ? O : void 0,
+				...C,
+				children: s.map((e, t) => {
+					let n = `${T}-${t}`;
+					return /* @__PURE__ */ a("div", {
+						className: "form-check",
+						children: [/* @__PURE__ */ i("input", {
+							type: "radio",
+							className: "form-check-input",
+							id: n,
+							name: E,
+							value: e.value,
+							disabled: m || e.disabled || void 0,
+							required: p || void 0,
+							...k ? {
+								checked: l === e.value,
+								onChange: () => d?.(e.value)
+							} : {
+								defaultChecked: u === e.value,
+								onChange: () => d?.(e.value)
+							}
+						}), /* @__PURE__ */ i("label", {
+							className: "form-check-label",
+							htmlFor: n,
+							children: e.label
+						})]
+					}, e.value);
+				})
+			}),
+			h ? /* @__PURE__ */ i("div", {
+				className: "field-error",
+				id: D,
+				children: h
+			}) : g ? /* @__PURE__ */ i("div", {
+				className: "field-hint",
+				id: O,
+				children: g
+			}) : null
+		]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppRepeater.js

@@ -0,0 +1,57 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppActionIcon.js";
+import n from "./AppButton.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AppRepeater.jsx
+function a({ rows: a = [], renderRow: o, rowLabel: s, onAdd: c, onRemove: l, addLabel: u = "Add another", addVariant: d = "secondary", removeLabel: f = "Remove row", emptyText: p, min: m = 0, max: h, numbered: g = !0, className: _ = "", ...v }) {
+	e("AppRepeater", v);
+	let y = typeof h == "number" && a.length >= h, b = !!l && a.length > m;
+	return /* @__PURE__ */ i("div", {
+		className: `repeater${_ ? ` ${_}` : ""}`,
+		...v,
+		children: [
+			a.length === 0 && p && /* @__PURE__ */ r("div", {
+				className: "repeater-empty",
+				children: p
+			}),
+			a.map((e, n) => {
+				let a = s ? s(e, n) : null;
+				return /* @__PURE__ */ i("div", {
+					className: "repeater-row",
+					children: [
+						(!!a || b) && /* @__PURE__ */ r("span", {
+							className: "repeater-row-label",
+							children: a
+						}),
+						g && /* @__PURE__ */ r("span", {
+							className: "repeater-index",
+							children: n + 1
+						}),
+						/* @__PURE__ */ r("div", {
+							className: "repeater-body",
+							children: o(e, n)
+						}),
+						b && /* @__PURE__ */ r(t, {
+							icon: "trash-2",
+							label: `${f} ${n + 1}`,
+							danger: !0,
+							className: "repeater-remove",
+							onClick: () => l(n)
+						})
+					]
+				}, e.id ?? n);
+			}),
+			/* @__PURE__ */ r(n, {
+				variant: d,
+				size: "sm",
+				leftIcon: "plus",
+				className: "repeater-add",
+				disabled: y,
+				onClick: c,
+				children: u
+			})
+		]
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/AppRequiredMark.js

@@ -0,0 +1,11 @@
+import { jsx as e } from "react/jsx-runtime";
+//#region src/components/AppRequiredMark.jsx
+function t() {
+	return /* @__PURE__ */ e("span", {
+		className: "required",
+		"aria-hidden": "true",
+		children: "*"
+	});
+}
+//#endregion
+export { t as default };

package/dist/components/AppResourceCard.js

@@ -0,0 +1,38 @@
+import e from "./warnUnknownProps.js";
+import t from "./AppIcon.js";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/AppResourceCard.jsx
+function a({ icon: a, title: o, text: s, href: c, external: l = !1, linkComponent: u, className: d = "", ...f }) {
+	e("AppResourceCard", f);
+	let p = /* @__PURE__ */ i(n, { children: [/* @__PURE__ */ r("span", {
+		className: "res-card-icon",
+		children: /* @__PURE__ */ r(t, {
+			name: a,
+			size: 18
+		})
+	}), /* @__PURE__ */ i("span", {
+		className: "res-card-body",
+		children: [/* @__PURE__ */ r("span", {
+			className: "res-card-title",
+			children: o
+		}), s && /* @__PURE__ */ r("span", {
+			className: "res-card-text",
+			children: s
+		})]
+	})] }), m = `res-card${d ? ` ${d}` : ""}`;
+	return u && !l ? /* @__PURE__ */ r(u, {
+		className: m,
+		to: c,
+		...f,
+		children: p
+	}) : /* @__PURE__ */ r("a", {
+		className: m,
+		href: c,
+		target: l ? "_blank" : void 0,
+		rel: l ? "noopener noreferrer" : void 0,
+		...f,
+		children: p
+	});
+}
+//#endregion
+export { a as default };

package/dist/components/AppResult.js

@@ -0,0 +1,66 @@
+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/AppResult.jsx
+var a = {
+	success: {
+		icon: "check-circle",
+		tone: "success"
+	},
+	error: {
+		icon: "x-circle",
+		tone: "danger"
+	},
+	warning: {
+		icon: "alert-triangle",
+		tone: "warning"
+	},
+	info: {
+		icon: "info",
+		tone: "info"
+	},
+	403: { tone: "muted" },
+	404: { tone: "muted" },
+	500: { tone: "muted" }
+};
+function o({ status: o = "info", title: s, subtitle: c, icon: l, actions: u, children: d, className: f = "", ...p }) {
+	t("AppResult", p), e("AppResult", "status", o, Object.keys(a));
+	let m = a[o] || a.info, h = m.tone, g = /^\d+$/.test(o), _ = l ?? (g ? null : m.icon);
+	return /* @__PURE__ */ i("div", {
+		className: [
+			"result",
+			`result-${h}`,
+			f
+		].filter(Boolean).join(" "),
+		...p,
+		children: [
+			g ? /* @__PURE__ */ r("div", {
+				className: "result-code",
+				"aria-hidden": "true",
+				children: o
+			}) : _ ? /* @__PURE__ */ r("div", {
+				className: "result-icon",
+				children: n(_, { size: 48 })
+			}) : null,
+			s != null && /* @__PURE__ */ r("h2", {
+				className: "result-title",
+				children: s
+			}),
+			c != null && /* @__PURE__ */ r("div", {
+				className: "result-subtitle",
+				children: c
+			}),
+			u && /* @__PURE__ */ r("div", {
+				className: "result-actions",
+				children: u
+			}),
+			d && /* @__PURE__ */ r("div", {
+				className: "result-extra",
+				children: d
+			})
+		]
+	});
+}
+//#endregion
+export { o as default };

package/dist/components/AppRichText.js

@@ -0,0 +1,72 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppInfoTip.js";
+import r from "./AppRequiredMark.js";
+import i from "./useWuiControl.js";
+import { forwardRef as a, useEffect as o, useId as s, useState as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/AppRichText.jsx
+var d = ["html", "markdown"], f = ["input", "change"], p = "The editor couldn't load. Reload the page and try again.", m = a(function({ value: a, onChange: m, format: h, placeholder: g, name: _, label: v, error: y, hint: b, required: x = !1, disabled: S = !1, readOnly: C = !1, id: w, ariaLabel: T, className: E = "", fieldClassName: D = "", help: O, helpLabel: k = "More information", ...A }, j) {
+	t("AppRichText", A), e("AppRichText", "format", h, d);
+	let M = s(), N = w || M, [P, F] = c(!1), { setRef: I } = i({
+		ref: j,
+		value: a,
+		onChange: m,
+		events: f
+	});
+	return o(() => {
+		let e = !0;
+		return import("@webority/ui-elements/rich-text").catch((t) => {
+			console.warn("[AppRichText] the editor failed to load:", t?.message), e && F(!0);
+		}), () => {
+			e = !1;
+		};
+	}, []), /* @__PURE__ */ u("div", {
+		className: `field${D ? ` ${D}` : ""}`,
+		children: [
+			v && /* @__PURE__ */ u("label", {
+				className: "label",
+				htmlFor: N,
+				children: [
+					v,
+					x && /* @__PURE__ */ l(r, {}),
+					O && /* @__PURE__ */ l(n, {
+						label: k,
+						children: O
+					})
+				]
+			}),
+			P ? /* @__PURE__ */ l("div", {
+				className: "field-error",
+				role: "status",
+				children: p
+			}) : /* @__PURE__ */ l("wui-rich-text", {
+				ref: I,
+				id: N,
+				role: "group",
+				name: _,
+				format: h || void 0,
+				placeholder: g,
+				"aria-label": T || (typeof v == "string" ? v : void 0),
+				"aria-describedby": y ? `${N}-error` : b ? `${N}-hint` : void 0,
+				"aria-invalid": y ? "true" : void 0,
+				required: x ? "" : void 0,
+				disabled: S ? "" : void 0,
+				readonly: C ? "" : void 0,
+				className: E || void 0,
+				...A
+			}, h || "html"),
+			y ? /* @__PURE__ */ l("div", {
+				className: "field-error",
+				id: `${N}-error`,
+				children: y
+			}) : b ? /* @__PURE__ */ l("div", {
+				className: "field-hint",
+				id: `${N}-hint`,
+				children: b
+			}) : null
+		]
+	});
+});
+//#endregion
+export { m as default };

package/dist/components/AppScrollbar.js

@@ -0,0 +1,16 @@
+import e from "./warnUnknownProps.js";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/AppScrollbar.jsx
+function n({ children: n, className: r = "", maxHeight: i, style: a, ...o }) {
+	return e("AppScrollbar", o), /* @__PURE__ */ t("div", {
+		className: r ? `wui-scroll ${r}` : "wui-scroll",
+		style: i == null ? a : {
+			maxHeight: i,
+			...a
+		},
+		...o,
+		children: n
+	});
+}
+//#endregion
+export { n as default };

package/dist/components/AppSearch.js

@@ -0,0 +1,52 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { Form as r } from "react-bootstrap";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/AppSearch.jsx
+var o = ["sm", "lg"];
+function s({ value: s, onChange: c, placeholder: l = "Search…", ariaLabel: u, iconSize: d = 18, size: f, loading: p = !1, disabled: m = !1, className: h = "", ...g }) {
+	return t("AppSearch", g), e("AppSearch", "size", f, o), /* @__PURE__ */ a("div", {
+		className: [
+			"search-wrap",
+			s ? "has-value" : "",
+			f === "sm" ? "search-sm" : f === "lg" ? "search-lg" : "",
+			p ? "is-loading" : "",
+			h
+		].filter(Boolean).join(" "),
+		children: [
+			p && /* @__PURE__ */ i("span", {
+				className: "search-spinner",
+				"aria-hidden": "true"
+			}),
+			/* @__PURE__ */ i(n, {
+				name: "search",
+				size: d,
+				className: "search-icon"
+			}),
+			/* @__PURE__ */ i(r.Control, {
+				type: "search",
+				className: "input search-input",
+				placeholder: l,
+				value: s,
+				onChange: (e) => c?.(e.target.value),
+				"aria-label": u,
+				disabled: m,
+				...g
+			}),
+			!m && /* @__PURE__ */ i("button", {
+				type: "button",
+				className: "search-clear",
+				"aria-label": "Clear search",
+				onClick: () => c?.(""),
+				hidden: !s,
+				children: /* @__PURE__ */ i(n, {
+					name: "x",
+					size: 16
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/AppSegmented.js

@@ -0,0 +1,87 @@
+import e from "./warnInvalidValue.js";
+import t from "./warnUnknownProps.js";
+import n from "./AppIcon.js";
+import { useEffect as r, useId as i, useLayoutEffect as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/AppSegmented.jsx
+var l = {
+	sm: "segmented-sm",
+	md: "",
+	lg: "segmented-lg",
+	xl: "wui-segmented-xl"
+};
+function u({ options: u = [], value: d, onChange: f, label: p, name: m, size: h = "md", fullWidth: g = !1, bordered: _ = !0, disabled: v = !1, className: y = "", ...b }) {
+	t("AppSegmented", b), e("AppSegmented", "size", h, Object.keys(l));
+	let x = i(), S = m || x, C = o(null), w = o(null), T = [
+		"segmented",
+		l[h] ?? "",
+		g ? "segmented-full" : "",
+		_ ? "" : "wui-segmented-borderless",
+		v ? "is-disabled" : "",
+		y
+	].filter(Boolean).join(" ");
+	return a(() => {
+		let e = C.current, t = w.current;
+		if (!e || !t) return;
+		let n = (n) => {
+			let r = e.querySelector(".segmented-option:has(.segmented-input:checked)");
+			if (!r || !e.offsetWidth) {
+				t.style.opacity = "0";
+				return;
+			}
+			n || e.classList.remove("is-animated"), t.style.width = `${r.offsetWidth}px`, t.style.transform = `translateX(${r.offsetLeft}px)`, t.style.opacity = "1", n || requestAnimationFrame(() => C.current?.classList.add("is-animated"));
+		};
+		n(!0);
+		let r = typeof ResizeObserver < "u" ? new ResizeObserver(() => n(!1)) : null;
+		return r?.observe(e), () => r?.disconnect();
+	}, [
+		d,
+		u,
+		h,
+		g
+	]), r(() => {
+		let e = requestAnimationFrame(() => C.current?.classList.add("is-animated"));
+		return () => cancelAnimationFrame(e);
+	}, []), /* @__PURE__ */ c("div", {
+		ref: C,
+		className: T,
+		role: "radiogroup",
+		"aria-label": p,
+		"aria-disabled": v || void 0,
+		...b,
+		children: [/* @__PURE__ */ s("span", {
+			className: "segmented-thumb",
+			ref: w,
+			"aria-hidden": "true"
+		}), u.map((e) => /* @__PURE__ */ c("label", {
+			className: "segmented-option",
+			children: [
+				/* @__PURE__ */ s("input", {
+					type: "radio",
+					className: "segmented-input",
+					name: S,
+					value: e.value,
+					checked: e.value === d,
+					disabled: v || e.disabled,
+					onChange: () => f?.(e.value)
+				}),
+				e.icon && /* @__PURE__ */ s(n, {
+					name: e.icon,
+					size: 13
+				}),
+				e.note ? /* @__PURE__ */ c("span", {
+					className: "segmented-option-text",
+					children: [/* @__PURE__ */ s("span", {
+						className: "segmented-option-label",
+						children: e.label
+					}), /* @__PURE__ */ s("span", {
+						className: "segmented-option-note",
+						children: e.note
+					})]
+				}) : e.label
+			]
+		}, e.value))]
+	});
+}
+//#endregion
+export { u as default };