tembro 3.0.0 → 3.1.1

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

@@ -0,0 +1,183 @@
+"use client";
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "../ui/button/index.js";
+import { Popover as n, PopoverContent as r, PopoverTrigger as i } from "../ui/popover/index.js";
+import { parseDateKey as a } from "./date-utils.js";
+import { Calendar as o } from "./calendar.js";
+import * as s from "react";
+import { CalendarIcon as c, XIcon as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/components/calendar/date-range-picker.tsx
+function f(e) {
+	let t = a(e);
+	return t ? new Intl.DateTimeFormat("en-US", { dateStyle: "medium" }).format(t) : 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, 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(() => {
+		j && C && P(m ?? {});
+	}, [
+		j,
+		C,
+		m
+	]);
+	let G = (e) => {
+		if (C) {
+			P(e);
+			return;
+		}
+		h?.(e), x && e.from && e.to && M(!1);
+	}, K = () => {
+		h?.(N), M(!1);
+	}, q = () => {
+		let e = {};
+		if (C) {
+			P(e);
+			return;
+		}
+		h?.(e);
+	}, J = () => {
+		let e = {};
+		P(e), h?.(e);
+	}, Y = (e) => {
+		e.preventDefault(), e.stopPropagation(), J();
+	}, X = (e) => {
+		if (C) {
+			P(e), S && (h?.(e), M(!1));
+			return;
+		}
+		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: 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))]", !L && "text-muted-foreground", T)
+				}),
+				children: [
+					/* @__PURE__ */ u(c, {
+						"data-icon": "inline-start",
+						className: e(L && "text-primary")
+					}),
+					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", {
+								className: "grid min-w-0 gap-0.5",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+									children: g?.start ?? "Start"
+								}), /* @__PURE__ */ u("span", {
+									className: "truncate text-sm font-semibold text-foreground",
+									children: F ? b(F) : "..."
+								})]
+							}),
+							/* @__PURE__ */ u("span", {
+								className: "text-muted-foreground",
+								children: "-"
+							}),
+							/* @__PURE__ */ d("span", {
+								className: "grid min-w-0 gap-0.5",
+								children: [/* @__PURE__ */ u("span", {
+									className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+									children: g?.end ?? "End"
+								}), /* @__PURE__ */ u("span", {
+									className: "truncate text-sm font-semibold text-foreground",
+									children: I ? b(I) : "..."
+								})]
+							})
+						]
+					}) : /* @__PURE__ */ d("span", {
+						className: "grid min-w-0 flex-1 gap-0.5",
+						children: [/* @__PURE__ */ u("span", {
+							className: "text-[11px] font-semibold uppercase tracking-[0.16em] text-muted-foreground",
+							children: "Range"
+						}), /* @__PURE__ */ u("span", {
+							className: "truncate text-sm",
+							children: U
+						})]
+					}),
+					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: Y,
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), J());
+						},
+						children: /* @__PURE__ */ u(l, { className: "size-3.5" })
+					}) : null
+				]
+			}), /* @__PURE__ */ d(r, {
+				align: "start",
+				className: e("w-auto overflow-hidden rounded-[var(--aui-card-radius,var(--radius-lg))] border-border/70 bg-popover p-0 shadow-[var(--aui-control-panel-shadow,0_18px_40px_rgba(15,23,42,0.14))] backdrop-blur", E),
+				children: [
+					w?.length ? /* @__PURE__ */ u("div", {
+						className: "flex flex-wrap gap-2 border-b border-border/70 bg-muted/20 px-3 py-3",
+						children: w.map((e, n) => /* @__PURE__ */ u(t, {
+							type: "button",
+							variant: "outline",
+							size: "sm",
+							className: "h-7 rounded-full px-3 text-xs",
+							onClick: () => X(e.value),
+							children: e.label
+						}, n))
+					}) : null,
+					/* @__PURE__ */ u(o, {
+						mode: "range",
+						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: H,
+						pagedNavigation: k,
+						showClearShortcut: !C && y,
+						showSelectionSummary: !0,
+						...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",
+						children: [/* @__PURE__ */ u("div", {
+							className: "min-w-0 text-sm text-muted-foreground",
+							children: /* @__PURE__ */ u("span", {
+								className: "block truncate",
+								children: W
+							})
+						}), /* @__PURE__ */ d("div", {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ u(t, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								onClick: q,
+								children: g?.clear ?? "Clear"
+							}), /* @__PURE__ */ u(t, {
+								type: "button",
+								size: "sm",
+								disabled: !V,
+								onClick: K,
+								children: g?.apply ?? "Apply"
+							})]
+						})]
+					})
+				]
+			})]
+		})
+	});
+}
+//#endregion
+export { m as DateRangePicker };

package/dist/src/components/calendar/date-utils.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=/^\d{4}-\d{2}-\d{2}$/;function t(e){return String(e).padStart(2,`0`)}function n(e){return`${e.getFullYear()}-${t(e.getMonth()+1)}-${t(e.getDate())}`}function r(t){if(!t||!e.test(t))return null;let[n,r,i]=t.split(`-`).map(Number),a=new Date(n,r-1,i);return a.getFullYear()!==n||a.getMonth()!==r-1||a.getDate()!==i?null:a}function i(e){return new Date(e.getFullYear(),e.getMonth(),1)}function a(e,t){return new Date(e.getFullYear(),e.getMonth()+t,1)}function o(e,t){return e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()}function s(e,t){return!!(t&&e<t)}function c(e,t){return!!(t&&e>t)}function l(e,t,n){return!t||!n?!1:e>=t&&e<=n}function u(e,t=`en-US`){return new Intl.DateTimeFormat(t,{month:`long`,year:`numeric`}).format(e)}function d(e=`en-US`,t=1){let n=new Date(2024,0,t===1?1:7);return Array.from({length:7},(t,r)=>{let i=new Date(n);return i.setDate(n.getDate()+r),new Intl.DateTimeFormat(e,{weekday:`short`}).format(i)})}function f(e,t=1){let n=i(e),r=n.getDay(),a=t===1?(r+6)%7:r,o=new Date(n);return o.setDate(n.getDate()-a),Array.from({length:42},(e,t)=>{let n=new Date(o);return n.setDate(o.getDate()+t),n})}exports.addMonths=a,exports.getMonthDays=f,exports.getMonthLabel=u,exports.getWeekdayLabels=d,exports.isAfterDate=c,exports.isBeforeDate=s,exports.isSameMonth=o,exports.isWithinRange=l,exports.parseDateKey=r,exports.startOfMonth=i,exports.toDateKey=n;

package/dist/src/components/calendar/date-utils.js

@@ -0,0 +1,53 @@
+//#region src/components/calendar/date-utils.ts
+var e = /^\d{4}-\d{2}-\d{2}$/;
+function t(e) {
+	return String(e).padStart(2, "0");
+}
+function n(e) {
+	return `${e.getFullYear()}-${t(e.getMonth() + 1)}-${t(e.getDate())}`;
+}
+function r(t) {
+	if (!t || !e.test(t)) return null;
+	let [n, r, i] = t.split("-").map(Number), a = new Date(n, r - 1, i);
+	return a.getFullYear() !== n || a.getMonth() !== r - 1 || a.getDate() !== i ? null : a;
+}
+function i(e) {
+	return new Date(e.getFullYear(), e.getMonth(), 1);
+}
+function a(e, t) {
+	return new Date(e.getFullYear(), e.getMonth() + t, 1);
+}
+function o(e, t) {
+	return e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth();
+}
+function s(e, t) {
+	return !!(t && e < t);
+}
+function c(e, t) {
+	return !!(t && e > t);
+}
+function l(e, t, n) {
+	return !t || !n ? !1 : e >= t && e <= n;
+}
+function u(e, t = "en-US") {
+	return new Intl.DateTimeFormat(t, {
+		month: "long",
+		year: "numeric"
+	}).format(e);
+}
+function d(e = "en-US", t = 1) {
+	let n = new Date(2024, 0, t === 1 ? 1 : 7);
+	return Array.from({ length: 7 }, (t, r) => {
+		let i = new Date(n);
+		return i.setDate(n.getDate() + r), new Intl.DateTimeFormat(e, { weekday: "short" }).format(i);
+	});
+}
+function f(e, t = 1) {
+	let n = i(e), r = n.getDay(), a = t === 1 ? (r + 6) % 7 : r, o = new Date(n);
+	return o.setDate(n.getDate() - a), Array.from({ length: 42 }, (e, t) => {
+		let n = new Date(o);
+		return n.setDate(o.getDate() + t), n;
+	});
+}
+//#endregion
+export { a as addMonths, f as getMonthDays, u as getMonthLabel, d as getWeekdayLabels, c as isAfterDate, s as isBeforeDate, o as isSameMonth, l as isWithinRange, r as parseDateKey, i as startOfMonth, n as toDateKey };

package/dist/src/components/calendar/demo.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../showcase/create-demo.cjs");var t=e.createShowcaseDemoRegistry([e.component(`calendar`,`Calendar`,`calendar`,`Single month calendar surface for date picker and scheduling flows.`)]);exports.calendarShowcaseDemoRegistry=t;

package/dist/src/components/calendar/demo.js

@@ -0,0 +1,5 @@
+import { component as e, createShowcaseDemoRegistry as t } from "../../showcase/create-demo.js";
+//#region src/components/calendar/demo.tsx
+var n = t([e("calendar", "Calendar", "calendar", "Single month calendar surface for date picker and scheduling flows.")]);
+//#endregion
+export { n as calendarShowcaseDemoRegistry };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./date-utils.cjs"),t=require("./calendar.cjs"),n=require("./date-picker.cjs"),r=require("./date-range-picker.cjs");exports.Calendar=t.Calendar,exports.DatePicker=n.DatePicker,exports.DateRangePicker=r.DateRangePicker,exports.addMonths=e.addMonths,exports.getMonthDays=e.getMonthDays,exports.getMonthLabel=e.getMonthLabel,exports.getWeekdayLabels=e.getWeekdayLabels,exports.isAfterDate=e.isAfterDate,exports.isBeforeDate=e.isBeforeDate,exports.isSameMonth=e.isSameMonth,exports.isWithinRange=e.isWithinRange,exports.parseDateKey=e.parseDateKey,exports.startOfMonth=e.startOfMonth,exports.toDateKey=e.toDateKey;

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

@@ -0,0 +1,5 @@
+import { addMonths as e, getMonthDays as t, getMonthLabel as n, getWeekdayLabels as r, isAfterDate as i, isBeforeDate as a, isSameMonth as o, isWithinRange as s, parseDateKey as c, startOfMonth as l, toDateKey as u } from "./date-utils.js";
+import { Calendar as d } from "./calendar.js";
+import { DatePicker as f } from "./date-picker.js";
+import { DateRangePicker as p } from "./date-range-picker.js";
+export { d as Calendar, f as DatePicker, p as DateRangePicker, e as addMonths, t as getMonthDays, n as getMonthLabel, r as getWeekdayLabels, i as isAfterDate, a as isBeforeDate, o as isSameMonth, s as isWithinRange, c as parseDateKey, l as startOfMonth, u as toDateKey };

package/dist/src/components/charts/charts.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={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){return t?t(e):e.toLocaleString()}function u(e){return typeof e==`string`||typeof e==`number`?String(e):void 0}function d(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`;return[`M`,a.x,a.y,`A`,n,n,0,s,0,o.x,o.y].join(` `)}function p(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 m(e,t,n,r=12){let i=p(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: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 g({data:e,size:n=`md`,max:r,showLabels:d=!0,showValues:f=!0,valueFormatter:p,state:m=`ready`,emptyLabel:h=`No chart data.`,className:g,barClassName:_,...v}){let y=e.map(e=>e.value),b=r??o(y.map(e=>Math.abs(e))),x=a[n];return m===`loading`?(0,i.jsx)(`div`,{"data-slot":`bar-chart`,className:t.cn(`grid gap-3`,g),...v,children:(0,i.jsx)(`div`,{className:`h-40 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70`})}):m===`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`,g),...v,children:h}):(0,i.jsx)(`div`,{"data-slot":`bar-chart`,className:t.cn(`grid gap-3`,g),...v,children:(0,i.jsx)(`div`,{className:`flex items-end gap-2`,style:{height:x},children:e.map((e,n)=>{let r=s(Math.abs(e.value),b),a=e.value<0,o=u(e.label);return(0,i.jsxs)(`div`,{className:`flex min-w-0 flex-1 flex-col items-center gap-2`,title:o?`${o}: ${e.value}`:void 0,children:[f&&(0,i.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground`,children:l(e.value,p)}),(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`,_),style:{height:`${Math.max(r*100,Math.abs(e.value)>0?3:0)}%`,background:c(n,e.color),opacity:a?.72:1}})}),d&&(0,i.jsx)(`div`,{className:`max-w-full truncate text-xs text-muted-foreground`,children:e.label})]},n)})})})}function _({values:e,size:n=`md`,width:r=560,showArea:c=!1,showGrid:d=!0,labels:f,valueFormatter:h,stroke:g=`var(--primary)`,state:_=`ready`,emptyLabel:v=`No line data.`,className:y,...b}){let x=a[n],S=p(e,r,x),C=m(e,r,x),w=o(e);return _===`loading`?(0,i.jsx)(`div`,{className:t.cn(`h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70`,y)}):_===`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`,y),children:v}):(0,i.jsxs)(`svg`,{"data-slot":`line-chart`,viewBox:`0 0 ${r} ${x}`,className:t.cn(`h-auto w-full overflow-visible`,y),role:`img`,...b,children:[d&&[.25,.5,.75].map(e=>(0,i.jsx)(`line`,{x1:`12`,x2:r-12,y1:12+e*(x-24),y2:12+e*(x-24),stroke:`var(--border)`,strokeDasharray:`4 6`,opacity:`0.7`},e)),c&&(0,i.jsx)(`path`,{d:C,fill:`var(--primary)`,opacity:`0.12`}),(0,i.jsx)(`path`,{d:S,fill:`none`,stroke:g,strokeWidth:`3`,strokeLinecap:`round`,strokeLinejoin:`round`}),e.map((t,n)=>{let a=12+(e.length===1?(r-24)/2:n/(e.length-1)*(r-24)),o=12+(1-s(t,w))*(x-24),c=f?.[n],d=c==null?`${t}`:`${u(c)??`Value`}: ${t}`;return(0,i.jsx)(`circle`,{cx:a,cy:o,r:`3.5`,fill:g,children:(0,i.jsx)(`title`,{children:h?`${c??`Value`}: ${l(t,h)}`:d})},n)})]})}function v(e){return(0,i.jsx)(_,{showArea:!0,...e})}function y({values:e,positive:n=!0,stroke:r,className:a,...o}){return(0,i.jsx)(_,{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 b({data:e,size:n=180,strokeWidth:r=18,centerLabel:a,centerValue:o,state:s=`ready`,emptyLabel:l=`No distribution data.`,className:d,...p}){let m=e.reduce((e,t)=>e+Math.max(t.value,0),0),h=n/2-r,g=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:m>0?i+r/m*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||m<=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`,...p,children:[(0,i.jsx)(`circle`,{cx:n/2,cy:n/2,r:h,fill:`none`,stroke:`var(--muted)`,strokeWidth:r}),g.map(({item:e,start:t,end:a},o)=>(0,i.jsx)(`path`,{d:f(n/2,n/2,h,t,a),fill:`none`,stroke:c(o,e.color),strokeWidth:r,strokeLinecap:`round`,children:(0,i.jsx)(`title`,{children:`${u(e.label)??`Segment`}: ${e.value}`})},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 x({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 S({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)(y,{values:o,positive:a})]})}exports.AreaChart=v,exports.BarChart=g,exports.ChartFrame=h,exports.ChartLegend=x,exports.DonutChart=b,exports.LineChart=_,exports.MetricTrend=S,exports.Sparkline=y;

package/dist/src/components/charts/charts.js

@@ -0,0 +1,301 @@
+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/charts/charts.tsx
+var c = {
+	sm: 120,
+	md: 180,
+	lg: 260
+};
+function l(e, t = 1) {
+	return Math.max(...e, t);
+}
+function u(e, t) {
+	return !Number.isFinite(e) || t <= 0 ? 0 : Math.max(0, Math.min(e / t, 1));
+}
+function d(e, t) {
+	return t ?? `var(--color-chart-${e % 5 + 1}, var(--primary))`;
+}
+function f(e, t) {
+	return t ? t(e) : e.toLocaleString();
+}
+function p(e) {
+	return typeof e == "string" || typeof e == "number" ? String(e) : void 0;
+}
+function m(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 h(e, t, n, r, i) {
+	let a = m(e, t, n, i), o = m(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 g(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 _(e, t, n, r = 12) {
+	let i = g(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 v({ 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", 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__ */ 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 y({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a = !0, valueFormatter: m, state: h = "ready", emptyLabel: g = "No chart data.", className: _, barClassName: v, ...y }) {
+	let b = t.map((e) => e.value), x = r ?? l(b.map((e) => Math.abs(e))), S = c[n];
+	return h === "loading" ? /* @__PURE__ */ o("div", {
+		"data-slot": "bar-chart",
+		className: e("grid gap-3", _),
+		...y,
+		children: /* @__PURE__ */ o("div", { className: "h-40 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70" })
+	}) : h === "empty" || t.length === 0 ? /* @__PURE__ */ o("div", {
+		"data-slot": "bar-chart",
+		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", _),
+		...y,
+		children: g
+	}) : /* @__PURE__ */ o("div", {
+		"data-slot": "bar-chart",
+		className: e("grid gap-3", _),
+		...y,
+		children: /* @__PURE__ */ o("div", {
+			className: "flex items-end gap-2",
+			style: { height: S },
+			children: t.map((t, n) => {
+				let r = u(Math.abs(t.value), x), c = t.value < 0, l = p(t.label);
+				return /* @__PURE__ */ s("div", {
+					className: "flex min-w-0 flex-1 flex-col items-center gap-2",
+					title: l ? `${l}: ${t.value}` : void 0,
+					children: [
+						a && /* @__PURE__ */ o("div", {
+							className: "text-xs font-medium text-muted-foreground",
+							children: f(t.value, m)
+						}),
+						/* @__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", v),
+								style: {
+									height: `${Math.max(r * 100, Math.abs(t.value) > 0 ? 3 : 0)}%`,
+									background: d(n, t.color),
+									opacity: c ? .72 : 1
+								}
+							})
+						}),
+						i && /* @__PURE__ */ o("div", {
+							className: "max-w-full truncate text-xs text-muted-foreground",
+							children: t.label
+						})
+					]
+				}, n);
+			})
+		})
+	});
+}
+function b({ values: t, size: n = "md", width: r = 560, showArea: i = !1, showGrid: a = !0, labels: d, valueFormatter: m, stroke: h = "var(--primary)", state: v = "ready", emptyLabel: y = "No line data.", className: b, ...x }) {
+	let S = c[n], C = g(t, r, S), w = _(t, r, S), T = l(t);
+	return v === "loading" ? /* @__PURE__ */ o("div", { className: e("h-36 animate-pulse rounded-[min(var(--radius-xl),16px)] bg-muted/70", b) }) : v === "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", b),
+		children: y
+	}) : /* @__PURE__ */ s("svg", {
+		"data-slot": "line-chart",
+		viewBox: `0 0 ${r} ${S}`,
+		className: e("h-auto w-full overflow-visible", b),
+		role: "img",
+		...x,
+		children: [
+			a && [
+				.25,
+				.5,
+				.75
+			].map((e) => /* @__PURE__ */ o("line", {
+				x1: "12",
+				x2: r - 12,
+				y1: 12 + e * (S - 24),
+				y2: 12 + e * (S - 24),
+				stroke: "var(--border)",
+				strokeDasharray: "4 6",
+				opacity: "0.7"
+			}, e)),
+			i && /* @__PURE__ */ o("path", {
+				d: w,
+				fill: "var(--primary)",
+				opacity: "0.12"
+			}),
+			/* @__PURE__ */ o("path", {
+				d: C,
+				fill: "none",
+				stroke: h,
+				strokeWidth: "3",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}),
+			t.map((e, n) => {
+				let i = 12 + (t.length === 1 ? (r - 24) / 2 : n / (t.length - 1) * (r - 24)), a = 12 + (1 - u(e, T)) * (S - 24), s = d?.[n], c = s == null ? `${e}` : `${p(s) ?? "Value"}: ${e}`;
+				return /* @__PURE__ */ o("circle", {
+					cx: i,
+					cy: a,
+					r: "3.5",
+					fill: h,
+					children: /* @__PURE__ */ o("title", { children: m ? `${s ?? "Value"}: ${f(e, m)}` : c })
+				}, n);
+			})
+		]
+	});
+}
+function x(e) {
+	return /* @__PURE__ */ o(b, {
+		showArea: !0,
+		...e
+	});
+}
+function S({ values: t, positive: n = !0, stroke: r, className: i, ...a }) {
+	return /* @__PURE__ */ o(b, {
+		values: t,
+		width: 180,
+		size: "sm",
+		stroke: r ?? (n ? "var(--primary)" : "var(--destructive)"),
+		className: e("max-w-44", i),
+		"aria-label": "Sparkline",
+		...a
+	});
+}
+function C({ 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), g = n / 2 - r, _ = 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: m > 0 ? i + r / m * 360 : i
+		};
+	});
+	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", u),
+		role: "img",
+		...f,
+		children: [
+			/* @__PURE__ */ o("circle", {
+				cx: n / 2,
+				cy: n / 2,
+				r: g,
+				fill: "none",
+				stroke: "var(--muted)",
+				strokeWidth: r
+			}),
+			_.map(({ item: e, start: t, end: i }, a) => /* @__PURE__ */ o("path", {
+				d: h(n / 2, n / 2, g, t, i),
+				fill: "none",
+				stroke: d(a, e.color),
+				strokeWidth: r,
+				strokeLinecap: "round",
+				children: /* @__PURE__ */ o("title", { children: `${p(e.label) ?? "Segment"}: ${e.value}` })
+			}, a)),
+			(a || i) && /* @__PURE__ */ s("text", {
+				x: "50%",
+				y: "50%",
+				textAnchor: "middle",
+				dominantBaseline: "middle",
+				fill: "var(--foreground)",
+				children: [a && /* @__PURE__ */ o("tspan", {
+					x: "50%",
+					dy: i ? "-0.2em" : "0",
+					className: "text-lg font-semibold",
+					children: a
+				}), i && /* @__PURE__ */ o("tspan", {
+					x: "50%",
+					dy: "1.3em",
+					className: "text-xs fill-muted-foreground",
+					children: i
+				})]
+			})
+		]
+	});
+}
+function w({ 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),
+		...r,
+		children: t.map((e, t) => /* @__PURE__ */ s("div", {
+			className: "inline-flex items-center gap-1.5",
+			children: [/* @__PURE__ */ o("span", {
+				className: "size-2 rounded-full bg-primary",
+				style: { background: d(t, e.color) }
+			}), /* @__PURE__ */ o("span", { children: e.label })]
+		}, t))
+	});
+}
+function T({ 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),
+		...l,
+		children: [/* @__PURE__ */ s("div", {
+			className: "flex items-start justify-between gap-3",
+			children: [/* @__PURE__ */ s("div", {
+				className: "grid gap-1",
+				children: [/* @__PURE__ */ o("div", {
+					className: "text-sm text-muted-foreground",
+					children: t
+				}), /* @__PURE__ */ o("div", {
+					className: "text-2xl font-semibold tracking-tight",
+					children: n
+				})]
+			}), r && /* @__PURE__ */ o("div", {
+				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(S, {
+			values: a,
+			positive: i
+		})]
+	});
+}
+//#endregion
+export { x as AreaChart, y as BarChart, v as ChartFrame, w as ChartLegend, C as DonutChart, b as LineChart, T as MetricTrend, S as Sparkline };

package/dist/src/components/charts/horizontal-bar-chart.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs");let n=require("react");n=e.__toESM(n,1);let r=require("react/jsx-runtime");function i({data:e,max:n,showValue:i=!0,emptyLabel:a=`No ranking data.`,valueFormatter:o,className:s,...c}){let l=n??Math.max(...e.map(e=>e.value),1);return e.length===0?(0,r.jsx)(`div`,{"data-slot":`horizontal-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`,s),...c,children:a}):(0,r.jsx)(`div`,{"data-slot":`horizontal-bar-chart`,className:t.cn(`grid gap-3`,s),...c,children:e.map(e=>{let t=l>0?Math.max(0,Math.min(e.value/l*100,100)):0;return(0,r.jsxs)(`div`,{className:`grid gap-1.5`,children:[(0,r.jsxs)(`div`,{className:`flex items-center justify-between gap-3 text-sm`,children:[(0,r.jsxs)(`div`,{className:`min-w-0`,children:[(0,r.jsx)(`div`,{className:`truncate font-medium text-foreground`,children:e.label}),e.description&&(0,r.jsx)(`div`,{className:`truncate text-xs text-muted-foreground`,children:e.description})]}),i&&(0,r.jsx)(`div`,{className:`text-xs font-medium text-muted-foreground`,children:o?o(e.value):e.value.toLocaleString()})]}),(0,r.jsx)(`div`,{className:`h-2 overflow-hidden rounded-full bg-muted`,children:(0,r.jsx)(`div`,{className:`h-full rounded-full bg-primary`,style:{width:`${t}%`,background:e.color}})})]},e.key)})})}exports.HorizontalBarChart=i;

package/dist/src/components/charts/horizontal-bar-chart.js

@@ -0,0 +1,50 @@
+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/horizontal-bar-chart.tsx
+function r({ data: r, max: i, showValue: a = !0, emptyLabel: o = "No ranking data.", valueFormatter: s, className: c, ...l }) {
+	let u = i ?? Math.max(...r.map((e) => e.value), 1);
+	return r.length === 0 ? /* @__PURE__ */ t("div", {
+		"data-slot": "horizontal-bar-chart",
+		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", c),
+		...l,
+		children: o
+	}) : /* @__PURE__ */ t("div", {
+		"data-slot": "horizontal-bar-chart",
+		className: e("grid gap-3", c),
+		...l,
+		children: r.map((e) => {
+			let r = u > 0 ? Math.max(0, Math.min(e.value / u * 100, 100)) : 0;
+			return /* @__PURE__ */ n("div", {
+				className: "grid gap-1.5",
+				children: [/* @__PURE__ */ n("div", {
+					className: "flex items-center justify-between gap-3 text-sm",
+					children: [/* @__PURE__ */ n("div", {
+						className: "min-w-0",
+						children: [/* @__PURE__ */ t("div", {
+							className: "truncate font-medium text-foreground",
+							children: e.label
+						}), e.description && /* @__PURE__ */ t("div", {
+							className: "truncate text-xs text-muted-foreground",
+							children: e.description
+						})]
+					}), a && /* @__PURE__ */ t("div", {
+						className: "text-xs font-medium text-muted-foreground",
+						children: s ? s(e.value) : e.value.toLocaleString()
+					})]
+				}), /* @__PURE__ */ t("div", {
+					className: "h-2 overflow-hidden rounded-full bg-muted",
+					children: /* @__PURE__ */ t("div", {
+						className: "h-full rounded-full bg-primary",
+						style: {
+							width: `${r}%`,
+							background: e.color
+						}
+					})
+				})]
+			}, e.key);
+		})
+	});
+}
+//#endregion
+export { r as HorizontalBarChart };

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

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./charts.cjs"),t=require("./kpi.cjs"),n=require("./progress-ring.cjs"),r=require("./horizontal-bar-chart.cjs");exports.AreaChart=e.AreaChart,exports.BarChart=e.BarChart,exports.ChartFrame=e.ChartFrame,exports.ChartLegend=e.ChartLegend,exports.DonutChart=e.DonutChart,exports.HorizontalBarChart=r.HorizontalBarChart,exports.KpiCard=t.KpiCard,exports.KpiGrid=t.KpiGrid,exports.LineChart=e.LineChart,exports.MetricTrend=e.MetricTrend,exports.ProgressRing=n.ProgressRing,exports.Sparkline=e.Sparkline;

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

@@ -0,0 +1,5 @@
+import { AreaChart as e, BarChart as t, ChartFrame as n, ChartLegend as r, DonutChart as i, LineChart as a, MetricTrend as o, Sparkline as s } from "./charts.js";
+import { KpiCard as c, KpiGrid as l } from "./kpi.js";
+import { ProgressRing as u } from "./progress-ring.js";
+import { HorizontalBarChart as d } from "./horizontal-bar-chart.js";
+export { e as AreaChart, t as BarChart, n as ChartFrame, r as ChartLegend, i as DonutChart, d as HorizontalBarChart, c as KpiCard, l as KpiGrid, a as LineChart, o as MetricTrend, u as ProgressRing, s as Sparkline };

package/dist/src/components/charts/kpi.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("./charts.cjs");let i=require("react");i=e.__toESM(i,1);let a=require("react/jsx-runtime");var o={neutral:`bg-muted text-muted-foreground`,success:`bg-emerald-500/10 text-emerald-600 dark:text-emerald-400`,warning:`bg-amber-500/10 text-amber-600 dark:text-amber-400`,danger:`bg-destructive/10 text-destructive`};function s({label:e,value:i,description:s,change:c,tone:l=`neutral`,values:u,icon:d,className:f,...p}){return(0,a.jsxs)(n.Card,{"data-slot":`kpi-card`,className:t.cn(`overflow-hidden`,f),...p,children:[(0,a.jsxs)(n.CardHeader,{className:`flex flex-row items-start justify-between gap-3 pb-2`,children:[(0,a.jsx)(n.CardTitle,{className:`text-sm font-medium text-muted-foreground`,children:e}),d&&(0,a.jsx)(`div`,{className:`text-muted-foreground`,children:d})]}),(0,a.jsxs)(n.CardContent,{className:`grid gap-3`,children:[(0,a.jsxs)(`div`,{className:`flex items-end justify-between gap-3`,children:[(0,a.jsxs)(`div`,{className:`grid gap-1`,children:[(0,a.jsx)(`div`,{className:`text-2xl font-semibold tracking-tight text-foreground`,children:i}),s&&(0,a.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:s})]}),c&&(0,a.jsx)(`div`,{className:t.cn(`rounded-full px-2 py-1 text-xs font-medium`,o[l]),children:c})]}),u&&(0,a.jsx)(r.Sparkline,{values:u,positive:l!==`danger`})]})]})}function c({columns:e=4,className:n,...r}){return(0,a.jsx)(`div`,{"data-slot":`kpi-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.KpiCard=s,exports.KpiGrid=c;