tembro 2.0.6 → 2.1.0

package/dist/components/calendar/date-range-picker.js

@@ -14,61 +14,61 @@ function f(e) {
 function p(e, t) {
 	return typeof e == "string" ? e : t;
 }
-function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _, disabled: v = !1, clearable: y = !0, formatValue: b = f, closeOnSelect: x = !1, closeOnPresetSelect: S = !1, showFooter: C = !0, presets: w, triggerClassName: T, contentClassName: E, numberOfMonths: D = 2, pagedNavigation: O = !0, ...k }) {
-	let [A, j] = s.useState(!1), [M, N] = s.useState(m ?? {}), P = m?.from ?? "", F = m?.to ?? "", I = !!(P || F), L = C ? M : m, R = L?.from ?? "", z = L?.to ?? "", B = !!(R || z), V = P && F ? `${b(P)} - ${b(F)}` : P ? `${b(P)} - ...` : _ ?? g?.placeholder ?? "Select date range", H = R && z ? `${b(R)} - ${b(z)}` : R ? `${b(R)} - ...` : g?.placeholder ?? "Select date range";
+function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _, disabled: v = !1, clearable: y = !0, formatValue: b = f, closeOnSelect: x = !1, closeOnPresetSelect: S = !1, showFooter: C = !0, presets: w, triggerClassName: T, contentClassName: E, months: D, numberOfMonths: O = 2, pagedNavigation: k = !0, ...A }) {
+	let [j, M] = s.useState(!1), [N, P] = s.useState(m ?? {}), F = m?.from ?? "", I = m?.to ?? "", L = !!(F || I), R = C ? N : m, z = R?.from ?? "", B = R?.to ?? "", V = !!(z || B), H = D ?? O, U = F && I ? `${b(F)} - ${b(I)}` : F ? `${b(F)} - ...` : _ ?? g?.placeholder ?? "Select date range", W = z && B ? `${b(z)} - ${b(B)}` : z ? `${b(z)} - ...` : g?.placeholder ?? "Select date range";
 	s.useEffect(() => {
-		A && C && N(m ?? {});
+		j && C && P(m ?? {});
 	}, [
-		A,
+		j,
 		C,
 		m
 	]);
-	let U = (e) => {
+	let G = (e) => {
 		if (C) {
-			N(e);
+			P(e);
 			return;
 		}
-		h?.(e), x && e.from && e.to && j(!1);
-	}, W = () => {
-		h?.(M), j(!1);
-	}, G = () => {
+		h?.(e), x && e.from && e.to && M(!1);
+	}, K = () => {
+		h?.(N), M(!1);
+	}, q = () => {
 		let e = {};
 		if (C) {
-			N(e);
+			P(e);
 			return;
 		}
 		h?.(e);
-	}, K = () => {
+	}, J = () => {
 		let e = {};
-		N(e), h?.(e);
-	}, q = (e) => {
-		e.preventDefault(), e.stopPropagation(), K();
-	}, J = (e) => {
+		P(e), h?.(e);
+	}, Y = (e) => {
+		e.preventDefault(), e.stopPropagation(), J();
+	}, X = (e) => {
 		if (C) {
-			N(e), S && (h?.(e), j(!1));
+			P(e), S && (h?.(e), M(!1));
 			return;
 		}
-		h?.(e), (x || S) && e.from && e.to && j(!1);
+		h?.(e), (x || S) && e.from && e.to && M(!1);
 	};
 	return /* @__PURE__ */ u("div", {
 		"data-slot": "date-range-picker",
 		className: e("w-full", a),
 		children: /* @__PURE__ */ d(n, {
-			open: A,
-			onOpenChange: j,
+			open: j,
+			onOpenChange: M,
 			children: [/* @__PURE__ */ d(i, {
 				render: /* @__PURE__ */ u(t, {
 					type: "button",
 					variant: "outline",
 					disabled: v,
-					className: e("group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]", !I && "text-muted-foreground", T)
+					className: e("group min-h-11 w-full justify-start gap-3 rounded-[var(--aui-control-radius,var(--radius-md))] border-border/80 bg-background/96 px-3 text-left font-normal shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04))]", !L && "text-muted-foreground", T)
 				}),
 				children: [
 					/* @__PURE__ */ u(c, {
 						"data-icon": "inline-start",
-						className: e(I && "text-primary")
+						className: e(L && "text-primary")
 					}),
-					I ? /* @__PURE__ */ d("span", {
+					L ? /* @__PURE__ */ d("span", {
 						className: "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2",
 						children: [
 							/* @__PURE__ */ d("span", {
@@ -78,7 +78,7 @@ function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _
 									children: g?.start ?? "Start"
 								}), /* @__PURE__ */ u("span", {
 									className: "truncate text-sm font-semibold text-foreground",
-									children: P ? b(P) : "..."
+									children: F ? b(F) : "..."
 								})]
 							}),
 							/* @__PURE__ */ u("span", {
@@ -92,7 +92,7 @@ function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _
 									children: g?.end ?? "End"
 								}), /* @__PURE__ */ u("span", {
 									className: "truncate text-sm font-semibold text-foreground",
-									children: F ? b(F) : "..."
+									children: I ? b(I) : "..."
 								})]
 							})
 						]
@@ -103,17 +103,17 @@ function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _
 							children: "Range"
 						}), /* @__PURE__ */ u("span", {
 							className: "truncate text-sm",
-							children: V
+							children: U
 						})]
 					}),
-					y && I ? /* @__PURE__ */ u("span", {
+					y && L ? /* @__PURE__ */ u("span", {
 						role: "button",
 						tabIndex: 0,
 						"aria-label": p(g?.clear, "Clear date range"),
 						className: "ml-auto inline-flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] text-muted-foreground opacity-80 transition hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
-						onClick: q,
+						onClick: Y,
 						onKeyDown: (e) => {
-							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), K());
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), J());
 						},
 						children: /* @__PURE__ */ u(l, { className: "size-3.5" })
 					}) : null
@@ -129,24 +129,24 @@ function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _
 							variant: "outline",
 							size: "sm",
 							className: "h-7 rounded-full px-3 text-xs",
-							onClick: () => J(e.value),
+							onClick: () => X(e.value),
 							children: e.label
 						}, n))
 					}) : null,
 					/* @__PURE__ */ u(o, {
 						mode: "range",
-						range: L,
-						onRangeChange: U,
+						range: R,
+						onRangeChange: G,
 						labels: g,
 						renderSelectionSummary: ({ range: e }) => {
 							let t = e?.from ? b(e.from) : null, n = e?.to ? b(e.to) : null;
 							return t && n ? `${t} -> ${n}` : t ? `${t} -> ...` : "No range selected";
 						},
-						numberOfMonths: D,
-						pagedNavigation: O,
+						numberOfMonths: H,
+						pagedNavigation: k,
 						showClearShortcut: !C && y,
 						showSelectionSummary: !0,
-						...k
+						...A
 					}),
 					C && /* @__PURE__ */ d("div", {
 						className: "flex flex-wrap items-center justify-between gap-3 border-t border-border/70 bg-muted/24 px-4 py-3",
@@ -154,7 +154,7 @@ function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _
 							className: "min-w-0 text-sm text-muted-foreground",
 							children: /* @__PURE__ */ u("span", {
 								className: "block truncate",
-								children: H
+								children: W
 							})
 						}), /* @__PURE__ */ d("div", {
 							className: "flex items-center gap-2",
@@ -162,13 +162,13 @@ function m({ className: a, value: m, onValueChange: h, labels: g, placeholder: _
 								type: "button",
 								variant: "ghost",
 								size: "sm",
-								onClick: G,
+								onClick: q,
 								children: g?.clear ?? "Clear"
 							}), /* @__PURE__ */ u(t, {
 								type: "button",
 								size: "sm",
-								disabled: !B,
-								onClick: W,
+								disabled: !V,
+								onClick: K,
 								children: g?.apply ?? "Apply"
 							})]
 						})]

package/dist/components/charts/charts.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={sm:120,md:180,lg:260};function o(e,t=1){return Math.max(...e,t)}function s(e,t){return!Number.isFinite(e)||t<=0?0:Math.max(0,Math.min(e/t,1))}function c(e,t,n,r){let i=(r-90)*Math.PI/180;return{x:e+n*Math.cos(i),y:t+n*Math.sin(i)}}function l(e,t,n,r,i){let a=c(e,t,n,i),o=c(e,t,n,r),s=i-r<=180?`0`:`1`;return[`M`,a.x,a.y,`A`,n,n,0,s,0,o.x,o.y].join(` `)}function u(e,t,n,r=12){let i=o(e),a=Math.max(t-r*2,1),c=Math.max(n-r*2,1);return e.length===0?``:e.map((t,n)=>{let o=r+(e.length===1?a/2:n/(e.length-1)*a),l=r+(1-s(t,i))*c;return`${n===0?`M`:`L`} ${o} ${l}`}).join(` `)}function d(e,t,n,r=12){let i=u(e,t,n,r);if(!i)return``;let a=n-r;return`${i} L ${e.length===1?t/2:t-r} ${a} L ${e.length===1?t/2:r} ${a} Z`}function f({title:e,description:r,action:a,className:o,children:s,...c}){return(0,i.jsxs)(n.Card,{"data-slot":`chart-frame`,className:t.cn(`border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4`,o),...c,children:[(e||r||a)&&(0,i.jsxs)(n.CardHeader,{className:`flex flex-row items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`grid gap-1`,children:[e&&(0,i.jsx)(n.CardTitle,{children:e}),r&&(0,i.jsx)(n.CardDescription,{children:r})]}),a]}),(0,i.jsx)(n.CardContent,{children:s})]})}function p({data:e,size:n=`md`,max:r,showLabels:c=!0,showValues:l=!0,className:u,barClassName:d,...f}){let p=r??o(e.map(e=>e.value)),m=a[n];return(0,i.jsx)(`div`,{"data-slot":`bar-chart`,className:t.cn(`grid gap-3`,u),...f,children:(0,i.jsx)(`div`,{className:`flex items-end gap-2`,style:{height:m},children:e.map((e,n)=>{let r=s(e.value,p);return(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col items-center gap-2`,children:[l&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.value}),(0,i.jsx)(`div`,{className:`flex w-full flex-1 items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1`,children:(0,i.jsx)(`div`,{className:t.cn(`w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all`,d),style:{height:`${Math.max(r*100,e.value>0?3:0)}%`,background:e.color}})}),c&&(0,i.jsx)(`div`,{className:`max-w-full truncate text-xs text-muted-foreground`,children:e.label})]},n)})})})}function m({values:e,size:n=`md`,width:r=560,showArea:c=!1,stroke:l=`var(--primary)`,className:f,...p}){let m=a[n],h=u(e,r,m),g=d(e,r,m);return(0,i.jsxs)(`svg`,{"data-slot":`line-chart`,viewBox:`0 0 ${r} ${m}`,className:t.cn(`h-auto w-full overflow-visible`,f),role:`img`,...p,children:[c&&(0,i.jsx)(`path`,{d:g,fill:`var(--primary)`,opacity:`0.12`}),(0,i.jsx)(`path`,{d:h,fill:`none`,stroke:l,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`}),e.map((t,n)=>{let a=o(e);return(0,i.jsx)(`circle`,{cx:12+(e.length===1?(r-24)/2:n/(e.length-1)*(r-24)),cy:12+(1-s(t,a))*(m-24),r:`3`,fill:l},n)})]})}function h({values:e,positive:n=!0,stroke:r,className:a,...o}){return(0,i.jsx)(m,{values:e,width:180,size:`sm`,stroke:r??(n?`var(--primary)`:`var(--destructive)`),className:t.cn(`max-w-44`,a),"aria-label":`Sparkline`,...o})}function g({data:e,size:n=180,strokeWidth:r=18,centerLabel:a,centerValue:o,className:s,...c}){let u=e.reduce((e,t)=>e+Math.max(t.value,0),0),d=n/2-r,f=e.map((t,n)=>{let r=Math.max(t.value,0),i=e.slice(0,n).reduce((e,t)=>e+Math.max(t.value,0),0);return{item:t,start:i,end:u>0?i+r/u*360:i}});return(0,i.jsxs)(`svg`,{"data-slot":`donut-chart`,viewBox:`0 0 ${n} ${n}`,className:t.cn(`h-auto w-full max-w-48`,s),role:`img`,...c,children:[(0,i.jsx)(`circle`,{cx:n/2,cy:n/2,r:d,fill:`none`,stroke:`var(--muted)`,strokeWidth:r}),f.map(({item:e,start:t,end:a},o)=>(0,i.jsx)(`path`,{d:l(n/2,n/2,d,t,a),fill:`none`,stroke:e.color??`var(--primary)`,strokeWidth:r,strokeLinecap:`round`},o)),(o||a)&&(0,i.jsxs)(`text`,{x:`50%`,y:`50%`,textAnchor:`middle`,dominantBaseline:`middle`,fill:`var(--foreground)`,children:[o&&(0,i.jsx)(`tspan`,{x:`50%`,dy:a?`-0.2em`:`0`,className:`text-lg font-semibold`,children:o}),a&&(0,i.jsx)(`tspan`,{x:`50%`,dy:`1.3em`,className:`text-xs fill-muted-foreground`,children:a})]})]})}function _({data:e,className:n,...r}){return(0,i.jsx)(`div`,{"data-slot":`chart-legend`,className:t.cn(`flex flex-wrap gap-3 text-xs text-muted-foreground`,n),...r,children:e.map((e,t)=>(0,i.jsxs)(`div`,{className:`inline-flex items-center gap-1.5`,children:[(0,i.jsx)(`span`,{className:`size-2 rounded-full bg-primary`,style:{background:e.color}}),(0,i.jsx)(`span`,{children:e.label})]},t))})}function v({label:e,value:n,change:r,positive:a=!0,values:o,className:s,...c}){return(0,i.jsxs)(`div`,{"data-slot":`metric-trend`,className:t.cn(`grid gap-3 rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 p-4 shadow-sm ring-1 ring-foreground/4`,s),...c,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`grid gap-1`,children:[(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,i.jsx)(`div`,{className:`text-2xl font-semibold tracking-tight`,children:n})]}),r&&(0,i.jsx)(`div`,{className:t.cn(`rounded-full px-2 py-1 text-xs font-medium`,a?`bg-primary/10 text-primary`:`bg-destructive/10 text-destructive`),children:r})]}),o&&(0,i.jsx)(h,{values:o,positive:a})]})}exports.BarChart=p,exports.ChartFrame=f,exports.ChartLegend=_,exports.DonutChart=g,exports.LineChart=m,exports.MetricTrend=v,exports.Sparkline=h;
+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={sm:120,md:180,lg:260};function o(e,t=1){return Math.max(...e,t)}function s(e,t){return!Number.isFinite(e)||t<=0?0:Math.max(0,Math.min(e/t,1))}function c(e,t){return t??`var(--color-chart-${e%5+1}, var(--primary))`}function l(e,t,n,r){let i=(r-90)*Math.PI/180;return{x:e+n*Math.cos(i),y:t+n*Math.sin(i)}}function u(e,t,n,r,i){let a=l(e,t,n,i),o=l(e,t,n,r),s=i-r<=180?`0`:`1`;return[`M`,a.x,a.y,`A`,n,n,0,s,0,o.x,o.y].join(` `)}function d(e,t,n,r=12){let i=o(e),a=Math.max(t-r*2,1),c=Math.max(n-r*2,1);return e.length===0?``:e.map((t,n)=>{let o=r+(e.length===1?a/2:n/(e.length-1)*a),l=r+(1-s(t,i))*c;return`${n===0?`M`:`L`} ${o} ${l}`}).join(` `)}function f(e,t,n,r=12){let i=d(e,t,n,r);if(!i)return``;let a=n-r;return`${i} L ${e.length===1?t/2:t-r} ${a} L ${e.length===1?t/2:r} ${a} Z`}function p({title:e,description:r,action:a,state:o=`ready`,emptyLabel:s=`No data available.`,className:c,children:l,...u}){return(0,i.jsxs)(n.Card,{"data-slot":`chart-frame`,className:t.cn(`border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4`,c),...u,children:[(e||r||a)&&(0,i.jsxs)(n.CardHeader,{className:`flex flex-row items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`grid gap-1`,children:[e&&(0,i.jsx)(n.CardTitle,{children:e}),r&&(0,i.jsx)(n.CardDescription,{children:r})]}),a]}),(0,i.jsxs)(n.CardContent,{children:[o===`loading`?(0,i.jsxs)(`div`,{className:`grid gap-3`,children:[(0,i.jsx)(`div`,{className:`h-4 w-24 animate-pulse rounded bg-muted`}),(0,i.jsx)(`div`,{className:`h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70`})]}):null,o===`empty`?(0,i.jsx)(`div`,{className:`rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground`,children:s}):null,o===`ready`?l:null]})]})}function m({data:e,size:n=`md`,max:r,showLabels:l=!0,showValues:u=!0,state:d=`ready`,emptyLabel:f=`No chart data.`,className:p,barClassName:m,...h}){let g=e.map(e=>e.value),_=r??o(g.map(e=>Math.abs(e))),v=a[n];return d===`loading`?(0,i.jsx)(`div`,{"data-slot":`bar-chart`,className:t.cn(`grid gap-3`,p),...h,children:(0,i.jsx)(`div`,{className:`h-40 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70`})}):d===`empty`||e.length===0?(0,i.jsx)(`div`,{"data-slot":`bar-chart`,className:t.cn(`rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground`,p),...h,children:f}):(0,i.jsx)(`div`,{"data-slot":`bar-chart`,className:t.cn(`grid gap-3`,p),...h,children:(0,i.jsx)(`div`,{className:`flex items-end gap-2`,style:{height:v},children:e.map((e,n)=>{let r=s(Math.abs(e.value),_),a=e.value<0;return(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col items-center gap-2`,children:[u&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.value}),(0,i.jsx)(`div`,{className:`flex w-full flex-1 items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1`,children:(0,i.jsx)(`div`,{className:t.cn(`w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all`,m),style:{height:`${Math.max(r*100,Math.abs(e.value)>0?3:0)}%`,background:c(n,e.color),opacity:a?.72:1}})}),l&&(0,i.jsx)(`div`,{className:`max-w-full truncate text-xs text-muted-foreground`,children:e.label})]},n)})})})}function h({values:e,size:n=`md`,width:r=560,showArea:c=!1,stroke:l=`var(--primary)`,state:u=`ready`,emptyLabel:p=`No line data.`,className:m,...h}){let g=a[n],_=d(e,r,g),v=f(e,r,g);return u===`loading`?(0,i.jsx)(`div`,{className:t.cn(`h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70`,m)}):u===`empty`||e.length===0?(0,i.jsx)(`div`,{className:t.cn(`rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground`,m),children:p}):(0,i.jsxs)(`svg`,{"data-slot":`line-chart`,viewBox:`0 0 ${r} ${g}`,className:t.cn(`h-auto w-full overflow-visible`,m),role:`img`,...h,children:[c&&(0,i.jsx)(`path`,{d:v,fill:`var(--primary)`,opacity:`0.12`}),(0,i.jsx)(`path`,{d:_,fill:`none`,stroke:l,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`}),e.map((t,n)=>{let a=o(e);return(0,i.jsx)(`circle`,{cx:12+(e.length===1?(r-24)/2:n/(e.length-1)*(r-24)),cy:12+(1-s(t,a))*(g-24),r:`3`,fill:l},n)})]})}function g({values:e,positive:n=!0,stroke:r,className:a,...o}){return(0,i.jsx)(h,{values:e,width:180,size:`sm`,stroke:r??(n?`var(--primary)`:`var(--destructive)`),className:t.cn(`max-w-44`,a),"aria-label":`Sparkline`,...o})}function _({data:e,size:n=180,strokeWidth:r=18,centerLabel:a,centerValue:o,state:s=`ready`,emptyLabel:l=`No distribution data.`,className:d,...f}){let p=e.reduce((e,t)=>e+Math.max(t.value,0),0),m=n/2-r,h=e.map((t,n)=>{let r=Math.max(t.value,0),i=e.slice(0,n).reduce((e,t)=>e+Math.max(t.value,0),0);return{item:t,start:i,end:p>0?i+r/p*360:i}});return s===`loading`?(0,i.jsx)(`div`,{className:t.cn(`h-44 w-full max-w-48 animate-pulse rounded-full bg-muted/70`,d)}):s===`empty`||e.length===0||p<=0?(0,i.jsx)(`div`,{className:t.cn(`flex h-44 w-full max-w-48 items-center justify-center rounded-full border border-dashed border-border/70 px-4 text-center text-sm text-muted-foreground`,d),children:l}):(0,i.jsxs)(`svg`,{"data-slot":`donut-chart`,viewBox:`0 0 ${n} ${n}`,className:t.cn(`h-auto w-full max-w-48`,d),role:`img`,...f,children:[(0,i.jsx)(`circle`,{cx:n/2,cy:n/2,r:m,fill:`none`,stroke:`var(--muted)`,strokeWidth:r}),h.map(({item:e,start:t,end:a},o)=>(0,i.jsx)(`path`,{d:u(n/2,n/2,m,t,a),fill:`none`,stroke:c(o,e.color),strokeWidth:r,strokeLinecap:`round`},o)),(o||a)&&(0,i.jsxs)(`text`,{x:`50%`,y:`50%`,textAnchor:`middle`,dominantBaseline:`middle`,fill:`var(--foreground)`,children:[o&&(0,i.jsx)(`tspan`,{x:`50%`,dy:a?`-0.2em`:`0`,className:`text-lg font-semibold`,children:o}),a&&(0,i.jsx)(`tspan`,{x:`50%`,dy:`1.3em`,className:`text-xs fill-muted-foreground`,children:a})]})]})}function v({data:e,className:n,...r}){return(0,i.jsx)(`div`,{"data-slot":`chart-legend`,className:t.cn(`flex flex-wrap gap-3 text-xs text-muted-foreground`,n),...r,children:e.map((e,t)=>(0,i.jsxs)(`div`,{className:`inline-flex items-center gap-1.5`,children:[(0,i.jsx)(`span`,{className:`size-2 rounded-full bg-primary`,style:{background:c(t,e.color)}}),(0,i.jsx)(`span`,{children:e.label})]},t))})}function y({label:e,value:n,change:r,positive:a=!0,values:o,className:s,...c}){return(0,i.jsxs)(`div`,{"data-slot":`metric-trend`,className:t.cn(`grid gap-3 rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 p-4 shadow-sm ring-1 ring-foreground/4`,s),...c,children:[(0,i.jsxs)(`div`,{className:`flex items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`grid gap-1`,children:[(0,i.jsx)(`div`,{className:`text-sm text-muted-foreground`,children:e}),(0,i.jsx)(`div`,{className:`text-2xl font-semibold tracking-tight`,children:n})]}),r&&(0,i.jsx)(`div`,{className:t.cn(`rounded-full px-2 py-1 text-xs font-medium`,a?`bg-primary/10 text-primary`:`bg-destructive/10 text-destructive`),children:r})]}),o&&(0,i.jsx)(g,{values:o,positive:a})]})}exports.BarChart=m,exports.ChartFrame=p,exports.ChartLegend=v,exports.DonutChart=_,exports.LineChart=h,exports.MetricTrend=y,exports.Sparkline=g;

package/dist/components/charts/charts.d.ts

@@ -14,12 +14,15 @@ export type ChartSeries = {
 };
 export type ChartAxisLabel = string | number | React.ReactNode;
 export type ChartSize = "sm" | "md" | "lg";
+export type ChartState = "ready" | "loading" | "empty";
 export type ChartFrameProps = React.ComponentProps<typeof Card> & {
     title?: React.ReactNode;
     description?: React.ReactNode;
     action?: React.ReactNode;
+    state?: ChartState;
+    emptyLabel?: React.ReactNode;
 };
-declare function ChartFrame({ title, description, action, className, children, ...props }: ChartFrameProps): React.JSX.Element;
+declare function ChartFrame({ title, description, action, state, emptyLabel, className, children, ...props }: ChartFrameProps): React.JSX.Element;
 export type BarChartProps = React.ComponentProps<"div"> & {
     data: ChartDatum[];
     size?: ChartSize;
@@ -27,16 +30,20 @@ export type BarChartProps = React.ComponentProps<"div"> & {
     showLabels?: boolean;
     showValues?: boolean;
     barClassName?: string;
+    state?: ChartState;
+    emptyLabel?: React.ReactNode;
 };
-declare function BarChart({ data, size, max, showLabels, showValues, className, barClassName, ...props }: BarChartProps): React.JSX.Element;
+declare function BarChart({ data, size, max, showLabels, showValues, state, emptyLabel, className, barClassName, ...props }: BarChartProps): React.JSX.Element;
 export type LineChartProps = Omit<React.ComponentProps<"svg">, "values"> & {
     values: number[];
     size?: ChartSize;
     width?: number;
     showArea?: boolean;
     stroke?: string;
+    state?: ChartState;
+    emptyLabel?: React.ReactNode;
 };
-declare function LineChart({ values, size, width, showArea, stroke, className, ...props }: LineChartProps): React.JSX.Element;
+declare function LineChart({ values, size, width, showArea, stroke, state, emptyLabel, className, ...props }: LineChartProps): React.JSX.Element;
 export type SparklineProps = Omit<LineChartProps, "size" | "showArea"> & {
     values: number[];
     positive?: boolean;
@@ -48,8 +55,10 @@ export type DonutChartProps = React.ComponentProps<"svg"> & {
     strokeWidth?: number;
     centerLabel?: React.ReactNode;
     centerValue?: React.ReactNode;
+    state?: ChartState;
+    emptyLabel?: React.ReactNode;
 };
-declare function DonutChart({ data, size, strokeWidth, centerLabel, centerValue, className, ...props }: DonutChartProps): React.JSX.Element;
+declare function DonutChart({ data, size, strokeWidth, centerLabel, centerValue, state, emptyLabel, className, ...props }: DonutChartProps): React.JSX.Element;
 export type ChartLegendProps = React.ComponentProps<"div"> & {
     data: ChartDatum[];
 };

package/dist/components/charts/charts.js

@@ -14,15 +14,18 @@ function l(e, t = 1) {
 function u(e, t) {
 	return !Number.isFinite(e) || t <= 0 ? 0 : Math.max(0, Math.min(e / t, 1));
 }
-function d(e, t, n, r) {
+function d(e, t) {
+	return t ?? `var(--color-chart-${e % 5 + 1}, var(--primary))`;
+}
+function f(e, t, n, r) {
 	let i = (r - 90) * Math.PI / 180;
 	return {
 		x: e + n * Math.cos(i),
 		y: t + n * Math.sin(i)
 	};
 }
-function f(e, t, n, r, i) {
-	let a = d(e, t, n, i), o = d(e, t, n, r), s = i - r <= 180 ? "0" : "1";
+function p(e, t, n, r, i) {
+	let a = f(e, t, n, i), o = f(e, t, n, r), s = i - r <= 180 ? "0" : "1";
 	return [
 		"M",
 		a.x,
@@ -37,44 +40,64 @@ function f(e, t, n, r, i) {
 		o.y
 	].join(" ");
 }
-function p(e, t, n, r = 12) {
+function m(e, t, n, r = 12) {
 	let i = l(e), a = Math.max(t - r * 2, 1), o = Math.max(n - r * 2, 1);
 	return e.length === 0 ? "" : e.map((t, n) => {
 		let s = r + (e.length === 1 ? a / 2 : n / (e.length - 1) * a), c = r + (1 - u(t, i)) * o;
 		return `${n === 0 ? "M" : "L"} ${s} ${c}`;
 	}).join(" ");
 }
-function m(e, t, n, r = 12) {
-	let i = p(e, t, n, r);
+function h(e, t, n, r = 12) {
+	let i = m(e, t, n, r);
 	if (!i) return "";
 	let a = n - r;
 	return `${i} L ${e.length === 1 ? t / 2 : t - r} ${a} L ${e.length === 1 ? t / 2 : r} ${a} Z`;
 }
-function h({ title: c, description: l, action: u, className: d, children: f, ...p }) {
+function g({ title: c, description: l, action: u, state: d = "ready", emptyLabel: f = "No data available.", className: p, children: m, ...h }) {
 	return /* @__PURE__ */ s(t, {
 		"data-slot": "chart-frame",
-		className: e("border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", d),
-		...p,
+		className: e("border-border/75 bg-card/96 shadow-sm ring-1 ring-foreground/4", p),
+		...h,
 		children: [(c || l || u) && /* @__PURE__ */ s(i, {
 			className: "flex flex-row items-start justify-between gap-3",
 			children: [/* @__PURE__ */ s("div", {
 				className: "grid gap-1",
 				children: [c && /* @__PURE__ */ o(a, { children: c }), l && /* @__PURE__ */ o(r, { children: l })]
 			}), u]
-		}), /* @__PURE__ */ o(n, { children: f })]
+		}), /* @__PURE__ */ s(n, { children: [
+			d === "loading" ? /* @__PURE__ */ s("div", {
+				className: "grid gap-3",
+				children: [/* @__PURE__ */ o("div", { className: "h-4 w-24 animate-pulse rounded bg-muted" }), /* @__PURE__ */ o("div", { className: "h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" })]
+			}) : null,
+			d === "empty" ? /* @__PURE__ */ o("div", {
+				className: "rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground",
+				children: f
+			}) : null,
+			d === "ready" ? m : null
+		] })]
 	});
 }
-function g({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a = !0, className: d, barClassName: f, ...p }) {
-	let m = r ?? l(t.map((e) => e.value)), h = c[n];
-	return /* @__PURE__ */ o("div", {
+function _({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a = !0, state: f = "ready", emptyLabel: p = "No chart data.", className: m, barClassName: h, ...g }) {
+	let _ = t.map((e) => e.value), v = r ?? l(_.map((e) => Math.abs(e))), y = c[n];
+	return f === "loading" ? /* @__PURE__ */ o("div", {
+		"data-slot": "bar-chart",
+		className: e("grid gap-3", m),
+		...g,
+		children: /* @__PURE__ */ o("div", { className: "h-40 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" })
+	}) : f === "empty" || t.length === 0 ? /* @__PURE__ */ o("div", {
 		"data-slot": "bar-chart",
-		className: e("grid gap-3", d),
-		...p,
+		className: e("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", m),
+		...g,
+		children: p
+	}) : /* @__PURE__ */ o("div", {
+		"data-slot": "bar-chart",
+		className: e("grid gap-3", m),
+		...g,
 		children: /* @__PURE__ */ o("div", {
 			className: "flex items-end gap-2",
-			style: { height: h },
+			style: { height: y },
 			children: t.map((t, n) => {
-				let r = u(t.value, m);
+				let r = u(Math.abs(t.value), v), c = t.value < 0;
 				return /* @__PURE__ */ s("div", {
 					className: "flex min-w-0 flex-1 flex-col items-center gap-2",
 					children: [
@@ -85,10 +108,11 @@ function g({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a
 						/* @__PURE__ */ o("div", {
 							className: "flex w-full flex-1 items-end rounded-[min(var(--radius-xl),16px)] border border-border/60 bg-muted/38 p-1",
 							children: /* @__PURE__ */ o("div", {
-								className: e("w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all", f),
+								className: e("w-full rounded-[min(var(--radius-lg),12px)] bg-primary transition-all", h),
 								style: {
-									height: `${Math.max(r * 100, t.value > 0 ? 3 : 0)}%`,
-									background: t.color
+									height: `${Math.max(r * 100, Math.abs(t.value) > 0 ? 3 : 0)}%`,
+									background: d(n, t.color),
+									opacity: c ? .72 : 1
 								}
 							})
 						}),
@@ -102,22 +126,25 @@ function g({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a
 		})
 	});
 }
-function _({ values: t, size: n = "md", width: r = 560, showArea: i = !1, stroke: a = "var(--primary)", className: d, ...f }) {
-	let h = c[n], g = p(t, r, h), _ = m(t, r, h);
-	return /* @__PURE__ */ s("svg", {
+function v({ values: t, size: n = "md", width: r = 560, showArea: i = !1, stroke: a = "var(--primary)", state: d = "ready", emptyLabel: f = "No line data.", className: p, ...g }) {
+	let _ = c[n], v = m(t, r, _), y = h(t, r, _);
+	return d === "loading" ? /* @__PURE__ */ o("div", { className: e("h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70", p) }) : d === "empty" || t.length === 0 ? /* @__PURE__ */ o("div", {
+		className: e("rounded-[min(var(--radius-xl),16px)] border border-dashed border-border/70 px-4 py-10 text-center text-sm text-muted-foreground", p),
+		children: f
+	}) : /* @__PURE__ */ s("svg", {
 		"data-slot": "line-chart",
-		viewBox: `0 0 ${r} ${h}`,
-		className: e("h-auto w-full overflow-visible", d),
+		viewBox: `0 0 ${r} ${_}`,
+		className: e("h-auto w-full overflow-visible", p),
 		role: "img",
-		...f,
+		...g,
 		children: [
 			i && /* @__PURE__ */ o("path", {
-				d: _,
+				d: y,
 				fill: "var(--primary)",
 				opacity: "0.12"
 			}),
 			/* @__PURE__ */ o("path", {
-				d: g,
+				d: v,
 				fill: "none",
 				stroke: a,
 				strokeWidth: "3",
@@ -128,7 +155,7 @@ function _({ values: t, size: n = "md", width: r = 560, showArea: i = !1, stroke
 				let i = l(t);
 				return /* @__PURE__ */ o("circle", {
 					cx: 12 + (t.length === 1 ? (r - 24) / 2 : n / (t.length - 1) * (r - 24)),
-					cy: 12 + (1 - u(e, i)) * (h - 24),
+					cy: 12 + (1 - u(e, i)) * (_ - 24),
 					r: "3",
 					fill: a
 				}, n);
@@ -136,8 +163,8 @@ function _({ values: t, size: n = "md", width: r = 560, showArea: i = !1, stroke
 		]
 	});
 }
-function v({ values: t, positive: n = !0, stroke: r, className: i, ...a }) {
-	return /* @__PURE__ */ o(_, {
+function y({ values: t, positive: n = !0, stroke: r, className: i, ...a }) {
+	return /* @__PURE__ */ o(v, {
 		values: t,
 		width: 180,
 		size: "sm",
@@ -147,34 +174,37 @@ function v({ values: t, positive: n = !0, stroke: r, className: i, ...a }) {
 		...a
 	});
 }
-function y({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, className: c, ...l }) {
-	let u = t.reduce((e, t) => e + Math.max(t.value, 0), 0), d = n / 2 - r, p = t.map((e, n) => {
+function b({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, state: c = "ready", emptyLabel: l = "No distribution data.", className: u, ...f }) {
+	let m = t.reduce((e, t) => e + Math.max(t.value, 0), 0), h = n / 2 - r, g = t.map((e, n) => {
 		let r = Math.max(e.value, 0), i = t.slice(0, n).reduce((e, t) => e + Math.max(t.value, 0), 0);
 		return {
 			item: e,
 			start: i,
-			end: u > 0 ? i + r / u * 360 : i
+			end: m > 0 ? i + r / m * 360 : i
 		};
 	});
-	return /* @__PURE__ */ s("svg", {
+	return c === "loading" ? /* @__PURE__ */ o("div", { className: e("h-44 w-full max-w-48 animate-pulse rounded-full bg-muted/70", u) }) : c === "empty" || t.length === 0 || m <= 0 ? /* @__PURE__ */ o("div", {
+		className: e("flex h-44 w-full max-w-48 items-center justify-center rounded-full border border-dashed border-border/70 px-4 text-center text-sm text-muted-foreground", u),
+		children: l
+	}) : /* @__PURE__ */ s("svg", {
 		"data-slot": "donut-chart",
 		viewBox: `0 0 ${n} ${n}`,
-		className: e("h-auto w-full max-w-48", c),
+		className: e("h-auto w-full max-w-48", u),
 		role: "img",
-		...l,
+		...f,
 		children: [
 			/* @__PURE__ */ o("circle", {
 				cx: n / 2,
 				cy: n / 2,
-				r: d,
+				r: h,
 				fill: "none",
 				stroke: "var(--muted)",
 				strokeWidth: r
 			}),
-			p.map(({ item: e, start: t, end: i }, a) => /* @__PURE__ */ o("path", {
-				d: f(n / 2, n / 2, d, t, i),
+			g.map(({ item: e, start: t, end: i }, a) => /* @__PURE__ */ o("path", {
+				d: p(n / 2, n / 2, h, t, i),
 				fill: "none",
-				stroke: e.color ?? "var(--primary)",
+				stroke: d(a, e.color),
 				strokeWidth: r,
 				strokeLinecap: "round"
 			}, a)),
@@ -199,7 +229,7 @@ function y({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
 		]
 	});
 }
-function b({ data: t, className: n, ...r }) {
+function x({ data: t, className: n, ...r }) {
 	return /* @__PURE__ */ o("div", {
 		"data-slot": "chart-legend",
 		className: e("flex flex-wrap gap-3 text-xs text-muted-foreground", n),
@@ -208,12 +238,12 @@ function b({ data: t, className: n, ...r }) {
 			className: "inline-flex items-center gap-1.5",
 			children: [/* @__PURE__ */ o("span", {
 				className: "size-2 rounded-full bg-primary",
-				style: { background: e.color }
+				style: { background: d(t, e.color) }
 			}), /* @__PURE__ */ o("span", { children: e.label })]
 		}, t))
 	});
 }
-function x({ label: t, value: n, change: r, positive: i = !0, values: a, className: c, ...l }) {
+function S({ label: t, value: n, change: r, positive: i = !0, values: a, className: c, ...l }) {
 	return /* @__PURE__ */ s("div", {
 		"data-slot": "metric-trend",
 		className: e("grid gap-3 rounded-[var(--radius-2xl)] border border-border/75 bg-card/96 p-4 shadow-sm ring-1 ring-foreground/4", c),
@@ -233,11 +263,11 @@ function x({ label: t, value: n, change: r, positive: i = !0, values: a, classNa
 				className: e("rounded-full px-2 py-1 text-xs font-medium", i ? "bg-primary/10 text-primary" : "bg-destructive/10 text-destructive"),
 				children: r
 			})]
-		}), a && /* @__PURE__ */ o(v, {
+		}), a && /* @__PURE__ */ o(y, {
 			values: a,
 			positive: i
 		})]
 	});
 }
 //#endregion
-export { g as BarChart, h as ChartFrame, b as ChartLegend, y as DonutChart, _ as LineChart, x as MetricTrend, v as Sparkline };
+export { _ as BarChart, g as ChartFrame, x as ChartLegend, b as DonutChart, v as LineChart, S as MetricTrend, y as Sparkline };

package/dist/components/charts/progress-ring.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({value:e,max:n=100,size:i=120,strokeWidth:a=10,label:o,description:s,className:c,...l}){let u=(i-a)/2,d=2*Math.PI*u,f=d-(n>0?Math.min(Math.max(e/n,0),1):0)*d;return(0,r.jsxs)(`svg`,{"data-slot":`progress-ring`,viewBox:`0 0 ${i} ${i}`,className:t.cn(`h-auto w-full max-w-32`,c),role:`img`,...l,children:[(0,r.jsx)(`circle`,{cx:i/2,cy:i/2,r:u,fill:`none`,stroke:`var(--muted)`,strokeWidth:a}),(0,r.jsx)(`circle`,{cx:i/2,cy:i/2,r:u,fill:`none`,stroke:`var(--primary)`,strokeWidth:a,strokeLinecap:`round`,strokeDasharray:d,strokeDashoffset:f,transform:`rotate(-90 ${i/2} ${i/2})`}),(o||s)&&(0,r.jsxs)(`text`,{x:`50%`,y:`50%`,textAnchor:`middle`,dominantBaseline:`middle`,fill:`var(--foreground)`,children:[o&&(0,r.jsx)(`tspan`,{x:`50%`,dy:s?`-0.15em`:`0`,className:`text-base font-semibold`,children:o}),s&&(0,r.jsx)(`tspan`,{x:`50%`,dy:`1.25em`,className:`text-xs fill-muted-foreground`,children:s})]})]})}exports.ProgressRing=i;
+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,max:n=100,size:i=120,strokeWidth:a=10,label:o,description:s,tone:c=`default`,loading:l=!1,className:u,...d}){let f=(i-a)/2,p=2*Math.PI*f,m=p-(n>0?Math.min(Math.max(e/n,0),1):0)*p,h=c===`success`?`var(--color-chart-3, var(--primary))`:c===`warning`?`var(--color-chart-4, var(--primary))`:c===`danger`?`var(--destructive)`:`var(--primary)`;return(0,r.jsxs)(`svg`,{"data-slot":`progress-ring`,viewBox:`0 0 ${i} ${i}`,className:t.cn(`h-auto w-full max-w-32`,u),role:`img`,...d,children:[(0,r.jsx)(`circle`,{cx:i/2,cy:i/2,r:f,fill:`none`,stroke:`var(--muted)`,strokeWidth:a}),(0,r.jsx)(`circle`,{cx:i/2,cy:i/2,r:f,fill:`none`,stroke:h,strokeWidth:a,strokeLinecap:`round`,strokeDasharray:p,strokeDashoffset:l?p*.45:m,transform:`rotate(-90 ${i/2} ${i/2})`,className:l?`animate-pulse`:void 0}),(o||s)&&(0,r.jsxs)(`text`,{x:`50%`,y:`50%`,textAnchor:`middle`,dominantBaseline:`middle`,fill:`var(--foreground)`,children:[o&&(0,r.jsx)(`tspan`,{x:`50%`,dy:s?`-0.15em`:`0`,className:`text-base font-semibold`,children:o}),s&&(0,r.jsx)(`tspan`,{x:`50%`,dy:`1.25em`,className:`text-xs fill-muted-foreground`,children:s})]})]})}exports.ProgressRing=i;

package/dist/components/charts/progress-ring.d.ts

@@ -6,6 +6,8 @@ export type ProgressRingProps = React.ComponentProps<"svg"> & {
     strokeWidth?: number;
     label?: React.ReactNode;
     description?: React.ReactNode;
+    tone?: "default" | "success" | "warning" | "danger";
+    loading?: boolean;
 };
-declare function ProgressRing({ value, max, size, strokeWidth, label, description, className, ...props }: ProgressRingProps): React.JSX.Element;
+declare function ProgressRing({ value, max, size, strokeWidth, label, description, tone, loading, className, ...props }: ProgressRingProps): React.JSX.Element;
 export { ProgressRing };

package/dist/components/charts/progress-ring.js

@@ -2,19 +2,19 @@ import { cn as e } from "../../lib/utils.js";
 import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/charts/progress-ring.tsx
-function r({ value: r, max: i = 100, size: a = 120, strokeWidth: o = 10, label: s, description: c, className: l, ...u }) {
-	let d = (a - o) / 2, f = 2 * Math.PI * d, p = f - (i > 0 ? Math.min(Math.max(r / i, 0), 1) : 0) * f;
+function r({ value: r, max: i = 100, size: a = 120, strokeWidth: o = 10, label: s, description: c, tone: l = "default", loading: u = !1, className: d, ...f }) {
+	let p = (a - o) / 2, m = 2 * Math.PI * p, h = m - (i > 0 ? Math.min(Math.max(r / i, 0), 1) : 0) * m, g = l === "success" ? "var(--color-chart-3, var(--primary))" : l === "warning" ? "var(--color-chart-4, var(--primary))" : l === "danger" ? "var(--destructive)" : "var(--primary)";
 	return /* @__PURE__ */ n("svg", {
 		"data-slot": "progress-ring",
 		viewBox: `0 0 ${a} ${a}`,
-		className: e("h-auto w-full max-w-32", l),
+		className: e("h-auto w-full max-w-32", d),
 		role: "img",
-		...u,
+		...f,
 		children: [
 			/* @__PURE__ */ t("circle", {
 				cx: a / 2,
 				cy: a / 2,
-				r: d,
+				r: p,
 				fill: "none",
 				stroke: "var(--muted)",
 				strokeWidth: o
@@ -22,14 +22,15 @@ function r({ value: r, max: i = 100, size: a = 120, strokeWidth: o = 10, label:
 			/* @__PURE__ */ t("circle", {
 				cx: a / 2,
 				cy: a / 2,
-				r: d,
+				r: p,
 				fill: "none",
-				stroke: "var(--primary)",
+				stroke: g,
 				strokeWidth: o,
 				strokeLinecap: "round",
-				strokeDasharray: f,
-				strokeDashoffset: p,
-				transform: `rotate(-90 ${a / 2} ${a / 2})`
+				strokeDasharray: m,
+				strokeDashoffset: u ? m * .45 : h,
+				transform: `rotate(-90 ${a / 2} ${a / 2})`,
+				className: u ? "animate-pulse" : void 0
 			}),
 			(s || c) && /* @__PURE__ */ n("text", {
 				x: "50%",

package/dist/components/data-table/data-table-column-visibility-menu.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/dropdown-menu/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e){return e.replace(/_/g,` `).replace(/-/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}function c({table:e,label:i=`Columns`,triggerLabel:c,align:l=`end`,side:u=`bottom`,triggerClassName:d,contentClassName:f,getColumnLabel:p=s}){let m=e.getAllLeafColumns().filter(e=>e.getCanHide());return(0,o.jsxs)(r.DropdownMenu,{children:[(0,o.jsxs)(r.DropdownMenuTrigger,{render:(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,className:t.cn(`border-border/80 bg-background/94 shadow-[0_1px_0_rgba(255,255,255,0.06)]`,d)}),children:[(0,o.jsx)(a.Columns3Icon,{"data-icon":`inline-start`}),c??i]}),(0,o.jsxs)(r.DropdownMenuContent,{align:l,side:u,className:t.cn(`min-w-48 rounded-[var(--radius-2xl)] border-border/80 bg-popover/98 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur`,f),children:[(0,o.jsx)(r.DropdownMenuLabel,{children:i}),(0,o.jsx)(r.DropdownMenuSeparator,{}),m.map(e=>(0,o.jsx)(r.DropdownMenuCheckboxItem,{checked:e.getIsVisible(),onCheckedChange:t=>e.toggleVisibility(!!t),children:p(e.id)},e.id))]})]})}exports.DataTableColumnVisibilityMenu=c;
+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"),r=require("../ui/dropdown-menu/index.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e){return e.replace(/_/g,` `).replace(/-/g,` `).replace(/\b\w/g,e=>e.toUpperCase())}function c({table:e,label:i=`Columns`,triggerLabel:c,align:l=`end`,side:u=`bottom`,triggerClassName:d,contentClassName:f,emptyLabel:p=`No hideable columns`,showCount:m=!0,triggerAriaLabel:h,getColumnLabel:g=s}){let _=e.getAllLeafColumns().filter(e=>e.getCanHide()),v=_.filter(e=>e.getIsVisible()).length;return(0,o.jsxs)(r.DropdownMenu,{children:[(0,o.jsxs)(r.DropdownMenuTrigger,{render:(0,o.jsx)(n.Button,{type:`button`,variant:`outline`,size:`sm`,"aria-label":h??`Choose visible columns`,className:t.cn(`min-w-0 border-border/80 bg-background/94 px-2.5 shadow-[0_1px_0_rgba(255,255,255,0.06)] hover:border-border hover:bg-accent/70`,d)}),children:[(0,o.jsx)(a.Columns3Icon,{"data-icon":`inline-start`,className:`size-4 shrink-0`}),(0,o.jsx)(`span`,{className:`truncate`,children:c??i}),m&&_.length>0?(0,o.jsxs)(`span`,{className:`ml-0.5 rounded-[var(--radius-sm)] bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground`,children:[v,`/`,_.length]}):null]}),(0,o.jsxs)(r.DropdownMenuContent,{align:l,side:u,className:t.cn(`max-h-[min(24rem,var(--radix-dropdown-menu-content-available-height,24rem))] min-w-56 overflow-y-auto rounded-[var(--radius-lg)] border-border/80 bg-popover/98 p-1 shadow-[0_24px_80px_rgba(15,23,42,0.18)] backdrop-blur`,f),children:[(0,o.jsxs)(r.DropdownMenuLabel,{className:`flex items-center justify-between gap-3`,children:[(0,o.jsx)(`span`,{children:i}),m?(0,o.jsxs)(`span`,{className:`text-xs font-normal text-muted-foreground`,children:[v,` visible`]}):null]}),(0,o.jsx)(r.DropdownMenuSeparator,{}),_.length===0?(0,o.jsx)(r.DropdownMenuLabel,{className:`py-3 text-sm font-normal text-muted-foreground`,children:p}):null,_.map(e=>(0,o.jsx)(r.DropdownMenuCheckboxItem,{checked:e.getIsVisible(),onCheckedChange:t=>e.toggleVisibility(!!t),children:g(e.id)},e.id))]})]})}exports.DataTableColumnVisibilityMenu=c;

package/dist/components/data-table/data-table-column-visibility-menu.d.ts

@@ -8,7 +8,10 @@ export type DataTableColumnVisibilityMenuProps<TData> = {
     side?: "top" | "right" | "bottom" | "left";
     triggerClassName?: string;
     contentClassName?: string;
+    emptyLabel?: React.ReactNode;
+    showCount?: boolean;
+    triggerAriaLabel?: string;
     getColumnLabel?: (columnId: string) => React.ReactNode;
 };
-declare function DataTableColumnVisibilityMenu<TData>({ table, label, triggerLabel, align, side, triggerClassName, contentClassName, getColumnLabel, }: DataTableColumnVisibilityMenuProps<TData>): React.JSX.Element;
+declare function DataTableColumnVisibilityMenu<TData>({ table, label, triggerLabel, align, side, triggerClassName, contentClassName, emptyLabel, showCount, triggerAriaLabel, getColumnLabel, }: DataTableColumnVisibilityMenuProps<TData>): React.JSX.Element;
 export { DataTableColumnVisibilityMenu };