tembro 3.0.0 → 3.1.5

package/dist/src/components/display/description-list.js

@@ -0,0 +1,68 @@
+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/description-list.tsx
+var c = {
+	1: "grid-cols-1",
+	2: "grid-cols-1 md:grid-cols-2",
+	3: "grid-cols-1 md:grid-cols-2 xl:grid-cols-3",
+	4: "grid-cols-1 md:grid-cols-2 xl:grid-cols-4"
+}, l = {
+	1: "col-span-1",
+	2: "md:col-span-2",
+	3: "xl:col-span-3",
+	4: "xl:col-span-4"
+};
+function u(e) {
+	return e == null || e === "";
+}
+function d({ title: d, description: f, actions: p, items: m, columns: h = 2, bordered: g = !0, compact: _ = !1, emptyValue: v = "-", itemClassName: y, labelClassName: b, valueClassName: x, contentClassName: S, className: C, ...w }) {
+	let T = m.filter((e) => !e.hidden), E = !!(d || f || p);
+	return /* @__PURE__ */ s(t, {
+		"data-slot": "description-list",
+		className: e("min-w-0", C),
+		...w,
+		children: [E && /* @__PURE__ */ o(i, { children: /* @__PURE__ */ s("div", {
+			className: "flex min-w-0 items-start justify-between gap-3",
+			children: [/* @__PURE__ */ s("div", {
+				className: "min-w-0 space-y-1",
+				children: [d && /* @__PURE__ */ o(a, { children: d }), f && /* @__PURE__ */ o(r, { children: f })]
+			}), p && /* @__PURE__ */ o("div", {
+				className: "shrink-0",
+				children: p
+			})]
+		}) }), /* @__PURE__ */ o(n, {
+			className: e("grid gap-2", c[h], S),
+			children: T.map((t) => /* @__PURE__ */ o("div", {
+				"data-slot": "description-list-item",
+				className: e("min-w-0 rounded-lg", g && "border bg-muted/20", _ ? "p-2" : "p-3", t.span && t.span > 1 && l[t.span], y, t.className),
+				children: /* @__PURE__ */ s("div", {
+					className: "flex min-w-0 items-start gap-2",
+					children: [t.icon && /* @__PURE__ */ o("span", {
+						className: "mt-0.5 shrink-0 text-muted-foreground [&_svg]:size-4",
+						children: t.icon
+					}), /* @__PURE__ */ s("div", {
+						className: "min-w-0 flex-1 space-y-1",
+						children: [
+							/* @__PURE__ */ o("div", {
+								className: e("text-xs font-medium uppercase tracking-wide text-muted-foreground", b, t.labelClassName),
+								children: t.label
+							}),
+							/* @__PURE__ */ o("div", {
+								className: e("min-w-0 break-words text-sm font-medium text-foreground", x, t.valueClassName),
+								children: u(t.value) ? v : t.value
+							}),
+							t.description && /* @__PURE__ */ o("div", {
+								className: "text-xs leading-5 text-muted-foreground",
+								children: t.description
+							})
+						]
+					})]
+				})
+			}, t.key))
+		})]
+	});
+}
+//#endregion
+export { d as DescriptionList };

package/dist/src/components/display/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./description-list.cjs"),t=require("./activity-feed.cjs"),n=require("./avatar.cjs"),r=require("./kanban.cjs"),i=require("./code-block.cjs"),a=require("./data-state.cjs"),o=require("./list.cjs"),s=require("./progress.cjs"),c=require("./statistic.cjs"),l=require("./status-dot.cjs"),u=require("./status-legend.cjs"),d=require("./timeline.cjs"),f=require("./tree-view.cjs"),p=require("./info-card.cjs"),m=require("./virtual-list.cjs"),h=require("./qr-code.cjs"),g=require("./carousel.cjs"),_=require("./tag.cjs"),v=require("./typography.cjs");exports.ActivityFeed=t.ActivityFeed,exports.Avatar=n.Avatar,exports.AvatarGroup=n.AvatarGroup,exports.Blockquote=v.Blockquote,exports.Carousel=g.Carousel,exports.CarouselItem=g.CarouselItem,exports.Chip=_.Chip,exports.CodeBlock=i.CodeBlock,exports.DataState=a.DataState,exports.DescriptionList=e.DescriptionList,exports.Heading=v.Heading,exports.InfoCard=p.InfoCard,exports.KanbanBoard=r.KanbanBoard,exports.List=o.List,exports.ListRow=o.ListRow,exports.Mark=v.Mark,exports.Progress=s.Progress,exports.ProgressCard=s.ProgressCard,exports.QRCode=h.QRCode,exports.QRCodeSvg=h.QRCodeSvg,exports.Spoiler=v.Spoiler,exports.SpoilerSummary=v.SpoilerSummary,exports.Statistic=c.Statistic,exports.StatisticCard=c.StatisticCard,exports.StatisticGrid=c.StatisticGrid,exports.StatusDot=l.StatusDot,exports.StatusLegend=u.StatusLegend,exports.Tag=_.Tag,exports.TagGroup=_.TagGroup,exports.Text=v.Text,exports.Timeline=d.Timeline,exports.TreeView=f.TreeView,exports.VirtualList=m.VirtualList,exports.getProgressPercent=s.getProgressPercent;

package/dist/src/components/display/index.js

@@ -0,0 +1,20 @@
+import { DescriptionList as e } from "./description-list.js";
+import { ActivityFeed as t } from "./activity-feed.js";
+import { Avatar as n, AvatarGroup as r } from "./avatar.js";
+import { KanbanBoard as i } from "./kanban.js";
+import { CodeBlock as a } from "./code-block.js";
+import { DataState as o } from "./data-state.js";
+import { List as s, ListRow as c } from "./list.js";
+import { Progress as l, ProgressCard as u, getProgressPercent as d } from "./progress.js";
+import { Statistic as f, StatisticCard as p, StatisticGrid as m } from "./statistic.js";
+import { StatusDot as h } from "./status-dot.js";
+import { StatusLegend as g } from "./status-legend.js";
+import { Timeline as _ } from "./timeline.js";
+import { TreeView as v } from "./tree-view.js";
+import { InfoCard as y } from "./info-card.js";
+import { VirtualList as b } from "./virtual-list.js";
+import { QRCode as x, QRCodeSvg as S } from "./qr-code.js";
+import { Carousel as C, CarouselItem as w } from "./carousel.js";
+import { Chip as T, Tag as E, TagGroup as D } from "./tag.js";
+import { Blockquote as O, Heading as k, Mark as A, Spoiler as j, SpoilerSummary as M, Text as N } from "./typography.js";
+export { t as ActivityFeed, n as Avatar, r as AvatarGroup, O as Blockquote, C as Carousel, w as CarouselItem, T as Chip, a as CodeBlock, o as DataState, e as DescriptionList, k as Heading, y as InfoCard, i as KanbanBoard, s as List, c as ListRow, A as Mark, l as Progress, u as ProgressCard, x as QRCode, S as QRCodeSvg, j as Spoiler, M as SpoilerSummary, f as Statistic, p as StatisticCard, m as StatisticGrid, h as StatusDot, g as StatusLegend, E as Tag, D as TagGroup, N as Text, _ as Timeline, v as TreeView, b as VirtualList, d as getProgressPercent };

package/dist/src/components/display/info-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:``,outline:``,elevated:``,ghost:``},s={compact:``,default:``,comfortable:``},c={sm:``,md:``,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,"data-info-variant":v,"data-info-size":y,"data-info-density":L,"data-orientation":_,variant:v,size:y===`md`?`default`:y,density:L,interactive:I,selected:w,disabled:C,className:t.cn(`overflow-hidden`,o[v],_===`horizontal`&&`flex`,E,D?.root),onClick:C?void 0:N,...P,children:S?(0,a.jsxs)(`div`,{"data-slot":`info-card-loading`,className:`grid gap-3`,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(_===`horizontal`?`w-40 shrink-0`:`aspect-video`,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 shrink-0 items-center justify-center`,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: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`,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`,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: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:D?.footer,children:g}))]})]})})}exports.InfoCard=l;

package/dist/src/components/display/info-card.js

@@ -0,0 +1,129 @@
+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/info-card.tsx
+var c = {
+	default: "",
+	outline: "",
+	elevated: "",
+	ghost: ""
+}, l = {
+	compact: "",
+	default: "",
+	comfortable: ""
+}, u = {
+	sm: "",
+	md: "",
+	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,
+		"data-info-variant": S,
+		"data-info-size": C,
+		"data-info-density": V,
+		"data-orientation": x,
+		variant: S,
+		size: C === "md" ? "default" : C,
+		density: V,
+		interactive: B,
+		selected: O,
+		disabled: D,
+		className: e("overflow-hidden", c[S], x === "horizontal" && "flex", A, j?.root),
+		onClick: D ? void 0 : L,
+		...R,
+		children: E ? /* @__PURE__ */ s("div", {
+			"data-slot": "info-card-loading",
+			className: "grid gap-3",
+			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(x === "horizontal" ? "w-40 shrink-0" : "aspect-video", 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 shrink-0 items-center justify-center", 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: 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", 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", 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: 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: j?.footer,
+					children: b
+				}))
+			]
+		})] })
+	});
+}
+//#endregion
+export { d as InfoCard };

package/dist/src/components/display/kanban.cjs

@@ -0,0 +1 @@
+"use client";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("../../../node_modules/@dnd-kit/helpers/dist/index.cjs"),i=require("../../../node_modules/@dnd-kit/react/index.cjs"),a=require("../../../node_modules/@dnd-kit/dom/sortable.cjs"),o=require("../../../node_modules/@dnd-kit/react/sortable.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");var u=`tembro-kanban-card:`,d=`tembro-kanban-column:`;function f(e){return`${u}${e}`}function p(e){return`${d}${e}`}function m(e){return e.startsWith(u)?e.slice(19):e}function h(e){let t=e===void 0?``:String(e);return t.startsWith(d)?t.slice(21):t}function g(e){return new Map(e.flatMap(e=>e.cards.map(e=>[f(e.key),e])))}function _(e,t){let n=g(e),i=r.move(Object.fromEntries(e.map(e=>[p(e.key),e.cards.map(e=>f(e.key))])),t);return e.map(e=>({...e,cards:(i[p(e.key)]??[]).map(e=>n.get(String(e))).filter(e=>!!e)}))}var v=s.forwardRef(function({label:e,disabled:t},n){return(0,l.jsx)(`button`,{ref:n,type:`button`,className:`inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45`,"aria-label":e,disabled:t,onClick:e=>e.stopPropagation(),children:(0,l.jsx)(c.GripVerticalIcon,{className:`size-4`,"aria-hidden":`true`})})});function y({card:e,handle:t}){return(0,l.jsxs)(n.Card,{className:`transition-colors hover:bg-muted/40`,children:[(0,l.jsx)(n.CardHeader,{className:`p-3 pb-1`,children:(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-2`,children:[(0,l.jsx)(n.CardTitle,{className:`text-sm`,children:e.title}),(0,l.jsxs)(`div`,{className:`flex items-center gap-1`,children:[e.extra,t]})]})}),e.description||e.meta?(0,l.jsxs)(n.CardContent,{className:`grid gap-2 p-3 pt-0 text-xs text-muted-foreground`,children:[e.description,e.meta?(0,l.jsx)(`div`,{children:e.meta}):null]}):null]})}function b({card:e,column:n,index:r,boardDisabled:i,renderCard:a,onCardClick:s,dragHandleLabel:c,cardClassName:u}){let d=i||n.disabled===!0||e.disabled===!0,{ref:m,handleRef:h,isDragging:g,isDropTarget:_}=o.useSortable({id:f(e.key),index:r,group:p(n.key),type:`tembro-kanban-card`,accept:`tembro-kanban-card`,disabled:d,data:{cardKey:e.key,columnKey:n.key},transition:{duration:180,easing:`cubic-bezier(0.2, 0, 0, 1)`,idle:!0}}),b=(0,l.jsx)(v,{ref:h,label:c?.(e,n)??`Move ${String(e.title)}`,disabled:d}),x={index:r,isDragging:g,isDropTarget:_,handle:b};return(0,l.jsx)(`article`,{ref:m,"data-slot":`kanban-card`,"data-dragging":g||void 0,"data-drop-target":_||void 0,"data-disabled":d||void 0,role:s&&!d?`button`:void 0,tabIndex:s&&!d?0:void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`rounded-lg outline-none transition-[opacity,box-shadow]`,s&&!d&&`cursor-pointer focus-visible:ring-2 focus-visible:ring-ring`,_&&`ring-2 ring-primary/30`,g&&`opacity-30`,d&&`opacity-55`,u),onClick:()=>{d||s?.(e,n)},onKeyDown:t=>{t.target!==t.currentTarget||d||!s||(t.key===`Enter`||t.key===` `)&&(t.preventDefault(),s(e,n))},children:a?.(e,n,x)??(0,l.jsx)(y,{card:e,handle:b})})}function x({column:e,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,emptyColumn:s,columnClassName:c,cardClassName:u}){let{ref:d,isDropTarget:f}=i.useDroppable({id:p(e.key),type:`tembro-kanban-column`,accept:`tembro-kanban-card`,disabled:n||e.disabled===!0,collisionPriority:1,data:{columnKey:e.key}});return(0,l.jsxs)(`section`,{ref:d,"data-slot":`kanban-column`,"data-drop-target":f||void 0,"data-disabled":e.disabled||void 0,"aria-label":typeof e.title==`string`?e.title:void 0,className:t.cn(`grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]`,f&&`border-primary/60 bg-primary/5 ring-2 ring-primary/15`,e.disabled&&`opacity-60`,c),children:[(0,l.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,l.jsxs)(`div`,{className:`grid gap-0.5`,children:[(0,l.jsx)(`h3`,{className:`text-sm font-semibold text-foreground`,children:e.title}),e.description?(0,l.jsx)(`p`,{className:`text-xs text-muted-foreground`,children:e.description}):null]}),(0,l.jsx)(`div`,{className:`rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground`,children:e.count??e.cards.length})]}),(0,l.jsx)(`div`,{className:`grid min-h-16 content-start gap-2`,children:e.cards.length===0?(0,l.jsxs)(`div`,{className:`grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground`,children:[(0,l.jsx)(`span`,{children:s}),(0,l.jsx)(`span`,{className:`sr-only`,children:`No cards yet.`})]}):e.cards.map((t,i)=>(0,l.jsx)(b,{card:t,column:e,index:i,boardDisabled:n,renderCard:r,onCardClick:a,dragHandleLabel:o,cardClassName:u},t.key))})]})}function S({columns:e,defaultColumns:n=[],onColumnsChange:r,onCardMove:o,renderCard:c,onCardClick:u,disabled:d=!1,emptyColumn:p=`Drop cards here.`,dragHandleLabel:g,columnClassName:v,cardClassName:b,overlayClassName:S,className:C,"aria-label":w=`Kanban board`,...T}){let[E,D]=s.useState(()=>n),[O,k]=s.useState(null),[A,j]=s.useState(null),M=s.useRef(null),N=e??E,P=O??N,F=e!==void 0;function I(e){let t=e.operation.source;if(!t)return;let n=String(t.id);M.current=N,k(N),j(n)}function L(e){let t=e.operation.source;if(!t||!a.isSortable(t))return;let n=_(M.current??N,e);M.current=n,k(n)}function R(e){let t=e.operation.source;if(j(null),e.canceled||!t||!a.isSortable(t)){M.current=null,k(null);return}let n=M.current??_(N,e),i=m(String(t.id)),s=h(t.initialGroup),c=h(t.group),l=N.find(e=>e.key===s),u=n.find(e=>e.key===c),d=l?.cards.find(e=>e.key===i);if(M.current=null,k(null),!d||!l||!u)return;let f={card:d,fromColumn:l,toColumn:u,fromIndex:t.initialIndex,toIndex:t.index};F||D(n),r?.(n,f),o?.(f)}let z=A?P.flatMap(e=>e.cards.map(t=>({card:t,column:e}))).find(({card:e})=>f(e.key)===A):void 0;return(0,l.jsxs)(i.DragDropProvider,{onDragStart:I,onDragOver:L,onDragEnd:R,children:[(0,l.jsx)(`div`,{...T,role:`group`,"aria-label":w,"data-slot":`kanban-board`,className:t.cn(`grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2`,C),children:P.map(e=>(0,l.jsx)(x,{column:e,boardDisabled:d,renderCard:c,onCardClick:u,dragHandleLabel:g,emptyColumn:p,columnClassName:v,cardClassName:b},e.key))}),(0,l.jsx)(i.DragOverlay,{children:z?(0,l.jsx)(`div`,{className:t.cn(`min-w-64 rotate-1 opacity-95 shadow-2xl`,S),children:c?.(z.card,z.column,{index:z.column.cards.findIndex(e=>e.key===z.card.key),isDragging:!0,isDropTarget:!1,handle:null})??(0,l.jsx)(y,{card:z.card,handle:null})}):null})]})}exports.KanbanBoard=S;

package/dist/src/components/display/kanban.js

@@ -0,0 +1,242 @@
+"use client";
+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 { move as a } from "../../../node_modules/@dnd-kit/helpers/dist/index.js";
+import { DragDropProvider as o, DragOverlay as s, useDroppable as c } from "../../../node_modules/@dnd-kit/react/index.js";
+import { isSortable as l } from "../../../node_modules/@dnd-kit/dom/sortable.js";
+import { useSortable as u } from "../../../node_modules/@dnd-kit/react/sortable.js";
+import * as d from "react";
+import { GripVerticalIcon as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/display/kanban.tsx
+var h = "tembro-kanban-card:", g = "tembro-kanban-column:";
+function _(e) {
+	return `${h}${e}`;
+}
+function v(e) {
+	return `${g}${e}`;
+}
+function y(e) {
+	return e.startsWith(h) ? e.slice(19) : e;
+}
+function b(e) {
+	let t = e === void 0 ? "" : String(e);
+	return t.startsWith(g) ? t.slice(21) : t;
+}
+function x(e) {
+	return new Map(e.flatMap((e) => e.cards.map((e) => [_(e.key), e])));
+}
+function S(e, t) {
+	let n = x(e), r = a(Object.fromEntries(e.map((e) => [v(e.key), e.cards.map((e) => _(e.key))])), t);
+	return e.map((e) => ({
+		...e,
+		cards: (r[v(e.key)] ?? []).map((e) => n.get(String(e))).filter((e) => !!e)
+	}));
+}
+var C = d.forwardRef(function({ label: e, disabled: t }, n) {
+	return /* @__PURE__ */ p("button", {
+		ref: n,
+		type: "button",
+		className: "inline-flex size-8 shrink-0 touch-none items-center justify-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-45",
+		"aria-label": e,
+		disabled: t,
+		onClick: (e) => e.stopPropagation(),
+		children: /* @__PURE__ */ p(f, {
+			className: "size-4",
+			"aria-hidden": "true"
+		})
+	});
+});
+function w({ card: e, handle: a }) {
+	return /* @__PURE__ */ m(t, {
+		className: "transition-colors hover:bg-muted/40",
+		children: [/* @__PURE__ */ p(r, {
+			className: "p-3 pb-1",
+			children: /* @__PURE__ */ m("div", {
+				className: "flex items-start justify-between gap-2",
+				children: [/* @__PURE__ */ p(i, {
+					className: "text-sm",
+					children: e.title
+				}), /* @__PURE__ */ m("div", {
+					className: "flex items-center gap-1",
+					children: [e.extra, a]
+				})]
+			})
+		}), e.description || e.meta ? /* @__PURE__ */ m(n, {
+			className: "grid gap-2 p-3 pt-0 text-xs text-muted-foreground",
+			children: [e.description, e.meta ? /* @__PURE__ */ p("div", { children: e.meta }) : null]
+		}) : null]
+	});
+}
+function T({ card: t, column: n, index: r, boardDisabled: i, renderCard: a, onCardClick: o, dragHandleLabel: s, cardClassName: c }) {
+	let l = i || n.disabled === !0 || t.disabled === !0, { ref: d, handleRef: f, isDragging: m, isDropTarget: h } = u({
+		id: _(t.key),
+		index: r,
+		group: v(n.key),
+		type: "tembro-kanban-card",
+		accept: "tembro-kanban-card",
+		disabled: l,
+		data: {
+			cardKey: t.key,
+			columnKey: n.key
+		},
+		transition: {
+			duration: 180,
+			easing: "cubic-bezier(0.2, 0, 0, 1)",
+			idle: !0
+		}
+	}), g = /* @__PURE__ */ p(C, {
+		ref: f,
+		label: s?.(t, n) ?? `Move ${String(t.title)}`,
+		disabled: l
+	}), y = {
+		index: r,
+		isDragging: m,
+		isDropTarget: h,
+		handle: g
+	};
+	return /* @__PURE__ */ p("article", {
+		ref: d,
+		"data-slot": "kanban-card",
+		"data-dragging": m || void 0,
+		"data-drop-target": h || void 0,
+		"data-disabled": l || void 0,
+		role: o && !l ? "button" : void 0,
+		tabIndex: o && !l ? 0 : void 0,
+		"aria-label": typeof t.title == "string" ? t.title : void 0,
+		className: e("rounded-lg outline-none transition-[opacity,box-shadow]", o && !l && "cursor-pointer focus-visible:ring-2 focus-visible:ring-ring", h && "ring-2 ring-primary/30", m && "opacity-30", l && "opacity-55", c),
+		onClick: () => {
+			l || o?.(t, n);
+		},
+		onKeyDown: (e) => {
+			e.target !== e.currentTarget || l || !o || (e.key === "Enter" || e.key === " ") && (e.preventDefault(), o(t, n));
+		},
+		children: a?.(t, n, y) ?? /* @__PURE__ */ p(w, {
+			card: t,
+			handle: g
+		})
+	});
+}
+function E({ column: t, boardDisabled: n, renderCard: r, onCardClick: i, dragHandleLabel: a, emptyColumn: o, columnClassName: s, cardClassName: l }) {
+	let { ref: u, isDropTarget: d } = c({
+		id: v(t.key),
+		type: "tembro-kanban-column",
+		accept: "tembro-kanban-card",
+		disabled: n || t.disabled === !0,
+		collisionPriority: 1,
+		data: { columnKey: t.key }
+	});
+	return /* @__PURE__ */ m("section", {
+		ref: u,
+		"data-slot": "kanban-column",
+		"data-drop-target": d || void 0,
+		"data-disabled": t.disabled || void 0,
+		"aria-label": typeof t.title == "string" ? t.title : void 0,
+		className: e("grid min-h-40 content-start gap-3 rounded-lg border bg-muted/35 p-3 transition-[border-color,background-color,box-shadow]", d && "border-primary/60 bg-primary/5 ring-2 ring-primary/15", t.disabled && "opacity-60", s),
+		children: [/* @__PURE__ */ m("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ m("div", {
+				className: "grid gap-0.5",
+				children: [/* @__PURE__ */ p("h3", {
+					className: "text-sm font-semibold text-foreground",
+					children: t.title
+				}), t.description ? /* @__PURE__ */ p("p", {
+					className: "text-xs text-muted-foreground",
+					children: t.description
+				}) : null]
+			}), /* @__PURE__ */ p("div", {
+				className: "rounded-full bg-background px-2 py-0.5 text-xs text-muted-foreground",
+				children: t.count ?? t.cards.length
+			})]
+		}), /* @__PURE__ */ p("div", {
+			className: "grid min-h-16 content-start gap-2",
+			children: t.cards.length === 0 ? /* @__PURE__ */ m("div", {
+				className: "grid min-h-20 place-items-center rounded-lg border border-dashed p-3 text-center text-xs text-muted-foreground",
+				children: [/* @__PURE__ */ p("span", { children: o }), /* @__PURE__ */ p("span", {
+					className: "sr-only",
+					children: "No cards yet."
+				})]
+			}) : t.cards.map((e, o) => /* @__PURE__ */ p(T, {
+				card: e,
+				column: t,
+				index: o,
+				boardDisabled: n,
+				renderCard: r,
+				onCardClick: i,
+				dragHandleLabel: a,
+				cardClassName: l
+			}, e.key))
+		})]
+	});
+}
+function D({ columns: t, defaultColumns: n = [], onColumnsChange: r, onCardMove: i, renderCard: a, onCardClick: c, disabled: u = !1, emptyColumn: f = "Drop cards here.", dragHandleLabel: h, columnClassName: g, cardClassName: v, overlayClassName: x, className: C, "aria-label": T = "Kanban board", ...D }) {
+	let [O, k] = d.useState(() => n), [A, j] = d.useState(null), [M, N] = d.useState(null), P = d.useRef(null), F = t ?? O, I = A ?? F, L = t !== void 0;
+	function R(e) {
+		let t = e.operation.source;
+		if (!t) return;
+		let n = String(t.id);
+		P.current = F, j(F), N(n);
+	}
+	function z(e) {
+		let t = e.operation.source;
+		if (!t || !l(t)) return;
+		let n = S(P.current ?? F, e);
+		P.current = n, j(n);
+	}
+	function B(e) {
+		let t = e.operation.source;
+		if (N(null), e.canceled || !t || !l(t)) {
+			P.current = null, j(null);
+			return;
+		}
+		let n = P.current ?? S(F, e), a = y(String(t.id)), o = b(t.initialGroup), s = b(t.group), c = F.find((e) => e.key === o), u = n.find((e) => e.key === s), d = c?.cards.find((e) => e.key === a);
+		if (P.current = null, j(null), !d || !c || !u) return;
+		let f = {
+			card: d,
+			fromColumn: c,
+			toColumn: u,
+			fromIndex: t.initialIndex,
+			toIndex: t.index
+		};
+		L || k(n), r?.(n, f), i?.(f);
+	}
+	let V = M ? I.flatMap((e) => e.cards.map((t) => ({
+		card: t,
+		column: e
+	}))).find(({ card: e }) => _(e.key) === M) : void 0;
+	return /* @__PURE__ */ m(o, {
+		onDragStart: R,
+		onDragOver: z,
+		onDragEnd: B,
+		children: [/* @__PURE__ */ p("div", {
+			...D,
+			role: "group",
+			"aria-label": T,
+			"data-slot": "kanban-board",
+			className: e("grid auto-cols-[minmax(280px,1fr)] grid-flow-col gap-4 overflow-x-auto pb-2", C),
+			children: I.map((e) => /* @__PURE__ */ p(E, {
+				column: e,
+				boardDisabled: u,
+				renderCard: a,
+				onCardClick: c,
+				dragHandleLabel: h,
+				emptyColumn: f,
+				columnClassName: g,
+				cardClassName: v
+			}, e.key))
+		}), /* @__PURE__ */ p(s, { children: V ? /* @__PURE__ */ p("div", {
+			className: e("min-w-64 rotate-1 opacity-95 shadow-2xl", x),
+			children: a?.(V.card, V.column, {
+				index: V.column.cards.findIndex((e) => e.key === V.card.key),
+				isDragging: !0,
+				isDropTarget: !1,
+				handle: null
+			}) ?? /* @__PURE__ */ p(w, {
+				card: V.card,
+				handle: null
+			})
+		}) : null })]
+	});
+}
+//#endregion
+export { D as KanbanBoard };

package/dist/src/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/src/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/src/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/src/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/src/components/display/qr-code.cjs

@@ -0,0 +1 @@
+"use client";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,src:i,alt:a,size:o=160,margin:s=2,errorCorrectionLevel:c=`M`,foreground:l=`#111827`,background:u=`#ffffff`,loadingFallback:d=`Generating QR code...`,errorFallback:f=`QR code could not be generated.`,onError:p,className:m,...h}){let[g,_]=n.useState(``),[v,y]=n.useState(null);return n.useEffect(()=>{if(i)return;let t=!0;return _(``),y(null),import(`qrcode`).then(t=>{let n=t;return(n.default?.toString?n.default:n).toString(e,{type:`svg`,width:o,margin:s,errorCorrectionLevel:c,color:{dark:l,light:u}})}).then(e=>{t&&_(e)}).catch(e=>{if(!t)return;let n=e instanceof Error?e:Error(`QR code generation failed`);y(n),p?.(n)}),()=>{t=!1}},[u,c,l,s,p,o,i,e]),(0,r.jsx)(`div`,{"data-slot":`qr-code`,"data-state":v?`error`:i||g?`ready`:`loading`,className:t.cn(`inline-grid place-items-center`,m),style:{width:o,height:o},...h,children:i?(0,r.jsx)(`img`,{src:i,alt:a??e,width:o,height:o,className:`size-full object-contain`}):v?(0,r.jsx)(`div`,{role:`alert`,className:`p-3 text-center text-xs text-destructive`,children:f}):g?(0,r.jsx)(`div`,{role:`img`,"aria-label":a??`QR code for ${e}`,className:`size-full [&>svg]:size-full`,dangerouslySetInnerHTML:{__html:g}}):(0,r.jsx)(`div`,{role:`status`,className:`p-3 text-center text-xs text-muted-foreground`,children:d})})}var a=i;exports.QRCode=i,exports.QRCodeSvg=a;