tembro 1.0.0

package/dist/components/display/result.js

@@ -0,0 +1,71 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import "react";
+import { AlertCircleIcon as n, CheckCircle2Icon as r, InfoIcon as i, ShieldAlertIcon as a, TriangleAlertIcon as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/display/result.tsx
+var l = {
+	success: /* @__PURE__ */ s(r, { className: "size-8" }),
+	error: /* @__PURE__ */ s(n, { className: "size-8" }),
+	warning: /* @__PURE__ */ s(o, { className: "size-8" }),
+	info: /* @__PURE__ */ s(i, { className: "size-8" }),
+	"not-found": /* @__PURE__ */ s(i, { className: "size-8" }),
+	forbidden: /* @__PURE__ */ s(a, { className: "size-8" }),
+	"server-error": /* @__PURE__ */ s(n, { className: "size-8" })
+}, u = {
+	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"
+}, d = {
+	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 f({ status: t = "info", icon: n, title: r, description: i, actions: a, extra: o, compact: f = !1, iconClassName: p, titleClassName: m, descriptionClassName: h, className: g, ..._ }) {
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "result",
+		"data-status": t,
+		className: e("flex flex-col items-center justify-center text-center", f ? "gap-3 p-4" : "gap-4 p-8", g),
+		..._,
+		children: [
+			/* @__PURE__ */ s("div", {
+				className: e("flex items-center justify-center rounded-full", f ? "size-12" : "size-16", u[t], p),
+				children: n ?? l[t]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "max-w-lg space-y-2",
+				children: [/* @__PURE__ */ s("h3", {
+					className: e("font-semibold tracking-tight", f ? "text-base" : "text-2xl", m),
+					children: r ?? d[t]
+				}), i && /* @__PURE__ */ s("p", {
+					className: e("text-sm leading-6 text-muted-foreground", h),
+					children: i
+				})]
+			}),
+			a && /* @__PURE__ */ s("div", {
+				className: "flex flex-wrap justify-center gap-2",
+				children: a
+			}),
+			o && /* @__PURE__ */ s("div", {
+				className: "w-full max-w-2xl",
+				children: o
+			})
+		]
+	});
+}
+function p({ className: n, ...r }) {
+	return /* @__PURE__ */ s(t, {
+		className: e("min-w-28", n),
+		...r
+	});
+}
+//#endregion
+export { f as Result, p as ResultAction };

package/dist/components/display/skeleton-form.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/skeleton/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({fields:e=4,showTitle:r=!0,showActions:a=!0,columns:o=1,className:s,...c}){return(0,i.jsxs)(`div`,{"data-slot":`skeleton-form`,className:t.cn(`w-full space-y-6`,s),...c,children:[r&&(0,i.jsxs)(`div`,{className:`space-y-2 border-b pb-4`,children:[(0,i.jsx)(n.Skeleton,{className:`h-6 w-1/3`}),(0,i.jsx)(n.Skeleton,{className:`h-4 w-1/2`})]}),(0,i.jsx)(`div`,{className:t.cn(`grid gap-6`,o===2&&`sm:grid-cols-2`),children:Array.from({length:e}).map((e,t)=>(0,i.jsxs)(`div`,{className:`space-y-2`,children:[(0,i.jsx)(n.Skeleton,{className:`h-4 w-20`}),(0,i.jsx)(n.Skeleton,{className:`h-10 w-full`})]},t))}),a&&(0,i.jsxs)(`div`,{className:`flex justify-end gap-2 pt-4`,children:[(0,i.jsx)(n.Skeleton,{className:`h-10 w-24`}),(0,i.jsx)(n.Skeleton,{className:`h-10 w-24`})]})]})}exports.SkeletonForm=a;

package/dist/components/display/skeleton-form.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type SkeletonFormProps = React.ComponentProps<"div"> & {
+    fields?: number;
+    showTitle?: boolean;
+    showActions?: boolean;
+    columns?: 1 | 2;
+};
+declare function SkeletonForm({ fields, showTitle, showActions, columns, className, ...props }: SkeletonFormProps): React.JSX.Element;
+export { SkeletonForm };

package/dist/components/display/skeleton-form.js

@@ -0,0 +1,31 @@
+import { cn as e } from "../../lib/utils.js";
+import { Skeleton as t } from "../ui/skeleton/index.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/display/skeleton-form.tsx
+function i({ fields: i = 4, showTitle: a = !0, showActions: o = !0, columns: s = 1, className: c, ...l }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "skeleton-form",
+		className: e("w-full space-y-6", c),
+		...l,
+		children: [
+			a && /* @__PURE__ */ r("div", {
+				className: "space-y-2 border-b pb-4",
+				children: [/* @__PURE__ */ n(t, { className: "h-6 w-1/3" }), /* @__PURE__ */ n(t, { className: "h-4 w-1/2" })]
+			}),
+			/* @__PURE__ */ n("div", {
+				className: e("grid gap-6", s === 2 && "sm:grid-cols-2"),
+				children: Array.from({ length: i }).map((e, i) => /* @__PURE__ */ r("div", {
+					className: "space-y-2",
+					children: [/* @__PURE__ */ n(t, { className: "h-4 w-20" }), /* @__PURE__ */ n(t, { className: "h-10 w-full" })]
+				}, i))
+			}),
+			o && /* @__PURE__ */ r("div", {
+				className: "flex justify-end gap-2 pt-4",
+				children: [/* @__PURE__ */ n(t, { className: "h-10 w-24" }), /* @__PURE__ */ n(t, { className: "h-10 w-24" })]
+			})
+		]
+	});
+}
+//#endregion
+export { i as SkeletonForm };

package/dist/components/display/skeleton-table.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/skeleton/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");function a({rows:e=5,columns:r=4,showHeader:a=!0,showToolbar:o=!1,className:s,...c}){return(0,i.jsxs)(`div`,{"data-slot":`skeleton-table`,className:t.cn(`w-full space-y-4`,s),...c,children:[o&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,i.jsx)(n.Skeleton,{className:`h-8 w-[250px]`}),(0,i.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,i.jsx)(n.Skeleton,{className:`h-8 w-[100px]`}),(0,i.jsx)(n.Skeleton,{className:`h-8 w-[80px]`})]})]}),(0,i.jsxs)(`div`,{className:`rounded-md border`,children:[a&&(0,i.jsx)(`div`,{className:`border-b bg-muted/50`,children:(0,i.jsx)(`div`,{className:`flex px-4 py-3`,children:Array.from({length:r}).map((e,t)=>(0,i.jsx)(`div`,{className:`flex-1 pr-4`,children:(0,i.jsx)(n.Skeleton,{className:`h-4 w-24`})},t))})}),(0,i.jsx)(`div`,{className:`divide-y`,children:Array.from({length:e}).map((e,a)=>(0,i.jsx)(`div`,{className:`flex px-4 py-3`,children:Array.from({length:r}).map((e,r)=>(0,i.jsx)(`div`,{className:`flex-1 pr-4`,children:(0,i.jsx)(n.Skeleton,{className:t.cn(`h-4`,r===0?`w-full max-w-[200px]`:`w-1/2`)})},r))},a))})]})]})}exports.SkeletonTable=a;

package/dist/components/display/skeleton-table.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+export type SkeletonTableProps = React.ComponentProps<"div"> & {
+    rows?: number;
+    columns?: number;
+    showHeader?: boolean;
+    showToolbar?: boolean;
+};
+declare function SkeletonTable({ rows, columns, showHeader, showToolbar, className, ...props }: SkeletonTableProps): React.JSX.Element;
+export { SkeletonTable };

package/dist/components/display/skeleton-table.js

@@ -0,0 +1,42 @@
+import { cn as e } from "../../lib/utils.js";
+import { Skeleton as t } from "../ui/skeleton/index.js";
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/display/skeleton-table.tsx
+function i({ rows: i = 5, columns: a = 4, showHeader: o = !0, showToolbar: s = !1, className: c, ...l }) {
+	return /* @__PURE__ */ r("div", {
+		"data-slot": "skeleton-table",
+		className: e("w-full space-y-4", c),
+		...l,
+		children: [s && /* @__PURE__ */ r("div", {
+			className: "flex items-center justify-between",
+			children: [/* @__PURE__ */ n(t, { className: "h-8 w-[250px]" }), /* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ n(t, { className: "h-8 w-[100px]" }), /* @__PURE__ */ n(t, { className: "h-8 w-[80px]" })]
+			})]
+		}), /* @__PURE__ */ r("div", {
+			className: "rounded-md border",
+			children: [o && /* @__PURE__ */ n("div", {
+				className: "border-b bg-muted/50",
+				children: /* @__PURE__ */ n("div", {
+					className: "flex px-4 py-3",
+					children: Array.from({ length: a }).map((e, r) => /* @__PURE__ */ n("div", {
+						className: "flex-1 pr-4",
+						children: /* @__PURE__ */ n(t, { className: "h-4 w-24" })
+					}, r))
+				})
+			}), /* @__PURE__ */ n("div", {
+				className: "divide-y",
+				children: Array.from({ length: i }).map((r, i) => /* @__PURE__ */ n("div", {
+					className: "flex px-4 py-3",
+					children: Array.from({ length: a }).map((r, i) => /* @__PURE__ */ n("div", {
+						className: "flex-1 pr-4",
+						children: /* @__PURE__ */ n(t, { className: e("h-4", i === 0 ? "w-full max-w-[200px]" : "w-1/2") })
+					}, i))
+				}, i))
+			})]
+		})]
+	});
+}
+//#endregion
+export { i as SkeletonTable };

package/dist/components/display/smart-card.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"),r=require("../ui/skeleton/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={default:`border border-border/70 bg-card/96 shadow-sm ring-1 ring-foreground/4`,outline:`border border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4`,elevated:`border border-border/75 bg-card/98 shadow-[0_24px_80px_rgba(15,23,42,0.12)] ring-1 ring-foreground/4`,ghost:`border-transparent bg-transparent shadow-none`},s={compact:`p-3`,default:`p-4`,comfortable:`p-5`},c={sm:`text-sm`,md:`text-base`,lg:`text-lg`};function l({eyebrow:e,title:i,description:l,media:u,icon:d,status:f,actions:p,meta:m,content:h,footer:g,orientation:_=`vertical`,variant:v=`outline`,size:y=`md`,density:b,compact:x,loading:S=!1,disabled:C=!1,selected:w=!1,interactive:T,className:E,classNames:D,renderHeader:O,renderMedia:k,renderContent:A,renderFooter:j,children:M,onClick:N,...P}){let F={eyebrow:e,title:i,description:l,media:u,icon:d,status:f,actions:p,meta:m,content:h,footer:g},I=!!(N||T),L=x?`compact`:b??`default`;return(0,a.jsx)(n.Card,{"data-slot":`info-card`,"data-selected":w||void 0,"data-disabled":C||void 0,"data-loading":S||void 0,className:t.cn(`overflow-hidden transition-colors data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55`,o[v],I&&`cursor-pointer hover:bg-muted/35`,_===`horizontal`&&`flex`,E,D?.root),onClick:C?void 0:N,...P,children:S?(0,a.jsxs)(`div`,{className:t.cn(`grid gap-3`,s[L]),children:[(0,a.jsx)(r.Skeleton,{className:`h-5 w-1/2`}),(0,a.jsx)(r.SkeletonText,{rows:3})]}):(0,a.jsxs)(a.Fragment,{children:[u&&(k?.(F)??(0,a.jsx)(`div`,{"data-slot":`info-card-media`,className:t.cn(`bg-muted/50`,_===`horizontal`?`w-40 shrink-0 border-r border-border/70`:`aspect-video border-b border-border/70`,D?.media),children:u})),(0,a.jsxs)(`div`,{"data-slot":`info-card-body`,className:t.cn(`grid min-w-0 flex-1 gap-3`,s[L],D?.body),children:[O?.(F)??(0,a.jsxs)(`div`,{"data-slot":`info-card-header`,className:t.cn(`flex items-start justify-between gap-3`,D?.header),children:[(0,a.jsxs)(`div`,{className:`flex min-w-0 items-start gap-3`,children:[d&&(0,a.jsx)(`div`,{"data-slot":`info-card-icon`,className:t.cn(`flex size-9 shrink-0 items-center justify-center rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]`,D?.icon),children:d}),(0,a.jsxs)(`div`,{className:`grid min-w-0 gap-1`,children:[e&&(0,a.jsx)(`div`,{"data-slot":`info-card-eyebrow`,className:t.cn(`text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground`,D?.eyebrow),children:e}),(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2`,children:[i&&(0,a.jsx)(`div`,{"data-slot":`info-card-title`,className:t.cn(`truncate font-semibold tracking-tight text-foreground`,c[y],D?.title),children:i}),f&&(0,a.jsx)(`div`,{"data-slot":`info-card-status`,className:D?.status,children:f})]}),l&&(0,a.jsx)(`div`,{"data-slot":`info-card-description`,className:t.cn(`line-clamp-2 text-sm text-muted-foreground`,D?.description),children:l})]})]}),p&&(0,a.jsx)(`div`,{"data-slot":`info-card-actions`,className:t.cn(`shrink-0`,D?.actions),onClick:t.stopInteractivePropagation,onMouseDown:t.stopInteractivePropagation,onDoubleClick:t.stopInteractivePropagation,children:p})]}),m&&(0,a.jsx)(`div`,{"data-slot":`info-card-meta`,className:t.cn(`text-xs text-muted-foreground`,D?.meta),children:m}),(h||M)&&(A?.(F)??(0,a.jsx)(`div`,{"data-slot":`info-card-content`,className:D?.content,children:h??M})),g&&(j?.(F)??(0,a.jsx)(`div`,{"data-slot":`info-card-footer`,className:t.cn(`border-t pt-3 text-sm text-muted-foreground`,D?.footer),children:g}))]})]})})}function u(e){return(0,a.jsx)(l,{...e})}exports.InfoCard=l,exports.SmartCard=u;

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type InfoCardVariant = "default" | "outline" | "elevated" | "ghost";
+export type InfoCardSize = "sm" | "md" | "lg";
+export type InfoCardDensity = "compact" | "default" | "comfortable";
+export type InfoCardOrientation = "vertical" | "horizontal";
+export type InfoCardClassNames = {
+    root?: string;
+    media?: string;
+    header?: string;
+    icon?: string;
+    body?: string;
+    eyebrow?: string;
+    title?: string;
+    description?: string;
+    content?: string;
+    footer?: string;
+    actions?: string;
+    meta?: string;
+    status?: string;
+};
+export type InfoCardRenderContext = {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    eyebrow?: React.ReactNode;
+    media?: React.ReactNode;
+    icon?: React.ReactNode;
+    status?: React.ReactNode;
+    actions?: React.ReactNode;
+    meta?: React.ReactNode;
+    content?: React.ReactNode;
+    footer?: React.ReactNode;
+};
+export type InfoCardProps = Omit<React.ComponentProps<typeof Card>, "title" | "content" | "size"> & InfoCardRenderContext & {
+    orientation?: InfoCardOrientation;
+    variant?: InfoCardVariant;
+    size?: InfoCardSize;
+    density?: InfoCardDensity;
+    compact?: boolean;
+    loading?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    interactive?: boolean;
+    classNames?: InfoCardClassNames;
+    renderHeader?: (ctx: InfoCardRenderContext) => React.ReactNode;
+    renderMedia?: (ctx: InfoCardRenderContext) => React.ReactNode;
+    renderContent?: (ctx: InfoCardRenderContext) => React.ReactNode;
+    renderFooter?: (ctx: InfoCardRenderContext) => React.ReactNode;
+};
+declare function InfoCard({ eyebrow, title, description, media, icon, status, actions, meta, content, footer, orientation, variant, size, density, compact, loading, disabled, selected, interactive, className, classNames, renderHeader, renderMedia, renderContent, renderFooter, children, onClick, ...props }: InfoCardProps): React.JSX.Element;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardVariant = InfoCardVariant;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardSize = InfoCardSize;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardDensity = InfoCardDensity;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardOrientation = InfoCardOrientation;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardClassNames = InfoCardClassNames;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardRenderContext = InfoCardRenderContext;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+export type SmartCardProps = InfoCardProps;
+/** @deprecated Prefer `InfoCard` or `CardFamily.Info` for new public usage. */
+declare function SmartCard(props: SmartCardProps): React.JSX.Element;
+export { InfoCard, SmartCard };

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

@@ -0,0 +1,121 @@
+import { cn as e, stopInteractivePropagation as t } from "../../lib/utils.js";
+import { Card as n } from "../ui/card/index.js";
+import { Skeleton as r, SkeletonText as i } from "../ui/skeleton/index.js";
+import "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/display/smart-card.tsx
+var c = {
+	default: "border border-border/70 bg-card/96 shadow-sm ring-1 ring-foreground/4",
+	outline: "border border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4",
+	elevated: "border border-border/75 bg-card/98 shadow-[0_24px_80px_rgba(15,23,42,0.12)] ring-1 ring-foreground/4",
+	ghost: "border-transparent bg-transparent shadow-none"
+}, l = {
+	compact: "p-3",
+	default: "p-4",
+	comfortable: "p-5"
+}, u = {
+	sm: "text-sm",
+	md: "text-base",
+	lg: "text-lg"
+};
+function d({ eyebrow: d, title: f, description: p, media: m, icon: h, status: g, actions: _, meta: v, content: y, footer: b, orientation: x = "vertical", variant: S = "outline", size: C = "md", density: w, compact: T, loading: E = !1, disabled: D = !1, selected: O = !1, interactive: k, className: A, classNames: j, renderHeader: M, renderMedia: N, renderContent: P, renderFooter: F, children: I, onClick: L, ...R }) {
+	let z = {
+		eyebrow: d,
+		title: f,
+		description: p,
+		media: m,
+		icon: h,
+		status: g,
+		actions: _,
+		meta: v,
+		content: y,
+		footer: b
+	}, B = !!(L || k), V = T ? "compact" : w ?? "default";
+	return /* @__PURE__ */ o(n, {
+		"data-slot": "info-card",
+		"data-selected": O || void 0,
+		"data-disabled": D || void 0,
+		"data-loading": E || void 0,
+		className: e("overflow-hidden transition-colors data-[selected=true]:border-primary data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-55", c[S], B && "cursor-pointer hover:bg-muted/35", x === "horizontal" && "flex", A, j?.root),
+		onClick: D ? void 0 : L,
+		...R,
+		children: E ? /* @__PURE__ */ s("div", {
+			className: e("grid gap-3", l[V]),
+			children: [/* @__PURE__ */ o(r, { className: "h-5 w-1/2" }), /* @__PURE__ */ o(i, { rows: 3 })]
+		}) : /* @__PURE__ */ s(a, { children: [m && (N?.(z) ?? /* @__PURE__ */ o("div", {
+			"data-slot": "info-card-media",
+			className: e("bg-muted/50", x === "horizontal" ? "w-40 shrink-0 border-r border-border/70" : "aspect-video border-b border-border/70", j?.media),
+			children: m
+		})), /* @__PURE__ */ s("div", {
+			"data-slot": "info-card-body",
+			className: e("grid min-w-0 flex-1 gap-3", l[V], j?.body),
+			children: [
+				M?.(z) ?? /* @__PURE__ */ s("div", {
+					"data-slot": "info-card-header",
+					className: e("flex items-start justify-between gap-3", j?.header),
+					children: [/* @__PURE__ */ s("div", {
+						className: "flex min-w-0 items-start gap-3",
+						children: [h && /* @__PURE__ */ o("div", {
+							"data-slot": "info-card-icon",
+							className: e("flex size-9 shrink-0 items-center justify-center rounded-[min(var(--radius-xl),16px)] border border-border/70 bg-muted/45 text-muted-foreground shadow-[0_1px_0_rgba(255,255,255,0.05)]", j?.icon),
+							children: h
+						}), /* @__PURE__ */ s("div", {
+							className: "grid min-w-0 gap-1",
+							children: [
+								d && /* @__PURE__ */ o("div", {
+									"data-slot": "info-card-eyebrow",
+									className: e("text-[11px] font-semibold uppercase tracking-[0.22em] text-muted-foreground", j?.eyebrow),
+									children: d
+								}),
+								/* @__PURE__ */ s("div", {
+									className: "flex flex-wrap items-center gap-2",
+									children: [f && /* @__PURE__ */ o("div", {
+										"data-slot": "info-card-title",
+										className: e("truncate font-semibold tracking-tight text-foreground", u[C], j?.title),
+										children: f
+									}), g && /* @__PURE__ */ o("div", {
+										"data-slot": "info-card-status",
+										className: j?.status,
+										children: g
+									})]
+								}),
+								p && /* @__PURE__ */ o("div", {
+									"data-slot": "info-card-description",
+									className: e("line-clamp-2 text-sm text-muted-foreground", j?.description),
+									children: p
+								})
+							]
+						})]
+					}), _ && /* @__PURE__ */ o("div", {
+						"data-slot": "info-card-actions",
+						className: e("shrink-0", j?.actions),
+						onClick: t,
+						onMouseDown: t,
+						onDoubleClick: t,
+						children: _
+					})]
+				}),
+				v && /* @__PURE__ */ o("div", {
+					"data-slot": "info-card-meta",
+					className: e("text-xs text-muted-foreground", j?.meta),
+					children: v
+				}),
+				(y || I) && (P?.(z) ?? /* @__PURE__ */ o("div", {
+					"data-slot": "info-card-content",
+					className: j?.content,
+					children: y ?? I
+				})),
+				b && (F?.(z) ?? /* @__PURE__ */ o("div", {
+					"data-slot": "info-card-footer",
+					className: e("border-t pt-3 text-sm text-muted-foreground", j?.footer),
+					children: b
+				}))
+			]
+		})] })
+	});
+}
+function f(e) {
+	return /* @__PURE__ */ o(d, { ...e });
+}
+//#endregion
+export { d as InfoCard, f as SmartCard };

package/dist/components/display/statistic.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("lucide-react"),a=require("react/jsx-runtime");function o({label:e,value:n,prefix:r,suffix:o,description:s,trend:c=`neutral`,change:l,loading:u=!1,className:d,...f}){let p=c===`up`?(0,a.jsx)(i.ArrowUpIcon,{className:`size-3`}):c===`down`?(0,a.jsx)(i.ArrowDownIcon,{className:`size-3`}):null;return(0,a.jsxs)(`div`,{"data-slot":`statistic`,className:t.cn(`grid gap-1`,d),...f,children:[(0,a.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,a.jsx)(`div`,{className:`flex flex-wrap items-baseline gap-1.5`,children:u?(0,a.jsx)(`div`,{className:`h-8 w-28 animate-pulse rounded-md bg-muted`}):(0,a.jsxs)(a.Fragment,{children:[r&&(0,a.jsx)(`span`,{className:`text-base text-muted-foreground`,children:r}),(0,a.jsx)(`span`,{className:`text-2xl font-semibold tracking-tight`,children:n}),o&&(0,a.jsx)(`span`,{className:`text-sm text-muted-foreground`,children:o})]})}),(s||l)&&(0,a.jsxs)(`div`,{className:`flex flex-wrap items-center gap-2 text-xs text-muted-foreground`,children:[l&&(0,a.jsxs)(`span`,{className:t.cn(`inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium`,c===`up`&&`bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`,c===`down`&&`bg-destructive/10 text-destructive`,c===`neutral`&&`bg-muted text-muted-foreground`),children:[p,l]}),s&&(0,a.jsx)(`span`,{children:s})]})]})}function s({action:e,label:t,value:r,prefix:i,suffix:s,description:c,trend:l,change:u,loading:d,className:f,...p}){return(0,a.jsxs)(n.Card,{"data-slot":`statistic-card`,className:f,...p,children:[(0,a.jsxs)(n.CardHeader,{className:`flex flex-row items-center justify-between gap-3 pb-2`,children:[(0,a.jsx)(n.CardTitle,{className:`text-sm font-medium text-muted-foreground`,children:t}),e]}),(0,a.jsx)(n.CardContent,{children:(0,a.jsx)(o,{label:(0,a.jsx)(`span`,{className:`sr-only`,children:t}),value:r,prefix:i,suffix:s,description:c,trend:l,change:u,loading:d})})]})}function c({columns:e=4,className:n,...r}){return(0,a.jsx)(`div`,{"data-slot":`statistic-grid`,className:t.cn(`grid gap-4`,e===1&&`grid-cols-1`,e===2&&`grid-cols-1 sm:grid-cols-2`,e===3&&`grid-cols-1 sm:grid-cols-2 xl:grid-cols-3`,e===4&&`grid-cols-1 sm:grid-cols-2 xl:grid-cols-4`,n),...r})}exports.Statistic=o,exports.StatisticCard=s,exports.StatisticGrid=c;

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type StatisticTrend = "up" | "down" | "neutral";
+export type StatisticProps = React.ComponentProps<"div"> & {
+    label: React.ReactNode;
+    value: React.ReactNode;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    description?: React.ReactNode;
+    trend?: StatisticTrend;
+    change?: React.ReactNode;
+    loading?: boolean;
+};
+declare function Statistic({ label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticProps): React.JSX.Element;
+export type StatisticCardProps = React.ComponentProps<typeof Card> & StatisticProps & {
+    action?: React.ReactNode;
+};
+declare function StatisticCard({ action, label, value, prefix, suffix, description, trend, change, loading, className, ...props }: StatisticCardProps): React.JSX.Element;
+export type StatisticGridProps = React.ComponentProps<"div"> & {
+    columns?: 1 | 2 | 3 | 4;
+};
+declare function StatisticGrid({ columns, className, ...props }: StatisticGridProps): React.JSX.Element;
+export { Statistic, StatisticCard, StatisticGrid };

package/dist/components/display/statistic.js

@@ -0,0 +1,79 @@
+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 { ArrowDownIcon as a, ArrowUpIcon as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/components/display/statistic.tsx
+function u({ label: t, value: n, prefix: r, suffix: i, description: u, trend: d = "neutral", change: f, loading: p = !1, className: m, ...h }) {
+	let g = d === "up" ? /* @__PURE__ */ c(o, { className: "size-3" }) : d === "down" ? /* @__PURE__ */ c(a, { className: "size-3" }) : null;
+	return /* @__PURE__ */ l("div", {
+		"data-slot": "statistic",
+		className: e("grid gap-1", m),
+		...h,
+		children: [
+			/* @__PURE__ */ c("div", {
+				className: "text-sm text-muted-foreground",
+				children: t
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "flex flex-wrap items-baseline gap-1.5",
+				children: p ? /* @__PURE__ */ c("div", { className: "h-8 w-28 animate-pulse rounded-md bg-muted" }) : /* @__PURE__ */ l(s, { children: [
+					r && /* @__PURE__ */ c("span", {
+						className: "text-base text-muted-foreground",
+						children: r
+					}),
+					/* @__PURE__ */ c("span", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: n
+					}),
+					i && /* @__PURE__ */ c("span", {
+						className: "text-sm text-muted-foreground",
+						children: i
+					})
+				] })
+			}),
+			(u || f) && /* @__PURE__ */ l("div", {
+				className: "flex flex-wrap items-center gap-2 text-xs text-muted-foreground",
+				children: [f && /* @__PURE__ */ l("span", {
+					className: e("inline-flex items-center gap-1 rounded-full px-1.5 py-0.5 font-medium", d === "up" && "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", d === "down" && "bg-destructive/10 text-destructive", d === "neutral" && "bg-muted text-muted-foreground"),
+					children: [g, f]
+				}), u && /* @__PURE__ */ c("span", { children: u })]
+			})
+		]
+	});
+}
+function d({ action: e, label: a, value: o, prefix: s, suffix: d, description: f, trend: p, change: m, loading: h, className: g, ..._ }) {
+	return /* @__PURE__ */ l(t, {
+		"data-slot": "statistic-card",
+		className: g,
+		..._,
+		children: [/* @__PURE__ */ l(r, {
+			className: "flex flex-row items-center justify-between gap-3 pb-2",
+			children: [/* @__PURE__ */ c(i, {
+				className: "text-sm font-medium text-muted-foreground",
+				children: a
+			}), e]
+		}), /* @__PURE__ */ c(n, { children: /* @__PURE__ */ c(u, {
+			label: /* @__PURE__ */ c("span", {
+				className: "sr-only",
+				children: a
+			}),
+			value: o,
+			prefix: s,
+			suffix: d,
+			description: f,
+			trend: p,
+			change: m,
+			loading: h
+		}) })]
+	});
+}
+function f({ columns: t = 4, className: n, ...r }) {
+	return /* @__PURE__ */ c("div", {
+		"data-slot": "statistic-grid",
+		className: e("grid gap-4", t === 1 && "grid-cols-1", t === 2 && "grid-cols-1 sm:grid-cols-2", t === 3 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-3", t === 4 && "grid-cols-1 sm:grid-cols-2 xl:grid-cols-4", n),
+		...r
+	});
+}
+//#endregion
+export { u as Statistic, d as StatisticCard, f as StatisticGrid };

package/dist/components/display/status-dot.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");var i={neutral:`bg-foreground`,info:`bg-blue-500`,success:`bg-emerald-500`,warning:`bg-amber-500`,danger:`bg-destructive`,muted:`bg-muted-foreground`},a={sm:`size-1.5`,default:`size-2`,lg:`size-2.5`};function o({className:e,tone:n=`neutral`,pulse:o=!1,label:s,size:c=`default`,...l}){let u=(0,r.jsxs)(`span`,{className:`relative inline-flex shrink-0 items-center justify-center`,children:[o?(0,r.jsx)(`span`,{className:t.cn(`absolute inline-flex size-full animate-ping rounded-full opacity-35`,i[n])}):null,(0,r.jsx)(`span`,{"data-slot":`status-dot-indicator`,className:t.cn(`relative rounded-full`,a[c],i[n])})]});return(0,r.jsxs)(`span`,{"data-slot":`status-dot`,className:t.cn(`inline-flex items-center gap-2 text-sm text-muted-foreground`,e),...l,children:[u,s?(0,r.jsx)(`span`,{"data-slot":`status-dot-label`,children:s}):null]})}exports.StatusDot=o;

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+export type StatusDotTone = "neutral" | "info" | "success" | "warning" | "danger" | "muted";
+export type StatusDotProps = React.ComponentProps<"span"> & {
+    tone?: StatusDotTone;
+    pulse?: boolean;
+    label?: React.ReactNode;
+    size?: "sm" | "default" | "lg";
+};
+declare function StatusDot({ className, tone, pulse, label, size, ...props }: StatusDotProps): React.JSX.Element;
+export { StatusDot };

package/dist/components/display/status-dot.js

@@ -0,0 +1,36 @@
+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/status-dot.tsx
+var r = {
+	neutral: "bg-foreground",
+	info: "bg-blue-500",
+	success: "bg-emerald-500",
+	warning: "bg-amber-500",
+	danger: "bg-destructive",
+	muted: "bg-muted-foreground"
+}, i = {
+	sm: "size-1.5",
+	default: "size-2",
+	lg: "size-2.5"
+};
+function a({ className: a, tone: o = "neutral", pulse: s = !1, label: c, size: l = "default", ...u }) {
+	let d = /* @__PURE__ */ n("span", {
+		className: "relative inline-flex shrink-0 items-center justify-center",
+		children: [s ? /* @__PURE__ */ t("span", { className: e("absolute inline-flex size-full animate-ping rounded-full opacity-35", r[o]) }) : null, /* @__PURE__ */ t("span", {
+			"data-slot": "status-dot-indicator",
+			className: e("relative rounded-full", i[l], r[o])
+		})]
+	});
+	return /* @__PURE__ */ n("span", {
+		"data-slot": "status-dot",
+		className: e("inline-flex items-center gap-2 text-sm text-muted-foreground", a),
+		...u,
+		children: [d, c ? /* @__PURE__ */ t("span", {
+			"data-slot": "status-dot-label",
+			children: c
+		}) : null]
+	});
+}
+//#endregion
+export { a as StatusDot };

package/dist/components/display/status-legend.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"),r=require("../ui/badge/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={default:`bg-primary`,success:`bg-emerald-500`,warning:`bg-amber-500`,danger:`bg-destructive`,info:`bg-blue-500`,muted:`bg-muted-foreground`};function s({title:e,description:i,actions:s,items:c,orientation:l=`vertical`,compact:u=!1,showCounts:d=!0,contentClassName:f,itemClassName:p,className:m,...h}){let g=c.filter(e=>!e.hidden),_=!!(e||i||s);return(0,a.jsxs)(n.Card,{"data-slot":`status-legend`,className:t.cn(`min-w-0 border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-page-bg)_92%,white_8%)] shadow-sm dark:bg-[color:color-mix(in_srgb,var(--aui-page-bg)_96%,black_4%)]`,m),...h,children:[_&&(0,a.jsx)(n.CardHeader,{className:t.cn(`pb-3`,u&&`p-4 pb-2`),children:(0,a.jsxs)(`div`,{className:`flex min-w-0 items-start justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[e&&(0,a.jsx)(n.CardTitle,{className:`text-base tracking-tight`,children:e}),i&&(0,a.jsx)(n.CardDescription,{className:`leading-6`,children:i})]}),s&&(0,a.jsx)(`div`,{className:`shrink-0`,children:s})]})}),(0,a.jsx)(n.CardContent,{className:t.cn(`gap-3`,l===`vertical`&&`grid`,l===`horizontal`&&`flex flex-wrap`,l===`grid`&&`grid sm:grid-cols-2`,u?`p-4 pt-2`:`pt-0`,f),children:g.map(e=>(0,a.jsxs)(`div`,{"data-slot":`status-legend-item`,"data-tone":e.tone??`default`,className:t.cn(`flex min-w-0 items-start justify-between gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.35)] transition hover:border-[color:color-mix(in_srgb,var(--aui-brand-strong)_26%,var(--aui-surface-border))]`,u&&`p-2.5`,p,e.className),children:[(0,a.jsxs)(`div`,{className:`flex min-w-0 items-start gap-2`,children:[e.icon?(0,a.jsx)(`span`,{className:`mt-0.5 inline-flex size-8 shrink-0 items-center justify-center rounded-xl bg-[color:var(--aui-page-bg)] text-muted-foreground [&_svg]:size-4`,children:e.icon}):(0,a.jsx)(`span`,{className:t.cn(`mt-1.5 size-2.5 shrink-0 rounded-full shadow-[0_0_0_4px_color-mix(in_srgb,var(--aui-page-bg)_72%,transparent)]`,o[e.tone??`default`])}),(0,a.jsxs)(`div`,{className:`min-w-0 space-y-0.5`,children:[(0,a.jsx)(`div`,{className:`truncate text-sm font-medium text-foreground`,children:e.label}),e.description&&(0,a.jsx)(`div`,{className:`text-xs leading-5 text-muted-foreground`,children:e.description})]})]}),d&&e.count!==void 0&&(0,a.jsx)(r.Badge,{variant:`secondary`,className:`shrink-0 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-2.5 py-1 shadow-sm`,children:e.count})]},e.key))})]})}exports.StatusLegend=s;

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

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { Card } from "@/components/ui/card";
+export type StatusLegendTone = "default" | "success" | "warning" | "danger" | "info" | "muted";
+export type StatusLegendOrientation = "vertical" | "horizontal" | "grid";
+export type StatusLegendItem = {
+    key: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    count?: React.ReactNode;
+    tone?: StatusLegendTone;
+    icon?: React.ReactNode;
+    hidden?: boolean;
+    className?: string;
+};
+export type StatusLegendProps = React.ComponentProps<typeof Card> & {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    items: StatusLegendItem[];
+    orientation?: StatusLegendOrientation;
+    compact?: boolean;
+    showCounts?: boolean;
+    contentClassName?: string;
+    itemClassName?: string;
+};
+declare function StatusLegend({ title, description, actions, items, orientation, compact, showCounts, contentClassName, itemClassName, className, ...props }: StatusLegendProps): React.JSX.Element;
+export { StatusLegend };