themelia-react-ui 2.0.6 → 3.0.0

package/dist/base/repeaters.js

@@ -1,15 +1,15 @@
 "use client";
-import { d as e } from "../ui-provider-C-74NVLc.js";
+import { f as e } from "../ui-provider-Bu1S-o96.js";
 import { useStrings as t } from "../lib/strings.js";
-import { t as n } from "../utils-DhuoqFy4.js";
+import { t as n } from "../utils-BVbAG2J6.js";
 import { t as r } from "../affordance-geometry.generated-P-aVJisu.js";
-import { n as i } from "../buttons-DeW0bQeK.js";
-import { a, c as o } from "../typography-C7-YMW1S.js";
-import { t as s } from "../structure-DZJ2wbAU.js";
-import { t as c } from "../interaction-recipes-4wZ2tvfb.js";
-import { t as l } from "../input-7KAc7XQL.js";
-import { t as u } from "../form-field-CAPdwdnZ.js";
-import { d } from "../text-inputs-jdkS3ReG.js";
+import { a as i, c as a } from "../typography-C0dELqYV.js";
+import { n as o } from "../buttons-pZVgPTZn.js";
+import { t as s } from "../structure-DElaQwwN.js";
+import { t as c } from "../interaction-recipes-DmuS1ase.js";
+import { t as l } from "../input-DfJyrjoR.js";
+import { t as u } from "../form-field-BdfCwSoQ.js";
+import { d } from "../text-inputs-ljyBYaCd.js";
 import { n as f } from "../field-control-attributes-B6i335wr.js";
 import { forwardRef as p, memo as m, useCallback as h, useId as g, useMemo as _, useReducer as v, useRef as y, useState as b } from "react";
 import { jsx as x, jsxs as S } from "react/jsx-runtime";
@@ -29,7 +29,7 @@ var V = {
 	removeAriaLabel: V.removeAriaLabel,
 	dragHandleAriaLabel: "Drag to reorder"
 };
-function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, hideRemove: s, disabled: l, strings: u, actionSize: d, onRemove: f, renderRow: p }) {
+function ee({ item: e, index: t, sortable: r, rowVariant: i, removeVariant: a, hideRemove: s, disabled: l, strings: u, actionSize: d, onRemove: f, renderRow: p }) {
 	let m = R({
 		id: e.id,
 		disabled: l || !r
@@ -37,7 +37,7 @@ function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 		transform: B.Transform.toString(m.transform),
 		transition: m.transition,
 		opacity: h ? .6 : 1
-	} : void 0, _ = r ? m.setNodeRef : void 0, v = r ? m.attributes : {}, y = r ? m.listeners : void 0, b = r ? /* @__PURE__ */ x(i, {
+	} : void 0, _ = r ? m.setNodeRef : void 0, v = r ? m.attributes : {}, y = r ? m.listeners : void 0, b = r ? /* @__PURE__ */ x(o, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
@@ -52,7 +52,7 @@ function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : null, w = s ? null : o === "icon-button" ? /* @__PURE__ */ x(i, {
+	}) : null, w = s ? null : a === "icon-button" ? /* @__PURE__ */ x(o, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "outline",
@@ -66,7 +66,7 @@ function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 			className: "size-icon",
 			"aria-hidden": "true"
 		})
-	}) : /* @__PURE__ */ x(i, {
+	}) : /* @__PURE__ */ x(o, {
 		type: "button",
 		tone: "secondary",
 		buttonStyle: "ghost",
@@ -81,7 +81,7 @@ function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 			"aria-hidden": "true"
 		})
 	});
-	return a === "card" ? /* @__PURE__ */ x("div", {
+	return i === "card" ? /* @__PURE__ */ x("div", {
 		ref: _,
 		style: g,
 		"data-repeater-item-id": e.id,
@@ -118,7 +118,7 @@ function ee({ item: e, index: t, sortable: r, rowVariant: a, removeVariant: o, h
 		]
 	});
 }
-function U({ items: r, renderRow: a, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: f = "inline", removeVariant: p = "ghost", hideRemove: m = !1, hideAdd: g = !1, disabled: v = !1, strings: y, className: b }) {
+function U({ items: r, renderRow: i, onAdd: c, onRemove: l, onMove: u, sortable: d = !1, rowVariant: f = "inline", removeVariant: p = "ghost", hideRemove: m = !1, hideAdd: g = !1, disabled: v = !1, strings: y, className: b }) {
 	let C = t(H, y), { defaultScale: T } = e(), E = T ?? "md", D = F(P(M, { activationConstraint: { distance: 4 } }), P(j, { coordinateGetter: L })), O = h((e) => {
 		let { active: t, over: n } = e;
 		if (!n || t.id === n.id) return;
@@ -138,7 +138,7 @@ function U({ items: r, renderRow: a, onAdd: c, onRemove: l, onMove: u, sortable:
 			strings: C,
 			actionSize: E,
 			onRemove: l,
-			renderRow: a
+			renderRow: i
 		}, e.id))
 	});
 	return /* @__PURE__ */ S(s, {
@@ -146,7 +146,7 @@ function U({ items: r, renderRow: a, onAdd: c, onRemove: l, onMove: u, sortable:
 		className: n("repeater--component", b),
 		children: [r.length === 0 ? /* @__PURE__ */ x("div", {
 			className: "repeater--empty rounded-surface border border-dashed border-border p-surface",
-			children: /* @__PURE__ */ x(o, {
+			children: /* @__PURE__ */ x(a, {
 				type: "secondary",
 				children: C.emptyState
 			})
@@ -159,7 +159,7 @@ function U({ items: r, renderRow: a, onAdd: c, onRemove: l, onMove: u, sortable:
 				strategy: z,
 				children: R
 			})
-		}) : R, !g && /* @__PURE__ */ S(i, {
+		}) : R, !g && /* @__PURE__ */ S(o, {
 			type: "button",
 			tone: "secondary",
 			buttonStyle: "outline",
@@ -385,7 +385,7 @@ function Z({ name: e, fields: r, invalid: i, disabled: a = !1, sortable: o = !1,
 Z.displayName = "ObjectRepeater";
 //#endregion
 //#region src/components/base/repeaters/key-value-editor.tsx
-var re = {
+var Q = {
 	keyLabel: "Key",
 	valueLabel: "Value",
 	keyPlaceholder: "key",
@@ -393,19 +393,19 @@ var re = {
 	addButton: "Add row",
 	removeRowAriaLabel: "Remove row",
 	emptyState: "No rows yet."
-}, Q = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2, 10), ie = m(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: i, valueLabel: o, invalid: s, onKeyChange: c, onValueChange: u }) {
+}, $ = () => typeof crypto < "u" && "randomUUID" in crypto ? crypto.randomUUID() : Math.random().toString(36).slice(2, 10), re = m(function({ row: e, keyPlaceholder: t, valuePlaceholder: r, keyLabel: a, valueLabel: o, invalid: s, onKeyChange: c, onValueChange: u }) {
 	let { id: d, key: f, value: p } = e;
 	return /* @__PURE__ */ S("div", {
 		className: n("key-value-editor--row", "grid grid-cols-1 @md/key-value-editor:grid-cols-2 gap-space-md"),
 		children: [/* @__PURE__ */ S("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!i && /* @__PURE__ */ x(a, {
+			children: [!!a && /* @__PURE__ */ x(i, {
 				htmlFor: `${d}-key`,
 				className: "text-inherit @md/key-value-editor:sr-only",
-				children: i
+				children: a
 			}), /* @__PURE__ */ x(l, {
 				id: `${d}-key`,
-				"aria-label": i || t,
+				"aria-label": a || t,
 				value: f ?? "",
 				placeholder: t,
 				onChange: (e) => c(d, e.target.value),
@@ -413,7 +413,7 @@ var re = {
 			})]
 		}), /* @__PURE__ */ S("div", {
 			className: "grid min-w-0 gap-space-sm",
-			children: [!!o && /* @__PURE__ */ x(a, {
+			children: [!!o && /* @__PURE__ */ x(i, {
 				htmlFor: `${d}-value`,
 				className: "text-inherit @md/key-value-editor:sr-only",
 				children: o
@@ -427,111 +427,114 @@ var re = {
 			})]
 		})]
 	});
-}), $ = p(function({ value: i, onValueChange: o, invalid: s, sortable: c = !1, strings: l, id: u, "aria-label": d, "aria-labelledby": p, "aria-describedby": m, "aria-invalid": g }, _) {
-	let v = t(re, l), { invalid: C, ariaInvalid: w } = f(s, g), { defaultScale: T } = e(), E = y(!1), [D, O] = b(() => i && Object.keys(i).length > 0 ? Object.entries(i).map(([e, t]) => ({
-		id: Q(),
-		key: e,
-		value: String(t ?? "")
-	})) : [{
-		id: Q(),
-		key: "",
-		value: ""
-	}]), k = h((e) => {
+}), ie = p(function({ value: a, defaultValue: o, onValueChange: s, invalid: c, sortable: l = !1, strings: u, className: d, id: p, "aria-label": m, "aria-labelledby": g, "aria-describedby": _, "aria-invalid": v }, C) {
+	let w = t(Q, u), { invalid: T, ariaInvalid: E } = f(c, v), { defaultScale: D } = e(), O = y(!1), [k, A] = b(() => {
+		let e = a ?? o;
+		return e && Object.keys(e).length > 0 ? Object.entries(e).map(([e, t]) => ({
+			id: $(),
+			key: e,
+			value: String(t ?? "")
+		})) : [{
+			id: $(),
+			key: "",
+			value: ""
+		}];
+	}), j = h((e) => {
 		let t = {};
 		e.forEach(({ key: e, value: n }) => {
 			e.trim() !== "" && (t[e] = n ?? "");
-		}), E.current = !0, o?.(t), queueMicrotask(() => {
-			E.current = !1;
+		}), O.current = !0, s?.(t), queueMicrotask(() => {
+			O.current = !1;
 		});
-	}, [o]), A = h((e, t) => {
-		O((n) => {
+	}, [s]), M = h((e, t) => {
+		A((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				key: t
 			} : n);
-			return k(r), r;
+			return j(r), r;
 		});
-	}, [k]), j = h((e, t) => {
-		O((n) => {
+	}, [j]), N = h((e, t) => {
+		A((n) => {
 			let r = n.map((n) => n.id === e ? {
 				...n,
 				value: t
 			} : n);
-			return k(r), r;
+			return j(r), r;
 		});
-	}, [k]), M = h(() => {
-		O((e) => {
+	}, [j]), P = h(() => {
+		A((e) => {
 			let t = [...e, {
-				id: Q(),
+				id: $(),
 				key: "",
 				value: ""
 			}];
-			return k(t), t;
+			return j(t), t;
 		});
-	}, [k]), N = h((e) => {
-		O((t) => {
+	}, [j]), F = h((e) => {
+		A((t) => {
 			let n = t.filter((t, n) => n !== e), r = n.length ? n : [{
-				id: Q(),
+				id: $(),
 				key: "",
 				value: ""
 			}];
-			return k(r), r;
+			return j(r), r;
 		});
-	}, [k]), P = h((e, t) => {
-		O((n) => {
+	}, [j]), I = h((e, t) => {
+		A((n) => {
 			let r = [...n], [i] = r.splice(e, 1);
-			return r.splice(t, 0, i), k(r), r;
+			return r.splice(t, 0, i), j(r), r;
 		});
-	}, [k]), F = !!v.keyLabel || !!v.valueLabel, I = r.actionGutter[T === "sm" || T === "lg" ? T : "md"], L = {
-		left: I.start,
-		right: I.end
-	}, R = c ? L.left : "", z = L.right, B = c ? {
+	}, [j]), L = !!w.keyLabel || !!w.valueLabel, R = r.actionGutter[D === "sm" || D === "lg" ? D : "md"], z = {
+		left: R.start,
+		right: R.end
+	}, B = l ? z.left : "", V = z.right, H = l ? {
 		sortable: !0,
-		onMove: P
+		onMove: I
 	} : { sortable: !1 };
 	return /* @__PURE__ */ S("div", {
-		ref: _,
-		id: u,
+		ref: C,
+		id: p,
 		role: "group",
-		"aria-label": d,
-		"aria-labelledby": p,
-		"aria-describedby": m,
-		"aria-invalid": w,
-		className: "key-value-editor--component @container/key-value-editor space-y-space-sm",
-		children: [F && /* @__PURE__ */ S("div", {
+		"aria-label": m,
+		"aria-labelledby": g,
+		"aria-describedby": _,
+		"aria-invalid": E,
+		className: n("key-value-editor--component @container/key-value-editor space-y-space-sm", d),
+		children: [L && /* @__PURE__ */ S("div", {
 			"data-action-gutter": !0,
-			className: n("hidden @md/key-value-editor:grid grid-cols-2 gap-space-md", R, z),
-			children: [/* @__PURE__ */ x("div", { children: !!v.keyLabel && /* @__PURE__ */ x(a, {
+			className: n("hidden @md/key-value-editor:grid grid-cols-2 gap-space-md", B, V),
+			children: [/* @__PURE__ */ x("div", { children: !!w.keyLabel && /* @__PURE__ */ x(i, {
 				className: "flex items-center text-inherit",
-				children: v.keyLabel
-			}) }), /* @__PURE__ */ x("div", { children: !!v.valueLabel && /* @__PURE__ */ x(a, {
+				children: w.keyLabel
+			}) }), /* @__PURE__ */ x("div", { children: !!w.valueLabel && /* @__PURE__ */ x(i, {
 				className: "flex items-center text-inherit",
-				children: v.valueLabel
+				children: w.valueLabel
 			}) })]
 		}), /* @__PURE__ */ x(U, {
-			...B,
-			items: D,
-			onAdd: M,
-			onRemove: N,
+			...H,
+			items: k,
+			onAdd: P,
+			onRemove: F,
 			strings: {
-				emptyState: v.emptyState,
-				addButton: v.addButton,
-				removeAriaLabel: v.removeRowAriaLabel
+				emptyState: w.emptyState,
+				addButton: w.addButton,
+				removeAriaLabel: w.removeRowAriaLabel
 			},
-			renderRow: (e) => /* @__PURE__ */ x(ie, {
+			renderRow: (e) => /* @__PURE__ */ x(re, {
 				row: e,
-				keyPlaceholder: v.keyPlaceholder,
-				valuePlaceholder: v.valuePlaceholder,
-				keyLabel: v.keyLabel,
-				valueLabel: v.valueLabel,
-				invalid: C,
-				onKeyChange: A,
-				onValueChange: j
+				keyPlaceholder: w.keyPlaceholder,
+				valuePlaceholder: w.valuePlaceholder,
+				keyLabel: w.keyLabel,
+				valueLabel: w.valueLabel,
+				invalid: T,
+				onKeyChange: M,
+				onValueChange: N
 			})
 		})]
 	});
 });
-$.displayName = "KeyValueEditor";
+ie.displayName = "KeyValueEditor";
 //#endregion
 //#region src/components/base/repeaters/localized-string-field.tsx
 function ae({ name: e, type: t = "text", placeholder: r, primaryLocale: i, secondaryLocale: a, activeLocale: o, invalid: s, className: c }) {
@@ -618,6 +621,6 @@ function ce({ name: e, primaryLocale: r, secondaryLocale: i, activeLocale: a, in
 }
 ce.displayName = "LocalizedStringRepeater";
 //#endregion
-export { $ as KeyValueEditor, oe as LocalizedObjectField, ae as LocalizedStringField, ce as LocalizedStringRepeater, Z as ObjectRepeater, U as Repeater, Y as StringRepeater, se as defaultLocalizedStringRepeaterStrings, X as defaultObjectRepeaterStrings, H as defaultRepeaterPrimitiveStrings, V as defaultRepeaterStrings, J as defaultStringRepeaterStrings };
+export { ie as KeyValueEditor, oe as LocalizedObjectField, ae as LocalizedStringField, ce as LocalizedStringRepeater, Z as ObjectRepeater, U as Repeater, Y as StringRepeater, Q as defaultKeyValueEditorStrings, se as defaultLocalizedStringRepeaterStrings, X as defaultObjectRepeaterStrings, H as defaultRepeaterPrimitiveStrings, V as defaultRepeaterStrings, J as defaultStringRepeaterStrings };
 
 //# sourceMappingURL=repeaters.js.map