tembro 2.0.5 → 2.1.0

package/dist/components/display/tree-view.js

@@ -1,69 +1,133 @@
 import { cn as e } from "../../lib/utils.js";
 import * as t from "react";
 import { ChevronRightIcon as n } from "lucide-react";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/components/display/tree-view.tsx
-function a({ items: n, defaultExpandedKeys: i = [], expandedKeys: a, onExpandedKeysChange: s, selectedKey: c, onSelect: l, className: u, ...d }) {
-	let [f, p] = t.useState(i), m = a ?? f, h = (e) => {
-		a === void 0 && p(e), s?.(e);
-	}, g = (e) => {
-		h(m.includes(e) ? m.filter((t) => t !== e) : [...m, e]);
-	};
-	return /* @__PURE__ */ r("div", {
+function o({ items: n, defaultExpandedKeys: r = [], expandedKeys: a, onExpandedKeysChange: o, selectedKey: c, onSelect: l, checkedKeys: u, defaultCheckedKeys: f = [], onCheckedKeysChange: p, checkable: m = !1, searchQuery: h, onLoadChildren: g, className: _, ...v }) {
+	let [y, b] = t.useState(r), [x, S] = t.useState(f), C = a ?? y, w = u ?? x, T = h?.trim().toLowerCase(), E = t.useCallback((e) => {
+		a === void 0 && b(e), o?.(e);
+	}, [a, o]), D = (e, t) => {
+		let n = t ? [...new Set([...w, e])] : w.filter((t) => t !== e);
+		u === void 0 && S(n), p?.(n);
+	}, O = t.useCallback((e) => {
+		E(C.includes(e) ? C.filter((t) => t !== e) : [...C, e]);
+	}, [C, E]), k = t.useMemo(() => s(n, C, T), [
+		n,
+		C,
+		T
+	]);
+	return /* @__PURE__ */ i("div", {
 		"data-slot": "tree-view",
 		role: "tree",
-		className: e("grid gap-1 text-sm", u),
-		...d,
-		children: n.map((e) => /* @__PURE__ */ r(o, {
+		className: e("grid gap-1 text-sm", _),
+		onKeyDown: (e) => {
+			let t = e.target.dataset.treeNodeKey;
+			if (!t) return;
+			let n = k.indexOf(t), r = (t) => {
+				if (!t) return;
+				let n = t.replace(/\\/g, "\\\\").replace(/"/g, "\\\"");
+				e.currentTarget.querySelector(`[data-tree-node-key="${n}"]`)?.focus();
+			};
+			e.key === "ArrowDown" ? (e.preventDefault(), r(k[Math.min(n + 1, k.length - 1)])) : e.key === "ArrowUp" ? (e.preventDefault(), r(k[Math.max(n - 1, 0)])) : e.key === "ArrowRight" ? (e.preventDefault(), C.includes(t) || O(t)) : e.key === "ArrowLeft" && (e.preventDefault(), C.includes(t) && O(t)), v.onKeyDown?.(e);
+		},
+		...v,
+		children: n.map((e) => /* @__PURE__ */ i(d, {
 			item: e,
 			level: 1,
-			expandedKeys: m,
+			expandedKeys: C,
 			selectedKey: c,
-			onToggle: g,
-			onSelect: l
+			onToggle: O,
+			onSelect: l,
+			checkedKeys: w,
+			onCheckedChange: D,
+			checkable: m,
+			searchQuery: T,
+			onLoadChildren: g
 		}, e.key))
 	});
 }
-function o({ item: t, level: a, expandedKeys: s, selectedKey: c, onToggle: l, onSelect: u }) {
-	let d = !!t.children?.length, f = s.includes(t.key), p = c === t.key;
-	return /* @__PURE__ */ i("div", {
+function s(e, t, n) {
+	return e.flatMap((e) => l(e, n) ? [e.key, ...e.children && t.includes(e.key) ? s(e.children, t, n) : []] : []);
+}
+function c(e) {
+	return e.searchText ?? (typeof e.label == "string" ? e.label : e.key);
+}
+function l(e, t) {
+	return t ? c(e).toLowerCase().includes(t) || !!e.children?.some((e) => l(e, t)) : !0;
+}
+function u(e, t) {
+	if (!t || typeof e != "string") return e;
+	let n = e.toLowerCase().indexOf(t);
+	return n < 0 ? e : /* @__PURE__ */ a(r, { children: [
+		e.slice(0, n),
+		/* @__PURE__ */ i("mark", {
+			className: "rounded bg-primary/15 px-0.5 text-foreground",
+			children: e.slice(n, n + t.length)
+		}),
+		e.slice(n + t.length)
+	] });
+}
+function d({ item: t, level: r, expandedKeys: o, selectedKey: s, onToggle: f, onSelect: p, checkedKeys: m, onCheckedChange: h, checkable: g, searchQuery: _, onLoadChildren: v }) {
+	if (!l(t, _)) return null;
+	let y = !!t.children?.length || !!v, b = o.includes(t.key), x = s === t.key, S = m.includes(t.key);
+	return /* @__PURE__ */ a("div", {
 		"data-slot": "tree-node",
 		role: "treeitem",
-		"aria-expanded": d ? f : void 0,
-		"aria-selected": p || void 0,
-		children: [/* @__PURE__ */ i("div", {
-			className: e("flex items-center gap-1 rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", p && "bg-muted text-foreground", t.disabled && "pointer-events-none opacity-50"),
-			style: { paddingLeft: `${a * .75}rem` },
+		"aria-expanded": y ? b : void 0,
+		"aria-selected": x || void 0,
+		children: [/* @__PURE__ */ a("div", {
+			className: e("flex items-center gap-1 rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", x && "bg-muted text-foreground", t.disabled && "pointer-events-none opacity-50"),
+			style: { paddingLeft: `${r * .75}rem` },
 			children: [
-				/* @__PURE__ */ r("button", {
+				/* @__PURE__ */ i("button", {
 					type: "button",
-					"aria-label": f ? "Collapse" : "Expand",
-					className: e("flex size-5 items-center justify-center rounded-sm", !d && "invisible"),
-					onClick: () => l(t.key),
-					children: /* @__PURE__ */ r(n, { className: e("size-4 transition-transform", f && "rotate-90") })
+					"aria-label": b ? "Collapse" : "Expand",
+					className: e("flex size-5 items-center justify-center rounded-sm", !y && "invisible"),
+					onClick: () => {
+						!b && !t.children?.length && v?.(t), f(t.key);
+					},
+					children: /* @__PURE__ */ i(n, { className: e("size-4 transition-transform", b && "rotate-90") })
+				}),
+				g && /* @__PURE__ */ i("input", {
+					type: "checkbox",
+					className: "size-4 rounded border-border accent-primary",
+					checked: S,
+					disabled: t.disabled,
+					"aria-label": `Select ${c(t)}`,
+					onChange: (e) => h(t.key, e.currentTarget.checked)
 				}),
 				t.icon,
-				/* @__PURE__ */ r("button", {
+				/* @__PURE__ */ i("button", {
 					type: "button",
-					className: "min-w-0 flex-1 truncate text-left",
-					onClick: () => u?.(t),
-					children: t.label
+					"data-tree-node-key": t.key,
+					className: "min-w-0 flex-1 truncate rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40",
+					disabled: t.disabled,
+					onClick: () => p?.(t),
+					children: u(t.label, _)
 				}),
-				t.extra
+				t.loading ? /* @__PURE__ */ i("span", {
+					className: "text-xs text-muted-foreground",
+					children: "Loading..."
+				}) : t.extra
 			]
-		}), d && f && /* @__PURE__ */ r("div", {
+		}), y && b && /* @__PURE__ */ i("div", {
 			role: "group",
 			className: "grid gap-1",
-			children: t.children?.map((e) => /* @__PURE__ */ r(o, {
+			children: t.children?.map((e) => /* @__PURE__ */ i(d, {
 				item: e,
-				level: a + 1,
-				expandedKeys: s,
-				selectedKey: c,
-				onToggle: l,
-				onSelect: u
+				level: r + 1,
+				expandedKeys: o,
+				selectedKey: s,
+				onToggle: f,
+				onSelect: p,
+				checkedKeys: m,
+				onCheckedChange: h,
+				checkable: g,
+				searchQuery: _,
+				onLoadChildren: v
 			}, e.key))
 		})]
 	});
 }
 //#endregion
-export { a as TreeView };
+export { o as TreeView };

package/dist/components/display/trend-card.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("./delta-badge.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");function o({title:e,value:i,change:o,trend:s,description:c,icon:l,sparkline:u,className:d,...f}){let p=()=>{if(!u||u.length<2)return null;let e=Math.min(...u),t=Math.max(...u)-e||1,n=u.map((n,r)=>`${r/(u.length-1)*100},${100-(n-e)/t*100}`).join(` `),r=s===`up`?`var(--aui-success,var(--primary))`:s===`down`?`var(--destructive)`:`var(--muted-foreground)`;return(0,a.jsx)(`div`,{className:`absolute bottom-0 left-0 right-0 h-12 overflow-hidden opacity-20 pointer-events-none`,children:(0,a.jsxs)(`svg`,{viewBox:`0 0 100 100`,preserveAspectRatio:`none`,className:`w-full h-full stroke-2`,children:[(0,a.jsx)(`polyline`,{points:n,fill:`none`,stroke:r,vectorEffect:`non-scaling-stroke`}),(0,a.jsx)(`polygon`,{points:`0,100 ${n} 100,100`,fill:`color-mix(in srgb, ${r} 20%, transparent)`})]})})};return(0,a.jsxs)(n.Card,{"data-slot":`trend-card`,className:t.cn(`relative overflow-hidden`,d),...f,children:[(0,a.jsxs)(n.CardHeader,{className:`flex flex-row items-center justify-between space-y-0 pb-2`,children:[(0,a.jsx)(n.CardTitle,{className:`text-sm font-medium text-muted-foreground`,children:e}),l&&(0,a.jsx)(`div`,{className:`text-muted-foreground`,children:l})]}),(0,a.jsxs)(n.CardContent,{children:[(0,a.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,a.jsx)(`div`,{className:`text-2xl font-bold`,children:i}),o&&(0,a.jsx)(r.DeltaBadge,{value:o,trend:s})]}),c&&(0,a.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground`,children:c})]}),p()]})}exports.TrendCard=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs"),r=require("./delta-badge.cjs"),i=require("../charts/charts.cjs");let a=require("react");a=e.__toESM(a,1);let o=require("react/jsx-runtime");function s({title:e,value:a,change:s,trend:c,description:l,icon:u,sparkline:d,className:f,...p}){return(0,o.jsxs)(n.Card,{"data-slot":`trend-card`,className:t.cn(`relative overflow-hidden`,f),...p,children:[(0,o.jsxs)(n.CardHeader,{className:`flex flex-row items-center justify-between space-y-0 pb-2`,children:[(0,o.jsx)(n.CardTitle,{className:`text-sm font-medium text-muted-foreground`,children:e}),u&&(0,o.jsx)(`div`,{className:`text-muted-foreground`,children:u})]}),(0,o.jsxs)(n.CardContent,{children:[(0,o.jsxs)(`div`,{className:`flex items-baseline gap-2`,children:[(0,o.jsx)(`div`,{className:`text-2xl font-bold`,children:a}),s&&(0,o.jsx)(r.DeltaBadge,{value:s,trend:c})]}),l&&(0,o.jsx)(`p`,{className:`mt-1 text-xs text-muted-foreground`,children:l})]}),d&&d.length>1?(0,o.jsx)(`div`,{className:`px-6 pb-4`,children:(0,o.jsx)(i.Sparkline,{values:d,positive:c!==`down`})}):null]})}exports.TrendCard=s;

package/dist/components/display/trend-card.js

@@ -1,62 +1,48 @@
 import { cn as e } from "../../lib/utils.js";
 import { Card as t, CardContent as n, CardHeader as r, CardTitle as i } from "../ui/card/index.js";
 import { DeltaBadge as a } from "./delta-badge.js";
+import { Sparkline as o } from "../charts/charts.js";
 import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/components/display/trend-card.tsx
-function c({ title: c, value: l, change: u, trend: d, description: f, icon: p, sparkline: m, className: h, ...g }) {
-	let _ = () => {
-		if (!m || m.length < 2) return null;
-		let e = Math.min(...m), t = Math.max(...m) - e || 1, n = m.map((n, r) => `${r / (m.length - 1) * 100},${100 - (n - e) / t * 100}`).join(" "), r = d === "up" ? "var(--aui-success,var(--primary))" : d === "down" ? "var(--destructive)" : "var(--muted-foreground)";
-		return /* @__PURE__ */ o("div", {
-			className: "absolute bottom-0 left-0 right-0 h-12 overflow-hidden opacity-20 pointer-events-none",
-			children: /* @__PURE__ */ s("svg", {
-				viewBox: "0 0 100 100",
-				preserveAspectRatio: "none",
-				className: "w-full h-full stroke-2",
-				children: [/* @__PURE__ */ o("polyline", {
-					points: n,
-					fill: "none",
-					stroke: r,
-					vectorEffect: "non-scaling-stroke"
-				}), /* @__PURE__ */ o("polygon", {
-					points: `0,100 ${n} 100,100`,
-					fill: `color-mix(in srgb, ${r} 20%, transparent)`
-				})]
-			})
-		});
-	};
-	return /* @__PURE__ */ s(t, {
+function l({ title: l, value: u, change: d, trend: f, description: p, icon: m, sparkline: h, className: g, ..._ }) {
+	return /* @__PURE__ */ c(t, {
 		"data-slot": "trend-card",
-		className: e("relative overflow-hidden", h),
-		...g,
+		className: e("relative overflow-hidden", g),
+		..._,
 		children: [
-			/* @__PURE__ */ s(r, {
+			/* @__PURE__ */ c(r, {
 				className: "flex flex-row items-center justify-between space-y-0 pb-2",
-				children: [/* @__PURE__ */ o(i, {
+				children: [/* @__PURE__ */ s(i, {
 					className: "text-sm font-medium text-muted-foreground",
-					children: c
-				}), p && /* @__PURE__ */ o("div", {
+					children: l
+				}), m && /* @__PURE__ */ s("div", {
 					className: "text-muted-foreground",
-					children: p
+					children: m
 				})]
 			}),
-			/* @__PURE__ */ s(n, { children: [/* @__PURE__ */ s("div", {
+			/* @__PURE__ */ c(n, { children: [/* @__PURE__ */ c("div", {
 				className: "flex items-baseline gap-2",
-				children: [/* @__PURE__ */ o("div", {
+				children: [/* @__PURE__ */ s("div", {
 					className: "text-2xl font-bold",
-					children: l
-				}), u && /* @__PURE__ */ o(a, {
-					value: u,
-					trend: d
+					children: u
+				}), d && /* @__PURE__ */ s(a, {
+					value: d,
+					trend: f
 				})]
-			}), f && /* @__PURE__ */ o("p", {
+			}), p && /* @__PURE__ */ s("p", {
 				className: "mt-1 text-xs text-muted-foreground",
-				children: f
+				children: p
 			})] }),
-			_()
+			h && h.length > 1 ? /* @__PURE__ */ s("div", {
+				className: "px-6 pb-4",
+				children: /* @__PURE__ */ s(o, {
+					values: h,
+					positive: f !== "down"
+				})
+			}) : null
 		]
 	});
 }
 //#endregion
-export { c as TrendCard };
+export { l as TrendCard };

package/dist/components/feedback/alert.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={info:{soft:`border-primary/25 bg-primary/5 text-foreground`,outline:`border-primary/35 bg-background text-foreground`,solid:`border-primary bg-primary text-primary-foreground`},success:{soft:`border-emerald-500/25 bg-emerald-500/10 text-foreground`,outline:`border-emerald-500/35 bg-background text-foreground`,solid:`border-emerald-600 bg-emerald-600 text-white`},warning:{soft:`border-amber-500/30 bg-amber-500/10 text-foreground`,outline:`border-amber-500/35 bg-background text-foreground`,solid:`border-amber-500 bg-amber-500 text-amber-950`},destructive:{soft:`border-destructive/30 bg-destructive/10 text-foreground`,outline:`border-destructive/35 bg-background text-foreground`,solid:`border-destructive bg-destructive text-destructive-foreground`},muted:{soft:`border-border bg-muted/50 text-foreground`,outline:`border-border bg-background text-foreground`,solid:`border-border bg-foreground text-background`}},o={info:`text-primary`,success:`text-emerald-600 dark:text-emerald-400`,warning:`text-amber-600 dark:text-amber-400`,destructive:`text-destructive`,muted:`text-muted-foreground`};function s(e){switch(e){case`success`:return(0,i.jsx)(r.CheckCircle2Icon,{className:`size-4`});case`warning`:return(0,i.jsx)(r.TriangleAlertIcon,{className:`size-4`});case`destructive`:return(0,i.jsx)(r.AlertCircleIcon,{className:`size-4`});default:return(0,i.jsx)(r.InfoIcon,{className:`size-4`})}}function c({tone:e=`info`,variant:n=`soft`,size:r=`md`,title:c,description:l,icon:u,action:d,dismissible:f=!1,dismissLabel:p=`Dismiss alert`,onDismiss:m,className:h,children:g,..._}){return(0,i.jsxs)(`div`,{"data-slot":`alert`,"data-size":r,role:e===`destructive`||e===`warning`?`alert`:`status`,className:t.cn(`flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3`,a[e][n],h),..._,children:[(0,i.jsx)(`div`,{"data-slot":`alert-icon`,className:t.cn(`mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55`,n===`solid`&&`bg-white/12 text-current`,o[e]),children:u??s(e)}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[c&&(0,i.jsx)(`div`,{"data-slot":`alert-title`,className:`font-medium leading-none`,children:c}),(l||g)&&(0,i.jsx)(`div`,{"data-slot":`alert-description`,className:t.cn(`text-muted-foreground`,n===`solid`&&`text-current/88`),children:l??g})]}),d||f?(0,i.jsxs)(`div`,{"data-slot":`alert-action`,className:`flex shrink-0 items-start gap-2`,children:[d,f?(0,i.jsx)(`button`,{type:`button`,"aria-label":p,className:t.cn(`inline-flex size-8 items-center justify-center rounded-full border border-current/10 bg-background/45 text-current transition-opacity hover:opacity-90`,n===`solid`&&`bg-white/12`),onClick:m,children:(0,i.jsx)(`span`,{"aria-hidden":`true`,children:`×`})}):null]}):null]})}exports.Alert=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={info:{soft:`border-primary/25 bg-primary/5 text-foreground`,outline:`border-primary/35 bg-background text-foreground`,solid:`border-primary bg-primary text-primary-foreground`},success:{soft:`border-emerald-500/25 bg-emerald-500/10 text-foreground`,outline:`border-emerald-500/35 bg-background text-foreground`,solid:`border-emerald-600 bg-emerald-600 text-white`},warning:{soft:`border-amber-500/30 bg-amber-500/10 text-foreground`,outline:`border-amber-500/35 bg-background text-foreground`,solid:`border-amber-500 bg-amber-500 text-amber-950`},destructive:{soft:`border-destructive/30 bg-destructive/10 text-foreground`,outline:`border-destructive/35 bg-background text-foreground`,solid:`border-destructive bg-destructive text-destructive-foreground`},muted:{soft:`border-border bg-muted/50 text-foreground`,outline:`border-border bg-background text-foreground`,solid:`border-border bg-foreground text-background`}},o={info:`text-primary`,success:`text-emerald-600 dark:text-emerald-400`,warning:`text-amber-600 dark:text-amber-400`,destructive:`text-destructive`,muted:`text-muted-foreground`};function s(e){switch(e){case`success`:return(0,i.jsx)(r.CheckCircle2Icon,{className:`size-4`});case`warning`:return(0,i.jsx)(r.TriangleAlertIcon,{className:`size-4`});case`destructive`:return(0,i.jsx)(r.AlertCircleIcon,{className:`size-4`});default:return(0,i.jsx)(r.InfoIcon,{className:`size-4`})}}function c({tone:e=`info`,variant:n=`soft`,size:r=`md`,title:c,description:l,icon:u,action:d,dismissible:f=!1,dismissLabel:p=`Dismiss alert`,onDismiss:m,actionsAlign:h=`end`,className:g,children:_,...v}){return(0,i.jsxs)(`div`,{"data-slot":`alert`,"data-size":r,role:e===`destructive`||e===`warning`?`alert`:`status`,className:t.cn(`flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3`,a[e][n],g),...v,children:[(0,i.jsx)(`div`,{"data-slot":`alert-icon`,className:t.cn(`mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-full border border-current/10 bg-background/55`,n===`solid`&&`bg-white/12 text-current`,o[e]),children:u??s(e)}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[c&&(0,i.jsx)(`div`,{"data-slot":`alert-title`,className:`font-medium leading-none`,children:c}),(l||_)&&(0,i.jsx)(`div`,{"data-slot":`alert-description`,className:t.cn(`text-muted-foreground`,n===`solid`&&`text-current/88`),children:l??_})]}),d||f?(0,i.jsxs)(`div`,{"data-slot":`alert-action`,className:t.cn(`flex shrink-0 items-start gap-2`,h===`start`&&`order-[-1] mr-2`),children:[d,f?(0,i.jsx)(`button`,{type:`button`,"aria-label":p,className:t.cn(`inline-flex size-8 items-center justify-center rounded-full border border-current/10 bg-background/45 text-current transition-opacity hover:opacity-90`,n===`solid`&&`bg-white/12`),onClick:m,children:(0,i.jsx)(`span`,{"aria-hidden":`true`,children:`×`})}):null]}):null]})}exports.Alert=c;

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

@@ -11,6 +11,7 @@ export type AlertProps = React.ComponentProps<"div"> & {
     dismissible?: boolean;
     dismissLabel?: string;
     onDismiss?: () => void;
+    actionsAlign?: "start" | "end";
 };
-declare function Alert({ tone, variant, size, title, description, icon, action, dismissible, dismissLabel, onDismiss, className, children, ...props }: AlertProps): React.JSX.Element;
+declare function Alert({ tone, variant, size, title, description, icon, action, dismissible, dismissLabel, onDismiss, actionsAlign, className, children, ...props }: AlertProps): React.JSX.Element;
 export { Alert };

package/dist/components/feedback/alert.js

@@ -44,13 +44,13 @@ function l(e) {
 		default: return /* @__PURE__ */ a(r, { className: "size-4" });
 	}
 }
-function u({ tone: t = "info", variant: n = "soft", size: r = "md", title: i, description: u, icon: d, action: f, dismissible: p = !1, dismissLabel: m = "Dismiss alert", onDismiss: h, className: g, children: _, ...v }) {
+function u({ tone: t = "info", variant: n = "soft", size: r = "md", title: i, description: u, icon: d, action: f, dismissible: p = !1, dismissLabel: m = "Dismiss alert", onDismiss: h, actionsAlign: g = "end", className: _, children: v, ...y }) {
 	return /* @__PURE__ */ o("div", {
 		"data-slot": "alert",
 		"data-size": r,
 		role: t === "destructive" || t === "warning" ? "alert" : "status",
-		className: e("flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3", s[t][n], g),
-		...v,
+		className: e("flex gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border p-4 text-sm shadow-[var(--aui-card-shadow,var(--aui-control-shadow,0_1px_0_rgba(255,255,255,0.05)))] data-[size=sm]:p-3", s[t][n], _),
+		...y,
 		children: [
 			/* @__PURE__ */ a("div", {
 				"data-slot": "alert-icon",
@@ -63,15 +63,15 @@ function u({ tone: t = "info", variant: n = "soft", size: r = "md", title: i, de
 					"data-slot": "alert-title",
 					className: "font-medium leading-none",
 					children: i
-				}), (u || _) && /* @__PURE__ */ a("div", {
+				}), (u || v) && /* @__PURE__ */ a("div", {
 					"data-slot": "alert-description",
 					className: e("text-muted-foreground", n === "solid" && "text-current/88"),
-					children: u ?? _
+					children: u ?? v
 				})]
 			}),
 			f || p ? /* @__PURE__ */ o("div", {
 				"data-slot": "alert-action",
-				className: "flex shrink-0 items-start gap-2",
+				className: e("flex shrink-0 items-start gap-2", g === "start" && "order-[-1] mr-2"),
 				children: [f, p ? /* @__PURE__ */ a("button", {
 					type: "button",
 					"aria-label": m,

package/dist/components/feedback/loading-state.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a({className:e,label:n=`Loading...`,description:a,icon:o,...s}){return(0,i.jsxs)(`div`,{"data-slot":`loading-state`,className:t.cn(`flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4`,e),...s,children:[(0,i.jsx)(`div`,{className:`flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]`,children:o??(0,i.jsx)(r.Loader2Icon,{className:`size-5 animate-spin`})}),(0,i.jsxs)(`div`,{className:`grid gap-1.5`,children:[n&&(0,i.jsx)(`div`,{className:`text-base font-semibold tracking-tight text-foreground`,children:n}),a&&(0,i.jsx)(`p`,{className:`max-w-sm text-sm leading-6`,children:a})]})]})}exports.LoadingState=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a({className:e,label:n=`Loading...`,description:a,icon:o,variant:s=`spinner`,progress:c,...l}){return(0,i.jsxs)(`div`,{"data-slot":`loading-state`,className:t.cn(`flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4`,e),...l,children:[s===`skeleton`?(0,i.jsxs)(`div`,{className:`grid gap-3`,children:[(0,i.jsx)(`div`,{className:`h-4 w-32 animate-pulse rounded bg-muted`}),(0,i.jsx)(`div`,{className:`h-24 w-64 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70`})]}):(0,i.jsx)(`div`,{className:`flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]`,children:o??(0,i.jsx)(r.Loader2Icon,{className:`size-5 animate-spin`})}),(0,i.jsxs)(`div`,{className:`grid gap-1.5`,children:[n&&(0,i.jsx)(`div`,{className:`text-base font-semibold tracking-tight text-foreground`,children:n}),a&&(0,i.jsx)(`p`,{className:`max-w-sm text-sm leading-6`,children:a}),s===`progress`&&typeof c==`number`?(0,i.jsx)(`div`,{className:`mx-auto mt-2 h-2 w-full max-w-xs overflow-hidden rounded-full bg-muted/80`,children:(0,i.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${Math.min(Math.max(c,0),100)}%`}})}):null]})]})}exports.LoadingState=a;

package/dist/components/feedback/loading-state.d.ts

@@ -3,6 +3,8 @@ export type LoadingStateProps = React.ComponentProps<"div"> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
     icon?: React.ReactNode;
+    variant?: "spinner" | "skeleton" | "progress";
+    progress?: number;
 };
-declare function LoadingState({ className, label, description, icon, ...props }: LoadingStateProps): React.JSX.Element;
+declare function LoadingState({ className, label, description, icon, variant, progress, ...props }: LoadingStateProps): React.JSX.Element;
 export { LoadingState };

package/dist/components/feedback/loading-state.js

@@ -3,23 +3,36 @@ import "react";
 import { Loader2Icon as t } from "lucide-react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/feedback/loading-state.tsx
-function i({ className: i, label: a = "Loading...", description: o, icon: s, ...c }) {
+function i({ className: i, label: a = "Loading...", description: o, icon: s, variant: c = "spinner", progress: l, ...u }) {
 	return /* @__PURE__ */ r("div", {
 		"data-slot": "loading-state",
 		className: e("flex min-h-52 flex-col items-center justify-center gap-4 rounded-[var(--radius-3xl)] border border-border/75 bg-muted/25 p-10 text-center text-muted-foreground shadow-sm ring-1 ring-foreground/4", i),
-		...c,
-		children: [/* @__PURE__ */ n("div", {
+		...u,
+		children: [c === "skeleton" ? /* @__PURE__ */ r("div", {
+			className: "grid gap-3",
+			children: [/* @__PURE__ */ n("div", { className: "h-4 w-32 animate-pulse rounded bg-muted" }), /* @__PURE__ */ n("div", { className: "h-24 w-64 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" })]
+		}) : /* @__PURE__ */ n("div", {
 			className: "flex size-12 items-center justify-center rounded-full border border-border/70 bg-background/92 shadow-[0_1px_0_rgba(255,255,255,0.08)]",
 			children: s ?? /* @__PURE__ */ n(t, { className: "size-5 animate-spin" })
 		}), /* @__PURE__ */ r("div", {
 			className: "grid gap-1.5",
-			children: [a && /* @__PURE__ */ n("div", {
-				className: "text-base font-semibold tracking-tight text-foreground",
-				children: a
-			}), o && /* @__PURE__ */ n("p", {
-				className: "max-w-sm text-sm leading-6",
-				children: o
-			})]
+			children: [
+				a && /* @__PURE__ */ n("div", {
+					className: "text-base font-semibold tracking-tight text-foreground",
+					children: a
+				}),
+				o && /* @__PURE__ */ n("p", {
+					className: "max-w-sm text-sm leading-6",
+					children: o
+				}),
+				c === "progress" && typeof l == "number" ? /* @__PURE__ */ n("div", {
+					className: "mx-auto mt-2 h-2 w-full max-w-xs overflow-hidden rounded-full bg-muted/80",
+					children: /* @__PURE__ */ n("div", {
+						className: "h-full rounded-full bg-primary",
+						style: { width: `${Math.min(Math.max(l, 0), 100)}%` }
+					})
+				}) : null
+			]
 		})]
 	});
 }

package/dist/components/feedback/page-state.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e){switch(e){case`loading`:return(0,a.jsx)(i.Loader2Icon,{className:`size-8 animate-spin`});case`error`:return(0,a.jsx)(i.AlertCircleIcon,{className:`size-8`});case`success`:return(0,a.jsx)(i.CheckCircle2Icon,{className:`size-8`});case`info`:return(0,a.jsx)(i.InfoIcon,{className:`size-8`});default:return(0,a.jsx)(i.SearchXIcon,{className:`size-8`})}}function s({tone:e=`empty`,title:n,description:r,icon:i,action:s,compact:c=!1,className:l,...u}){return(0,a.jsxs)(`div`,{"data-slot":`page-state`,role:e===`error`?`alert`:`status`,className:t.cn(`flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4`,c?`gap-2 p-6`:`min-h-72 gap-4 p-10`,l),...u,children:[(0,a.jsx)(`div`,{className:`flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]`,children:i??o(e)}),(0,a.jsxs)(`div`,{className:`grid gap-1`,children:[n&&(0,a.jsx)(`div`,{className:`text-base font-semibold tracking-tight text-foreground`,children:n}),r&&(0,a.jsx)(`div`,{className:`max-w-md text-sm leading-6 text-muted-foreground`,children:r})]}),s&&(0,a.jsx)(`div`,{children:s})]})}function c({retryLabel:e=`Retry`,onRetry:r,action:i,className:o,...c}){return(0,a.jsx)(s,{compact:!0,className:t.cn(`min-h-0`,o),action:i??(r?(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:r,children:e}):void 0),...c})}exports.InlineState=c,exports.PageState=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o(e){switch(e){case`loading`:return(0,a.jsx)(i.Loader2Icon,{className:`size-8 animate-spin`});case`error`:return(0,a.jsx)(i.AlertCircleIcon,{className:`size-8`});case`success`:return(0,a.jsx)(i.CheckCircle2Icon,{className:`size-8`});case`info`:return(0,a.jsx)(i.InfoIcon,{className:`size-8`});default:return(0,a.jsx)(i.SearchXIcon,{className:`size-8`})}}function s({tone:e=`empty`,title:n,description:r,icon:i,action:s,extra:c,compact:l=!1,className:u,...d}){return(0,a.jsxs)(`div`,{"data-slot":`page-state`,role:e===`error`?`alert`:`status`,className:t.cn(`flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4`,l?`gap-2 p-6`:`min-h-72 gap-4 p-10`,u),...d,children:[(0,a.jsx)(`div`,{className:`flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]`,children:i??o(e)}),(0,a.jsxs)(`div`,{className:`grid gap-1`,children:[n&&(0,a.jsx)(`div`,{className:`text-base font-semibold tracking-tight text-foreground`,children:n}),r&&(0,a.jsx)(`div`,{className:`max-w-md text-sm leading-6 text-muted-foreground`,children:r})]}),s||c?(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center justify-center gap-2`,children:[s,c]}):null]})}function c({retryLabel:e=`Retry`,onRetry:r,action:i,className:o,...c}){return(0,a.jsx)(s,{compact:!0,className:t.cn(`min-h-0`,o),action:i??(r?(0,a.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,onClick:r,children:e}):void 0),...c})}exports.InlineState=c,exports.PageState=s;

package/dist/components/feedback/page-state.d.ts

@@ -6,9 +6,10 @@ export type PageStateProps = Omit<React.ComponentProps<"div">, "title"> & {
     description?: React.ReactNode;
     icon?: React.ReactNode;
     action?: React.ReactNode;
+    extra?: React.ReactNode;
     compact?: boolean;
 };
-declare function PageState({ tone, title, description, icon, action, compact, className, ...props }: PageStateProps): React.JSX.Element;
+declare function PageState({ tone, title, description, icon, action, extra, compact, className, ...props }: PageStateProps): React.JSX.Element;
 export type InlineStateProps = Omit<PageStateProps, "compact"> & {
     retryLabel?: React.ReactNode;
     onRetry?: () => void;

package/dist/components/feedback/page-state.js

@@ -13,12 +13,12 @@ function l(e) {
 		default: return /* @__PURE__ */ s(o, { className: "size-8" });
 	}
 }
-function u({ tone: t = "empty", title: n, description: r, icon: i, action: a, compact: o = !1, className: u, ...d }) {
+function u({ tone: t = "empty", title: n, description: r, icon: i, action: a, extra: o, compact: u = !1, className: d, ...f }) {
 	return /* @__PURE__ */ c("div", {
 		"data-slot": "page-state",
 		role: t === "error" ? "alert" : "status",
-		className: e("flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4", o ? "gap-2 p-6" : "min-h-72 gap-4 p-10", u),
-		...d,
+		className: e("flex flex-col items-center justify-center rounded-[var(--radius-3xl)] border border-border/75 bg-card/96 text-center shadow-sm ring-1 ring-foreground/4", u ? "gap-2 p-6" : "min-h-72 gap-4 p-10", d),
+		...f,
 		children: [
 			/* @__PURE__ */ s("div", {
 				className: "flex size-14 items-center justify-center rounded-full border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]",
@@ -34,7 +34,10 @@ function u({ tone: t = "empty", title: n, description: r, icon: i, action: a, co
 					children: r
 				})]
 			}),
-			a && /* @__PURE__ */ s("div", { children: a })
+			a || o ? /* @__PURE__ */ c("div", {
+				className: "flex flex-wrap items-center justify-center gap-2",
+				children: [a, o]
+			}) : null
 		]
 	});
 }

package/dist/components/form/form-field-shell.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a(e,t={}){let n=`${e}-label`,r=`${e}-description`,i=`${e}-error`;return{labelId:n,descriptionId:r,errorId:i,describedBy:[t.description?r:null,t.error?i:null].filter(Boolean).join(` `)||void 0}}var o={vertical:`grid gap-2`,horizontal:`grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5`,inline:`flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4`};function s({className:e,label:n,description:a,error:s,required:c=!1,htmlFor:l,labelId:u,descriptionId:d,errorId:f,layout:p=`vertical`,descriptionPosition:m=`top`,labelAction:h,requiredIndicator:g=(0,i.jsx)(`span`,{className:`ml-1 text-destructive`,children:`*`}),errorIcon:_,showErrorIcon:v=!0,disabled:y=!1,readOnly:b=!1,labelClassName:x,labelRowClassName:S,descriptionClassName:C,errorClassName:w,contentClassName:T,children:E,...D}){let O=!!(n||h),k=a&&m===`top`,A=a&&m===`bottom`,j=_??(0,i.jsx)(r.AlertCircleIcon,{className:`size-3.5`}),M=O?(0,i.jsxs)(`div`,{"data-slot":`form-field-label-row`,className:t.cn(`flex min-w-0 items-center justify-between gap-3`,p===`inline`&&`sm:w-auto`,S),children:[n?(0,i.jsxs)(`label`,{"data-slot":`form-field-label`,htmlFor:l,id:u,className:t.cn(`min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground`,y&&`cursor-not-allowed opacity-60`,b&&`opacity-80`,x),children:[n,c&&g]}):(0,i.jsx)(`span`,{}),h&&(0,i.jsx)(`div`,{"data-slot":`form-field-label-action`,className:`shrink-0 text-sm`,children:h})]}):null,N=a?(0,i.jsx)(`p`,{"data-slot":`form-field-description`,id:d,className:t.cn(`text-sm leading-6 text-muted-foreground`,y&&`opacity-60`,C),children:a}):null,P=(0,i.jsx)(`div`,{"data-slot":`form-field-content`,className:t.cn(`min-w-0 space-y-2`,T),children:E}),F=s?(0,i.jsxs)(`p`,{"data-slot":`form-field-error`,id:f,role:`alert`,"aria-live":`polite`,className:t.cn(`flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive`,w),children:[v&&(0,i.jsx)(`span`,{className:`mt-1 shrink-0`,children:j}),(0,i.jsx)(`span`,{className:`min-w-0`,children:s})]}):null;return(0,i.jsx)(`div`,{"data-slot":`form-field-shell`,"data-layout":p,"data-invalid":!!s||void 0,"data-disabled":y||void 0,"data-readonly":b||void 0,"aria-disabled":y||void 0,className:t.cn(o[p],`rounded-[var(--radius-2xl)]`,e),...D,children:p===`horizontal`?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`div`,{className:`grid gap-2 sm:pt-2.5`,children:[M,k&&N]}),(0,i.jsxs)(`div`,{className:`grid min-w-0 gap-2`,children:[P,A&&N,F]})]}):p===`inline`?(0,i.jsxs)(i.Fragment,{children:[M,(0,i.jsxs)(`div`,{className:`grid min-w-0 flex-1 gap-2`,children:[k&&N,P,A&&N,F]})]}):(0,i.jsxs)(i.Fragment,{children:[M,k&&N,P,A&&N,F]})})}exports.FormFieldShell=s,exports.resolveFormFieldIds=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");function a(e,t={}){let n=`${e}-label`,r=`${e}-description`,i=`${e}-error`;return{labelId:n,descriptionId:r,errorId:i,describedBy:[t.description?r:null,t.error?i:null].filter(Boolean).join(` `)||void 0}}var o={vertical:`grid gap-2`,horizontal:`grid gap-2 sm:grid-cols-[minmax(0,12rem)_1fr] sm:items-start sm:gap-5`,inline:`flex flex-col gap-2 sm:flex-row sm:items-center sm:gap-4`};function s({className:e,label:n,description:a,error:s,success:c,loading:l=!1,required:u=!1,htmlFor:d,labelId:f,descriptionId:p,errorId:m,layout:h=`vertical`,descriptionPosition:g=`top`,labelAction:_,requiredIndicator:v=(0,i.jsx)(`span`,{className:`ml-1 text-destructive`,children:`*`}),errorIcon:y,showErrorIcon:b=!0,disabled:x=!1,readOnly:S=!1,labelClassName:C,labelRowClassName:w,descriptionClassName:T,errorClassName:E,contentClassName:D,children:O,...k}){let A=!!(n||_),j=a&&g===`top`,M=a&&g===`bottom`,N=y??(0,i.jsx)(r.AlertCircleIcon,{className:`size-3.5`}),P=A?(0,i.jsxs)(`div`,{"data-slot":`form-field-label-row`,className:t.cn(`flex min-w-0 items-center justify-between gap-3`,h===`inline`&&`sm:w-auto`,w),children:[n?(0,i.jsxs)(`label`,{"data-slot":`form-field-label`,htmlFor:d,id:f,className:t.cn(`min-w-0 text-sm font-semibold leading-none tracking-tight text-foreground`,x&&`cursor-not-allowed opacity-60`,S&&`opacity-80`,C),children:[n,u&&v]}):(0,i.jsx)(`span`,{}),_&&(0,i.jsx)(`div`,{"data-slot":`form-field-label-action`,className:`shrink-0 text-sm`,children:_})]}):null,F=a?(0,i.jsx)(`p`,{"data-slot":`form-field-description`,id:p,className:t.cn(`text-sm leading-6 text-muted-foreground`,x&&`opacity-60`,T),children:a}):null,I=(0,i.jsx)(`div`,{"data-slot":`form-field-content`,className:t.cn(`min-w-0 space-y-2`,D),children:O}),L=s?(0,i.jsxs)(`p`,{"data-slot":`form-field-error`,id:m,role:`alert`,"aria-live":`polite`,className:t.cn(`flex items-start gap-2 rounded-[min(var(--radius-xl),16px)] border border-destructive/18 bg-destructive/8 px-3 py-2 text-sm font-medium leading-6 text-destructive`,E),children:[b&&(0,i.jsx)(`span`,{className:`mt-1 shrink-0`,children:N}),(0,i.jsx)(`span`,{className:`min-w-0`,children:s})]}):null,R=c&&!s?(0,i.jsx)(`p`,{"data-slot":`form-field-success`,className:`rounded-[min(var(--radius-xl),16px)] border border-emerald-500/18 bg-emerald-500/8 px-3 py-2 text-sm font-medium leading-6 text-emerald-700 dark:text-emerald-300`,children:c}):null,z=l?(0,i.jsx)(`p`,{"data-slot":`form-field-loading`,className:`text-sm leading-6 text-muted-foreground`,children:`Loading...`}):null;return(0,i.jsx)(`div`,{"data-slot":`form-field-shell`,"data-layout":h,"data-invalid":!!s||void 0,"data-success":!!(c&&!s)||void 0,"data-loading":l||void 0,"data-disabled":x||void 0,"data-readonly":S||void 0,"aria-disabled":x||void 0,className:t.cn(o[h],`rounded-[var(--radius-2xl)]`,e),...k,children:h===`horizontal`?(0,i.jsxs)(i.Fragment,{children:[(0,i.jsxs)(`div`,{className:`grid gap-2 sm:pt-2.5`,children:[P,j&&F]}),(0,i.jsxs)(`div`,{className:`grid min-w-0 gap-2`,children:[I,z,M&&F,R,L]})]}):h===`inline`?(0,i.jsxs)(i.Fragment,{children:[P,(0,i.jsxs)(`div`,{className:`grid min-w-0 flex-1 gap-2`,children:[j&&F,I,z,M&&F,R,L]})]}):(0,i.jsxs)(i.Fragment,{children:[P,j&&F,I,z,M&&F,R,L]})})}exports.FormFieldShell=s,exports.resolveFormFieldIds=a;

package/dist/components/form/form-field-shell.d.ts

@@ -5,6 +5,8 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
     label?: React.ReactNode;
     description?: React.ReactNode;
     error?: React.ReactNode;
+    success?: React.ReactNode;
+    loading?: boolean;
     required?: boolean;
     htmlFor?: string;
     labelId?: string;
@@ -24,7 +26,7 @@ export type FormFieldShellProps = React.ComponentProps<"div"> & {
     errorClassName?: string;
     contentClassName?: string;
 };
-export type FormFieldShellControlProps = Pick<FormFieldShellProps, "label" | "description" | "required" | "className" | "htmlFor" | "labelId" | "descriptionId" | "errorId" | "layout" | "descriptionPosition" | "labelAction" | "requiredIndicator" | "errorIcon" | "showErrorIcon" | "disabled" | "readOnly" | "labelClassName" | "labelRowClassName" | "descriptionClassName" | "errorClassName" | "contentClassName">;
+export type FormFieldShellControlProps = Pick<FormFieldShellProps, "label" | "description" | "success" | "loading" | "required" | "className" | "htmlFor" | "labelId" | "descriptionId" | "errorId" | "layout" | "descriptionPosition" | "labelAction" | "requiredIndicator" | "errorIcon" | "showErrorIcon" | "disabled" | "readOnly" | "labelClassName" | "labelRowClassName" | "descriptionClassName" | "errorClassName" | "contentClassName">;
 export type FormFieldMessageState = {
     description?: React.ReactNode;
     error?: React.ReactNode;
@@ -36,5 +38,5 @@ export type FormFieldResolvedIds = {
     describedBy?: string;
 };
 declare function resolveFormFieldIds(id: string, state?: FormFieldMessageState): FormFieldResolvedIds;
-declare function FormFieldShell({ className, label, description, error, required, htmlFor, labelId, descriptionId, errorId, layout, descriptionPosition, labelAction, requiredIndicator, errorIcon, showErrorIcon, disabled, readOnly, labelClassName, labelRowClassName, descriptionClassName, errorClassName, contentClassName, children, ...props }: FormFieldShellProps): React.JSX.Element;
+declare function FormFieldShell({ className, label, description, error, success, loading, required, htmlFor, labelId, descriptionId, errorId, layout, descriptionPosition, labelAction, requiredIndicator, errorIcon, showErrorIcon, disabled, readOnly, labelClassName, labelRowClassName, descriptionClassName, errorClassName, contentClassName, children, ...props }: FormFieldShellProps): React.JSX.Element;
 export { FormFieldShell, resolveFormFieldIds };