tembro 2.0.5 → 2.1.0

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

@@ -3,12 +3,12 @@ import { CopyButton as t } from "../actions/copy-button.js";
 import * as n from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/display/code-block.tsx
-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]);
+function a({ code: a, language: o, title: s, showCopy: c = !0, wrap: l = !1, lineNumbers: u = !1, highlightLines: d = [], maxHeight: f, className: p, ...m }) {
+	let h = n.useMemo(() => a.split("\n"), [a]), g = n.useMemo(() => new Set(d), [d]);
 	return /* @__PURE__ */ i("div", {
 		"data-slot": "code-block",
-		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,
+		className: e("overflow-hidden rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-card", p),
+		...m,
 		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", {
@@ -29,20 +29,25 @@ function a({ code: a, language: o, title: s, showCopy: c = !0, wrap: l = !1, lin
 			})]
 		}), /* @__PURE__ */ r("pre", {
 			className: e("overflow-x-auto p-3 text-sm leading-6", l && "whitespace-pre-wrap break-words"),
-			style: d ? {
-				maxHeight: d,
+			style: f ? {
+				maxHeight: f,
 				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: h.map((t, n) => /* @__PURE__ */ i("span", {
+					"data-highlighted": g.has(n + 1) || void 0,
+					className: e("grid grid-cols-[auto_1fr] gap-4 rounded px-1", g.has(n + 1) && "bg-primary/10 text-foreground"),
 					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 })
+						children: n + 1
+					}), /* @__PURE__ */ r("span", { children: t || " " })]
+				}, `${n}-${t}`))
+			}) : /* @__PURE__ */ r("code", { children: h.map((t, n) => /* @__PURE__ */ r("span", {
+				"data-highlighted": g.has(n + 1) || void 0,
+				className: e("block rounded px-1", g.has(n + 1) && "bg-primary/10 text-foreground"),
+				children: t || " "
+			}, `${n}-${t}`)) })
 		})]
 	});
 }

package/dist/components/display/delta-badge.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({value:e,trend:n=`neutral`,size:a=`default`,icon:o=!0,className:s,...c}){let l=n===`up`?r.ArrowUpIcon:n===`down`?r.ArrowDownIcon:r.MinusIcon;return(0,i.jsxs)(`span`,{"data-slot":`delta-badge`,className:t.cn(`inline-flex items-center justify-center font-medium`,a===`sm`?`gap-0.5 rounded px-1 py-0.5 text-[10px]`:`gap-1 rounded-full px-1.5 py-0.5 text-xs`,n===`up`&&`bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`,n===`down`&&`bg-destructive/10 text-destructive`,n===`neutral`&&`bg-muted text-muted-foreground`,s),...c,children:[o&&(0,i.jsx)(l,{className:t.cn(`shrink-0`,a===`sm`?`size-2.5`:`size-3`)}),e]})}exports.DeltaBadge=a;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/badge/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");function o({value:e,trend:r=`neutral`,size:o=`default`,icon:s=!0,className:c,...l}){return(0,a.jsx)(n.Badge,{"data-slot":`delta-badge`,variant:`soft`,tone:r===`up`?`success`:r===`down`?`danger`:`muted`,size:o,leftIcon:s?(0,a.jsx)(r===`up`?i.ArrowUpIcon:r===`down`?i.ArrowDownIcon:i.MinusIcon,{className:t.cn(`shrink-0`,o===`sm`?`size-2.5`:`size-3`)}):void 0,label:e,className:t.cn(o===`sm`&&`min-h-5 px-1.5 text-[10px]`,c),...l})}exports.DeltaBadge=o;

package/dist/components/display/delta-badge.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
-export type DeltaBadgeProps = React.ComponentProps<"span"> & {
+import { type BadgeProps } from "@/components/ui/badge";
+export type DeltaBadgeProps = Omit<BadgeProps, "children" | "label" | "tone" | "status" | "leftIcon" | "variant" | "size"> & {
     value: React.ReactNode;
     trend?: "up" | "down" | "neutral";
     size?: "sm" | "default";

package/dist/components/display/delta-badge.js

@@ -1,15 +1,19 @@
 import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../ui/badge/index.js";
 import "react";
-import { ArrowDownIcon as t, ArrowUpIcon as n, MinusIcon as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ArrowDownIcon as n, ArrowUpIcon as r, MinusIcon as i } from "lucide-react";
+import { jsx as a } from "react/jsx-runtime";
 //#region src/components/display/delta-badge.tsx
 function o({ value: o, trend: s = "neutral", size: c = "default", icon: l = !0, className: u, ...d }) {
-	let f = s === "up" ? n : s === "down" ? t : r;
-	return /* @__PURE__ */ a("span", {
+	return /* @__PURE__ */ a(t, {
 		"data-slot": "delta-badge",
-		className: e("inline-flex items-center justify-center font-medium", c === "sm" ? "gap-0.5 rounded px-1 py-0.5 text-[10px]" : "gap-1 rounded-full px-1.5 py-0.5 text-xs", s === "up" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", s === "down" && "bg-destructive/10 text-destructive", s === "neutral" && "bg-muted text-muted-foreground", u),
-		...d,
-		children: [l && /* @__PURE__ */ i(f, { className: e("shrink-0", c === "sm" ? "size-2.5" : "size-3") }), o]
+		variant: "soft",
+		tone: s === "up" ? "success" : s === "down" ? "danger" : "muted",
+		size: c,
+		leftIcon: l ? /* @__PURE__ */ a(s === "up" ? r : s === "down" ? n : i, { className: e("shrink-0", c === "sm" ? "size-2.5" : "size-3") }) : void 0,
+		label: o,
+		className: e(c === "sm" && "min-h-5 px-1.5 text-[10px]", u),
+		...d
 	});
 }
 //#endregion

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

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

@@ -5,6 +5,7 @@ export type KanbanCard = {
     description?: React.ReactNode;
     meta?: React.ReactNode;
     extra?: React.ReactNode;
+    actions?: React.ReactNode;
     disabled?: boolean;
 };
 export type KanbanColumn = {
@@ -18,8 +19,10 @@ export type KanbanBoardProps = React.ComponentProps<"div"> & {
     columns: KanbanColumn[];
     renderCard?: (card: KanbanCard, column: KanbanColumn) => React.ReactNode;
     onCardClick?: (card: KanbanCard, column: KanbanColumn) => void;
+    onCardMove?: (card: KanbanCard, fromColumn: KanbanColumn, toColumn: KanbanColumn) => void;
+    emptyColumn?: React.ReactNode | ((column: KanbanColumn) => React.ReactNode);
     columnClassName?: string;
     cardClassName?: string;
 };
-declare function KanbanBoard({ columns, renderCard, onCardClick, columnClassName, cardClassName, className, ...props }: KanbanBoardProps): React.JSX.Element;
+declare function KanbanBoard({ columns, renderCard, onCardClick, onCardMove, emptyColumn, columnClassName, cardClassName, className, ...props }: KanbanBoardProps): React.JSX.Element;
 export { KanbanBoard };

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/smart-card.d.ts

@@ -31,7 +31,7 @@ export type InfoCardRenderContext = {
     content?: React.ReactNode;
     footer?: React.ReactNode;
 };
-export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & InfoCardRenderContext & {
+export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size" | "orientation"> & InfoCardRenderContext & {
     orientation?: InfoCardOrientation;
     variant?: InfoCardVariant;
     size?: InfoCardSize;

package/dist/components/display/status-legend.d.ts

@@ -12,7 +12,7 @@ export type StatusLegendItem = {
     hidden?: boolean;
     className?: string;
 };
-export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+export type StatusLegendProps = Omit<React.ComponentProps<typeof Card>, "orientation"> & {
     title?: React.ReactNode;
     description?: React.ReactNode;
     actions?: React.ReactNode;

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 };