tembro 1.0.0

package/dist/components/display/key-value-card.js

@@ -0,0 +1,35 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t, CardContent as n, CardDescription as r, CardHeader as i, CardTitle as a } from "../ui/card/index.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/key-value-card.tsx
+function c({ title: c, description: l, items: u, columns: d = 1, className: f, ...p }) {
+	return /* @__PURE__ */ s(t, {
+		"data-slot": "key-value-card",
+		className: f,
+		...p,
+		children: [(c || l) && /* @__PURE__ */ s(i, { children: [c && /* @__PURE__ */ o(a, { children: c }), l && /* @__PURE__ */ o(r, { children: l })] }), /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o("dl", {
+			className: e("grid gap-3", d === 1 && "grid-cols-1", d === 2 && "grid-cols-1 sm:grid-cols-2"),
+			children: u.map((e) => /* @__PURE__ */ s("div", {
+				"data-slot": "key-value-card-item",
+				className: "min-w-0 rounded-lg border bg-muted/25 p-3",
+				children: [
+					/* @__PURE__ */ o("dt", {
+						className: "text-xs font-medium uppercase tracking-wide text-muted-foreground",
+						children: e.label
+					}),
+					/* @__PURE__ */ o("dd", {
+						className: "mt-1 break-words text-sm font-semibold text-foreground",
+						children: e.value
+					}),
+					e.description && /* @__PURE__ */ o("dd", {
+						className: "mt-1 text-xs leading-5 text-muted-foreground",
+						children: e.description
+					})
+				]
+			}, e.key))
+		}) })]
+	});
+}
+//#endregion
+export { c as KeyValueCard };

package/dist/components/display/keyboard-shortcut.cjs

@@ -0,0 +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({keys:e,separator:i=`+`,className:a,children:o,...s}){let c=e?.length?e.map((e,t)=>(0,r.jsxs)(n.Fragment,{children:[t>0&&(0,r.jsx)(`span`,{className:`text-muted-foreground`,children:i}),(0,r.jsx)(`span`,{children:e})]},t)):o;return(0,r.jsx)(`kbd`,{"data-slot":`keyboard-shortcut`,className:t.cn(`inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground`,a),...s,children:c})}exports.KeyboardShortcut=i;

package/dist/components/display/keyboard-shortcut.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export type KeyboardShortcutProps = React.ComponentProps<"kbd"> & {
+    keys?: React.ReactNode[];
+    separator?: React.ReactNode;
+};
+declare function KeyboardShortcut({ keys, separator, className, children, ...props }: KeyboardShortcutProps): React.JSX.Element;
+export { KeyboardShortcut };

package/dist/components/display/keyboard-shortcut.js

@@ -0,0 +1,18 @@
+import { cn as e } from "../../lib/utils.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/display/keyboard-shortcut.tsx
+function i({ keys: i, separator: a = "+", className: o, children: s, ...c }) {
+	let l = i?.length ? i.map((e, i) => /* @__PURE__ */ r(t.Fragment, { children: [i > 0 && /* @__PURE__ */ n("span", {
+		className: "text-muted-foreground",
+		children: a
+	}), /* @__PURE__ */ n("span", { children: e })] }, i)) : s;
+	return /* @__PURE__ */ n("kbd", {
+		"data-slot": "keyboard-shortcut",
+		className: e("inline-flex items-center gap-1 rounded border bg-muted px-1.5 py-0.5 font-mono text-[11px] font-medium text-muted-foreground", o),
+		...c,
+		children: l
+	});
+}
+//#endregion
+export { i as KeyboardShortcut };

package/dist/components/display/list.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={sm:`px-3 py-2`,md:`px-4 py-3`,lg:`px-5 py-4`};function o({items:e,bordered:n=!0,split:r=!0,size:a=`md`,renderItem:o,className:c,children:l,...u}){return(0,i.jsxs)(`div`,{"data-slot":`list`,className:t.cn(`overflow-hidden bg-card`,n&&`rounded-lg border`,c),...u,children:[e?.map((e,t)=>o?.(e,t)??(0,i.jsx)(s,{item:e,split:r,size:a},e.key)),l]})}function s({item:e,split:n=!0,size:o=`md`,className:s,...c}){let l=!!(e.href||e.onClick),u=(0,i.jsxs)(i.Fragment,{children:[e.avatar&&(0,i.jsx)(`div`,{className:`shrink-0`,children:e.avatar}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,i.jsx)(`div`,{className:`truncate text-sm font-medium text-foreground`,children:e.title}),e.description&&(0,i.jsx)(`div`,{className:`mt-0.5 line-clamp-2 text-sm text-muted-foreground`,children:e.description})]}),e.extra&&(0,i.jsx)(`div`,{className:`shrink-0 text-sm text-muted-foreground`,children:e.extra}),l&&(0,i.jsx)(r.ChevronRightIcon,{className:`size-4 shrink-0 text-muted-foreground`})]}),d=t.cn(`flex items-center gap-3 bg-card transition-colors`,a[o],n&&`border-b last:border-b-0`,l&&!e.disabled&&`cursor-pointer hover:bg-muted/50`,e.disabled&&`pointer-events-none opacity-55`,s);return e.href?(0,i.jsx)(`a`,{"data-slot":`list-row`,href:e.href,className:d,...c,children:u}):(0,i.jsx)(`div`,{"data-slot":`list-row`,role:l?`button`:void 0,tabIndex:l&&!e.disabled?0:void 0,className:d,onClick:e.onClick,...c,children:u})}exports.List=o,exports.ListRow=s;

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

@@ -0,0 +1,26 @@
+import * as React from "react";
+export type ListItem = {
+    key: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    avatar?: React.ReactNode;
+    extra?: React.ReactNode;
+    href?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+};
+export type ListProps = React.ComponentProps<"div"> & {
+    items?: ListItem[];
+    bordered?: boolean;
+    split?: boolean;
+    size?: "sm" | "md" | "lg";
+    renderItem?: (item: ListItem, index: number) => React.ReactNode;
+};
+declare function List({ items, bordered, split, size, renderItem, className, children, ...props }: ListProps): React.JSX.Element;
+export type ListRowProps = React.ComponentProps<"div"> & {
+    item: ListItem;
+    split?: boolean;
+    size?: "sm" | "md" | "lg";
+};
+declare function ListRow({ item, split, size, className, ...props }: ListRowProps): React.JSX.Element;
+export { List, ListRow };

package/dist/components/display/list.js

@@ -0,0 +1,62 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { ChevronRightIcon as t } from "lucide-react";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/components/display/list.tsx
+var a = {
+	sm: "px-3 py-2",
+	md: "px-4 py-3",
+	lg: "px-5 py-4"
+};
+function o({ items: t, bordered: n = !0, split: a = !0, size: o = "md", renderItem: c, className: l, children: u, ...d }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "list",
+		className: e("overflow-hidden bg-card", n && "rounded-lg border", l),
+		...d,
+		children: [t?.map((e, t) => c?.(e, t) ?? /* @__PURE__ */ r(s, {
+			item: e,
+			split: a,
+			size: o
+		}, e.key)), u]
+	});
+}
+function s({ item: o, split: s = !0, size: c = "md", className: l, ...u }) {
+	let d = !!(o.href || o.onClick), f = /* @__PURE__ */ i(n, { children: [
+		o.avatar && /* @__PURE__ */ r("div", {
+			className: "shrink-0",
+			children: o.avatar
+		}),
+		/* @__PURE__ */ i("div", {
+			className: "min-w-0 flex-1",
+			children: [/* @__PURE__ */ r("div", {
+				className: "truncate text-sm font-medium text-foreground",
+				children: o.title
+			}), o.description && /* @__PURE__ */ r("div", {
+				className: "mt-0.5 line-clamp-2 text-sm text-muted-foreground",
+				children: o.description
+			})]
+		}),
+		o.extra && /* @__PURE__ */ r("div", {
+			className: "shrink-0 text-sm text-muted-foreground",
+			children: o.extra
+		}),
+		d && /* @__PURE__ */ r(t, { className: "size-4 shrink-0 text-muted-foreground" })
+	] }), p = e("flex items-center gap-3 bg-card transition-colors", a[c], s && "border-b last:border-b-0", d && !o.disabled && "cursor-pointer hover:bg-muted/50", o.disabled && "pointer-events-none opacity-55", l);
+	return o.href ? /* @__PURE__ */ r("a", {
+		"data-slot": "list-row",
+		href: o.href,
+		className: p,
+		...u,
+		children: f
+	}) : /* @__PURE__ */ r("div", {
+		"data-slot": "list-row",
+		role: d ? "button" : void 0,
+		tabIndex: d && !o.disabled ? 0 : void 0,
+		className: p,
+		onClick: o.onClick,
+		...u,
+		children: f
+	});
+}
+//#endregion
+export { o as List, s as ListRow };

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

@@ -0,0 +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;

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

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type MetricTone = "default" | "success" | "warning" | "danger" | "info" | "muted";
+export type MetricGridColumn = 1 | 2 | 3 | 4;
+export type MetricItem = {
+    key: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    trend?: React.ReactNode;
+    tone?: MetricTone;
+    hidden?: boolean;
+    className?: string;
+};
+export type MetricGridProps = React.ComponentProps<"div"> & {
+    items: MetricItem[];
+    columns?: MetricGridColumn;
+    compact?: boolean;
+    itemClassName?: string;
+};
+declare function MetricGrid({ className, items, columns, compact, itemClassName, ...props }: MetricGridProps): React.JSX.Element;
+export { MetricGrid };

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

@@ -0,0 +1,58 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t, CardContent as n, CardDescription as r, CardHeader as i, CardTitle as a } from "../ui/card/index.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/metric-grid.tsx
+var c = {
+	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"
+}, l = {
+	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 u({ className: u, items: d, columns: f = 4, compact: p = !1, itemClassName: m, ...h }) {
+	let g = d.filter((e) => !e.hidden);
+	return /* @__PURE__ */ o("div", {
+		"data-slot": "metric-grid",
+		className: e("grid gap-3", c[f], u),
+		...h,
+		children: g.map((c) => /* @__PURE__ */ s(t, {
+			"data-slot": "stat-card",
+			"data-tone": c.tone ?? "default",
+			className: e("min-w-0 overflow-hidden", l[c.tone ?? "default"], m, c.className),
+			children: [/* @__PURE__ */ s(i, {
+				className: e("flex flex-row items-start justify-between gap-3 space-y-0", p ? "p-3 pb-1" : "pb-2"),
+				children: [/* @__PURE__ */ s("div", {
+					className: "min-w-0 space-y-1",
+					children: [/* @__PURE__ */ o(r, {
+						className: "truncate",
+						children: c.label
+					}), /* @__PURE__ */ o(a, {
+						className: e("truncate", p ? "text-xl" : "text-2xl"),
+						children: c.value
+					})]
+				}), c.icon && /* @__PURE__ */ o("div", {
+					className: "shrink-0 rounded-lg bg-muted p-2 text-muted-foreground [&_svg]:size-4",
+					children: c.icon
+				})]
+			}), (c.description || c.trend) && /* @__PURE__ */ s(n, {
+				className: e("flex min-w-0 items-center justify-between gap-2", p ? "p-3 pt-1" : "pt-0"),
+				children: [c.description && /* @__PURE__ */ o("div", {
+					className: "min-w-0 truncate text-xs text-muted-foreground",
+					children: c.description
+				}), c.trend && /* @__PURE__ */ o("div", {
+					className: "shrink-0 text-xs font-medium",
+					children: c.trend
+				})]
+			})]
+		}, c.key))
+	});
+}
+//#endregion
+export { u as MetricGrid };

package/dist/components/display/progress-circle.cjs

@@ -0,0 +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({value:e=0,max:n=100,label:i,className:a,...o}){let s=n>0?Math.max(0,Math.min(100,Math.round(e/n*100))):0;return(0,r.jsxs)(`div`,{"data-slot":`progress-circle`,className:t.cn(`inline-flex items-center gap-3`,a),...o,children:[(0,r.jsxs)(`span`,{className:`inline-flex size-14 items-center justify-center rounded-full border-4 border-muted bg-background text-xs font-semibold text-foreground`,children:[s,`%`]}),i?(0,r.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:i}):null]})}exports.ProgressCircle=i;

package/dist/components/display/progress-circle.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export type ProgressCircleProps = React.ComponentProps<"div"> & {
+    value?: number;
+    max?: number;
+    label?: React.ReactNode;
+};
+declare function ProgressCircle({ value, max, label, className, ...props }: ProgressCircleProps): React.JSX.Element;
+export { ProgressCircle };

package/dist/components/display/progress-circle.js

@@ -0,0 +1,21 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/display/progress-circle.tsx
+function r({ value: r = 0, max: i = 100, label: a, className: o, ...s }) {
+	let c = i > 0 ? Math.max(0, Math.min(100, Math.round(r / i * 100))) : 0;
+	return /* @__PURE__ */ n("div", {
+		"data-slot": "progress-circle",
+		className: e("inline-flex items-center gap-3", o),
+		...s,
+		children: [/* @__PURE__ */ n("span", {
+			className: "inline-flex size-14 items-center justify-center rounded-full border-4 border-muted bg-background text-xs font-semibold text-foreground",
+			children: [c, "%"]
+		}), a ? /* @__PURE__ */ t("span", {
+			className: "text-sm text-muted-foreground",
+			children: a
+		}) : null]
+	});
+}
+//#endregion
+export { r as ProgressCircle };

package/dist/components/display/progress.cjs

@@ -0,0 +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={default:`bg-primary`,success:`bg-emerald-500`,info:`bg-blue-500`,warning:`bg-amber-500`,danger:`bg-destructive`,muted:`bg-muted-foreground`},o={sm:`h-1.5`,default:`h-2`,lg:`h-3`};function s(e,t,n){return Math.min(Math.max(e,t),n)}function c(e,t,n){return e==null||!Number.isFinite(e)||n<=t?0:(s(e,t,n)-t)/(n-t)*100}function l({value:e=0,min:n=0,max:r=100,label:s,description:l,showValue:u=!1,valueFormatter:d,tone:f=`default`,size:p=`default`,indeterminate:m=!1,className:h,trackClassName:g,indicatorClassName:_,...v}){let y=c(e,n,r),b=e??n;return(0,i.jsxs)(`div`,{"data-slot":`progress`,className:t.cn(`grid gap-1.5`,h),...v,children:[(s||l||u)&&(0,i.jsxs)(`div`,{className:`flex min-w-0 items-start justify-between gap-3 text-sm`,children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-0.5`,children:[s&&(0,i.jsx)(`div`,{className:`font-medium leading-none`,children:s}),l&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:l})]}),u&&(0,i.jsx)(`div`,{className:`shrink-0 text-xs font-medium text-muted-foreground`,children:d?d(b,y):`${Math.round(y)}%`})]}),(0,i.jsx)(`div`,{"data-slot":`progress-track`,className:t.cn(`w-full overflow-hidden rounded-full bg-muted`,o[p],g),role:`progressbar`,"aria-valuemin":n,"aria-valuemax":r,"aria-valuenow":m?void 0:b,"aria-label":typeof s==`string`?s:void 0,children:(0,i.jsx)(`div`,{"data-slot":`progress-indicator`,"data-indeterminate":m||void 0,className:t.cn(`h-full rounded-full transition-all data-[indeterminate=true]:w-1/3 data-[indeterminate=true]:animate-pulse`,a[f],_),style:m?void 0:{width:`${y}%`}})})]})}function u({title:e,description:r,value:a,min:o,max:s,tone:c,size:u,showValue:d=!0,valueFormatter:f,footer:p,progressClassName:m,className:h,...g}){return(0,i.jsxs)(n.Card,{"data-slot":`progress-card`,className:t.cn(`min-w-0`,h),...g,children:[(0,i.jsx)(n.CardHeader,{children:(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e&&(0,i.jsx)(n.CardTitle,{children:e}),r&&(0,i.jsx)(n.CardDescription,{children:r})]})}),(0,i.jsxs)(n.CardContent,{className:`space-y-3`,children:[(0,i.jsx)(l,{value:a,min:o,max:s,tone:c,size:u,showValue:d,valueFormatter:f,className:m}),p]})]})}exports.Progress=l,exports.ProgressCard=u,exports.getProgressPercent=c;

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

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type ProgressTone = "default" | "success" | "info" | "warning" | "danger" | "muted";
+export type ProgressSize = "sm" | "default" | "lg";
+export type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & {
+    value?: number | null;
+    max?: number;
+    min?: number;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    showValue?: boolean;
+    valueFormatter?: (value: number, percent: number) => React.ReactNode;
+    tone?: ProgressTone;
+    size?: ProgressSize;
+    indeterminate?: boolean;
+    trackClassName?: string;
+    indicatorClassName?: string;
+};
+export type ProgressCardProps = React.ComponentProps<typeof Card> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    value?: number | null;
+    max?: number;
+    min?: number;
+    tone?: ProgressTone;
+    size?: ProgressSize;
+    showValue?: boolean;
+    valueFormatter?: ProgressProps["valueFormatter"];
+    footer?: React.ReactNode;
+    progressClassName?: string;
+};
+declare function getProgressPercent(value: number | null | undefined, min: number, max: number): number;
+declare function Progress({ value, min, max, label, description, showValue, valueFormatter, tone, size, indeterminate, className, trackClassName, indicatorClassName, ...props }: ProgressProps): React.JSX.Element;
+declare function ProgressCard({ title, description, value, min, max, tone, size, showValue, valueFormatter, footer, progressClassName, className, ...props }: ProgressCardProps): React.JSX.Element;
+export { Progress, ProgressCard, getProgressPercent };

package/dist/components/display/progress.js

@@ -0,0 +1,86 @@
+import { cn as e } from "../../lib/utils.js";
+import { Card as t, CardContent as n, CardDescription as r, CardHeader as i, CardTitle as a } from "../ui/card/index.js";
+import "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/progress.tsx
+var c = {
+	default: "bg-primary",
+	success: "bg-emerald-500",
+	info: "bg-blue-500",
+	warning: "bg-amber-500",
+	danger: "bg-destructive",
+	muted: "bg-muted-foreground"
+}, l = {
+	sm: "h-1.5",
+	default: "h-2",
+	lg: "h-3"
+};
+function u(e, t, n) {
+	return Math.min(Math.max(e, t), n);
+}
+function d(e, t, n) {
+	return e == null || !Number.isFinite(e) || n <= t ? 0 : (u(e, t, n) - t) / (n - t) * 100;
+}
+function f({ value: t = 0, min: n = 0, max: r = 100, label: i, description: a, showValue: u = !1, valueFormatter: f, tone: p = "default", size: m = "default", indeterminate: h = !1, className: g, trackClassName: _, indicatorClassName: v, ...y }) {
+	let b = d(t, n, r), x = t ?? n;
+	return /* @__PURE__ */ s("div", {
+		"data-slot": "progress",
+		className: e("grid gap-1.5", g),
+		...y,
+		children: [(i || a || u) && /* @__PURE__ */ s("div", {
+			className: "flex min-w-0 items-start justify-between gap-3 text-sm",
+			children: [/* @__PURE__ */ s("div", {
+				className: "min-w-0 space-y-0.5",
+				children: [i && /* @__PURE__ */ o("div", {
+					className: "font-medium leading-none",
+					children: i
+				}), a && /* @__PURE__ */ o("div", {
+					className: "text-xs text-muted-foreground",
+					children: a
+				})]
+			}), u && /* @__PURE__ */ o("div", {
+				className: "shrink-0 text-xs font-medium text-muted-foreground",
+				children: f ? f(x, b) : `${Math.round(b)}%`
+			})]
+		}), /* @__PURE__ */ o("div", {
+			"data-slot": "progress-track",
+			className: e("w-full overflow-hidden rounded-full bg-muted", l[m], _),
+			role: "progressbar",
+			"aria-valuemin": n,
+			"aria-valuemax": r,
+			"aria-valuenow": h ? void 0 : x,
+			"aria-label": typeof i == "string" ? i : void 0,
+			children: /* @__PURE__ */ o("div", {
+				"data-slot": "progress-indicator",
+				"data-indeterminate": h || void 0,
+				className: e("h-full rounded-full transition-all data-[indeterminate=true]:w-1/3 data-[indeterminate=true]:animate-pulse", c[p], v),
+				style: h ? void 0 : { width: `${b}%` }
+			})
+		})]
+	});
+}
+function p({ title: c, description: l, value: u, min: d, max: p, tone: m, size: h, showValue: g = !0, valueFormatter: _, footer: v, progressClassName: y, className: b, ...x }) {
+	return /* @__PURE__ */ s(t, {
+		"data-slot": "progress-card",
+		className: e("min-w-0", b),
+		...x,
+		children: [/* @__PURE__ */ o(i, { children: /* @__PURE__ */ s("div", {
+			className: "min-w-0 space-y-1",
+			children: [c && /* @__PURE__ */ o(a, { children: c }), l && /* @__PURE__ */ o(r, { children: l })]
+		}) }), /* @__PURE__ */ s(n, {
+			className: "space-y-3",
+			children: [/* @__PURE__ */ o(f, {
+				value: u,
+				min: d,
+				max: p,
+				tone: m,
+				size: h,
+				showValue: g,
+				valueFormatter: _,
+				className: y
+			}), v]
+		})]
+	});
+}
+//#endregion
+export { f as Progress, p as ProgressCard, d as getProgressPercent };

package/dist/components/display/property-grid.cjs

@@ -0,0 +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({items:e,columns:n=3,bordered:i=!0,className:a,...o}){return(0,r.jsx)(`div`,{"data-slot":`property-grid`,className:t.cn(`grid gap-3`,n===1&&`grid-cols-1`,n===2&&`grid-cols-1 sm:grid-cols-2`,n===3&&`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`,n===4&&`grid-cols-1 sm:grid-cols-2 lg:grid-cols-4`,a),...o,children:e.map(e=>(0,r.jsxs)(`div`,{"data-slot":`property-grid-item`,className:t.cn(`min-w-0 rounded-lg bg-card p-3`,i&&`border`,e.span===2&&`sm:col-span-2`,e.span===3&&`lg:col-span-3`,e.span===4&&`lg:col-span-4`),children:[(0,r.jsx)(`div`,{className:`text-xs font-medium uppercase tracking-wide text-muted-foreground`,children:e.label}),(0,r.jsx)(`div`,{className:`mt-1 break-words text-sm font-medium text-foreground`,children:e.value}),e.description&&(0,r.jsx)(`div`,{className:`mt-1 text-xs text-muted-foreground`,children:e.description})]},e.key))})}exports.PropertyGrid=i;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type PropertyGridItem = {
+    key: string;
+    label: React.ReactNode;
+    value: React.ReactNode;
+    description?: React.ReactNode;
+    span?: 1 | 2 | 3 | 4;
+};
+export type PropertyGridProps = React.ComponentProps<"div"> & {
+    items: PropertyGridItem[];
+    columns?: 1 | 2 | 3 | 4;
+    bordered?: boolean;
+};
+declare function PropertyGrid({ items, columns, bordered, className, ...props }: PropertyGridProps): React.JSX.Element;
+export { PropertyGrid };

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

@@ -0,0 +1,31 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/display/property-grid.tsx
+function r({ items: r, columns: i = 3, bordered: a = !0, className: o, ...s }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "property-grid",
+		className: e("grid gap-3", i === 1 && "grid-cols-1", i === 2 && "grid-cols-1 sm:grid-cols-2", i === 3 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", i === 4 && "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4", o),
+		...s,
+		children: r.map((r) => /* @__PURE__ */ n("div", {
+			"data-slot": "property-grid-item",
+			className: e("min-w-0 rounded-lg bg-card p-3", a && "border", r.span === 2 && "sm:col-span-2", r.span === 3 && "lg:col-span-3", r.span === 4 && "lg:col-span-4"),
+			children: [
+				/* @__PURE__ */ t("div", {
+					className: "text-xs font-medium uppercase tracking-wide text-muted-foreground",
+					children: r.label
+				}),
+				/* @__PURE__ */ t("div", {
+					className: "mt-1 break-words text-sm font-medium text-foreground",
+					children: r.value
+				}),
+				r.description && /* @__PURE__ */ t("div", {
+					className: "mt-1 text-xs text-muted-foreground",
+					children: r.description
+				})
+			]
+		}, r.key))
+	});
+}
+//#endregion
+export { r as PropertyGrid };

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

@@ -0,0 +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;

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+export type QRCodeProps = React.ComponentProps<"div"> & {
+    value: string;
+    src?: string;
+    alt?: string;
+    size?: number;
+    cells?: number;
+};
+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;
+export { QRCode, QRCodeSvg };

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

@@ -0,0 +1,100 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/display/qr-code.tsx
+function r(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 i(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 a({ x: e, y: r }) {
+	return /* @__PURE__ */ n("g", { children: [
+		/* @__PURE__ */ t("rect", {
+			x: e,
+			y: r,
+			width: "7",
+			height: "7",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ t("rect", {
+			x: e + 1,
+			y: r + 1,
+			width: "5",
+			height: "5",
+			fill: "white"
+		}),
+		/* @__PURE__ */ t("rect", {
+			x: e + 2,
+			y: r + 2,
+			width: "3",
+			height: "3",
+			fill: "currentColor"
+		})
+	] });
+}
+function o({ value: e, cells: o = 29, title: s }) {
+	let c = r(e), l = `0 0 ${o} ${o}`, u = Array.from({ length: o }, (e, t) => t), d = Array.from({ length: o }, (e, t) => t);
+	return /* @__PURE__ */ n("svg", {
+		role: "img",
+		"aria-label": s ?? e,
+		viewBox: l,
+		className: "size-full text-foreground",
+		shapeRendering: "crispEdges",
+		children: [
+			/* @__PURE__ */ t("rect", {
+				width: o,
+				height: o,
+				fill: "white"
+			}),
+			/* @__PURE__ */ t(a, {
+				x: 0,
+				y: 0
+			}),
+			/* @__PURE__ */ t(a, {
+				x: o - 7,
+				y: 0
+			}),
+			/* @__PURE__ */ t(a, {
+				x: 0,
+				y: o - 7
+			}),
+			u.map((e) => d.map((n) => i(e, n, c) ? /* @__PURE__ */ t("rect", {
+				x: n,
+				y: e,
+				width: "1",
+				height: "1",
+				fill: "currentColor"
+			}, `${e}-${n}`) : null))
+		]
+	});
+}
+function s({ value: n, src: r, alt: i, size: a = 160, cells: s = 29, className: c, ...l }) {
+	return /* @__PURE__ */ t("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: "rounded-md bg-white p-2",
+			style: {
+				width: a,
+				height: a
+			},
+			children: r ? /* @__PURE__ */ t("img", {
+				src: r,
+				alt: i ?? n,
+				width: a,
+				height: a,
+				className: "size-full rounded-sm object-contain"
+			}) : /* @__PURE__ */ t(o, {
+				value: n,
+				cells: s,
+				title: i
+			})
+		})
+	});
+}
+//#endregion
+export { s as QRCode, o as QRCodeSvg };

package/dist/components/display/result.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("lucide-react"),a=require("react/jsx-runtime");var o={success:(0,a.jsx)(i.CheckCircle2Icon,{className:`size-8`}),error:(0,a.jsx)(i.AlertCircleIcon,{className:`size-8`}),warning:(0,a.jsx)(i.TriangleAlertIcon,{className:`size-8`}),info:(0,a.jsx)(i.InfoIcon,{className:`size-8`}),"not-found":(0,a.jsx)(i.InfoIcon,{className:`size-8`}),forbidden:(0,a.jsx)(i.ShieldAlertIcon,{className:`size-8`}),"server-error":(0,a.jsx)(i.AlertCircleIcon,{className:`size-8`})},s={success:`bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`,error:`bg-destructive/10 text-destructive`,warning:`bg-amber-500/10 text-amber-600 dark:text-amber-400`,info:`bg-blue-500/10 text-blue-600 dark:text-blue-400`,"not-found":`bg-muted text-muted-foreground`,forbidden:`bg-amber-500/10 text-amber-600 dark:text-amber-400`,"server-error":`bg-destructive/10 text-destructive`},c={success:`Success`,error:`Something went wrong`,warning:`Check this action`,info:`Information`,"not-found":`Page not found`,forbidden:`Access forbidden`,"server-error":`Server error`};function l({status:e=`info`,icon:n,title:r,description:i,actions:l,extra:u,compact:d=!1,iconClassName:f,titleClassName:p,descriptionClassName:m,className:h,...g}){return(0,a.jsxs)(`div`,{"data-slot":`result`,"data-status":e,className:t.cn(`flex flex-col items-center justify-center text-center`,d?`gap-3 p-4`:`gap-4 p-8`,h),...g,children:[(0,a.jsx)(`div`,{className:t.cn(`flex items-center justify-center rounded-full`,d?`size-12`:`size-16`,s[e],f),children:n??o[e]}),(0,a.jsxs)(`div`,{className:`max-w-lg space-y-2`,children:[(0,a.jsx)(`h3`,{className:t.cn(`font-semibold tracking-tight`,d?`text-base`:`text-2xl`,p),children:r??c[e]}),i&&(0,a.jsx)(`p`,{className:t.cn(`text-sm leading-6 text-muted-foreground`,m),children:i})]}),l&&(0,a.jsx)(`div`,{className:`flex flex-wrap justify-center gap-2`,children:l}),u&&(0,a.jsx)(`div`,{className:`w-full max-w-2xl`,children:u})]})}function u({className:e,...r}){return(0,a.jsx)(n.Button,{className:t.cn(`min-w-28`,e),...r})}exports.Result=l,exports.ResultAction=u;

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

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+export type ResultStatus = "success" | "error" | "warning" | "info" | "not-found" | "forbidden" | "server-error";
+export type ResultProps = React.ComponentProps<"div"> & {
+    status?: ResultStatus;
+    icon?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    extra?: React.ReactNode;
+    compact?: boolean;
+    iconClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+};
+declare function Result({ status, icon, title, description, actions, extra, compact, iconClassName, titleClassName, descriptionClassName, className, ...props }: ResultProps): React.JSX.Element;
+declare function ResultAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+export { Result, ResultAction };