tembro 2.0.3 → 2.0.5

package/dist/components/display/carousel.d.ts

@@ -11,8 +11,17 @@ export type CarouselProps = React.ComponentProps<"div"> & {
     ariaLabel?: string;
     previousLabel?: string;
     nextLabel?: string;
+    swipeThreshold?: number;
+    autoplay?: boolean;
+    autoplayInterval?: number;
+    pauseOnHover?: boolean;
+    stopAutoplayOnInteraction?: boolean;
+    showPlaybackControl?: boolean;
+    playLabel?: string;
+    pauseLabel?: string;
+    onAutoplayChange?: (playing: boolean) => void;
 };
 export type CarouselItemProps = React.ComponentProps<"div">;
-declare function Carousel({ index, defaultIndex, onIndexChange, loop, variant, showDots, showArrows, keyboard, ariaLabel, previousLabel, nextLabel, className, children, ...props }: CarouselProps): React.JSX.Element;
+declare function Carousel({ index, defaultIndex, onIndexChange, loop, variant, showDots, showArrows, keyboard, ariaLabel, previousLabel, nextLabel, swipeThreshold, autoplay, autoplayInterval, pauseOnHover, stopAutoplayOnInteraction, showPlaybackControl, playLabel, pauseLabel, onAutoplayChange, className, children, ...props }: CarouselProps): React.JSX.Element;
 declare function CarouselItem({ className, ...props }: CarouselItemProps): React.JSX.Element;
 export { Carousel, CarouselItem };

package/dist/components/display/carousel.js

@@ -7,61 +7,106 @@ import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
 function c(e, t, n) {
 	return t <= 0 ? 0 : n ? (e % t + t) % t : Math.min(Math.max(e, 0), t - 1);
 }
-function l({ index: l, defaultIndex: u = 0, onIndexChange: d, loop: f = !1, variant: p = "default", showDots: m = !0, showArrows: h = !0, keyboard: g = !0, ariaLabel: _ = "Carousel", previousLabel: v = "Previous slide", nextLabel: y = "Next slide", className: b, children: x, ...S }) {
-	let C = n.Children.toArray(x), [w, T] = n.useState(u), E = l !== void 0, D = c(E ? l : w, C.length, f);
-	function O(e) {
-		let t = c(e, C.length, f);
-		E || T(t), d?.(t);
+function l({ index: l, defaultIndex: u = 0, onIndexChange: d, loop: f = !1, variant: p = "default", showDots: m = !0, showArrows: h = !0, keyboard: g = !0, ariaLabel: _ = "Carousel", previousLabel: v = "Previous slide", nextLabel: y = "Next slide", swipeThreshold: b = 44, autoplay: x = !1, autoplayInterval: S = 4500, pauseOnHover: C = !0, stopAutoplayOnInteraction: w = !0, showPlaybackControl: T = !1, playLabel: E = "Start autoplay", pauseLabel: D = "Pause autoplay", onAutoplayChange: O, className: k, children: A, ...j }) {
+	let M = n.Children.toArray(A), [N, P] = n.useState(u), F = n.useRef(null), [I, L] = n.useState(!1), [R, z] = n.useState(!1), [B, V] = n.useState(x), H = l !== void 0, U = c(H ? l : N, M.length, f);
+	n.useEffect(() => {
+		V(x);
+	}, [x]);
+	function W(e, t = "manual") {
+		let n = c(e, M.length, f);
+		H || P(n), t === "manual" && w && (z(!0), B && (V(!1), O?.(!1))), d?.(n);
 	}
-	let k = f || D > 0, A = f || D < C.length - 1;
-	return /* @__PURE__ */ s("div", {
+	let G = f || U > 0, K = f || U < M.length - 1;
+	return n.useEffect(() => {
+		if (!B || M.length <= 1 || R || C && I) return;
+		let e = window.setInterval(() => {
+			if (!f && U >= M.length - 1) {
+				W(0, "autoplay");
+				return;
+			}
+			W(U + 1, "autoplay");
+		}, S);
+		return () => {
+			window.clearInterval(e);
+		};
+	}, [
+		U,
+		B,
+		S,
+		R,
+		I,
+		M.length,
+		f,
+		C
+	]), /* @__PURE__ */ s("div", {
 		"data-slot": "carousel",
 		"data-variant": p,
 		role: "region",
 		"aria-roledescription": "carousel",
 		"aria-label": _,
-		className: e("grid gap-3", b),
+		tabIndex: g ? 0 : void 0,
+		className: e("grid gap-3", k),
 		onKeyDown: (e) => {
-			!g || C.length <= 1 || (e.key === "ArrowLeft" && k && (e.preventDefault(), O(D - 1)), e.key === "ArrowRight" && A && (e.preventDefault(), O(D + 1)));
+			!g || M.length <= 1 || (e.key === "ArrowLeft" && G && (e.preventDefault(), W(U - 1)), e.key === "ArrowRight" && K && (e.preventDefault(), W(U + 1)));
 		},
-		...S,
+		onTouchStart: (e) => {
+			F.current = e.touches[0]?.clientX ?? null;
+		},
+		onTouchEnd: (e) => {
+			if (F.current == null || M.length <= 1) return;
+			let t = (e.changedTouches[0]?.clientX ?? F.current) - F.current;
+			F.current = null, !(Math.abs(t) < b) && (t > 0 && G && W(U - 1), t < 0 && K && W(U + 1));
+		},
+		onMouseEnter: () => L(!0),
+		onMouseLeave: () => L(!1),
+		...j,
 		children: [/* @__PURE__ */ s("div", {
 			className: e("relative overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border border-[color:var(--aui-card-border,var(--border))] bg-card shadow-[var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08))]", p === "hero" && "min-h-72", p === "minimal" && "rounded-[var(--radius-md)] shadow-none"),
 			children: [/* @__PURE__ */ o("div", {
 				className: "transition-transform duration-300 ease-out",
 				"aria-live": "polite",
-				children: C[D]
-			}), h && C.length > 1 ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
+				children: M[U]
+			}), h && M.length > 1 ? /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(t, {
 				type: "button",
 				variant: p === "hero" ? "default" : "secondary",
 				size: "icon-sm",
 				className: "absolute left-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg",
-				disabled: !k,
+				disabled: !G,
 				"aria-label": v,
-				onClick: () => O(D - 1),
+				onClick: () => W(U - 1),
 				children: /* @__PURE__ */ o(r, {})
 			}), /* @__PURE__ */ o(t, {
 				type: "button",
 				variant: p === "hero" ? "default" : "secondary",
 				size: "icon-sm",
 				className: "absolute right-3 top-1/2 -translate-y-1/2 rounded-full shadow-lg",
-				disabled: !A,
+				disabled: !K,
 				"aria-label": y,
-				onClick: () => O(D + 1),
+				onClick: () => W(U + 1),
 				children: /* @__PURE__ */ o(i, {})
 			})] }) : null]
-		}), m && C.length > 1 && /* @__PURE__ */ o("div", {
-			className: "flex items-center justify-center gap-2",
+		}), m && M.length > 1 && /* @__PURE__ */ s("div", {
+			className: "flex flex-wrap items-center justify-center gap-2",
 			role: "tablist",
 			"aria-label": `${_} slides`,
-			children: C.map((t, n) => /* @__PURE__ */ o("button", {
+			children: [M.map((t, n) => /* @__PURE__ */ o("button", {
 				type: "button",
 				role: "tab",
 				"aria-label": `Go to slide ${n + 1}`,
-				"aria-selected": n === D,
-				className: e("h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55", n === D ? "w-7 bg-primary" : "w-2.5"),
-				onClick: () => O(n)
-			}, n))
+				"aria-selected": n === U,
+				className: e("h-2.5 rounded-full bg-muted-foreground/30 transition-[width,background-color,opacity] hover:bg-muted-foreground/55", n === U ? "w-7 bg-primary" : "w-2.5"),
+				onClick: () => W(n)
+			}, n)), T ? /* @__PURE__ */ o(t, {
+				type: "button",
+				variant: "ghost",
+				size: "sm",
+				className: "ml-2 rounded-full",
+				onClick: () => {
+					let e = !B;
+					z(!1), V(e), O?.(e);
+				},
+				children: B ? D : E
+			}) : null]
 		})]
 	});
 }

package/dist/components/display/code-block.cjs

@@ -1 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../actions/copy-button.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({code:e,language:r,title:a,showCopy:o=!0,wrap:s=!1,className:c,...l}){return(0,i.jsxs)(`div`,{"data-slot":`code-block`,className:t.cn(`overflow-hidden rounded-lg border bg-card`,c),...l,children:[(a||r||o)&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-b px-3 py-2 text-xs text-muted-foreground`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[a&&(0,i.jsx)(`span`,{className:`truncate font-medium text-foreground`,children:a}),r&&(0,i.jsx)(`span`,{className:`rounded bg-muted px-1.5 py-0.5 font-mono`,children:r})]}),o&&(0,i.jsx)(n.CopyButton,{value:e,size:`sm`,variant:`ghost`,copyLabel:`Copy`,copiedLabel:`Copied`})]}),(0,i.jsx)(`pre`,{className:t.cn(`overflow-x-auto p-3 text-sm`,s&&`whitespace-pre-wrap break-words`),children:(0,i.jsx)(`code`,{children:e})})]})}exports.CodeBlock=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../actions/copy-button.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({code:e,language:a,title:o,showCopy:s=!0,wrap:c=!1,lineNumbers:l=!1,maxHeight:u,className:d,...f}){let p=r.useMemo(()=>e.split(`
+`),[e]);return(0,i.jsxs)(`div`,{"data-slot":`code-block`,className:t.cn(`overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card`,d),...f,children:[(o||a||s)&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between gap-3 border-b border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_72%)] px-3 py-2 text-xs text-muted-foreground`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 items-center gap-2`,children:[o&&(0,i.jsx)(`span`,{className:`truncate font-medium text-foreground`,children:o}),a&&(0,i.jsx)(`span`,{className:`rounded bg-muted px-1.5 py-0.5 font-mono`,children:a})]}),s&&(0,i.jsx)(n.CopyButton,{value:e,size:`sm`,variant:`ghost`,copyLabel:`Copy`,copiedLabel:`Copied`})]}),(0,i.jsx)(`pre`,{className:t.cn(`overflow-x-auto p-3 text-sm leading-6`,c&&`whitespace-pre-wrap break-words`),style:u?{maxHeight:u,overflowY:`auto`}:void 0,children:l?(0,i.jsx)(`code`,{className:`grid`,children:p.map((e,t)=>(0,i.jsxs)(`span`,{className:`grid grid-cols-[auto_1fr] gap-4`,children:[(0,i.jsx)(`span`,{className:`select-none text-right text-xs text-muted-foreground/75`,children:t+1}),(0,i.jsx)(`span`,{children:e||` `})]},`${t}-${e}`))}):(0,i.jsx)(`code`,{children:e})})]})}exports.CodeBlock=a;

package/dist/components/display/code-block.d.ts

@@ -5,6 +5,8 @@ export type CodeBlockProps = React.ComponentProps<"div"> & {
     title?: React.ReactNode;
     showCopy?: boolean;
     wrap?: boolean;
+    lineNumbers?: boolean;
+    maxHeight?: number | string;
 };
-declare function CodeBlock({ code, language, title, showCopy, wrap, className, ...props }: CodeBlockProps): React.JSX.Element;
+declare function CodeBlock({ code, language, title, showCopy, wrap, lineNumbers, maxHeight, className, ...props }: CodeBlockProps): React.JSX.Element;
 export { CodeBlock };

package/dist/components/display/code-block.js

@@ -1,36 +1,50 @@
 import { cn as e } from "../../lib/utils.js";
 import { CopyButton as t } from "../actions/copy-button.js";
-import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import * as n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/display/code-block.tsx
-function i({ code: i, language: a, title: o, showCopy: s = !0, wrap: c = !1, className: l, ...u }) {
-	return /* @__PURE__ */ r("div", {
+function a({ code: a, language: o, title: s, showCopy: c = !0, wrap: l = !1, lineNumbers: u = !1, maxHeight: d, className: f, ...p }) {
+	let m = n.useMemo(() => a.split("\n"), [a]);
+	return /* @__PURE__ */ i("div", {
 		"data-slot": "code-block",
-		className: e("overflow-hidden rounded-lg border bg-card", l),
-		...u,
-		children: [(o || a || s) && /* @__PURE__ */ r("div", {
-			className: "flex items-center justify-between gap-3 border-b px-3 py-2 text-xs text-muted-foreground",
-			children: [/* @__PURE__ */ r("div", {
+		className: e("overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card", f),
+		...p,
+		children: [(s || o || c) && /* @__PURE__ */ i("div", {
+			className: "flex items-center justify-between gap-3 border-b border-[color:var(--aui-card-border,var(--border))] bg-[color:color-mix(in_oklch,var(--muted),transparent_72%)] px-3 py-2 text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ i("div", {
 				className: "flex min-w-0 items-center gap-2",
-				children: [o && /* @__PURE__ */ n("span", {
+				children: [s && /* @__PURE__ */ r("span", {
 					className: "truncate font-medium text-foreground",
-					children: o
-				}), a && /* @__PURE__ */ n("span", {
+					children: s
+				}), o && /* @__PURE__ */ r("span", {
 					className: "rounded bg-muted px-1.5 py-0.5 font-mono",
-					children: a
+					children: o
 				})]
-			}), s && /* @__PURE__ */ n(t, {
-				value: i,
+			}), c && /* @__PURE__ */ r(t, {
+				value: a,
 				size: "sm",
 				variant: "ghost",
 				copyLabel: "Copy",
 				copiedLabel: "Copied"
 			})]
-		}), /* @__PURE__ */ n("pre", {
-			className: e("overflow-x-auto p-3 text-sm", c && "whitespace-pre-wrap break-words"),
-			children: /* @__PURE__ */ n("code", { children: i })
+		}), /* @__PURE__ */ r("pre", {
+			className: e("overflow-x-auto p-3 text-sm leading-6", l && "whitespace-pre-wrap break-words"),
+			style: d ? {
+				maxHeight: d,
+				overflowY: "auto"
+			} : void 0,
+			children: u ? /* @__PURE__ */ r("code", {
+				className: "grid",
+				children: m.map((e, t) => /* @__PURE__ */ i("span", {
+					className: "grid grid-cols-[auto_1fr] gap-4",
+					children: [/* @__PURE__ */ r("span", {
+						className: "select-none text-right text-xs text-muted-foreground/75",
+						children: t + 1
+					}), /* @__PURE__ */ r("span", { children: e || " " })]
+				}, `${t}-${e}`))
+			}) : /* @__PURE__ */ r("code", { children: a })
 		})]
 	});
 }
 //#endregion
-export { i as CodeBlock };
+export { a as CodeBlock };

package/dist/components/display/comparison-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,items:i,columns:o=2,className:s,...c}){return(0,a.jsxs)(n.Card,{"data-slot":`comparison-card`,className:s,...c,children:[e&&(0,a.jsx)(n.CardHeader,{className:`pb-3`,children:(0,a.jsx)(n.CardTitle,{className:`text-sm font-medium`,children:e})}),(0,a.jsx)(n.CardContent,{className:t.cn(e?`pt-0`:``),children:(0,a.jsx)(`div`,{className:t.cn(`grid gap-4`,o===2&&`grid-cols-2`,o===3&&`grid-cols-3`,o===4&&`grid-cols-2 sm:grid-cols-4`,!e&&`pt-6`),children:i.map((e,t)=>(0,a.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,a.jsx)(`span`,{className:`text-xs text-muted-foreground`,children:e.label}),(0,a.jsxs)(`div`,{className:`flex items-baseline gap-1.5`,children:[(0,a.jsx)(`span`,{className:`text-lg font-semibold leading-none`,children:e.value}),e.change&&(0,a.jsx)(r.DeltaBadge,{size:`sm`,value:e.change,trend:e.trend})]})]},t))})})]})}exports.ComparisonCard=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../layout/stat-card.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({title:e,items:n,columns:i=2,...a}){return(0,r.jsx)(t.StatCard,{"data-slot":`comparison-card`,title:e,comparisonColumns:i,comparisonItems:n.map(e=>({label:e.label,value:e.value,change:e.change,trend:e.trend===`up`?`success`:e.trend===`down`?`danger`:`neutral`})),...a})}exports.ComparisonCard=i;

package/dist/components/display/comparison-card.d.ts

@@ -1,15 +1,15 @@
 import * as React from "react";
-import { Card } from "@/components/ui/card";
+import { StatCard } from "@/components/layout/stat-card";
 export type ComparisonCardItem = {
     label: React.ReactNode;
     value: React.ReactNode;
     change?: React.ReactNode;
     trend?: "up" | "down" | "neutral";
 };
-export type ComparisonCardProps = React.ComponentProps<typeof Card> & {
+export type ComparisonCardProps = Omit<React.ComponentProps<typeof StatCard>, "comparisonItems" | "comparisonColumns"> & {
     title?: React.ReactNode;
     items: ComparisonCardItem[];
     columns?: 2 | 3 | 4;
 };
-declare function ComparisonCard({ title, items, columns, className, ...props }: ComparisonCardProps): React.JSX.Element;
+declare function ComparisonCard({ title, items, columns, ...props }: ComparisonCardProps): React.JSX.Element;
 export { ComparisonCard };

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

@@ -1,44 +1,20 @@
-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 { StatCard as e } from "../layout/stat-card.js";
 import "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 //#region src/components/display/comparison-card.tsx
-function c({ title: c, items: l, columns: u = 2, className: d, ...f }) {
-	return /* @__PURE__ */ s(t, {
+function n({ title: n, items: r, columns: i = 2, ...a }) {
+	return /* @__PURE__ */ t(e, {
 		"data-slot": "comparison-card",
-		className: d,
-		...f,
-		children: [c && /* @__PURE__ */ o(r, {
-			className: "pb-3",
-			children: /* @__PURE__ */ o(i, {
-				className: "text-sm font-medium",
-				children: c
-			})
-		}), /* @__PURE__ */ o(n, {
-			className: e(c ? "pt-0" : ""),
-			children: /* @__PURE__ */ o("div", {
-				className: e("grid gap-4", u === 2 && "grid-cols-2", u === 3 && "grid-cols-3", u === 4 && "grid-cols-2 sm:grid-cols-4", !c && "pt-6"),
-				children: l.map((e, t) => /* @__PURE__ */ s("div", {
-					className: "flex flex-col gap-1",
-					children: [/* @__PURE__ */ o("span", {
-						className: "text-xs text-muted-foreground",
-						children: e.label
-					}), /* @__PURE__ */ s("div", {
-						className: "flex items-baseline gap-1.5",
-						children: [/* @__PURE__ */ o("span", {
-							className: "text-lg font-semibold leading-none",
-							children: e.value
-						}), e.change && /* @__PURE__ */ o(a, {
-							size: "sm",
-							value: e.change,
-							trend: e.trend
-						})]
-					})]
-				}, t))
-			})
-		})]
+		title: n,
+		comparisonColumns: i,
+		comparisonItems: r.map((e) => ({
+			label: e.label,
+			value: e.value,
+			change: e.change,
+			trend: e.trend === "up" ? "success" : e.trend === "down" ? "danger" : "neutral"
+		})),
+		...a
 	});
 }
 //#endregion
-export { c as ComparisonCard };
+export { n as ComparisonCard };

package/dist/components/display/data-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"),r=require("../ui/card/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s={idle:{title:`Ready`,description:`No action has started yet.`,icon:(0,o.jsx)(a.CheckCircle2Icon,{})},loading:{title:`Loading`,description:`Please wait while data is being prepared.`,icon:(0,o.jsx)(a.Loader2Icon,{className:`animate-spin`})},empty:{title:`No data`,description:`There is nothing to show yet.`,icon:(0,o.jsx)(a.SearchXIcon,{})},error:{title:`Something went wrong`,description:`Try again or check the request.`,icon:(0,o.jsx)(a.AlertTriangleIcon,{})},success:{title:`Ready`,description:`Data loaded successfully.`,icon:(0,o.jsx)(a.CheckCircle2Icon,{})}};function c({status:e,title:i,description:a,actions:c,icon:l,compact:u=!1,children:d,retryLabel:f=`Retry`,onRetry:p,className:m,...h}){let g=s[e];return(0,o.jsx)(r.Card,{"data-slot":`data-state`,"data-status":e,className:t.cn(`min-w-0 border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4`,m),...h,children:(0,o.jsxs)(r.CardContent,{className:t.cn(`flex flex-col items-center justify-center text-center`,u?`p-4`:`min-h-52 p-8`),children:[(0,o.jsx)(`div`,{className:t.cn(`mb-3 flex 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)] [&_svg]:size-5`,u?`size-9`:`size-12`),children:l??g.icon}),(0,o.jsx)(`div`,{className:t.cn(`font-semibold tracking-tight text-foreground`,u?`text-sm`:`text-base`),children:i??g.title}),(0,o.jsx)(`p`,{className:`mt-1 max-w-md text-sm text-muted-foreground`,children:a??g.description}),d&&(0,o.jsx)(`div`,{className:`mt-4 w-full`,children:d}),(c||p)&&(0,o.jsxs)(`div`,{className:`mt-4 flex flex-wrap justify-center gap-2`,children:[p&&(0,o.jsx)(n.Button,{size:`sm`,variant:e===`error`?`default`:`outline`,onClick:p,children:f}),c]})]})})}exports.DataState=c;
+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"),r=require("../ui/card/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");var s={idle:{title:`Ready`,description:`No action has started yet.`,icon:(0,o.jsx)(a.CheckCircle2Icon,{})},loading:{title:`Loading`,description:`Please wait while data is being prepared.`,icon:(0,o.jsx)(a.Loader2Icon,{className:`animate-spin`})},empty:{title:`No data`,description:`There is nothing to show yet.`,icon:(0,o.jsx)(a.SearchXIcon,{})},error:{title:`Something went wrong`,description:`Try again or check the request.`,icon:(0,o.jsx)(a.AlertTriangleIcon,{})},success:{title:`Ready`,description:`Data loaded successfully.`,icon:(0,o.jsx)(a.CheckCircle2Icon,{})}},c={default:`text-muted-foreground`,muted:`text-muted-foreground`,success:`text-emerald-600 dark:text-emerald-400`,warning:`text-amber-600 dark:text-amber-400`,danger:`text-destructive`,info:`text-blue-600 dark:text-blue-400`};function l({status:e,title:i,description:l,badge:u,actions:d,footer:f,icon:p,tone:m,variant:h=`card`,compact:g=!1,align:_=`center`,query:v,children:y,retryLabel:b=`Retry`,onRetry:x,clearLabel:S=`Clear`,onClear:C,className:w,...T}){let E=s[e],D=m??(e===`error`?`danger`:e===`success`?`success`:`default`),O=h===`plain`||h===`inline`,k=(0,o.jsxs)(`div`,{className:t.cn(`flex flex-col justify-center`,_===`center`?`items-center text-center`:`items-start text-left`,g||h===`inline`?`p-4`:`min-h-52 p-8`),children:[(0,o.jsx)(`div`,{className:t.cn(`mb-3 flex items-center justify-center rounded-full border border-border/70 bg-muted/45 shadow-[0_1px_0_rgba(255,255,255,0.05)] [&_svg]:size-5`,c[D],g||h===`inline`?`size-9`:`size-12`),children:p??E.icon}),(0,o.jsxs)(`div`,{className:t.cn(`flex flex-wrap items-center gap-2`,_===`center`?`justify-center`:`justify-start`),children:[(0,o.jsx)(`div`,{className:t.cn(`font-semibold tracking-tight text-foreground`,g?`text-sm`:`text-base`),children:i??E.title}),u]}),(0,o.jsx)(`p`,{className:`mt-1 max-w-md text-sm text-muted-foreground`,children:l??E.description}),v&&(0,o.jsx)(`div`,{className:`mt-3 max-w-full rounded-md border border-border/70 bg-muted/45 px-2.5 py-1 text-sm text-muted-foreground`,children:v}),y&&(0,o.jsx)(`div`,{className:`mt-4 w-full`,children:y}),(d||x||C)&&(0,o.jsxs)(`div`,{className:t.cn(`mt-4 flex flex-wrap gap-2`,_===`center`?`justify-center`:`justify-start`),children:[x&&(0,o.jsx)(n.Button,{size:`sm`,variant:e===`error`?`default`:`outline`,onClick:x,children:b}),C&&(0,o.jsxs)(n.Button,{size:`sm`,variant:`ghost`,onClick:C,children:[(0,o.jsx)(a.XIcon,{"data-icon":`inline-start`}),S]}),d]}),f?(0,o.jsx)(`div`,{className:`mt-4 w-full`,children:f}):null]});return O?(0,o.jsx)(`div`,{"data-slot":`data-state`,"data-status":e,"data-variant":h,className:t.cn(h===`inline`?`rounded-lg border border-border/70 bg-muted/20`:`min-w-0`,w),...T,children:k}):(0,o.jsx)(r.Card,{"data-slot":`data-state`,"data-status":e,"data-variant":h,className:t.cn(`min-w-0 border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4`,w),...T,children:(0,o.jsx)(r.CardContent,{className:`p-0`,children:k})})}exports.DataState=l;

package/dist/components/display/data-state.d.ts

@@ -1,16 +1,26 @@
 import * as React from "react";
 import { Card } from "@/components/ui/card";
 export type DataStateStatus = "idle" | "loading" | "empty" | "error" | "success";
-export type DataStateProps = React.ComponentProps<typeof Card> & {
+export type DataStateVariant = "card" | "plain" | "inline";
+export type DataStateTone = "default" | "muted" | "success" | "warning" | "danger" | "info";
+export type DataStateProps = Omit<React.ComponentProps<typeof Card>, "content" | "title" | "description" | "variant" | "tone"> & {
     status: DataStateStatus;
     title?: React.ReactNode;
     description?: React.ReactNode;
+    badge?: React.ReactNode;
     actions?: React.ReactNode;
+    footer?: React.ReactNode;
     icon?: React.ReactNode;
+    tone?: DataStateTone;
+    variant?: DataStateVariant;
     compact?: boolean;
+    align?: "start" | "center";
+    query?: React.ReactNode;
     children?: React.ReactNode;
     retryLabel?: React.ReactNode;
     onRetry?: () => void;
+    clearLabel?: React.ReactNode;
+    onClear?: () => void;
 };
-declare function DataState({ status, title, description, actions, icon, compact, children, retryLabel, onRetry, className, ...props }: DataStateProps): React.JSX.Element;
+declare function DataState({ status, title, description, badge, actions, footer, icon, tone, variant, compact, align, query, children, retryLabel, onRetry, clearLabel, onClear, className, ...props }: DataStateProps): React.JSX.Element;
 export { DataState };

package/dist/components/display/data-state.js

@@ -2,74 +2,112 @@ import { cn as e } from "../../lib/utils.js";
 import { Button as t } from "../ui/button/index.js";
 import { Card as n, CardContent as r } from "../ui/card/index.js";
 import "react";
-import { AlertTriangleIcon as i, CheckCircle2Icon as a, Loader2Icon as o, SearchXIcon as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AlertTriangleIcon as i, CheckCircle2Icon as a, Loader2Icon as o, SearchXIcon as s, XIcon as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/components/display/data-state.tsx
-var u = {
+var d = {
 	idle: {
 		title: "Ready",
 		description: "No action has started yet.",
-		icon: /* @__PURE__ */ c(a, {})
+		icon: /* @__PURE__ */ l(a, {})
 	},
 	loading: {
 		title: "Loading",
 		description: "Please wait while data is being prepared.",
-		icon: /* @__PURE__ */ c(o, { className: "animate-spin" })
+		icon: /* @__PURE__ */ l(o, { className: "animate-spin" })
 	},
 	empty: {
 		title: "No data",
 		description: "There is nothing to show yet.",
-		icon: /* @__PURE__ */ c(s, {})
+		icon: /* @__PURE__ */ l(s, {})
 	},
 	error: {
 		title: "Something went wrong",
 		description: "Try again or check the request.",
-		icon: /* @__PURE__ */ c(i, {})
+		icon: /* @__PURE__ */ l(i, {})
 	},
 	success: {
 		title: "Ready",
 		description: "Data loaded successfully.",
-		icon: /* @__PURE__ */ c(a, {})
+		icon: /* @__PURE__ */ l(a, {})
 	}
+}, f = {
+	default: "text-muted-foreground",
+	muted: "text-muted-foreground",
+	success: "text-emerald-600 dark:text-emerald-400",
+	warning: "text-amber-600 dark:text-amber-400",
+	danger: "text-destructive",
+	info: "text-blue-600 dark:text-blue-400"
 };
-function d({ status: i, title: a, description: o, actions: s, icon: d, compact: f = !1, children: p, retryLabel: m = "Retry", onRetry: h, className: g, ..._ }) {
-	let v = u[i];
-	return /* @__PURE__ */ c(n, {
+function p({ status: i, title: a, description: o, badge: s, actions: p, footer: m, icon: h, tone: g, variant: _ = "card", compact: v = !1, align: y = "center", query: b, children: x, retryLabel: S = "Retry", onRetry: C, clearLabel: w = "Clear", onClear: T, className: E, ...D }) {
+	let O = d[i], k = g ?? (i === "error" ? "danger" : i === "success" ? "success" : "default"), A = _ === "plain" || _ === "inline", j = /* @__PURE__ */ u("div", {
+		className: e("flex flex-col justify-center", y === "center" ? "items-center text-center" : "items-start text-left", v || _ === "inline" ? "p-4" : "min-h-52 p-8"),
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: e("mb-3 flex items-center justify-center rounded-full border border-border/70 bg-muted/45 shadow-[0_1px_0_rgba(255,255,255,0.05)] [&_svg]:size-5", f[k], v || _ === "inline" ? "size-9" : "size-12"),
+				children: h ?? O.icon
+			}),
+			/* @__PURE__ */ u("div", {
+				className: e("flex flex-wrap items-center gap-2", y === "center" ? "justify-center" : "justify-start"),
+				children: [/* @__PURE__ */ l("div", {
+					className: e("font-semibold tracking-tight text-foreground", v ? "text-sm" : "text-base"),
+					children: a ?? O.title
+				}), s]
+			}),
+			/* @__PURE__ */ l("p", {
+				className: "mt-1 max-w-md text-sm text-muted-foreground",
+				children: o ?? O.description
+			}),
+			b && /* @__PURE__ */ l("div", {
+				className: "mt-3 max-w-full rounded-md border border-border/70 bg-muted/45 px-2.5 py-1 text-sm text-muted-foreground",
+				children: b
+			}),
+			x && /* @__PURE__ */ l("div", {
+				className: "mt-4 w-full",
+				children: x
+			}),
+			(p || C || T) && /* @__PURE__ */ u("div", {
+				className: e("mt-4 flex flex-wrap gap-2", y === "center" ? "justify-center" : "justify-start"),
+				children: [
+					C && /* @__PURE__ */ l(t, {
+						size: "sm",
+						variant: i === "error" ? "default" : "outline",
+						onClick: C,
+						children: S
+					}),
+					T && /* @__PURE__ */ u(t, {
+						size: "sm",
+						variant: "ghost",
+						onClick: T,
+						children: [/* @__PURE__ */ l(c, { "data-icon": "inline-start" }), w]
+					}),
+					p
+				]
+			}),
+			m ? /* @__PURE__ */ l("div", {
+				className: "mt-4 w-full",
+				children: m
+			}) : null
+		]
+	});
+	return A ? /* @__PURE__ */ l("div", {
 		"data-slot": "data-state",
 		"data-status": i,
-		className: e("min-w-0 border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", g),
-		..._,
+		"data-variant": _,
+		className: e(_ === "inline" ? "rounded-lg border border-border/70 bg-muted/20" : "min-w-0", E),
+		...D,
+		children: j
+	}) : /* @__PURE__ */ l(n, {
+		"data-slot": "data-state",
+		"data-status": i,
+		"data-variant": _,
+		className: e("min-w-0 border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", E),
+		...D,
 		children: /* @__PURE__ */ l(r, {
-			className: e("flex flex-col items-center justify-center text-center", f ? "p-4" : "min-h-52 p-8"),
-			children: [
-				/* @__PURE__ */ c("div", {
-					className: e("mb-3 flex 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)] [&_svg]:size-5", f ? "size-9" : "size-12"),
-					children: d ?? v.icon
-				}),
-				/* @__PURE__ */ c("div", {
-					className: e("font-semibold tracking-tight text-foreground", f ? "text-sm" : "text-base"),
-					children: a ?? v.title
-				}),
-				/* @__PURE__ */ c("p", {
-					className: "mt-1 max-w-md text-sm text-muted-foreground",
-					children: o ?? v.description
-				}),
-				p && /* @__PURE__ */ c("div", {
-					className: "mt-4 w-full",
-					children: p
-				}),
-				(s || h) && /* @__PURE__ */ l("div", {
-					className: "mt-4 flex flex-wrap justify-center gap-2",
-					children: [h && /* @__PURE__ */ c(t, {
-						size: "sm",
-						variant: i === "error" ? "default" : "outline",
-						onClick: h,
-						children: m
-					}), s]
-				})
-			]
+			className: "p-0",
+			children: j
 		})
 	});
 }
 //#endregion
-export { d as DataState };
+export { p as DataState };

package/dist/components/display/demo.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`description-list`,`DescriptionList`,`display`,`Structured key-value details for entity, invoice and profile pages.`),e.component(`progress`,`Progress`,`display`,`Linear progress with label, value formatter, tone and indeterminate state.`),e.component(`progress-circle`,`ProgressCircle`,`display`,`Compact circular progress for sidebars and status cards.`),e.component(`timeline`,`Timeline`,`display`,`Vertical or horizontal event stream for workflow history.`),e.component(`status-dot`,`StatusDot`,`display`,`Tiny live status indicator with optional pulse animation.`),e.component(`user-card`,`UserCard`,`display`,`User summary row with avatar, metadata and actions.`),e.component(`delta-badge`,`DeltaBadge`,`display`,`Compact positive, negative, and risk deltas for metric summaries.`),e.component(`entity-header`,`EntityHeader`,`display`,`Top summary row for a customer, invoice, or workspace.`),e.component(`notification-center`,`NotificationCenter`,`display`,`Compact activity and notifications stream.`),e.component(`entity-card`,`EntityCard`,`display`,`Structured summary card with title, meta, state and actions.`),e.component(`file-card`,`FileCard`,`display`,`Compact file summary with state and actions.`),e.component(`data-list`,`DataList`,`display`,`Readable title and description rows for compact operational lists.`),e.component(`status-legend`,`StatusLegend`,`display`,`Explain status meaning and counts in a compact legend.`),e.component(`trend-card`,`TrendCard`,`display`,`Metric summary card with trend context.`),e.component(`comparison-card`,`ComparisonCard`,`display`,`Compare current and previous values in one compact card.`)]);exports.displayShowcaseDemoRegistry=t;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`description-list`,`DescriptionList`,`display`,`Structured key-value details for entity, invoice and profile pages.`),e.component(`progress`,`Progress`,`display`,`Linear progress with label, value formatter, tone and indeterminate state.`),e.component(`progress-circle`,`ProgressCircle`,`display`,`Compact circular progress for sidebars and status cards.`),e.component(`timeline`,`Timeline`,`display`,`Vertical or horizontal event stream for workflow history.`),e.component(`status-dot`,`StatusDot`,`display`,`Tiny live status indicator with optional pulse animation.`),e.component(`user-card`,`UserCard`,`display`,`User summary row with avatar, metadata and actions.`),e.component(`delta-badge`,`DeltaBadge`,`display`,`Compact positive, negative, and risk deltas for metric summaries.`),e.component(`notification-center`,`NotificationCenter`,`display`,`Compact activity and notifications stream.`),e.component(`data-list`,`DataList`,`display`,`Readable title and description rows for compact operational lists.`),e.component(`status-legend`,`StatusLegend`,`display`,`Explain status meaning and counts in a compact legend.`),e.component(`trend-card`,`TrendCard`,`display`,`Metric summary card with trend context.`)]);exports.displayShowcaseDemoRegistry=t;

package/dist/components/display/demo.js

@@ -8,14 +8,10 @@ var n = t([
 	e("status-dot", "StatusDot", "display", "Tiny live status indicator with optional pulse animation."),
 	e("user-card", "UserCard", "display", "User summary row with avatar, metadata and actions."),
 	e("delta-badge", "DeltaBadge", "display", "Compact positive, negative, and risk deltas for metric summaries."),
-	e("entity-header", "EntityHeader", "display", "Top summary row for a customer, invoice, or workspace."),
 	e("notification-center", "NotificationCenter", "display", "Compact activity and notifications stream."),
-	e("entity-card", "EntityCard", "display", "Structured summary card with title, meta, state and actions."),
-	e("file-card", "FileCard", "display", "Compact file summary with state and actions."),
 	e("data-list", "DataList", "display", "Readable title and description rows for compact operational lists."),
 	e("status-legend", "StatusLegend", "display", "Explain status meaning and counts in a compact legend."),
-	e("trend-card", "TrendCard", "display", "Metric summary card with trend context."),
-	e("comparison-card", "ComparisonCard", "display", "Compare current and previous values in one compact card.")
+	e("trend-card", "TrendCard", "display", "Metric summary card with trend context.")
 ]);
 //#endregion
 export { n as displayShowcaseDemoRegistry };

package/dist/components/display/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./description-list.cjs"),t=require("./data-list.cjs"),n=require("./activity-feed.cjs"),r=require("./avatar.cjs"),i=require("./entity-header.cjs"),a=require("./descriptions.cjs"),o=require("./keyboard-shortcut.cjs"),s=require("./kanban.cjs"),c=require("./code-block.cjs"),l=require("./data-state.cjs"),u=require("./entity-card.cjs"),d=require("./file-card.cjs"),f=require("./list.cjs"),p=require("./metric-grid.cjs"),m=require("./progress.cjs"),h=require("./progress-circle.cjs"),g=require("./property-grid.cjs"),_=require("./key-value-card.cjs"),v=require("./result.cjs"),y=require("./statistic.cjs"),b=require("./status-dot.cjs"),x=require("./status-legend.cjs"),S=require("./tag-list.cjs"),C=require("./timeline.cjs"),w=require("./tree-view.cjs"),T=require("./user-card.cjs"),E=require("./delta-badge.cjs"),D=require("./trend-card.cjs"),O=require("./comparison-card.cjs"),k=require("./skeleton-table.cjs"),A=require("./skeleton-form.cjs"),j=require("./smart-card.cjs");exports.ActivityFeed=n.ActivityFeed,exports.Avatar=r.Avatar,exports.AvatarGroup=r.AvatarGroup,exports.CodeBlock=c.CodeBlock,exports.ComparisonCard=O.ComparisonCard,exports.DataList=t.DataList,exports.DataListRow=t.DataListRow,exports.DataState=l.DataState,exports.DeltaBadge=E.DeltaBadge,exports.DescriptionList=e.DescriptionList,exports.Descriptions=a.Descriptions,exports.EntityCard=u.EntityCard,exports.EntityHeader=i.EntityHeader,exports.FileCard=d.FileCard,exports.InfoCard=j.SmartCard,exports.KanbanBoard=s.KanbanBoard,exports.KeyValueCard=_.KeyValueCard,exports.KeyboardShortcut=o.KeyboardShortcut,exports.List=f.List,exports.ListRow=f.ListRow,exports.MetricGrid=p.MetricGrid,exports.Progress=m.Progress,exports.ProgressCard=m.ProgressCard,exports.ProgressCircle=h.ProgressCircle,exports.PropertyGrid=g.PropertyGrid,exports.Result=v.Result,exports.ResultAction=v.ResultAction,exports.SkeletonForm=A.SkeletonForm,exports.SkeletonTable=k.SkeletonTable,exports.SmartCard=j.SmartCard,exports.Statistic=y.Statistic,exports.StatisticCard=y.StatisticCard,exports.StatisticGrid=y.StatisticGrid,exports.StatusDot=b.StatusDot,exports.StatusLegend=x.StatusLegend,exports.TagList=S.TagList,exports.Timeline=C.Timeline,exports.TreeView=w.TreeView,exports.TrendCard=D.TrendCard,exports.UserCard=T.UserCard,exports.getProgressPercent=m.getProgressPercent;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./description-list.cjs"),t=require("./data-list.cjs"),n=require("./activity-feed.cjs"),r=require("./avatar.cjs"),i=require("./descriptions.cjs"),a=require("./kanban.cjs"),o=require("./code-block.cjs"),s=require("./data-state.cjs"),c=require("./list.cjs"),l=require("./metric-grid.cjs"),u=require("./progress.cjs"),d=require("./progress-circle.cjs"),f=require("./property-grid.cjs"),p=require("./result.cjs"),m=require("./statistic.cjs"),h=require("./status-dot.cjs"),g=require("./status-legend.cjs"),_=require("./timeline.cjs"),v=require("./tree-view.cjs"),y=require("./user-card.cjs"),b=require("./delta-badge.cjs"),x=require("./trend-card.cjs"),S=require("./comparison-card.cjs"),C=require("./smart-card.cjs");exports.ActivityFeed=n.ActivityFeed,exports.Avatar=r.Avatar,exports.AvatarGroup=r.AvatarGroup,exports.CodeBlock=o.CodeBlock,exports.ComparisonCard=S.ComparisonCard,exports.DataList=t.DataList,exports.DataListRow=t.DataListRow,exports.DataState=s.DataState,exports.DeltaBadge=b.DeltaBadge,exports.DescriptionList=e.DescriptionList,exports.Descriptions=i.Descriptions,exports.InfoCard=C.SmartCard,exports.KanbanBoard=a.KanbanBoard,exports.List=c.List,exports.ListRow=c.ListRow,exports.MetricGrid=l.MetricGrid,exports.Progress=u.Progress,exports.ProgressCard=u.ProgressCard,exports.ProgressCircle=d.ProgressCircle,exports.PropertyGrid=f.PropertyGrid,exports.Result=p.Result,exports.ResultAction=p.ResultAction,exports.SmartCard=C.SmartCard,exports.Statistic=m.Statistic,exports.StatisticCard=m.StatisticCard,exports.StatisticGrid=m.StatisticGrid,exports.StatusDot=h.StatusDot,exports.StatusLegend=g.StatusLegend,exports.Timeline=_.Timeline,exports.TreeView=v.TreeView,exports.TrendCard=x.TrendCard,exports.UserCard=y.UserCard,exports.getProgressPercent=u.getProgressPercent;

package/dist/components/display/index.d.ts

@@ -2,31 +2,23 @@ export * from "./description-list";
 export * from "./data-list";
 export * from "./activity-feed";
 export * from "./avatar";
-export * from "./entity-header";
 export * from "./descriptions";
-export * from "./keyboard-shortcut";
 export * from "./kanban";
 export * from "./code-block";
 export * from "./data-state";
-export * from "./entity-card";
-export * from "./file-card";
 export * from "./list";
 export * from "./metric-grid";
 export * from "./progress";
 export * from "./progress-circle";
 export * from "./property-grid";
-export * from "./key-value-card";
 export * from "./result";
 export * from "./statistic";
 export * from "./status-dot";
 export * from "./status-legend";
-export * from "./tag-list";
 export * from "./timeline";
 export * from "./tree-view";
 export * from "./user-card";
 export * from "./trend-card";
 export * from "./comparison-card";
 export * from "./delta-badge";
-export * from "./skeleton-table";
-export * from "./skeleton-form";
 export { SmartCard as InfoCard, SmartCard, type SmartCardClassNames, type SmartCardClassNames as InfoCardClassNames, type SmartCardDensity, type SmartCardDensity as InfoCardDensity, type SmartCardOrientation, type SmartCardOrientation as InfoCardOrientation, type SmartCardProps, type SmartCardProps as InfoCardProps, type SmartCardRenderContext, type SmartCardRenderContext as InfoCardRenderContext, type SmartCardSize, type SmartCardSize as InfoCardSize, type SmartCardVariant, type SmartCardVariant as InfoCardVariant, } from "./smart-card";