themelia-react-ui 0.0.0-stage → 1.0.0

package/dist/base/repeaters.js

@@ -0,0 +1,620 @@
+"use client";
+import { s as e } from "../ui-provider-CftIB6TY.js";
+import { useStrings as t } from "../lib/strings.js";
+import { t as n } from "../utils-C2EKeIw3.js";
+import { n as r } from "../buttons-Co6GavvM.js";
+import { a as i, n as a } from "../typography-Cv8MT-82.js";
+import { t as o } from "../structure-BvW4vG4H.js";
+import { t as s } from "../input-DMorJiTI.js";
+import { d as c } from "../text-inputs-BhOcedTo.js";
+import { t as l } from "../form-field-C6W-y2hR.js";
+import { forwardRef as u, memo as d, useCallback as f, useId as p, useMemo as m, useReducer as h, useRef as g, useState as _ } from "react";
+import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { GripVertical as b, Plus as x, Trash2 as S, X as C } from "lucide-react";
+import { useController as w, useFieldArray as T, useFormContext as E } from "react-hook-form";
+import { DndContext as D, KeyboardSensor as O, PointerSensor as k, closestCenter as A, useSensor as j, useSensors as M } from "@dnd-kit/core";
+import { SortableContext as N, sortableKeyboardCoordinates as P, useSortable as F, verticalListSortingStrategy as ee } from "@dnd-kit/sortable";
+import { CSS as I } from "@dnd-kit/utilities";
+//#region src/components/base/repeaters/repeaters.strings.ts
+var L = {
+	emptyState: "No items added yet.",
+	addItem: "Add item",
+	removeAriaLabel: "Remove item"
+}, R = {
+	emptyState: L.emptyState,
+	addButton: L.addItem,
+	removeAriaLabel: L.removeAriaLabel,
+	dragHandleAriaLabel: "Drag to reorder"
+};
+function te({ item: e, index: t, sortable: i, rowVariant: a, removeVariant: o, hideRemove: s, disabled: c, strings: l, actionSize: u, onRemove: d, renderRow: f }) {
+	let p = F({
+		id: e.id,
+		disabled: c || !i
+	}), m = i ? p.isDragging : !1, h = i ? {
+		transform: I.Transform.toString(p.transform),
+		transition: p.transition,
+		opacity: m ? .6 : 1
+	} : void 0, g = i ? p.setNodeRef : void 0, _ = i ? p.attributes : {}, x = i ? p.listeners : void 0, w = i ? /* @__PURE__ */ v(r, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		size: u,
+		iconOnly: !0,
+		"aria-label": l.dragHandleAriaLabel,
+		disabled: c,
+		className: n("repeater--drag-handle", "shrink-0", "text-muted-foreground hover:text-foreground hover:bg-muted", "cursor-grab active:cursor-grabbing"),
+		..._,
+		...x,
+		children: /* @__PURE__ */ v(b, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		})
+	}) : null, T = s ? null : o === "icon-button" ? /* @__PURE__ */ v(r, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "outline",
+		size: u,
+		iconOnly: !0,
+		"aria-label": l.removeAriaLabel,
+		disabled: c,
+		onClick: () => d(t),
+		className: "repeater--remove shrink-0",
+		children: /* @__PURE__ */ v(S, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		})
+	}) : /* @__PURE__ */ v(r, {
+		type: "button",
+		tone: "secondary",
+		buttonStyle: "ghost",
+		size: u,
+		iconOnly: !0,
+		"aria-label": l.removeAriaLabel,
+		disabled: c,
+		onClick: () => d(t),
+		className: n("repeater--remove", "shrink-0", "text-muted-foreground hover:bg-destructive/10 hover:text-destructive"),
+		children: /* @__PURE__ */ v(C, {
+			className: "size-icon",
+			"aria-hidden": "true"
+		})
+	});
+	return a === "card" ? /* @__PURE__ */ v("div", {
+		ref: g,
+		style: h,
+		"data-repeater-item-id": e.id,
+		className: n("repeater--item", "relative rounded-radius border border-border bg-card text-card-foreground p-surface"),
+		children: /* @__PURE__ */ y("div", {
+			className: "flex items-start gap-space-md",
+			children: [
+				w,
+				/* @__PURE__ */ v("div", {
+					className: "min-w-0 flex-1",
+					children: f(e, {
+						index: t,
+						isDragging: m
+					})
+				}),
+				T
+			]
+		})
+	}) : /* @__PURE__ */ y("div", {
+		ref: g,
+		style: h,
+		"data-repeater-item-id": e.id,
+		className: "repeater--item flex items-start gap-space-md",
+		children: [
+			w,
+			/* @__PURE__ */ v("div", {
+				className: "min-w-0 flex-1",
+				children: f(e, {
+					index: t,
+					isDragging: m
+				})
+			}),
+			T
+		]
+	});
+}
+function z({ items: a, renderRow: s, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: p = "inline", removeVariant: h = "ghost", hideRemove: g = !1, hideAdd: _ = !1, disabled: b = !1, strings: S, className: C }) {
+	let w = t(R, S), { defaultScale: T } = e(), E = T ?? "md", F = M(j(k, { activationConstraint: { distance: 4 } }), j(O, { coordinateGetter: P })), I = f((e) => {
+		let { active: t, over: n } = e;
+		if (!n || t.id === n.id) return;
+		let r = a.findIndex((e) => e.id === t.id), i = a.findIndex((e) => e.id === n.id);
+		r < 0 || i < 0 || u?.(r, i);
+	}, [a, u]), L = m(() => a.map((e) => e.id), [a]), z = /* @__PURE__ */ v(o, {
+		gap: "md",
+		className: "repeater--list",
+		children: a.map((e, t) => /* @__PURE__ */ v(te, {
+			item: e,
+			index: t,
+			sortable: d,
+			rowVariant: p,
+			removeVariant: h,
+			hideRemove: g,
+			disabled: b,
+			strings: w,
+			actionSize: E,
+			onRemove: l,
+			renderRow: s
+		}, e.id))
+	});
+	return /* @__PURE__ */ y(o, {
+		gap: "lg",
+		className: n("repeater--component", C),
+		children: [a.length === 0 ? /* @__PURE__ */ v("div", {
+			className: "repeater--empty rounded-radius border border-dashed border-input p-surface",
+			children: /* @__PURE__ */ v(i, {
+				type: "secondary",
+				children: w.emptyState
+			})
+		}) : d ? /* @__PURE__ */ v(D, {
+			sensors: F,
+			collisionDetection: A,
+			onDragEnd: I,
+			children: /* @__PURE__ */ v(N, {
+				items: L,
+				strategy: ee,
+				children: z
+			})
+		}) : z, !_ && /* @__PURE__ */ y(r, {
+			type: "button",
+			tone: "secondary",
+			buttonStyle: "outline",
+			disabled: b,
+			onClick: c,
+			className: "repeater--add self-start",
+			children: [/* @__PURE__ */ v(x, { className: "size-icon" }), w.addButton]
+		})]
+	});
+}
+z.displayName = "Repeater";
+//#endregion
+//#region src/components/base/repeaters/string-repeater.utils.ts
+function B(e, t, n) {
+	let r = [...e], [i] = r.splice(t, 1);
+	return i === void 0 ? [...e] : (r.splice(n, 0, i), r);
+}
+//#endregion
+//#region src/components/base/repeaters/string-repeater.tsx
+function V(e, t) {
+	return e.length === t.length && e.every((e, n) => e === t[n]);
+}
+function ne(e, t, n, r, i) {
+	let a = /* @__PURE__ */ new Map(), o = i;
+	return e.forEach((e, n) => {
+		let r = a.get(e) ?? [], i = t[n];
+		i && r.push(i), a.set(e, r);
+	}), {
+		ids: n.map((e) => a.get(e)?.shift() ?? `${r}-row-${o++}`),
+		nextId: o
+	};
+}
+function H(e, t, n, r = 0) {
+	let i = t.map((e, t) => `${n}-row-${r + t}`);
+	return {
+		name: e,
+		prefix: n,
+		values: [...t],
+		ids: i,
+		nextId: r + i.length,
+		lastExternalValues: [...t],
+		pendingInternalValues: null
+	};
+}
+function U(e, t) {
+	if (t.type === "commit") return {
+		...e,
+		values: t.values,
+		ids: t.ids,
+		nextId: t.nextId ?? e.nextId,
+		pendingInternalValues: t.values
+	};
+	if (t.name !== e.name) return H(t.name, t.values, e.prefix, e.nextId);
+	if (e.pendingInternalValues && V(t.values, e.pendingInternalValues)) return {
+		...e,
+		lastExternalValues: [...t.values],
+		pendingInternalValues: null
+	};
+	let n = ne(e.values, e.ids, t.values, e.prefix, e.nextId);
+	return {
+		...e,
+		values: [...t.values],
+		ids: n.ids,
+		nextId: n.nextId,
+		lastExternalValues: [...t.values],
+		pendingInternalValues: null
+	};
+}
+function re(e, t, n) {
+	let [r, i] = h(U, void 0, () => H(e, t, n)), a = r.name !== e || !V(t, r.lastExternalValues), o = {
+		type: "sync",
+		name: e,
+		values: t
+	}, s = a ? U(r, o) : r;
+	return a && i(o), {
+		state: s,
+		dispatch: i
+	};
+}
+var W = {
+	placeholder: "Enter value",
+	addButton: "Add item",
+	dragHandleAriaLabel: "Drag to reorder",
+	...L
+};
+function G({ name: e, invalid: r, disabled: i = !1, sortable: a = !1, renderField: o, strings: c, className: l }) {
+	let u = t(W, c), { control: d } = E(), { field: f, fieldState: m } = w({
+		control: d,
+		name: e
+	}), h = Array.isArray(f.value) ? f.value : [], g = !!(r || m.invalid), _ = p().replace(/:/g, ""), { state: y, dispatch: b } = re(e, h, _), x = (e, t, n) => {
+		b({
+			type: "commit",
+			values: e,
+			ids: t,
+			nextId: n
+		}), f.onChange(e);
+	}, S = (e, t) => {
+		let n = [...y.values];
+		n[e] = t, x(n, y.ids);
+	}, C = () => {
+		let e = `${_}-row-${y.nextId}`;
+		x([...y.values, ""], [...y.ids, e], y.nextId + 1);
+	}, T = (e) => {
+		x(y.values.filter((t, n) => n !== e), y.ids.filter((t, n) => n !== e));
+	}, D = (e, t) => {
+		let n = B(y.values, e, t), r = B(y.ids, e, t);
+		x(n, r);
+	}, O = y.values.map((e, t) => ({
+		id: y.ids[t],
+		value: e
+	}));
+	return /* @__PURE__ */ v(z, {
+		...a ? {
+			sortable: !0,
+			onMove: D
+		} : { sortable: !1 },
+		className: n("string-repeater--component", l),
+		items: O,
+		disabled: i,
+		onAdd: C,
+		onRemove: T,
+		strings: {
+			emptyState: u.emptyState,
+			addButton: u.addButton,
+			removeAriaLabel: u.removeAriaLabel,
+			dragHandleAriaLabel: u.dragHandleAriaLabel
+		},
+		renderRow: (t, { index: n }) => {
+			let r = {
+				id: t.id,
+				index: n,
+				name: `${e}.${n}`,
+				value: t.value,
+				invalid: g,
+				disabled: i,
+				onValueChange: (e) => S(n, e),
+				onBlur: f.onBlur,
+				ref: n === 0 ? f.ref : void 0
+			};
+			return o ? o(r) : /* @__PURE__ */ v(s, {
+				ref: r.ref,
+				name: r.name,
+				value: r.value,
+				onChange: (e) => r.onValueChange(e.target.value),
+				onBlur: r.onBlur,
+				placeholder: u.placeholder,
+				invalid: r.invalid,
+				disabled: r.disabled
+			});
+		}
+	});
+}
+G.displayName = "StringRepeater";
+//#endregion
+//#region src/components/base/repeaters/object-repeater.tsx
+var K = {
+	addButton: "Add item",
+	dragHandleAriaLabel: "Drag to reorder",
+	...L
+};
+function q({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: u = !1, renderField: d, strings: p, className: m }) {
+	let h = t(K, p), { control: g, register: _ } = E(), { fields: y, append: b, remove: x, move: S } = T({
+		control: g,
+		name: e
+	}), C = f(() => r.reduce((e, t) => (e[t.name] = "", e), {}), [r]);
+	return /* @__PURE__ */ v(z, {
+		...u ? {
+			sortable: !0,
+			onMove: (e, t) => S(e, t)
+		} : { sortable: !1 },
+		className: n("object-repeater--component", m),
+		items: y,
+		rowVariant: "card",
+		removeVariant: "ghost",
+		disabled: a,
+		onAdd: () => b(C()),
+		onRemove: (e) => x(e),
+		strings: {
+			emptyState: h.emptyState,
+			addButton: h.addButton,
+			removeAriaLabel: h.removeAriaLabel,
+			dragHandleAriaLabel: h.dragHandleAriaLabel
+		},
+		renderRow: (t, { index: n }) => /* @__PURE__ */ v(o, {
+			gap: "lg",
+			className: "object-repeater--fields",
+			children: r.map((t) => {
+				let r = `${e}.${n}.${t.name}`, o = _(r);
+				return d ? /* @__PURE__ */ v("div", {
+					className: "object-repeater--field",
+					children: d(t, {
+						index: n,
+						name: r,
+						inputProps: o,
+						invalid: !!i,
+						disabled: a
+					})
+				}, t.name) : /* @__PURE__ */ v(l, {
+					label: t.label,
+					required: t.required,
+					hint: t.hint,
+					htmlFor: r,
+					children: t.type === "textarea" ? /* @__PURE__ */ v(c, {
+						...o,
+						id: r,
+						placeholder: t.placeholder,
+						minRows: 3,
+						invalid: i,
+						disabled: a
+					}) : /* @__PURE__ */ v(s, {
+						...o,
+						id: r,
+						type: t.type || "text",
+						placeholder: t.placeholder,
+						invalid: i,
+						disabled: a
+					})
+				}, t.name);
+			})
+		})
+	});
+}
+q.displayName = "ObjectRepeater";
+//#endregion
+//#region src/components/base/repeaters/key-value-editor.tsx
+var ie = {
+	keyLabel: "Key",
+	valueLabel: "Value",
+	keyPlaceholder: "key",
+	valuePlaceholder: "value",
+	addButton: "Add row",
+	removeRowAriaLabel: "Remove row",
+	emptyState: "No rows yet."
+}, J = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2, 10), ae = d(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: i, valueLabel: o, invalid: c, onKeyChange: l, onValueChange: u }) {
+	let { id: d, key: f, value: p } = e;
+	return /* @__PURE__ */ y("div", {
+		className: n("key-value-editor--row", "grid grid-cols-1 @md/key-value-editor:grid-cols-2 gap-space-md"),
+		children: [/* @__PURE__ */ y("div", {
+			className: "grid min-w-0 gap-space-sm",
+			children: [!!i && /* @__PURE__ */ v(a, {
+				htmlFor: `${d}-key`,
+				className: "@md/key-value-editor:sr-only",
+				children: i
+			}), /* @__PURE__ */ v(s, {
+				id: `${d}-key`,
+				"aria-label": i || t,
+				value: f ?? "",
+				placeholder: t,
+				onChange: (e) => l(d, e.target.value),
+				invalid: c
+			})]
+		}), /* @__PURE__ */ y("div", {
+			className: "grid min-w-0 gap-space-sm",
+			children: [!!o && /* @__PURE__ */ v(a, {
+				htmlFor: `${d}-value`,
+				className: "@md/key-value-editor:sr-only",
+				children: o
+			}), /* @__PURE__ */ v(s, {
+				id: `${d}-value`,
+				"aria-label": o || r,
+				value: p ?? "",
+				placeholder: r,
+				onChange: (e) => u(d, e.target.value),
+				invalid: c
+			})]
+		})]
+	});
+}), Y = u(function({ value: r, onValueChange: i, invalid: o, sortable: s = !1, strings: c }, l) {
+	let u = t(ie, c), { defaultScale: d } = e(), p = g(!1), [m, h] = _(() => r && Object.keys(r).length > 0 ? Object.entries(r).map(([e, t]) => ({
+		id: J(),
+		key: e,
+		value: String(t ?? "")
+	})) : [{
+		id: J(),
+		key: "",
+		value: ""
+	}]), b = f((e) => {
+		let t = {};
+		e.forEach(({ key: e, value: n }) => {
+			e.trim() !== "" && (t[e] = n ?? "");
+		}), p.current = !0, i?.(t), queueMicrotask(() => {
+			p.current = !1;
+		});
+	}, [i]), x = f((e, t) => {
+		h((n) => {
+			let r = n.map((n) => n.id === e ? {
+				...n,
+				key: t
+			} : n);
+			return b(r), r;
+		});
+	}, [b]), S = f((e, t) => {
+		h((n) => {
+			let r = n.map((n) => n.id === e ? {
+				...n,
+				value: t
+			} : n);
+			return b(r), r;
+		});
+	}, [b]), C = f(() => {
+		h((e) => {
+			let t = [...e, {
+				id: J(),
+				key: "",
+				value: ""
+			}];
+			return b(t), t;
+		});
+	}, [b]), w = f((e) => {
+		h((t) => {
+			let n = t.filter((t, n) => n !== e), r = n.length ? n : [{
+				id: J(),
+				key: "",
+				value: ""
+			}];
+			return b(r), r;
+		});
+	}, [b]), T = f((e, t) => {
+		h((n) => {
+			let r = [...n], [i] = r.splice(e, 1);
+			return r.splice(t, 0, i), b(r), r;
+		});
+	}, [b]), E = !!u.keyLabel || !!u.valueLabel, D = d === "sm" ? {
+		left: "pl-[calc(var(--spacing-action-sm)+var(--spacing-space-md))]",
+		right: "pr-[calc(var(--spacing-action-sm)+var(--spacing-space-md))]"
+	} : d === "lg" ? {
+		left: "pl-[calc(var(--spacing-action-lg)+var(--spacing-space-md))]",
+		right: "pr-[calc(var(--spacing-action-lg)+var(--spacing-space-md))]"
+	} : {
+		left: "pl-[calc(var(--spacing-action)+var(--spacing-space-md))]",
+		right: "pr-[calc(var(--spacing-action)+var(--spacing-space-md))]"
+	}, O = s ? D.left : "", k = D.right, A = s ? {
+		sortable: !0,
+		onMove: T
+	} : { sortable: !1 };
+	return /* @__PURE__ */ y("div", {
+		ref: l,
+		className: "key-value-editor--component @container/key-value-editor space-y-space-sm",
+		children: [E && /* @__PURE__ */ y("div", {
+			"data-action-gutter": !0,
+			className: n("hidden @md/key-value-editor:grid grid-cols-2 gap-space-md", O, k),
+			children: [/* @__PURE__ */ v("div", { children: !!u.keyLabel && /* @__PURE__ */ v(a, {
+				className: "flex items-center",
+				children: u.keyLabel
+			}) }), /* @__PURE__ */ v("div", { children: !!u.valueLabel && /* @__PURE__ */ v(a, {
+				className: "flex items-center",
+				children: u.valueLabel
+			}) })]
+		}), /* @__PURE__ */ v(z, {
+			...A,
+			items: m,
+			onAdd: C,
+			onRemove: w,
+			strings: {
+				emptyState: u.emptyState,
+				addButton: u.addButton,
+				removeAriaLabel: u.removeRowAriaLabel
+			},
+			renderRow: (e) => /* @__PURE__ */ v(ae, {
+				row: e,
+				keyPlaceholder: u.keyPlaceholder,
+				valuePlaceholder: u.valuePlaceholder,
+				keyLabel: u.keyLabel,
+				valueLabel: u.valueLabel,
+				invalid: o,
+				onKeyChange: x,
+				onValueChange: S
+			})
+		})]
+	});
+});
+Y.displayName = "KeyValueEditor";
+//#endregion
+//#region src/components/base/repeaters/localized-string-field.tsx
+function X({ name: e, type: t = "text", placeholder: r, primaryLocale: i, secondaryLocale: a, activeLocale: o, invalid: l, className: u }) {
+	let { register: d } = E(), f = `${e}.${o === "primary" ? i : a}`;
+	return t === "textarea" ? /* @__PURE__ */ v(c, {
+		...d(f),
+		placeholder: r,
+		minRows: 3,
+		invalid: l,
+		className: n("localized-string-field--component", u)
+	}, f) : /* @__PURE__ */ v(s, {
+		...d(f),
+		type: t === "number" ? "number" : "text",
+		placeholder: r,
+		invalid: l,
+		className: n("localized-string-field--component", u)
+	}, f);
+}
+X.displayName = "LocalizedStringField";
+//#endregion
+//#region src/components/base/repeaters/localized-object-field.tsx
+function Z({ name: e, fields: t, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: u, className: d }) {
+	let { register: f } = E(), p = a === "primary" ? r : i;
+	return /* @__PURE__ */ v("div", {
+		className: n("localized-object-field--component w-full rounded-radius border border-border p-surface", d),
+		children: /* @__PURE__ */ v(o, {
+			gap: "lg",
+			children: t.map((t) => {
+				let n = `${e}.${p}.${t.name}`;
+				return /* @__PURE__ */ v(l, {
+					label: t.label,
+					htmlFor: n,
+					required: t.required,
+					className: "w-full",
+					children: t.type === "textarea" ? /* @__PURE__ */ v(c, {
+						...f(n),
+						id: n,
+						placeholder: t.placeholder,
+						minRows: 3,
+						invalid: u
+					}) : /* @__PURE__ */ v(s, {
+						...f(n),
+						id: n,
+						type: t.type === "number" ? "number" : "text",
+						placeholder: t.placeholder,
+						invalid: u
+					})
+				}, n);
+			})
+		})
+	});
+}
+Z.displayName = "LocalizedObjectField";
+//#endregion
+//#region src/components/base/repeaters/localized-string-repeater.tsx
+var Q = {
+	placeholder: "Enter value",
+	addButton: L.addItem,
+	emptyState: L.emptyState,
+	removeAriaLabel: L.removeAriaLabel,
+	dragHandleAriaLabel: "Drag to reorder"
+};
+function $({ name: e, primaryLocale: r, secondaryLocale: i, activeLocale: a, invalid: o, disabled: s = !1, sortable: l = !1, strings: u, className: d }) {
+	let f = t(Q, u), p = `${e}.${a === "primary" ? r : i}`;
+	return /* @__PURE__ */ v(G, {
+		name: p,
+		sortable: l,
+		invalid: o,
+		disabled: s,
+		className: n("localized-string-repeater--component", d),
+		strings: f,
+		renderField: (e) => /* @__PURE__ */ v(c, {
+			ref: e.ref,
+			name: e.name,
+			value: e.value,
+			onChange: (t) => e.onValueChange(t.target.value),
+			onBlur: e.onBlur,
+			placeholder: f.placeholder,
+			minRows: 2,
+			invalid: e.invalid,
+			disabled: e.disabled
+		})
+	});
+}
+$.displayName = "LocalizedStringRepeater";
+//#endregion
+export { Y as KeyValueEditor, Z as LocalizedObjectField, X as LocalizedStringField, $ as LocalizedStringRepeater, q as ObjectRepeater, z as Repeater, G as StringRepeater, Q as defaultLocalizedStringRepeaterStrings, K as defaultObjectRepeaterStrings, R as defaultRepeaterPrimitiveStrings, L as defaultRepeaterStrings, W as defaultStringRepeaterStrings };
+
+//# sourceMappingURL=repeaters.js.map