@fiestaboard/ui 5.8.0 → 5.10.0

package/dist/components/editor/variable-picker-content.js

@@ -2,13 +2,13 @@
 import { cn as e } from "../../lib/utils.js";
 import { Accordion as t, AccordionContent as n, AccordionItem as r, AccordionTrigger as i } from "../containment/accordion.js";
 import { Badge as a } from "../feedback/badge.js";
-import { Input as o } from "../forms/input.js";
-import { Box as s } from "../layout/box.js";
-import { Flex as c } from "../layout/flex.js";
-import { Code as l } from "../typography/code.js";
-import { ScrollArea as u } from "../containment/scroll-area.js";
-import { Skeleton as d } from "../feedback/skeleton.js";
-import { Text as f } from "../typography/text.js";
+import { Text as o } from "../typography/text.js";
+import { Input as s } from "../forms/input.js";
+import { Box as c } from "../layout/box.js";
+import { Flex as l } from "../layout/flex.js";
+import { Code as u } from "../typography/code.js";
+import { ScrollArea as d } from "../containment/scroll-area.js";
+import { Skeleton as f } from "../feedback/skeleton.js";
 import { Stack as p } from "../layout/stack.js";
 import { Tooltip as m, TooltipContent as h, TooltipProvider as g, TooltipTrigger as _ } from "../overlays/tooltip.js";
 import { Search as v } from "lucide-react";
@@ -63,7 +63,7 @@ function F({ label: e, description: t, preview: n, onInsert: r }) {
 		children: /* @__PURE__ */ C("button", {
 			type: "button",
 			onClick: r,
-			children: [e, n && /* @__PURE__ */ S(f, {
+			children: [e, n && /* @__PURE__ */ S(o, {
 				as: "span",
 				tone: "muted",
 				weight: "normal",
@@ -81,9 +81,9 @@ function F({ label: e, description: t, preview: n, onInsert: r }) {
 		children: t
 	})] }) : i;
 }
-function I(e, o, u, d, m, h, g, _, v, y = !1, b) {
+function I(e, s, d, f, m, h, g, _, v, y = !1, b) {
 	if (!m || Object.keys(m).length === 0) return null;
-	let x = h?.variables?.arrays?.[u]?.sub_arrays?.[d];
+	let x = h?.variables?.arrays?.[d]?.sub_arrays?.[f];
 	if (!x) return null;
 	let w = x.item_fields || [], T = x.key_type || "index", E = x.key_field, D = x.label_field, O = (e) => {
 		let t = D && e[D] || E && e[E] || e[w[0]];
@@ -91,15 +91,15 @@ function I(e, o, u, d, m, h, g, _, v, y = !1, b) {
 	}, k = y ? Object.entries(m) : Object.entries(m).filter(([e, t]) => {
 		if (!_.trim()) return !0;
 		let n = T === "dynamic" && E ? String(t[E] ?? e) : e, r = O(t) || n;
-		return N(d, _) || N(n, _) || N(r, _) || w.some((e) => N(e, _));
+		return N(f, _) || N(n, _) || N(r, _) || w.some((e) => N(e, _));
 	});
-	return k.length === 0 ? null : /* @__PURE__ */ C(s, { children: [/* @__PURE__ */ C(f, {
+	return k.length === 0 ? null : /* @__PURE__ */ C(c, { children: [/* @__PURE__ */ C(o, {
 		size: "xs",
 		tone: "muted",
 		className: "mb-1.5 flex items-center gap-1",
 		children: [
 			b && /* @__PURE__ */ S(b, { className: "h-3 w-3" }),
-			d.charAt(0).toUpperCase() + d.slice(1),
+			f.charAt(0).toUpperCase() + f.slice(1),
 			" ",
 			v.itemCount(k.length)
 		]
@@ -110,18 +110,18 @@ function I(e, o, u, d, m, h, g, _, v, y = !1, b) {
 		children: k.map(([t, m]) => {
 			let h = T === "dynamic" && E ? String(m[E] ?? t) : t, v = O(m) || h, b = y ? w : w.filter((e) => !_.trim() || N(e, _));
 			return b.length === 0 ? null : /* @__PURE__ */ C(r, {
-				value: `${u}-${o}-${d}-${t}`,
+				value: `${d}-${s}-${f}-${t}`,
 				className: "border-b-0",
 				children: [/* @__PURE__ */ S(i, {
 					className: "py-1.5 hover:no-underline text-xs",
-					children: /* @__PURE__ */ C(c, {
+					children: /* @__PURE__ */ C(l, {
 						align: "center",
 						gap: "2",
 						children: [T === "dynamic" && /* @__PURE__ */ S(a, {
 							variant: "outline",
 							className: "text-[10px] font-mono px-1.5",
 							children: h
-						}), /* @__PURE__ */ S(f, {
+						}), /* @__PURE__ */ S(o, {
 							as: "span",
 							size: "xs",
 							className: "text-left",
@@ -131,26 +131,26 @@ function I(e, o, u, d, m, h, g, _, v, y = !1, b) {
 				}), /* @__PURE__ */ S(n, { children: /* @__PURE__ */ C(p, {
 					gap: "2",
 					className: "pt-2 pl-2",
-					children: [/* @__PURE__ */ S(c, {
+					children: [/* @__PURE__ */ S(l, {
 						wrap: !0,
 						gap: "1.5",
 						children: b.map((n) => {
-							let r = `{{${e}.${u}.${o}.${d}.${t}.${n}}}`;
+							let r = `{{${e}.${d}.${s}.${f}.${t}.${n}}}`;
 							return /* @__PURE__ */ S(F, {
 								label: n,
 								onInsert: () => g(r)
 							}, n);
 						})
-					}), /* @__PURE__ */ S(s, {
+					}), /* @__PURE__ */ S(c, {
 						className: "text-xs text-muted-foreground bg-muted/50 p-2 rounded-md",
-						children: /* @__PURE__ */ C(l, {
+						children: /* @__PURE__ */ C(u, {
 							className: "text-xs bg-transparent px-0",
 							children: [
-								u,
+								d,
 								".",
-								o,
+								s,
 								".",
-								d,
+								f,
 								".",
 								t,
 								".*"
@@ -162,33 +162,33 @@ function I(e, o, u, d, m, h, g, _, v, y = !1, b) {
 		})
 	})] });
 }
-function L(e, a, o, d, m, h, g, _ = !1, v) {
-	if (!o || o.length === 0) return /* @__PURE__ */ C(s, {
+function L(e, a, s, f, m, h, g, _ = !1, v) {
+	if (!s || s.length === 0) return /* @__PURE__ */ C(c, {
 		className: "p-3 bg-muted/30 rounded-lg text-xs text-muted-foreground",
-		children: [/* @__PURE__ */ S(f, {
+		children: [/* @__PURE__ */ S(o, {
 			size: "xs",
 			tone: "muted",
 			className: "mb-2",
 			children: g.configureHint(a)
-		}), /* @__PURE__ */ C(f, {
+		}), /* @__PURE__ */ C(o, {
 			tone: "muted",
 			className: "font-mono text-[10px]",
 			children: [
 				g.configureExample,
 				" ",
-				/* @__PURE__ */ C(l, {
+				/* @__PURE__ */ C(u, {
 					className: "bg-background px-1 text-[10px]",
 					children: [a, ".0.*"]
 				})
 			]
 		})]
 	});
-	let y = d?.variables?.arrays?.[a];
+	let y = f?.variables?.arrays?.[a];
 	if (!y) return null;
-	let b = y.label_field || "name", x = y.item_fields || [], w = y.sub_arrays || {}, T = _ ? o.map((e, t) => ({
+	let b = y.label_field || "name", x = y.item_fields || [], w = y.sub_arrays || {}, T = _ ? s.map((e, t) => ({
 		item: e,
 		index: t
-	})) : o.map((e, t) => ({
+	})) : s.map((e, t) => ({
 		item: e,
 		index: t
 	})).filter(({ item: e, index: t }) => {
@@ -199,59 +199,59 @@ function L(e, a, o, d, m, h, g, _ = !1, v) {
 			return n ? N(t, h) || Object.keys(n).some((e) => N(e, h)) : !1;
 		});
 	});
-	return T.length === 0 ? /* @__PURE__ */ S(s, {
+	return T.length === 0 ? /* @__PURE__ */ S(c, {
 		className: "p-3 bg-muted/30 rounded-lg text-xs text-muted-foreground",
-		children: /* @__PURE__ */ S(f, {
+		children: /* @__PURE__ */ S(o, {
 			size: "xs",
 			tone: "muted",
 			children: g.noMatchingVariables
 		})
-	}) : /* @__PURE__ */ S(u, {
+	}) : /* @__PURE__ */ S(d, {
 		className: "max-h-[400px] pr-1",
 		children: /* @__PURE__ */ S(t, {
 			type: "single",
 			collapsible: !0,
 			className: "w-full",
-			children: T.map(({ item: t, index: o }) => {
-				let l = String(t[b] || t.name || g.itemFallbackLabel(o)), u = _ ? x.filter((e) => !e.includes(".")) : x.filter((e) => !e.includes(".")).filter((e) => !h.trim() || N(e, h)), y = Object.entries(w).filter(([e]) => {
+			children: T.map(({ item: t, index: s }) => {
+				let u = String(t[b] || t.name || g.itemFallbackLabel(s)), d = _ ? x.filter((e) => !e.includes(".")) : x.filter((e) => !e.includes(".")).filter((e) => !h.trim() || N(e, h)), y = Object.entries(w).filter(([e]) => {
 					let n = t[e];
 					return n ? _ || !h.trim() ? !0 : N(e, h) || Object.keys(n).some((e) => N(e, h)) : !1;
 				});
-				return u.length > 0 || y.length > 0 ? /* @__PURE__ */ C(r, {
-					value: `${a}-${o}`,
+				return d.length > 0 || y.length > 0 ? /* @__PURE__ */ C(r, {
+					value: `${a}-${s}`,
 					className: "border-b-0",
 					children: [/* @__PURE__ */ S(i, {
 						className: "py-2 hover:no-underline",
-						children: /* @__PURE__ */ C(c, {
+						children: /* @__PURE__ */ C(l, {
 							align: "center",
 							gap: "2",
 							className: "text-xs",
-							children: [v && /* @__PURE__ */ S(v, { className: "h-3 w-3" }), /* @__PURE__ */ C(s, {
+							children: [v && /* @__PURE__ */ S(v, { className: "h-3 w-3" }), /* @__PURE__ */ C(c, {
 								className: "text-left",
-								children: [/* @__PURE__ */ S(f, {
+								children: [/* @__PURE__ */ S(o, {
 									size: "xs",
 									weight: "medium",
-									children: l
-								}), /* @__PURE__ */ S(f, {
+									children: u
+								}), /* @__PURE__ */ S(o, {
 									size: "xs",
 									tone: "muted",
-									children: g.indexLabel(o)
+									children: g.indexLabel(s)
 								})]
 							})]
 						})
 					}), /* @__PURE__ */ S(n, { children: /* @__PURE__ */ C(p, {
 						gap: "3",
 						className: "pt-2 pl-2",
-						children: [u.length > 0 && /* @__PURE__ */ C(s, { children: [/* @__PURE__ */ S(f, {
+						children: [d.length > 0 && /* @__PURE__ */ C(c, { children: [/* @__PURE__ */ S(o, {
 							size: "xs",
 							tone: "muted",
 							className: "mb-1.5",
 							children: g.itemInfo
-						}), /* @__PURE__ */ S(c, {
+						}), /* @__PURE__ */ S(l, {
 							wrap: !0,
 							gap: "1.5",
-							children: u.map((t) => {
-								let n = `{{${e}.${a}.${o}.${t}}}`;
+							children: d.map((t) => {
+								let n = `{{${e}.${a}.${s}.${t}}}`;
 								return /* @__PURE__ */ S(F, {
 									label: t,
 									onInsert: () => m(n)
@@ -259,28 +259,28 @@ function L(e, a, o, d, m, h, g, _ = !1, v) {
 							})
 						})] }), y.map(([n]) => {
 							let r = O(t[n]);
-							return r ? /* @__PURE__ */ S(s, { children: I(e, o, a, n, r, d, m, h, g, _, v) }, n) : null;
+							return r ? /* @__PURE__ */ S(c, { children: I(e, s, a, n, r, f, m, h, g, _, v) }, n) : null;
 						})]
 					}) })]
-				}, o) : null;
+				}, s) : null;
 			})
 		})
 	});
 }
-function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, pluginManifests: i = E, isLoadingManifests: a = !1, pluginDisplayData: l = T, resolveIcon: m, maxHeight: h = "400px", autoFocusSearch: _ = !0, labels: O, className: k }) {
+function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, pluginManifests: i = E, isLoadingManifests: a = !1, pluginDisplayData: u = T, resolveIcon: m, maxHeight: h = "400px", autoFocusSearch: _ = !0, labels: O, className: k }) {
 	let A = {
 		...w,
 		...O
-	}, [M, I] = b(""), R = y(l), z = y(M), B = n?.variable_metadata ?? {}, V = n?.variable_groups ?? {};
-	if (r || a) return /* @__PURE__ */ C(s, {
+	}, [M, I] = b(""), R = y(u), z = y(M), B = n?.variable_metadata ?? {}, V = n?.variable_groups ?? {};
+	if (r || a) return /* @__PURE__ */ C(c, {
 		className: "p-3 min-w-[300px]",
 		children: [
-			/* @__PURE__ */ S(d, { className: "h-4 w-full mb-2" }),
-			/* @__PURE__ */ S(d, { className: "h-4 w-3/4 mb-2" }),
-			/* @__PURE__ */ S(d, { className: "h-4 w-1/2" })
+			/* @__PURE__ */ S(f, { className: "h-4 w-full mb-2" }),
+			/* @__PURE__ */ S(f, { className: "h-4 w-3/4 mb-2" }),
+			/* @__PURE__ */ S(f, { className: "h-4 w-1/2" })
 		]
 	});
-	if (!n?.variables) return /* @__PURE__ */ S(f, {
+	if (!n?.variables) return /* @__PURE__ */ S(o, {
 		tone: "muted",
 		className: "p-3 min-w-[300px]",
 		children: A.noVariablesAvailable
@@ -302,14 +302,14 @@ function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, plug
 	});
 	return /* @__PURE__ */ S(g, {
 		delayDuration: 300,
-		children: /* @__PURE__ */ C(c, {
+		children: /* @__PURE__ */ C(l, {
 			direction: "col",
 			className: e("w-full min-w-[min(340px,calc(100vw-24px))]", k),
-			children: [/* @__PURE__ */ S(s, {
+			children: [/* @__PURE__ */ S(c, {
 				className: "p-2 border-b",
-				children: /* @__PURE__ */ C(s, {
+				children: /* @__PURE__ */ C(c, {
 					className: "relative",
-					children: [/* @__PURE__ */ S(v, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ S(o, {
+					children: [/* @__PURE__ */ S(v, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" }), /* @__PURE__ */ S(s, {
 						autoFocus: _,
 						type: "text",
 						placeholder: A.searchPlaceholder,
@@ -319,18 +319,18 @@ function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, plug
 						className: "pl-8 h-9"
 					})]
 				})
-			}), /* @__PURE__ */ S(u, {
+			}), /* @__PURE__ */ S(d, {
 				className: "flex-1",
 				style: { height: h },
 				children: /* @__PURE__ */ S(p, {
 					gap: "3",
 					className: "p-2",
-					children: H.length === 0 ? /* @__PURE__ */ S(f, {
+					children: H.length === 0 ? /* @__PURE__ */ S(o, {
 						tone: "muted",
 						className: "p-3 text-center",
 						children: A.noVariablesFound(z)
 					}) : H.map(([e, n]) => {
-						let r = i[e], a = j(r), o = B[e] ?? {}, l = V[e] ?? {}, u = Object.keys(l).length > 0, d = (r?.icon ? m?.(r.icon) : null) ?? null, h = n.filter((e) => !e.includes(".*.")), g = a.length > 0 ? h.filter((e) => !a.some((t) => e === t || e.startsWith(t + "."))) : h, _ = z.trim() && (N(e, z) || e.toLowerCase().replace(/_/g, " ").split(/\s+/).some((e) => e.includes(z.toLowerCase()))), v = _ ? g : g.filter((t) => !z.trim() || P(e, t, z)), y = a.length > 0 && a.some((t) => {
+						let r = i[e], a = j(r), s = B[e] ?? {}, u = V[e] ?? {}, d = Object.keys(u).length > 0, f = (r?.icon ? m?.(r.icon) : null) ?? null, h = n.filter((e) => !e.includes(".*.")), g = a.length > 0 ? h.filter((e) => !a.some((t) => e === t || e.startsWith(t + "."))) : h, _ = z.trim() && (N(e, z) || e.toLowerCase().replace(/_/g, " ").split(/\s+/).some((e) => e.includes(z.toLowerCase()))), v = _ ? g : g.filter((t) => !z.trim() || P(e, t, z)), y = a.length > 0 && a.some((t) => {
 							if (!z.trim() || _ || N(t, z)) return !0;
 							let n = D(R[e]?.[t]);
 							if (!n || n.length === 0) return !1;
@@ -339,12 +339,12 @@ function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, plug
 						});
 						if (v.length === 0 && !y) return null;
 						let b = {};
-						if (u) for (let e of v) {
-							let t = o[e]?.group || "", n = t && l[t] ? t : "__ungrouped__";
+						if (d) for (let e of v) {
+							let t = s[e]?.group || "", n = t && u[t] ? t : "__ungrouped__";
 							(b[n] ??= []).push(e);
 						}
 						let w = (n) => {
-							let r = o[n], i = `{{${e}.${n}}}`;
+							let r = s[n], i = `{{${e}.${n}}}`;
 							return /* @__PURE__ */ S(F, {
 								label: n,
 								description: r?.description,
@@ -355,38 +355,38 @@ function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, plug
 						return /* @__PURE__ */ C(p, {
 							gap: "1.5",
 							children: [
-								/* @__PURE__ */ C(c, {
+								/* @__PURE__ */ C(l, {
 									align: "center",
 									gap: "2",
 									className: "bg-muted/30 rounded-md px-2 py-1.5 -mx-1",
-									children: [d && /* @__PURE__ */ S(d, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ S(f, {
+									children: [f && /* @__PURE__ */ S(f, { className: "h-3 w-3 text-muted-foreground" }), /* @__PURE__ */ S(o, {
 										as: "span",
 										size: "xs",
 										weight: "semibold",
 										children: e.replace(/_/g, " ").replace(/\b\w/g, (e) => e.toUpperCase())
 									})]
 								}),
-								u ? /* @__PURE__ */ C(x, { children: [Object.entries(l).map(([e, t]) => {
+								d ? /* @__PURE__ */ C(x, { children: [Object.entries(u).map(([e, t]) => {
 									let n = b[e];
-									return !n || n.length === 0 ? null : /* @__PURE__ */ C(s, { children: [/* @__PURE__ */ S(f, {
+									return !n || n.length === 0 ? null : /* @__PURE__ */ C(c, { children: [/* @__PURE__ */ S(o, {
 										className: "text-[9px] uppercase tracking-widest text-muted-foreground mt-1 mb-1 pb-0.5 border-b border-border/30",
 										children: t.label
-									}), /* @__PURE__ */ S(c, {
+									}), /* @__PURE__ */ S(l, {
 										wrap: !0,
 										gap: "1.5",
 										children: n.map(w)
 									})] }, e);
-								}), b.__ungrouped__ && b.__ungrouped__.length > 0 && /* @__PURE__ */ C(s, { children: [/* @__PURE__ */ S(f, {
+								}), b.__ungrouped__ && b.__ungrouped__.length > 0 && /* @__PURE__ */ C(c, { children: [/* @__PURE__ */ S(o, {
 									className: "text-[9px] uppercase tracking-widest text-muted-foreground mt-1 mb-1 pb-0.5 border-b border-border/30",
 									children: A.general
-								}), /* @__PURE__ */ S(c, {
+								}), /* @__PURE__ */ S(l, {
 									wrap: !0,
 									gap: "1.5",
 									children: b.__ungrouped__.map(w)
-								})] })] }) : v.length > 0 && /* @__PURE__ */ C(s, { children: [/* @__PURE__ */ S(f, {
+								})] })] }) : v.length > 0 && /* @__PURE__ */ C(c, { children: [/* @__PURE__ */ S(o, {
 									className: "text-[9px] uppercase tracking-widest text-muted-foreground mt-1 mb-1 pb-0.5 border-b border-border/30",
 									children: A.general
-								}), /* @__PURE__ */ S(c, {
+								}), /* @__PURE__ */ S(l, {
 									wrap: !0,
 									gap: "1.5",
 									children: v.map(w)
@@ -395,17 +395,17 @@ function R({ onInsert: t, templateVariables: n, isLoadingVariables: r = !1, plug
 									let i = D(R[e]?.[n]);
 									return !z.trim() || _ || N(n, z) || i && i.length > 0 ? /* @__PURE__ */ C(p, {
 										gap: "1.5",
-										children: [/* @__PURE__ */ C(f, {
+										children: [/* @__PURE__ */ C(o, {
 											size: "xs",
 											tone: "muted",
 											className: "flex items-center gap-1",
 											children: [
-												d && /* @__PURE__ */ S(d, { className: "h-3 w-3" }),
+												f && /* @__PURE__ */ S(f, { className: "h-3 w-3" }),
 												n.charAt(0).toUpperCase() + n.slice(1),
 												" ",
 												i ? A.itemCount(i.length) : A.noneConfigured
 											]
-										}), L(e, n, i, r, t, z, A, !!_, d)]
+										}), L(e, n, i, r, t, z, A, !!_, f)]
 									}, n) : null;
 								})
 							]

package/dist/components/feedback/alert.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "destructive" | "info" | "success" | "warning" | null | undefined;
+    variant?: "destructive" | "default" | "info" | "success" | "warning" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"h5">): React.JSX.Element;

package/dist/components/feedback/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "brand" | "outline" | "secondary" | "variable" | "formula" | null | undefined;
+    variant?: "destructive" | "default" | "success" | "brand" | "outline" | "secondary" | "variable" | "formula" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeProps = React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;

package/dist/components/feedback/badge.js

@@ -3,10 +3,10 @@ import { Button as t } from "../forms/button.js";
 import { X as n } from "lucide-react";
 import * as r from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { cva as s } from "class-variance-authority";
-import { useRender as c } from "@base-ui/react/use-render";
+import { useRender as s } from "@base-ui/react/use-render";
+import { cva as c } from "class-variance-authority";
 //#region src/components/feedback/badge.tsx
-var l = s("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-ring aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+var l = c("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-ring aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
 	variants: { variant: {
 		default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary-hover",
 		brand: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary-hover",
@@ -19,15 +19,15 @@ var l = s("inline-flex items-center justify-center rounded-full border px-2 py-0
 	} },
 	defaultVariants: { variant: "default" }
 });
-function u({ className: s, variant: u, asChild: d = !1, children: f, onDismiss: p, dismissLabel: m, ref: h, ...g }) {
+function u({ className: c, variant: u, asChild: d = !1, children: f, onDismiss: p, dismissLabel: m, ref: h, ...g }) {
 	let _ = p !== void 0 && !d;
-	return c({
+	return s({
 		defaultTagName: "span",
 		ref: h,
 		render: d ? r.Children.only(f) : void 0,
 		props: {
 			"data-slot": "badge",
-			className: e(l({ variant: u }), _ && ["overflow-visible", "py-1 pe-1 gap-1"], s),
+			className: e(l({ variant: u }), _ && ["overflow-visible", "py-1 pe-1 gap-1"], c),
 			...d ? {} : { children: _ ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("span", {
 				"data-slot": "badge-label",
 				className: "min-w-0 overflow-hidden text-ellipsis",

package/dist/components/feedback/chip.js

@@ -1,23 +1,23 @@
 import { cn as e } from "../../lib/utils.js";
 import * as t from "react";
-import { cva as n } from "class-variance-authority";
-import { useRender as r } from "@base-ui/react/use-render";
+import { useRender as n } from "@base-ui/react/use-render";
+import { cva as r } from "class-variance-authority";
 //#region src/components/feedback/chip.tsx
-var i = n("inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none text-foreground no-underline hover:bg-accent hover:text-accent-foreground hover:border-brand active:bg-secondary focus-ring transition-[color,background-color,border-color,box-shadow] duration-control disabled:pointer-events-none disabled:opacity-50", {
+var i = r("inline-flex items-center justify-center rounded-full border px-2.5 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none text-foreground no-underline hover:bg-accent hover:text-accent-foreground hover:border-brand active:bg-secondary focus-ring transition-[color,background-color,border-color,box-shadow] duration-control disabled:pointer-events-none disabled:opacity-50", {
 	variants: { mono: {
 		true: "font-mono",
 		false: ""
 	} },
 	defaultVariants: { mono: !1 }
 });
-function a({ className: n, mono: a, asChild: o = !1, children: s, ref: c, ...l }) {
-	return r({
+function a({ className: r, mono: a, asChild: o = !1, children: s, ref: c, ...l }) {
+	return n({
 		defaultTagName: "button",
 		ref: c,
 		render: o ? t.Children.only(s) : void 0,
 		props: {
 			"data-slot": "chip",
-			className: e(i({ mono: a }), n),
+			className: e(i({ mono: a }), r),
 			...o ? {} : { children: s },
 			...l
 		}

package/dist/components/feedback/spinner.d.ts

@@ -10,7 +10,7 @@ import * as React from "react";
  *   lg  20px  Button size="lg"  / "icon-lg"  (h-10)
  */
 declare const spinnerVariants: (props?: ({
-    size?: "lg" | "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SpinnerProps extends Omit<React.ComponentProps<"span">, "children">, VariantProps<typeof spinnerVariants> {
     /**

package/dist/components/feedback/status-dot.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const statusDotVariants: (props?: ({
     status?: "info" | "success" | "warning" | "danger" | "neutral" | null | undefined;
-    size?: "lg" | "sm" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
     pulse?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatusDotProps extends Omit<React.ComponentProps<"span">, "children" | "color">, VariantProps<typeof statusDotVariants> {

package/dist/components/forms/button.d.ts

@@ -1,8 +1,8 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "brand" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "lg" | "icon" | "sm" | "default" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "link" | "destructive" | "default" | "brand" | "outline" | "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "lg" | "icon" | "default" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, loading, children, onClick, ref, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/components/forms/button.js

@@ -2,10 +2,10 @@ import { cn as e } from "../../lib/utils.js";
 import { Spinner as t } from "../feedback/spinner.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { cva as a } from "class-variance-authority";
-import { useRender as o } from "@base-ui/react/use-render";
+import { useRender as a } from "@base-ui/react/use-render";
+import { cva as o } from "class-variance-authority";
 //#region src/components/forms/button.tsx
-var s = a("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-control disabled:pointer-events-none disabled:opacity-50 data-[loading]:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-ring aria-invalid:border-destructive", {
+var s = o("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow] duration-control disabled:pointer-events-none disabled:opacity-50 data-[loading]:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 focus-ring aria-invalid:border-destructive", {
 	variants: {
 		variant: {
 			default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover active:bg-primary-active",
@@ -39,7 +39,7 @@ var s = a("inline-flex items-center justify-center gap-2 whitespace-nowrap round
 	lg: "lg",
 	"icon-lg": "lg"
 };
-function l({ className: a, variant: l = "default", size: u = "default", asChild: d = !1, loading: f = !1, children: p, onClick: m, ref: h, ...g }) {
+function l({ className: o, variant: l = "default", size: u = "default", asChild: d = !1, loading: f = !1, children: p, onClick: m, ref: h, ...g }) {
 	let _ = (e) => {
 		if (f) {
 			e.preventDefault(), e.stopPropagation();
@@ -62,7 +62,7 @@ function l({ className: a, variant: l = "default", size: u = "default", asChild:
 			})
 		})]
 	}) : p;
-	return o({
+	return a({
 		defaultTagName: "button",
 		ref: h,
 		render: d ? n.Children.only(p) : void 0,
@@ -73,7 +73,7 @@ function l({ className: a, variant: l = "default", size: u = "default", asChild:
 			className: e(s({
 				variant: l,
 				size: u
-			}), a),
+			}), o),
 			...d ? {} : { children: v },
 			...g,
 			...f ? {

package/dist/components/forms/field.d.ts

@@ -0,0 +1,66 @@
+import * as React from "react";
+export interface FieldProps {
+    /** Localized label text. Rendered as `<Label htmlFor={id}>`. */
+    label: React.ReactNode;
+    /** Helper line, wired to the control through `aria-describedby`. */
+    description?: React.ReactNode;
+    /**
+     * Validation message. REPLACES the description in the description chain (it
+     * does not append to it), sets `aria-invalid` on the control, and renders in
+     * `--destructive`. The description still renders — it is usually the thing
+     * that explains how to fix the error.
+     */
+    error?: React.ReactNode;
+    /**
+     * Marks the field required: renders the asterisk INSIDE the label, adds
+     * {@link FieldProps.requiredLabel} to the accessible name, and sets
+     * `required` on the control.
+     */
+    required?: boolean;
+    /**
+     * Screen-reader text appended to the label when `required` is set. Default
+     * `"(required)"` — user-facing copy, so it is a prop: this package resolves
+     * no i18n and never renders a string an app cannot translate.
+     */
+    requiredLabel?: string;
+    /**
+     * Id for the control. Generated with `useId()` when omitted; a child that
+     * carries its own `id` keeps it, and the label points at that instead.
+     */
+    id?: string;
+    /** Where the description sits relative to the control. @default "below" */
+    descriptionPlacement?: "above" | "below";
+    /**
+     * Layout. `"stacked"` is the settings default; `"inline"` puts the label in
+     * a left column from the `sm` breakpoint up and stacks below it.
+     * @default "stacked"
+     */
+    orientation?: "stacked" | "inline";
+    /**
+     * Exactly one control element. Receives `id`, `aria-describedby`,
+     * `aria-invalid` and `required` — see the file header for what happens when
+     * the child already declares one of them.
+     */
+    children: React.ReactElement;
+    /** Classes for the row wrapper. */
+    className?: string;
+}
+/**
+ * A labelled control with its helper and error text wired to it.
+ *
+ * ```tsx
+ * <Field
+ *   label={t("boardUpdateIntervalLabel")}
+ *   description={t("boardUpdateIntervalDescription")}
+ *   error={errors.pollingInterval}
+ *   required
+ * >
+ *   <Input type="number" min={10} max={3600} value={value} onChange={onChange} />
+ * </Field>
+ * ```
+ *
+ * The child is cloned with the ids and states it needs, so no call site
+ * threads them by hand. See the file header for the argument.
+ */
+declare function Field({ label, description, error, required, requiredLabel, id: idProp, descriptionPlacement, orientation, children, className, }: FieldProps): React.JSX.Element;
+export { Field };