themelia-ui 3.0.0 → 3.2.0

package/dist/repeaters-DuP1N0nw.js

@@ -1,438 +0,0 @@
-import { t as e } from "./cx--CBrhWH0.js";
-import { c as t } from "./buttons-CqXKWty3.js";
-import { d as n } from "./display-B3Q17h5z.js";
-import { o as r } from "./structure-D0WGQAP3.js";
-import { u as i } from "./forms-CPrGGif_.js";
-import { c as a, l as o } from "./text-inputs-DF_lD7pA.js";
-import { r as s } from "./choice-inputs-OUDn0kQw.js";
-import { GripVerticalIcon as c, PlusIcon as l, XIcon as u } from "lucide-react";
-import { useCallback as d, useId as f, useMemo as p, useRef as m, useState as h } from "react";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-//#region src/components/base/repeaters/repeaters.strings.ts
-var v = {
-	add: "Add",
-	remove: (e) => `Remove item ${e}`,
-	reorder: (e) => `Reorder item ${e}. Use the arrow keys to move it.`,
-	moved: (e, t) => `Moved to position ${e} of ${t}.`,
-	emptyState: "Nothing here yet."
-}, y = {
-	...v,
-	add: "Add pair",
-	keyPlaceholder: "Key",
-	valuePlaceholder: "Value",
-	keyLabel: (e) => `Key ${e}`,
-	valueLabel: (e) => `Value ${e}`
-}, b = {
-	...v,
-	add: "Add row",
-	emptyState: "Nothing here yet."
-}, x = {
-	root: "repeater__root___P2MgC",
-	list: "repeater__list___qLMcU",
-	row: "repeater__row___b5CY9",
-	rowCard: "repeater__rowCard___1zuJ5",
-	handle: "repeater__handle___tWZT9",
-	body: "repeater__body___VJ1u7",
-	remove: "repeater__remove___Gl3YA",
-	empty: "repeater__empty___4UQ0m",
-	footer: "repeater__footer___T65FP"
-};
-//#endregion
-//#region src/components/base/repeaters/repeater.tsx
-function S({ items: r, getKey: i, children: a, onAdd: o, onRemove: s, onMove: f, rowVariant: p = "inline", strings: y, emptyState: b, showAdd: S = !0, maxItems: C, disabled: w = !1, className: T }) {
-	let E = {
-		...v,
-		...y
-	}, [D, O] = h(null), [k, A] = h(null), [j, M] = h(""), N = m(null), P = !!f && !w, F = d((e, t) => {
-		e === t || t < 0 || t >= r.length || f?.(e, t);
-	}, [r.length, f]), I = (e, t) => {
-		let n = e.key === "ArrowUp" ? -1 : +(e.key === "ArrowDown");
-		if (n === 0) return;
-		e.preventDefault();
-		let i = t + n;
-		if (i < 0 || i >= r.length) return;
-		F(t, i), M(E.moved?.(i + 1, r.length) ?? "");
-		let a = e.currentTarget.closest("ul");
-		requestAnimationFrame(() => a?.querySelectorAll("[data-repeater-handle]")[i]?.focus());
-	}, L = (e) => {
-		s?.(e), requestAnimationFrame(() => {
-			let t = N.current;
-			if (!t) return;
-			let n = t.querySelectorAll("[data-repeater-remove]");
-			(n[Math.min(e, n.length - 1)] ?? t.querySelector("[data-repeater-add]"))?.focus();
-		});
-	}, R = (e, t) => {
-		O(t), e.dataTransfer.effectAllowed = "move", e.dataTransfer.setData("text/plain", String(t));
-		let n = e.currentTarget.closest("li");
-		n && e.dataTransfer.setDragImage(n, 12, n.clientHeight / 2);
-	}, z = (e, t) => {
-		D !== null && (e.preventDefault(), e.dataTransfer.dropEffect = "move", A(t));
-	}, B = (e, t) => {
-		e.preventDefault(), D !== null && F(D, t), O(null), A(null);
-	}, V = C !== void 0 && r.length >= C;
-	return /* @__PURE__ */ _("div", {
-		ref: N,
-		className: e("repeater--component", x.root, T),
-		children: [
-			/* @__PURE__ */ g(n, {
-				role: "status",
-				"aria-live": "polite",
-				children: j
-			}),
-			r.length === 0 ? /* @__PURE__ */ g("div", {
-				className: x.empty,
-				children: b ?? E.emptyState
-			}) : /* @__PURE__ */ g("ul", {
-				className: x.list,
-				children: r.map((n, r) => {
-					let o = D === r;
-					return /* @__PURE__ */ _("li", {
-						className: e(x.row, p === "card" && x.rowCard),
-						"data-dragging": o || void 0,
-						"data-drop-before": k === r && D !== null && D > r || void 0,
-						"data-drop-after": k === r && D !== null && D < r || void 0,
-						onDragOver: (e) => z(e, r),
-						onDrop: (e) => B(e, r),
-						onDragEnd: () => {
-							O(null), A(null);
-						},
-						children: [
-							P && /* @__PURE__ */ g("button", {
-								type: "button",
-								"data-repeater-handle": "",
-								className: x.handle,
-								"aria-label": E.reorder(r + 1),
-								draggable: !0,
-								onDragStart: (e) => R(e, r),
-								onDragEnd: () => {
-									O(null), A(null);
-								},
-								onKeyDown: (e) => I(e, r),
-								children: /* @__PURE__ */ g(c, { "aria-hidden": !0 })
-							}),
-							/* @__PURE__ */ g("div", {
-								className: x.body,
-								children: a(n, {
-									index: r,
-									dragging: o
-								})
-							}),
-							!!s && /* @__PURE__ */ g(t, {
-								tone: "neutral",
-								buttonStyle: "ghost",
-								iconOnly: !0,
-								disabled: w,
-								"aria-label": E.remove(r + 1),
-								"data-repeater-remove": "",
-								className: x.remove,
-								onClick: () => L(r),
-								children: /* @__PURE__ */ g(u, {})
-							})
-						]
-					}, i(n, r));
-				})
-			}),
-			S && !!o && /* @__PURE__ */ g("div", {
-				className: x.footer,
-				children: /* @__PURE__ */ _(t, {
-					tone: "neutral",
-					buttonStyle: "outline",
-					onClick: o,
-					disabled: w || V,
-					"data-repeater-add": "",
-					children: [/* @__PURE__ */ g(l, {}), E.add]
-				})
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/base/repeaters/string-repeater.tsx
-function C({ value: t, onValueChange: n, placeholder: r, strings: i, emptyState: a, maxItems: s, sortable: c = !1, disabled: l = !1, invalid: u = !1, className: p, "aria-label": m }) {
-	let h = {
-		...v,
-		...i
-	}, _ = f(), y = d((e, r) => n(t.map((t, n) => n === e ? r : t)), [n, t]), b = d((e, r) => {
-		let i = [...t], [a] = i.splice(e, 1);
-		a !== void 0 && (i.splice(r, 0, a), n(i));
-	}, [n, t]);
-	return /* @__PURE__ */ g(S, {
-		items: t,
-		getKey: (e, t) => `${_}-${t}`,
-		onAdd: () => n([...t, ""]),
-		onRemove: (e) => n(t.filter((t, n) => n !== e)),
-		onMove: c ? b : void 0,
-		strings: h,
-		emptyState: a,
-		maxItems: s,
-		disabled: l,
-		className: e("string-repeater--component", p),
-		children: (e, { index: t }) => /* @__PURE__ */ g(o, {
-			value: e,
-			placeholder: r,
-			disabled: l,
-			"aria-invalid": u || void 0,
-			"aria-label": m ? `${m} ${t + 1}` : void 0,
-			onChange: (e) => y(t, e.target.value)
-		})
-	});
-}
-//#endregion
-//#region src/components/base/repeaters/key-value-editor.tsx
-function w({ value: t, onValueChange: n, strings: i, emptyState: a, maxItems: s, sortable: c = !1, disabled: l = !1, invalid: u = !1, flagDuplicateKeys: p = !0, className: m }) {
-	let h = {
-		...y,
-		...i
-	}, v = f(), b = d((e, r) => n(t.map((t, n) => n === e ? {
-		...t,
-		...r
-	} : t)), [n, t]), x = d((e, r) => {
-		let i = [...t], [a] = i.splice(e, 1);
-		a !== void 0 && (i.splice(r, 0, a), n(i));
-	}, [n, t]), C = (e, n) => p && e.key.trim() !== "" && t.some((t, r) => r !== n && t.key.trim() === e.key.trim());
-	return /* @__PURE__ */ g(S, {
-		items: t,
-		getKey: (e, t) => `${v}-${t}`,
-		onAdd: () => n([...t, {
-			key: "",
-			value: ""
-		}]),
-		onRemove: (e) => n(t.filter((t, n) => n !== e)),
-		onMove: c ? x : void 0,
-		strings: h,
-		emptyState: a,
-		maxItems: s,
-		disabled: l,
-		className: e("key-value-editor--component", m),
-		children: (e, { index: t }) => /* @__PURE__ */ _(r, {
-			direction: "horizontal",
-			gap: "sm",
-			wrap: !1,
-			children: [/* @__PURE__ */ g(o, {
-				value: e.key,
-				placeholder: h.keyPlaceholder,
-				disabled: l,
-				"aria-invalid": u || C(e, t) || void 0,
-				"aria-label": h.keyLabel(t + 1),
-				onChange: (e) => b(t, { key: e.target.value })
-			}), /* @__PURE__ */ g(o, {
-				value: e.value,
-				placeholder: h.valuePlaceholder,
-				disabled: l,
-				"aria-invalid": u || void 0,
-				"aria-label": h.valueLabel(t + 1),
-				onChange: (e) => b(t, { value: e.target.value })
-			})]
-		})
-	});
-}
-//#endregion
-//#region src/components/base/repeaters/localized-fields.tsx
-function T(e) {
-	return e.map((e) => typeof e == "string" ? { value: e } : e);
-}
-function E({ locales: t, value: r = {}, onValueChange: i, multiline: c = !1, placeholder: l, disabled: u = !1, invalid: d = !1, requiredLocales: m, className: v, "aria-label": y, "aria-labelledby": b, "aria-describedby": S, "aria-invalid": C }) {
-	let w = p(() => T(t), [t]), [E, D] = h(w[0]?.value ?? ""), O = f(), k = f(), A = w.find((e) => e.value === E)?.label ?? E, j = d || C === !0 || C === "true", M = (e) => i?.({
-		...r,
-		[E]: e
-	}), N = w.map((e) => {
-		let t = m?.includes(e.value) && !r[e.value]?.trim();
-		return {
-			value: e.value,
-			label: t ? `${e.label ?? e.value} •` : e.label ?? e.value
-		};
-	}), P = c ? a : o;
-	return /* @__PURE__ */ _("div", {
-		className: e("localized-string-field--component", x.root, v),
-		children: [
-			/* @__PURE__ */ g(s, {
-				options: N,
-				value: E,
-				onValueChange: (e) => e && D(e),
-				disabled: u,
-				"aria-describedby": b ?? (y ? k : void 0)
-			}),
-			!b && !!y && /* @__PURE__ */ g(n, {
-				id: k,
-				children: y
-			}),
-			/* @__PURE__ */ g(n, {
-				id: O,
-				children: A
-			}),
-			/* @__PURE__ */ g(P, {
-				value: r[E] ?? "",
-				placeholder: l,
-				disabled: u,
-				"aria-invalid": j || void 0,
-				"aria-labelledby": [b ?? (y ? k : void 0), O].filter(Boolean).join(" "),
-				"aria-describedby": S,
-				onChange: (e) => M(e.target.value)
-			})
-		]
-	});
-}
-function D({ locales: t, fields: r, value: c = {}, onValueChange: l, disabled: u = !1, invalid: d = !1, className: m }) {
-	let v = p(() => T(t), [t]), [y, b] = h(v[0]?.value ?? ""), S = c[y] ?? {}, C = f(), w = v.find((e) => e.value === y)?.label ?? y, E = (e, t) => l?.({
-		...c,
-		[y]: {
-			...S,
-			[e]: t
-		}
-	});
-	return /* @__PURE__ */ _("div", {
-		className: e("localized-object-field--component", x.root, m),
-		children: [
-			/* @__PURE__ */ g(s, {
-				options: v.map((e) => ({
-					value: e.value,
-					label: e.label ?? e.value
-				})),
-				value: y,
-				onValueChange: (e) => e && b(e),
-				disabled: u
-			}),
-			/* @__PURE__ */ g(n, {
-				id: C,
-				children: w
-			}),
-			r.map((e) => {
-				let t = e.multiline ? a : o;
-				return /* @__PURE__ */ g(i, {
-					label: e.label,
-					children: (n) => /* @__PURE__ */ g(t, {
-						...n,
-						"aria-labelledby": `${n["aria-labelledby"] ?? ""} ${C}`.trim(),
-						value: S[e.name] ?? "",
-						placeholder: e.placeholder,
-						disabled: u,
-						"aria-invalid": d || void 0,
-						onChange: (t) => E(e.name, t.target.value)
-					})
-				}, e.name);
-			})
-		]
-	});
-}
-//#endregion
-//#region src/components/base/repeaters/localized-string-repeater.tsx
-function O({ locales: t, value: n, onValueChange: r, placeholder: i, strings: a, emptyState: o, maxItems: s, sortable: c = !1, multiline: l = !1, requiredLocales: u, disabled: p = !1, invalid: m = !1, className: h, "aria-label": _ }) {
-	let y = {
-		...v,
-		...a
-	}, b = f(), x = d((e, t) => r(n.map((n, r) => r === e ? t : n)), [r, n]), C = d((e, t) => {
-		let i = [...n], [a] = i.splice(e, 1);
-		a !== void 0 && (i.splice(t, 0, a), r(i));
-	}, [r, n]);
-	return /* @__PURE__ */ g(S, {
-		items: n,
-		getKey: (e, t) => `${b}-${t}`,
-		onAdd: () => r([...n, {}]),
-		onRemove: (e) => r(n.filter((t, n) => n !== e)),
-		onMove: c ? C : void 0,
-		rowVariant: "card",
-		strings: y,
-		emptyState: o,
-		maxItems: s,
-		disabled: p,
-		className: e("localized-string-repeater--component", h),
-		children: (e, { index: n }) => /* @__PURE__ */ g(E, {
-			locales: t,
-			value: e,
-			onValueChange: (e) => x(n, e),
-			multiline: l,
-			placeholder: i,
-			requiredLocales: u,
-			disabled: p,
-			invalid: m,
-			"aria-label": _ ? `${_} ${n + 1}` : void 0
-		})
-	});
-}
-//#endregion
-//#region src/components/base/repeaters/object-repeater.tsx
-function k() {
-	let e = /* @__PURE__ */ new WeakMap(), t = 0;
-	return {
-		list(n) {
-			let r = /* @__PURE__ */ new Set();
-			return n.map((n, i) => {
-				let a = e.get(n);
-				a === void 0 && e.set(n, a = `row-${t++}`);
-				let o = r.has(a) ? `${a}-at-${i}` : a;
-				return r.add(o), o;
-			});
-		},
-		carry(t, n) {
-			let r = e.get(t);
-			r !== void 0 && e.set(n, r);
-		}
-	};
-}
-function A({ value: t, onValueChange: n, fields: s, name: c = "items", emptyState: l, maxItems: u, sortable: f = !1, disabled: p = !1, invalid: m = !1, renderField: _, strings: v, className: y }) {
-	let x = {
-		...b,
-		...v
-	}, [C] = h(k), w = C.list(t), T = d(() => Object.fromEntries(s.map((e) => [e.name, ""])), [s]), E = d((e, r, i) => n(t.map((t, n) => {
-		if (n !== e) return t;
-		let a = {
-			...t,
-			[r]: i
-		};
-		return C.carry(t, a), a;
-	})), [
-		n,
-		C,
-		t
-	]), D = d((e, r) => {
-		let i = [...t], [a] = i.splice(e, 1);
-		a && i.splice(r, 0, a), n(i);
-	}, [n, t]);
-	return /* @__PURE__ */ g(S, {
-		items: t,
-		getKey: (e, t) => w[t] ?? String(t),
-		onAdd: () => n([...t, T()]),
-		onRemove: (e) => n(t.filter((t, n) => n !== e)),
-		onMove: f ? D : void 0,
-		rowVariant: "card",
-		emptyState: l ?? x.emptyState,
-		maxItems: u,
-		disabled: p,
-		strings: x,
-		className: e("object-repeater--component", y),
-		children: (e, { index: t }) => /* @__PURE__ */ g(r, {
-			direction: "horizontal",
-			gap: "md",
-			wrap: !0,
-			children: s.map((n) => {
-				let r = {
-					index: t,
-					path: `${c}.${t}.${n.name}`,
-					value: e[n.name] ?? "",
-					onChange: (e) => E(t, n.name, e),
-					invalid: m,
-					disabled: p
-				};
-				if (_) return /* @__PURE__ */ g("div", { children: _(n, r) }, n.name);
-				let s = n.type === "textarea" ? a : o;
-				return /* @__PURE__ */ g(i, {
-					label: n.label,
-					hint: n.hint,
-					required: n.required,
-					style: { flex: `1 1 ${n.span ? `${n.span / 12 * 100}%` : "12rem"}` },
-					children: /* @__PURE__ */ g(s, {
-						value: r.value,
-						type: n.type === "number" ? "number" : void 0,
-						inputMode: n.type === "number" ? "decimal" : void 0,
-						placeholder: n.placeholder,
-						disabled: p,
-						invalid: m,
-						onChange: (e) => r.onChange(e.target.value)
-					})
-				}, n.name);
-			})
-		})
-	});
-}
-//#endregion
-export { w as a, y as c, E as i, b as l, O as n, C as o, D as r, S as s, A as t, v as u };