tembro 2.0.6 → 2.1.0

package/dist/components/display/kanban.js

@@ -1,63 +1,90 @@
 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 "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
 //#region src/components/display/kanban.tsx
-function s({ columns: t, renderCard: n, onCardClick: r, columnClassName: i, cardClassName: o, className: s, ...l }) {
-	return /* @__PURE__ */ a("div", {
+function c({ columns: t, renderCard: n, onCardClick: r, onCardMove: i, emptyColumn: s = "No cards yet.", columnClassName: c, cardClassName: u, className: d, ...f }) {
+	let p = a.useMemo(() => new Map(t.map((e) => [e.key, e])), [t]);
+	return /* @__PURE__ */ o("div", {
 		"data-slot": "kanban-board",
-		className: e("grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2", s),
-		...l,
-		children: t.map((e) => /* @__PURE__ */ a(c, {
+		className: e("grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2", d),
+		...f,
+		children: t.map((e) => /* @__PURE__ */ o(l, {
 			column: e,
 			renderCard: n,
 			onCardClick: r,
-			columnClassName: i,
-			cardClassName: o
+			onCardMove: i,
+			columnByKey: p,
+			emptyColumn: s,
+			columnClassName: c,
+			cardClassName: u
 		}, e.key))
 	});
 }
-function c({ column: s, renderCard: c, onCardClick: l, columnClassName: u, cardClassName: d }) {
-	return /* @__PURE__ */ o("section", {
+function l({ column: a, renderCard: c, onCardClick: l, onCardMove: u, columnByKey: d, emptyColumn: f, columnClassName: p, cardClassName: m }) {
+	return /* @__PURE__ */ s("section", {
 		"data-slot": "kanban-column",
-		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3", u),
-		children: [/* @__PURE__ */ o("div", {
+		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3", p),
+		onDragOver: (e) => {
+			u && e.preventDefault();
+		},
+		onDrop: (e) => {
+			let t = e.dataTransfer.getData("application/x-tembro-kanban-card"), n = e.dataTransfer.getData("application/x-tembro-kanban-column"), r = d.get(n), i = r?.cards.find((e) => e.key === t);
+			i && r && r.key !== a.key && u?.(i, r, a);
+		},
+		children: [/* @__PURE__ */ s("div", {
 			className: "flex items-start justify-between gap-3",
-			children: [/* @__PURE__ */ o("div", {
+			children: [/* @__PURE__ */ s("div", {
 				className: "grid gap-0.5",
-				children: [/* @__PURE__ */ a("h3", {
+				children: [/* @__PURE__ */ o("h3", {
 					className: "text-sm font-semibold text-foreground",
-					children: s.title
-				}), s.description && /* @__PURE__ */ a("p", {
+					children: a.title
+				}), a.description && /* @__PURE__ */ o("p", {
 					className: "text-xs text-muted-foreground",
-					children: s.description
+					children: a.description
 				})]
-			}), /* @__PURE__ */ a("div", {
+			}), /* @__PURE__ */ o("div", {
 				className: "rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground",
-				children: s.count ?? s.cards.length
+				children: a.count ?? a.cards.length
 			})]
-		}), /* @__PURE__ */ a("div", {
+		}), /* @__PURE__ */ o("div", {
 			className: "grid gap-2",
-			children: s.cards.map((u) => c?.(u, s) ?? /* @__PURE__ */ o(t, {
+			children: a.cards.length === 0 ? /* @__PURE__ */ o("div", {
+				"data-slot": "kanban-column-empty",
+				className: "rounded-md border border-dashed bg-background/60 px-3 py-6 text-center text-sm text-muted-foreground",
+				children: typeof f == "function" ? f(a) : f
+			}) : a.cards.map((d) => c?.(d, a) ?? /* @__PURE__ */ s(t, {
 				"data-slot": "kanban-card",
-				className: e("transition-colors hover:bg-muted/40", l && !u.disabled && "cursor-pointer", u.disabled && "pointer-events-none opacity-55", d),
-				onClick: () => l?.(u, s),
-				children: [/* @__PURE__ */ a(r, {
+				role: l ? "button" : void 0,
+				tabIndex: l && !d.disabled ? 0 : void 0,
+				draggable: !!(u && !d.disabled),
+				className: e("transition-colors hover:bg-muted/40", l && !d.disabled && "cursor-pointer", u && !d.disabled && "cursor-grab active:cursor-grabbing", d.disabled && "pointer-events-none opacity-55", m),
+				onDragStart: (e) => {
+					e.dataTransfer.setData("application/x-tembro-kanban-card", d.key), e.dataTransfer.setData("application/x-tembro-kanban-column", a.key), e.dataTransfer.effectAllowed = "move";
+				},
+				onClick: () => l?.(d, a),
+				onKeyDown: (e) => {
+					(e.key === "Enter" || e.key === " ") && l && !d.disabled && (e.preventDefault(), l(d, a));
+				},
+				children: [/* @__PURE__ */ o(r, {
 					className: "p-3 pb-1",
-					children: /* @__PURE__ */ o("div", {
+					children: /* @__PURE__ */ s("div", {
 						className: "flex items-start justify-between gap-2",
-						children: [/* @__PURE__ */ a(i, {
+						children: [/* @__PURE__ */ o(i, {
 							className: "text-sm",
-							children: u.title
-						}), u.extra]
+							children: d.title
+						}), (d.extra || d.actions) && /* @__PURE__ */ s("div", {
+							className: "flex shrink-0 items-center gap-1",
+							children: [d.extra, d.actions]
+						})]
 					})
-				}), (u.description || u.meta) && /* @__PURE__ */ o(n, {
+				}), (d.description || d.meta) && /* @__PURE__ */ s(n, {
 					className: "grid gap-2 p-3 pt-0 text-xs text-muted-foreground",
-					children: [u.description, u.meta && /* @__PURE__ */ a("div", { children: u.meta })]
+					children: [d.description, d.meta && /* @__PURE__ */ o("div", { children: d.meta })]
 				})]
-			}, u.key))
+			}, d.key))
 		})]
 	});
 }
 //#endregion
-export { s as KanbanBoard };
+export { c as KanbanBoard };

package/dist/components/display/metric-grid.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");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 xl:grid-cols-3`,4:`grid-cols-1 sm:grid-cols-2 xl:grid-cols-4`},o={default:``,success:`border-emerald-500/20 bg-emerald-500/5`,warning:`border-amber-500/20 bg-amber-500/5`,danger:`border-destructive/20 bg-destructive/5`,info:`border-blue-500/20 bg-blue-500/5`,muted:`bg-muted/40`};function s({className:e,items:r,columns:s=4,compact:c=!1,itemClassName:l,...u}){let d=r.filter(e=>!e.hidden);return(0,i.jsx)(`div`,{"data-slot":`metric-grid`,className:t.cn(`grid gap-3`,a[s],e),...u,children:d.map(e=>(0,i.jsxs)(n.Card,{"data-slot":`stat-card`,"data-tone":e.tone??`default`,className:t.cn(`min-w-0 overflow-hidden`,o[e.tone??`default`],l,e.className),children:[(0,i.jsxs)(n.CardHeader,{className:t.cn(`flex flex-row items-start justify-between gap-3 space-y-0`,c?`p-3 pb-1`:`pb-2`),children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[(0,i.jsx)(n.CardDescription,{className:`truncate`,children:e.label}),(0,i.jsx)(n.CardTitle,{className:t.cn(`truncate`,c?`text-xl`:`text-2xl`),children:e.value})]}),e.icon&&(0,i.jsx)(`div`,{className:`shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4`,children:e.icon})]}),(e.description||e.trend)&&(0,i.jsxs)(n.CardContent,{className:t.cn(`flex min-w-0 items-center justify-between gap-2`,c?`p-3 pt-1`:`pt-0`),children:[e.description&&(0,i.jsx)(`div`,{className:`min-w-0 truncate text-xs text-muted-foreground`,children:e.description}),e.trend&&(0,i.jsx)(`div`,{className:`shrink-0 text-xs font-medium`,children:e.trend})]})]},e.key))})}exports.MetricGrid=s;
+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");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 xl:grid-cols-3`,4:`grid-cols-1 sm:grid-cols-2 xl:grid-cols-4`},o={default:``,success:`border-emerald-500/20 bg-emerald-500/5`,warning:`border-amber-500/20 bg-amber-500/5`,danger:`border-destructive/20 bg-destructive/5`,info:`border-blue-500/20 bg-blue-500/5`,muted:`bg-muted/40`};function s({className:e,items:r,columns:s=4,compact:c=!1,itemClassName:l,...u}){let d=r.filter(e=>!e.hidden);return(0,i.jsx)(`div`,{"data-slot":`metric-grid`,className:t.cn(`grid gap-3`,a[s],e),...u,children:d.map(e=>(0,i.jsxs)(n.Card,{"data-slot":`stat-card`,"data-tone":e.tone??`default`,className:t.cn(`min-w-0 overflow-hidden`,o[e.tone??`default`],l,e.className),children:[(0,i.jsxs)(n.CardHeader,{className:t.cn(`flex flex-row items-start justify-between gap-3 space-y-0`,c?`p-3 pb-1`:`pb-2`),children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[(0,i.jsx)(n.CardDescription,{className:`truncate`,children:e.label}),(0,i.jsx)(n.CardTitle,{className:t.cn(`truncate`,c?`text-xl`:`text-2xl`),children:e.loading?(0,i.jsx)(`span`,{className:`block h-8 w-24 animate-pulse rounded bg-muted`}):e.value})]}),e.icon&&(0,i.jsx)(`div`,{className:`shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4`,children:e.icon})]}),(e.description||e.trend)&&(0,i.jsxs)(n.CardContent,{className:t.cn(`flex min-w-0 items-center justify-between gap-2`,c?`p-3 pt-1`:`pt-0`),children:[e.description&&(0,i.jsx)(`div`,{className:`min-w-0 truncate text-xs text-muted-foreground`,children:e.description}),e.trend&&(0,i.jsx)(`div`,{className:`shrink-0 text-xs font-medium`,children:e.trend})]})]},e.key))})}exports.MetricGrid=s;

package/dist/components/display/metric-grid.d.ts

@@ -11,6 +11,7 @@ export type MetricItem = {
     tone?: MetricTone;
     hidden?: boolean;
     className?: string;
+    loading?: boolean;
 };
 export type MetricGridProps = React.ComponentProps<"div"> & {
     items: MetricItem[];

package/dist/components/display/metric-grid.js

@@ -35,7 +35,7 @@ function u({ className: u, items: d, columns: f = 4, compact: p = !1, itemClassN
 						children: c.label
 					}), /* @__PURE__ */ o(a, {
 						className: e("truncate", p ? "text-xl" : "text-2xl"),
-						children: c.value
+						children: c.loading ? /* @__PURE__ */ o("span", { className: "block h-8 w-24 animate-pulse rounded bg-muted" }) : c.value
 					})]
 				}), c.icon && /* @__PURE__ */ o("div", {
 					className: "shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4",

package/dist/components/display/qr-code.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("react/jsx-runtime");function i(e){let t=2166136261;for(let n=0;n<e.length;n+=1)t^=e.charCodeAt(n),t=Math.imul(t,16777619);return t>>>0}function a(e,t,n){return e<7&&t<7||e<7&&t>20||e>20&&t<7?!1:((Math.imul(e+17,73856093)^Math.imul(t+31,19349663)^n)>>>0)%5<2}function o({x:e,y:t}){return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`rect`,{x:e,y:t,width:`7`,height:`7`,fill:`currentColor`}),(0,r.jsx)(`rect`,{x:e+1,y:t+1,width:`5`,height:`5`,fill:`white`}),(0,r.jsx)(`rect`,{x:e+2,y:t+2,width:`3`,height:`3`,fill:`currentColor`})]})}function s({value:e,cells:t=29,title:n}){let s=i(e),c=`0 0 ${t} ${t}`,l=Array.from({length:t},(e,t)=>t),u=Array.from({length:t},(e,t)=>t);return(0,r.jsxs)(`svg`,{role:`img`,"aria-label":n??e,viewBox:c,className:`size-full text-foreground`,shapeRendering:`crispEdges`,children:[(0,r.jsx)(`rect`,{width:t,height:t,fill:`white`}),(0,r.jsx)(o,{x:0,y:0}),(0,r.jsx)(o,{x:t-7,y:0}),(0,r.jsx)(o,{x:0,y:t-7}),l.map(e=>u.map(t=>a(e,t,s)?(0,r.jsx)(`rect`,{x:t,y:e,width:`1`,height:`1`,fill:`currentColor`},`${e}-${t}`):null))]})}function c({value:e,src:n,alt:i,size:a=160,cells:o=29,className:c,...l}){return(0,r.jsx)(`div`,{"data-slot":`qr-code`,className:t.cn(`inline-flex flex-col items-center gap-2 rounded-xl border bg-background p-3`,c),...l,children:(0,r.jsx)(`div`,{className:`rounded-md bg-white p-2`,style:{width:a,height:a},children:n?(0,r.jsx)(`img`,{src:n,alt:i??e,width:a,height:a,className:`size-full rounded-sm object-contain`}):(0,r.jsx)(s,{value:e,cells:o,title:i})})})}exports.QRCode=c,exports.QRCodeSvg=s;
+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("react/jsx-runtime");function i(e){let t=2166136261;for(let n=0;n<e.length;n+=1)t^=e.charCodeAt(n),t=Math.imul(t,16777619);return t>>>0}function a(e,t,n){return e<7&&t<7||e<7&&t>20||e>20&&t<7?!1:((Math.imul(e+17,73856093)^Math.imul(t+31,19349663)^n)>>>0)%5<2}function o({x:e,y:t}){return(0,r.jsxs)(`g`,{children:[(0,r.jsx)(`rect`,{x:e,y:t,width:`7`,height:`7`,fill:`currentColor`}),(0,r.jsx)(`rect`,{x:e+1,y:t+1,width:`5`,height:`5`,fill:`white`}),(0,r.jsx)(`rect`,{x:e+2,y:t+2,width:`3`,height:`3`,fill:`currentColor`})]})}function s({value:e,cells:t=29,title:n}){let s=i(e),c=`0 0 ${t} ${t}`,l=Array.from({length:t},(e,t)=>t),u=Array.from({length:t},(e,t)=>t);return(0,r.jsxs)(`svg`,{role:`img`,"aria-label":n??e,viewBox:c,className:`size-full text-foreground`,shapeRendering:`crispEdges`,children:[(0,r.jsx)(`rect`,{width:t,height:t,fill:`white`}),(0,r.jsx)(o,{x:0,y:0}),(0,r.jsx)(o,{x:t-7,y:0}),(0,r.jsx)(o,{x:0,y:t-7}),l.map(e=>u.map(t=>a(e,t,s)?(0,r.jsx)(`rect`,{x:t,y:e,width:`1`,height:`1`,fill:`currentColor`},`${e}-${t}`):null))]})}function c({value:e,src:n,alt:i,size:a=160,cells:o=29,visualOnlyLabel:c=`Visual preview only. Provide src from a certified QR encoder for scan-critical use.`,className:l,...u}){return(0,r.jsxs)(`div`,{"data-slot":`qr-code`,className:t.cn(`inline-flex flex-col items-center gap-2 rounded-xl border bg-background p-3`,l),...u,children:[(0,r.jsx)(`div`,{className:`rounded-md bg-white p-2`,style:{width:a,height:a},children:n?(0,r.jsx)(`img`,{src:n,alt:i??e,width:a,height:a,className:`size-full rounded-sm object-contain`}):(0,r.jsx)(s,{value:e,cells:o,title:i})}),!n&&c&&(0,r.jsx)(`div`,{className:`max-w-48 text-center text-xs text-muted-foreground`,children:c})]})}exports.QRCode=c,exports.QRCodeSvg=s;

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

@@ -5,11 +5,12 @@ export type QRCodeProps = React.ComponentProps<"div"> & {
     alt?: string;
     size?: number;
     cells?: number;
+    visualOnlyLabel?: React.ReactNode;
 };
 declare function QRCodeSvg({ value, cells, title }: {
     value: string;
     cells?: number;
     title?: string;
 }): React.JSX.Element;
-declare function QRCode({ value, src, alt, size, cells, className, ...props }: QRCodeProps): React.JSX.Element;
+declare function QRCode({ value, src, alt, size, cells, visualOnlyLabel, className, ...props }: QRCodeProps): React.JSX.Element;
 export { QRCode, QRCodeSvg };

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

@@ -71,29 +71,32 @@ function o({ value: e, cells: o = 29, title: s }) {
 		]
 	});
 }
-function s({ value: n, src: r, alt: i, size: a = 160, cells: s = 29, className: c, ...l }) {
-	return /* @__PURE__ */ t("div", {
+function s({ value: r, src: i, alt: a, size: s = 160, cells: c = 29, visualOnlyLabel: l = "Visual preview only. Provide src from a certified QR encoder for scan-critical use.", className: u, ...d }) {
+	return /* @__PURE__ */ n("div", {
 		"data-slot": "qr-code",
-		className: e("inline-flex flex-col items-center gap-2 rounded-xl border bg-background p-3", c),
-		...l,
-		children: /* @__PURE__ */ t("div", {
+		className: e("inline-flex flex-col items-center gap-2 rounded-xl border bg-background p-3", u),
+		...d,
+		children: [/* @__PURE__ */ t("div", {
 			className: "rounded-md bg-white p-2",
 			style: {
-				width: a,
-				height: a
+				width: s,
+				height: s
 			},
-			children: r ? /* @__PURE__ */ t("img", {
-				src: r,
-				alt: i ?? n,
-				width: a,
-				height: a,
+			children: i ? /* @__PURE__ */ t("img", {
+				src: i,
+				alt: a ?? r,
+				width: s,
+				height: s,
 				className: "size-full rounded-sm object-contain"
 			}) : /* @__PURE__ */ t(o, {
-				value: n,
-				cells: s,
-				title: i
+				value: r,
+				cells: c,
+				title: a
 			})
-		})
+		}), !i && l && /* @__PURE__ */ t("div", {
+			className: "max-w-48 text-center text-xs text-muted-foreground",
+			children: l
+		})]
 	});
 }
 //#endregion

package/dist/components/display/tag.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("react/jsx-runtime");var i={neutral:`border-border bg-muted text-foreground`,info:`border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-300`,success:`border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300`,warning:`border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300`,danger:`border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300`},a={sm:`h-6 px-2 text-xs`,default:`h-7 px-2.5 text-sm`,lg:`h-8 px-3 text-sm`};function o({tone:e=`neutral`,size:n=`default`,removable:o,selected:s,onRemove:c,className:l,children:u,...d}){return(0,r.jsxs)(`span`,{"data-slot":`tag`,"data-tone":e,"data-selected":s?`true`:void 0,className:t.cn(`inline-flex items-center gap-1 rounded-full border font-medium transition-colors`,i[e],a[n],s&&`ring-2 ring-ring ring-offset-1`,l),...d,children:[(0,r.jsx)(`span`,{children:u}),o&&(0,r.jsx)(`button`,{type:`button`,"aria-label":`Remove tag`,className:`-mr-1 inline-flex size-4 items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10`,onClick:e=>{t.stopInteractivePropagation(e),c?.()},onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:`×`})]})}function s(e){return(0,r.jsx)(o,{...e})}function c({gap:e=`default`,className:n,...i}){return(0,r.jsx)(`div`,{"data-slot":`tag-group`,className:t.cn(`flex flex-wrap items-center`,e===`sm`&&`gap-1`,e==="default"&&`gap-2`,e===`lg`&&`gap-3`,n),...i})}exports.Chip=s,exports.Tag=o,exports.TagGroup=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={neutral:`border-border bg-muted text-foreground`,info:`border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-300`,success:`border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300`,warning:`border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300`,danger:`border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300`},o={sm:`h-6 px-2 text-xs`,default:`h-7 px-2.5 text-sm`,lg:`h-8 px-3 text-sm`};function s({tone:e=`neutral`,size:n=`default`,removable:s,selected:c,onRemove:l,removeLabel:u=`Remove tag`,className:d,children:f,onKeyDown:p,...m}){let h=e=>{t.stopInteractivePropagation(e),l?.()};return(0,i.jsxs)(`span`,{"data-slot":`tag`,"data-tone":e,"data-selected":c?`true`:void 0,tabIndex:s?0:m.tabIndex,className:t.cn(`inline-flex items-center gap-1.5 rounded-full border font-medium transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/35`,a[e],o[n],c&&`ring-2 ring-ring ring-offset-1`,d),onKeyDown:e=>{s&&(e.key===`Backspace`||e.key===`Delete`)&&(e.preventDefault(),l?.()),p?.(e)},...m,children:[(0,i.jsx)(`span`,{children:f}),s&&(0,i.jsx)(`button`,{type:`button`,"aria-label":u,className:`-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full opacity-80 transition hover:bg-black/10 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/35 dark:hover:bg-white/10`,onClick:h,onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:(0,i.jsx)(r.XIcon,{className:`size-3`})})]})}function c(e){return(0,i.jsx)(s,{...e})}function l({gap:e=`default`,className:n,...r}){return(0,i.jsx)(`div`,{"data-slot":`tag-group`,className:t.cn(`flex flex-wrap items-center`,e===`sm`&&`gap-1`,e==="default"&&`gap-2`,e===`lg`&&`gap-3`,n),...r})}exports.Chip=c,exports.Tag=s,exports.TagGroup=l;

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

@@ -7,11 +7,12 @@ export type TagProps = React.ComponentProps<"span"> & {
     removable?: boolean;
     selected?: boolean;
     onRemove?: () => void;
+    removeLabel?: string;
 };
 export type TagGroupProps = React.ComponentProps<"div"> & {
     gap?: "sm" | "default" | "lg";
 };
-declare function Tag({ tone, size, removable, selected, onRemove, className, children, ...props }: TagProps): React.JSX.Element;
+declare function Tag({ tone, size, removable, selected, onRemove, removeLabel, className, children, onKeyDown, ...props }: TagProps): React.JSX.Element;
 declare function Chip(props: TagProps): React.JSX.Element;
 declare function TagGroup({ gap, className, ...props }: TagGroupProps): React.JSX.Element;
 export { Chip, Tag, TagGroup };

package/dist/components/display/tag.js

@@ -1,47 +1,53 @@
 import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
 import "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { XIcon as n } from "lucide-react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/display/tag.tsx
-var i = {
+var a = {
 	neutral: "border-border bg-muted text-foreground",
 	info: "border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-900 dark:bg-sky-950 dark:text-sky-300",
 	success: "border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-300",
 	warning: "border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-300",
 	danger: "border-red-200 bg-red-50 text-red-700 dark:border-red-900 dark:bg-red-950 dark:text-red-300"
-}, a = {
+}, o = {
 	sm: "h-6 px-2 text-xs",
 	default: "h-7 px-2.5 text-sm",
 	lg: "h-8 px-3 text-sm"
 };
-function o({ tone: o = "neutral", size: s = "default", removable: c, selected: l, onRemove: u, className: d, children: f, ...p }) {
-	return /* @__PURE__ */ r("span", {
+function s({ tone: s = "neutral", size: c = "default", removable: l, selected: u, onRemove: d, removeLabel: f = "Remove tag", className: p, children: m, onKeyDown: h, ...g }) {
+	let _ = (e) => {
+		t(e), d?.();
+	};
+	return /* @__PURE__ */ i("span", {
 		"data-slot": "tag",
-		"data-tone": o,
-		"data-selected": l ? "true" : void 0,
-		className: e("inline-flex items-center gap-1 rounded-full border font-medium transition-colors", i[o], a[s], l && "ring-2 ring-ring ring-offset-1", d),
-		...p,
-		children: [/* @__PURE__ */ n("span", { children: f }), c && /* @__PURE__ */ n("button", {
+		"data-tone": s,
+		"data-selected": u ? "true" : void 0,
+		tabIndex: l ? 0 : g.tabIndex,
+		className: e("inline-flex items-center gap-1.5 rounded-full border font-medium transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/35", a[s], o[c], u && "ring-2 ring-ring ring-offset-1", p),
+		onKeyDown: (e) => {
+			l && (e.key === "Backspace" || e.key === "Delete") && (e.preventDefault(), d?.()), h?.(e);
+		},
+		...g,
+		children: [/* @__PURE__ */ r("span", { children: m }), l && /* @__PURE__ */ r("button", {
 			type: "button",
-			"aria-label": "Remove tag",
-			className: "-mr-1 inline-flex size-4 items-center justify-center rounded-full hover:bg-black/10 dark:hover:bg-white/10",
-			onClick: (e) => {
-				t(e), u?.();
-			},
+			"aria-label": f,
+			className: "-mr-1 inline-flex size-4 shrink-0 items-center justify-center rounded-full opacity-80 transition hover:bg-black/10 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-current/35 dark:hover:bg-white/10",
+			onClick: _,
 			onMouseDown: t,
 			onDoubleClick: t,
-			children: "×"
+			children: /* @__PURE__ */ r(n, { className: "size-3" })
 		})]
 	});
 }
-function s(e) {
-	return /* @__PURE__ */ n(o, { ...e });
+function c(e) {
+	return /* @__PURE__ */ r(s, { ...e });
 }
-function c({ gap: t = "default", className: r, ...i }) {
-	return /* @__PURE__ */ n("div", {
+function l({ gap: t = "default", className: n, ...i }) {
+	return /* @__PURE__ */ r("div", {
 		"data-slot": "tag-group",
-		className: e("flex flex-wrap items-center", t === "sm" && "gap-1", t === "default" && "gap-2", t === "lg" && "gap-3", r),
+		className: e("flex flex-wrap items-center", t === "sm" && "gap-1", t === "default" && "gap-2", t === "lg" && "gap-3", n),
 		...i
 	});
 }
 //#endregion
-export { s as Chip, o as Tag, c as TagGroup };
+export { c as Chip, s as Tag, l as TagGroup };

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

package/dist/components/display/tree-view.d.ts

@@ -2,9 +2,11 @@ import * as React from "react";
 export type TreeViewItem = {
     key: string;
     label: React.ReactNode;
+    searchText?: string;
     icon?: React.ReactNode;
     extra?: React.ReactNode;
     children?: TreeViewItem[];
+    loading?: boolean;
     disabled?: boolean;
 };
 export type TreeViewProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
@@ -14,6 +16,12 @@ export type TreeViewProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
     onExpandedKeysChange?: (keys: string[]) => void;
     selectedKey?: string;
     onSelect?: (item: TreeViewItem) => void;
+    checkedKeys?: string[];
+    defaultCheckedKeys?: string[];
+    onCheckedKeysChange?: (keys: string[]) => void;
+    checkable?: boolean;
+    searchQuery?: string;
+    onLoadChildren?: (item: TreeViewItem) => void | Promise<void>;
 };
-declare function TreeView({ items, defaultExpandedKeys, expandedKeys, onExpandedKeysChange, selectedKey, onSelect, className, ...props }: TreeViewProps): React.JSX.Element;
+declare function TreeView({ items, defaultExpandedKeys, expandedKeys, onExpandedKeysChange, selectedKey, onSelect, checkedKeys, defaultCheckedKeys, onCheckedKeysChange, checkable, searchQuery, onLoadChildren, className, ...props }: TreeViewProps): React.JSX.Element;
 export { TreeView };

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;