tembro 4.0.0 → 4.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/components/charts/charts.d.ts +16 -5
  3. package/dist/src/components/charts/charts.cjs +1 -1
  4. package/dist/src/components/charts/charts.js +343 -252
  5. package/dist/src/components/layout/workspace-layout.cjs +1 -1
  6. package/dist/src/components/layout/workspace-layout.js +3 -3
  7. package/package.json +1 -1
  8. package/packages/cli/dist/index.cjs +1 -1
  9. package/packages/cli/vendor/src/components/charts/charts.tsx +55 -15
  10. package/packages/cli/vendor/src/components/layout/workspace-layout.tsx +3 -3
  11. package/packages/cli/vendor/templates/showcase/src/showcase/layout/HeroSection.tsx +2 -2
  12. package/packages/cli/vendor/templates/showcase/src/showcase/layout/WorkbenchSidebar.tsx +1 -1
  13. package/packages/cli/vendor/templates/styles/globals.css +45 -23
  14. package/registry.json +1 -1
package/dist/src/components/charts/charts.js CHANGED
@@ -2,32 +2,32 @@
2
2
  import { cn as e } from "../../lib/utils.js";
3
3
  import { Card as t, CardContent as n, CardDescription as r, CardHeader as i, CardTitle as a } from "../ui/card/index.js";
4
4
  import { StateView as o } from "../feedback/state-view.js";
5
- import "react";
6
- import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
- import { Area as l, AreaChart as u, Bar as d, BarChart as f, CartesianGrid as p, Cell as m, Line as h, LineChart as g, Pie as _, PieChart as v, ResponsiveContainer as y, Tooltip as b, XAxis as x, YAxis as S } from "recharts";
5
+ import * as s from "react";
6
+ import { jsx as c, jsxs as l } from "react/jsx-runtime";
7
+ import { Area as u, AreaChart as d, Bar as f, BarChart as p, CartesianGrid as m, Cell as h, Line as g, LineChart as _, Pie as v, PieChart as y, ResponsiveContainer as b, Tooltip as x, XAxis as S, YAxis as C } from "recharts";
8
8
  //#region src/components/charts/charts.tsx
9
- var C = {
9
+ var w = {
10
10
  sm: 120,
11
11
  md: 220,
12
12
  lg: 320
13
13
  };
14
- function w(e, t) {
14
+ function T(e, t) {
15
15
  return t ?? `var(--color-chart-${e % 5 + 1}, var(--primary))`;
16
16
  }
17
- function T(e, t) {
17
+ function E(e, t) {
18
18
  return typeof e == "string" || typeof e == "number" ? String(e) : t;
19
19
  }
20
- function E(e, t) {
20
+ function D(e, t) {
21
21
  return t ? t(e) : e.toLocaleString();
22
22
  }
23
- function D({ state: e, emptyLabel: t, height: n }) {
24
- return e === "loading" ? /* @__PURE__ */ s(o, {
23
+ function O({ state: e, emptyLabel: t, height: n }) {
24
+ return e === "loading" ? /* @__PURE__ */ c(o, {
25
25
  status: "loading",
26
26
  loadingVariant: "skeleton",
27
27
  variant: "plain",
28
28
  size: "compact",
29
29
  style: { minHeight: n }
30
- }) : e === "empty" ? /* @__PURE__ */ s(o, {
30
+ }) : e === "empty" ? /* @__PURE__ */ c(o, {
31
31
  status: "empty",
32
32
  title: t,
33
33
  description: null,
@@ -36,61 +36,80 @@ function D({ state: e, emptyLabel: t, height: n }) {
36
36
  style: { minHeight: n }
37
37
  }) : null;
38
38
  }
39
- function O({ data: e, valueFormatter: t, caption: n }) {
40
- return /* @__PURE__ */ s("div", {
39
+ function k({ data: e, valueFormatter: t, caption: n }) {
40
+ return /* @__PURE__ */ c("div", {
41
41
  className: "sr-only",
42
- children: /* @__PURE__ */ c("table", { children: [
43
- /* @__PURE__ */ s("caption", { children: n }),
44
- /* @__PURE__ */ s("thead", { children: /* @__PURE__ */ c("tr", { children: [
45
- /* @__PURE__ */ s("th", {
42
+ children: /* @__PURE__ */ l("table", { children: [
43
+ /* @__PURE__ */ c("caption", { children: n }),
44
+ /* @__PURE__ */ c("thead", { children: /* @__PURE__ */ l("tr", { children: [
45
+ /* @__PURE__ */ c("th", {
46
46
  scope: "col",
47
47
  children: "Label"
48
48
  }),
49
- /* @__PURE__ */ s("th", {
49
+ /* @__PURE__ */ c("th", {
50
50
  scope: "col",
51
51
  children: "Value"
52
52
  }),
53
- /* @__PURE__ */ s("th", {
53
+ /* @__PURE__ */ c("th", {
54
54
  scope: "col",
55
55
  children: "Description"
56
56
  })
57
57
  ] }) }),
58
- /* @__PURE__ */ s("tbody", { children: e.map((e, n) => /* @__PURE__ */ c("tr", { children: [
59
- /* @__PURE__ */ s("th", {
58
+ /* @__PURE__ */ c("tbody", { children: e.map((e, n) => /* @__PURE__ */ l("tr", { children: [
59
+ /* @__PURE__ */ c("th", {
60
60
  scope: "row",
61
61
  children: e.label
62
62
  }),
63
- /* @__PURE__ */ s("td", { children: E(e.value, t) }),
64
- /* @__PURE__ */ s("td", { children: e.description })
63
+ /* @__PURE__ */ c("td", { children: D(e.value, t) }),
64
+ /* @__PURE__ */ c("td", { children: e.description })
65
65
  ] }, n)) })
66
66
  ] })
67
67
  });
68
68
  }
69
- function k({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter: i }) {
70
- return !e || !n?.length ? null : /* @__PURE__ */ c("div", {
69
+ function A({ labels: e, series: t, valueFormatter: n, caption: r }) {
70
+ return /* @__PURE__ */ c("div", {
71
+ className: "sr-only",
72
+ children: /* @__PURE__ */ l("table", { children: [
73
+ /* @__PURE__ */ c("caption", { children: r }),
74
+ /* @__PURE__ */ c("thead", { children: /* @__PURE__ */ l("tr", { children: [/* @__PURE__ */ c("th", {
75
+ scope: "col",
76
+ children: "Label"
77
+ }), t.map((e) => /* @__PURE__ */ c("th", {
78
+ scope: "col",
79
+ children: e.label
80
+ }, e.key))] }) }),
81
+ /* @__PURE__ */ c("tbody", { children: e.map((e, r) => /* @__PURE__ */ l("tr", { children: [/* @__PURE__ */ c("th", {
82
+ scope: "row",
83
+ children: e
84
+ }), t.map((e) => /* @__PURE__ */ c("td", { children: D(e.data[r] ?? 0, n) }, e.key))] }, r)) })
85
+ ] })
86
+ });
87
+ }
88
+ function j({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter: i }) {
89
+ return !e || !n?.length ? null : /* @__PURE__ */ l("div", {
71
90
  "data-slot": "chart-tooltip",
72
91
  className: "min-w-36 rounded-[var(--radius-md)] border border-border/75 bg-popover/98 p-3 text-popover-foreground shadow-lg backdrop-blur",
73
- children: [t === void 0 ? null : /* @__PURE__ */ s("div", {
92
+ children: [t === void 0 ? null : /* @__PURE__ */ c("div", {
74
93
  className: "mb-2 text-xs font-semibold text-muted-foreground",
75
94
  children: i ? i(t) : t
76
- }), /* @__PURE__ */ s("div", {
95
+ }), /* @__PURE__ */ c("div", {
77
96
  className: "grid gap-1.5",
78
97
  children: n.map((e, t) => {
79
98
  let n = typeof e.value == "number" ? e.value : Number(e.value ?? 0);
80
- return /* @__PURE__ */ c("div", {
99
+ return /* @__PURE__ */ l("div", {
81
100
  className: "flex min-w-0 items-center gap-2 text-sm",
82
101
  children: [
83
- /* @__PURE__ */ s("span", {
102
+ /* @__PURE__ */ c("span", {
84
103
  className: "size-2.5 shrink-0 rounded-sm",
85
104
  style: { background: e.color }
86
105
  }),
87
- /* @__PURE__ */ s("span", {
106
+ /* @__PURE__ */ c("span", {
88
107
  className: "min-w-0 flex-1 truncate",
89
108
  children: e.name ?? "Value"
90
109
  }),
91
- /* @__PURE__ */ s("span", {
110
+ /* @__PURE__ */ c("span", {
92
111
  className: "font-semibold tabular-nums",
93
- children: E(n, r)
112
+ children: D(n, r)
94
113
  })
95
114
  ]
96
115
  }, `${e.name ?? "value"}-${t}`);
@@ -98,228 +117,300 @@ function k({ active: e, label: t, payload: n, valueFormatter: r, labelFormatter:
98
117
  })]
99
118
  });
100
119
  }
101
- function A({ title: o, description: l, action: u, state: d = "ready", emptyLabel: f = "No data available.", className: p, children: m, ...h }) {
102
- return /* @__PURE__ */ c(t, {
120
+ function M({ title: o, description: s, action: u, state: d = "ready", emptyLabel: f = "No data available.", className: p, children: m, ...h }) {
121
+ return /* @__PURE__ */ l(t, {
103
122
  "data-slot": "chart-frame",
104
123
  "data-state": d,
105
124
  className: e("min-w-0", p),
106
125
  ...h,
107
- children: [o || l || u ? /* @__PURE__ */ c(i, {
126
+ children: [o || s || u ? /* @__PURE__ */ l(i, {
108
127
  className: "flex-row items-start justify-between gap-3",
109
- children: [/* @__PURE__ */ c("div", {
128
+ children: [/* @__PURE__ */ l("div", {
110
129
  className: "min-w-0 space-y-1",
111
- children: [o ? /* @__PURE__ */ s(a, { children: o }) : null, l ? /* @__PURE__ */ s(r, { children: l }) : null]
112
- }), u ? /* @__PURE__ */ s("div", {
130
+ children: [o ? /* @__PURE__ */ c(a, { children: o }) : null, s ? /* @__PURE__ */ c(r, { children: s }) : null]
131
+ }), u ? /* @__PURE__ */ c("div", {
113
132
  className: "shrink-0",
114
133
  children: u
115
134
  }) : null]
116
- }) : null, /* @__PURE__ */ s(n, { children: d === "ready" ? m : /* @__PURE__ */ s(D, {
135
+ }) : null, /* @__PURE__ */ c(n, { children: d === "ready" ? m : /* @__PURE__ */ c(O, {
117
136
  state: d,
118
137
  emptyLabel: f,
119
138
  height: 180
120
139
  }) })]
121
140
  });
122
141
  }
123
- function j({ data: t, size: n = "md", max: r, showLabels: i = !0, showValues: a = !1, showGrid: o = !0, showTooltip: l = !0, valueFormatter: u, state: h = "ready", emptyLabel: g = "No chart data.", barClassName: _, domain: v, ariaLabel: A = "Bar chart", className: j, ...M }) {
124
- let N = C[n], P = h === "ready" && t.length === 0 ? "empty" : h;
125
- if (P !== "ready") return /* @__PURE__ */ s(D, {
126
- state: P,
127
- emptyLabel: g,
128
- height: N
142
+ function N({ data: t = [], series: n, size: r = "md", max: i, showLabels: a = !0, showValues: o = !1, showGrid: s = !0, showTooltip: u = !0, valueFormatter: d, state: g = "ready", emptyLabel: _ = "No chart data.", barClassName: v, domain: y, ariaLabel: M = "Bar chart", stacked: N = !1, showLegend: P = !!n?.length, barRadius: F = 6, className: I, ...L }) {
143
+ let z = w[r], B = n?.length ? n : [{
144
+ key: "value",
145
+ label: "Value",
146
+ data: t.map((e) => e.value)
147
+ }], V = Math.max(t.length, ...B.map((e) => e.data.length)), H = g === "ready" && V === 0 ? "empty" : g;
148
+ if (H !== "ready") return /* @__PURE__ */ c(O, {
149
+ state: H,
150
+ emptyLabel: _,
151
+ height: z
129
152
  });
130
- let F = t.map((e, t) => ({
131
- name: T(e.label, `Item ${t + 1}`),
132
- value: e.value,
133
- fill: w(t, e.color),
134
- originalLabel: e.label,
135
- description: e.description
136
- })), I = v ?? (r === void 0 ? ["auto", "auto"] : ["auto", r]);
137
- return /* @__PURE__ */ c("div", {
153
+ let U = Array.from({ length: V }, (e, n) => t[n]?.label ?? `Item ${n + 1}`), W = U.map((e, t) => Object.fromEntries([
154
+ ["name", E(e, `Item ${t + 1}`)],
155
+ ["originalLabel", e],
156
+ ...B.map((e) => [e.key, e.data[t] ?? 0])
157
+ ])), G = y ?? (i === void 0 ? ["auto", "auto"] : ["auto", i]);
158
+ return /* @__PURE__ */ l("div", {
138
159
  "data-slot": "bar-chart",
139
160
  role: "img",
140
- "aria-label": A,
141
- className: e("min-w-0", j),
142
- ...M,
143
- children: [/* @__PURE__ */ s("div", {
144
- style: { height: N },
145
- children: /* @__PURE__ */ s(y, {
146
- width: "100%",
147
- height: "100%",
148
- minWidth: 1,
149
- minHeight: 1,
150
- children: /* @__PURE__ */ c(f, {
151
- data: F,
152
- margin: {
153
- top: a ? 20 : 8,
154
- right: 8,
155
- bottom: i ? 8 : 0,
156
- left: 0
157
- },
158
- children: [
159
- o ? /* @__PURE__ */ s(p, {
160
- vertical: !1,
161
- stroke: "var(--border)",
162
- strokeDasharray: "4 6"
163
- }) : null,
164
- /* @__PURE__ */ s(x, {
165
- dataKey: "name",
166
- hide: !i,
167
- axisLine: !1,
168
- tickLine: !1,
169
- tick: {
170
- fill: "var(--muted-foreground)",
171
- fontSize: 12
172
- },
173
- interval: "preserveStartEnd"
174
- }),
175
- /* @__PURE__ */ s(S, {
176
- hide: !0,
177
- domain: I
178
- }),
179
- l ? /* @__PURE__ */ s(b, {
180
- cursor: {
181
- fill: "var(--muted)",
182
- opacity: .35
183
- },
184
- content: /* @__PURE__ */ s(k, { valueFormatter: u })
185
- }) : null,
186
- /* @__PURE__ */ s(d, {
187
- dataKey: "value",
188
- name: "Value",
189
- radius: [
190
- 6,
191
- 6,
192
- 2,
193
- 2
194
- ],
195
- className: _,
196
- isAnimationActive: !1,
197
- label: a ? {
198
- position: "top",
199
- fill: "var(--muted-foreground)",
200
- fontSize: 11,
201
- formatter: (e) => String(E(Number(e), u))
202
- } : !1,
203
- children: F.map((e) => /* @__PURE__ */ s(m, { fill: e.fill }, e.name))
204
- })
205
- ]
161
+ "aria-label": M,
162
+ className: e("min-w-0", I),
163
+ ...L,
164
+ children: [
165
+ /* @__PURE__ */ c("div", {
166
+ style: { height: z },
167
+ children: /* @__PURE__ */ c(b, {
168
+ width: "100%",
169
+ height: "100%",
170
+ minWidth: 1,
171
+ minHeight: 1,
172
+ children: /* @__PURE__ */ l(p, {
173
+ data: W,
174
+ margin: {
175
+ top: o ? 20 : 8,
176
+ right: 8,
177
+ bottom: a ? 8 : 0,
178
+ left: 0
179
+ },
180
+ children: [
181
+ s ? /* @__PURE__ */ c(m, {
182
+ vertical: !1,
183
+ stroke: "var(--border)",
184
+ strokeDasharray: "4 6"
185
+ }) : null,
186
+ /* @__PURE__ */ c(S, {
187
+ dataKey: "name",
188
+ hide: !a,
189
+ axisLine: !1,
190
+ tickLine: !1,
191
+ tick: {
192
+ fill: "var(--muted-foreground)",
193
+ fontSize: 12
194
+ },
195
+ interval: "preserveStartEnd"
196
+ }),
197
+ /* @__PURE__ */ c(C, {
198
+ hide: !0,
199
+ domain: G
200
+ }),
201
+ u ? /* @__PURE__ */ c(x, {
202
+ cursor: {
203
+ fill: "var(--muted)",
204
+ opacity: .35
205
+ },
206
+ content: /* @__PURE__ */ c(j, { valueFormatter: d })
207
+ }) : null,
208
+ B.map((e, r) => /* @__PURE__ */ c(f, {
209
+ dataKey: e.key,
210
+ name: E(e.label, e.key),
211
+ fill: T(r, e.color),
212
+ stackId: N ? "total" : void 0,
213
+ radius: [
214
+ F,
215
+ F,
216
+ 2,
217
+ 2
218
+ ],
219
+ className: v,
220
+ isAnimationActive: !1,
221
+ label: o && (!N || r === B.length - 1) ? {
222
+ position: "top",
223
+ fill: "var(--muted-foreground)",
224
+ fontSize: 11,
225
+ formatter: (e) => String(D(Number(e), d))
226
+ } : !1,
227
+ children: n?.length ? null : t.map((e, t) => /* @__PURE__ */ c(h, { fill: T(t, e.color) }, t))
228
+ }, e.key))
229
+ ]
230
+ })
206
231
  })
232
+ }),
233
+ P && B.length > 1 ? /* @__PURE__ */ c(R, {
234
+ className: "mt-3",
235
+ data: B.map((e, t) => ({
236
+ label: e.label,
237
+ value: 0,
238
+ color: T(t, e.color)
239
+ }))
240
+ }) : null,
241
+ n?.length ? /* @__PURE__ */ c(A, {
242
+ labels: U,
243
+ series: B,
244
+ valueFormatter: d,
245
+ caption: M
246
+ }) : /* @__PURE__ */ c(k, {
247
+ data: t,
248
+ valueFormatter: d,
249
+ caption: M
207
250
  })
208
- }), /* @__PURE__ */ s(O, {
209
- data: t,
210
- valueFormatter: u,
211
- caption: A
212
- })]
251
+ ]
213
252
  });
214
253
  }
215
- function M({ values: t, size: n = "md", width: r = 560, height: i, showArea: a = !1, showGrid: o = !0, showAxis: d = !1, showTooltip: f = !0, labels: m, valueFormatter: _, stroke: v = "var(--primary)", state: w = "ready", emptyLabel: E = "No line data.", domain: A = ["auto", "auto"], ariaLabel: j = a ? "Area chart" : "Line chart", className: M, style: N, ...P }) {
216
- let F = i ?? C[n], I = w === "ready" && t.length === 0 ? "empty" : w;
217
- if (I !== "ready") return /* @__PURE__ */ s(D, {
218
- state: I,
219
- emptyLabel: E,
220
- height: F
254
+ function P({ values: t = [], series: n, size: r = "md", width: i = 560, height: a, showArea: o = !1, showGrid: f = !0, showAxis: p = !1, showTooltip: h = !0, labels: v, valueFormatter: y, stroke: D = "var(--primary)", state: k = "ready", emptyLabel: M = "No line data.", domain: N = ["auto", "auto"], ariaLabel: P = o ? "Area chart" : "Line chart", curve: F = "monotone", showDots: I = !o, showLegend: L = !!n?.length, gradient: z = o, strokeWidth: B = 2.5, className: V, style: H, ...U }) {
255
+ let W = a ?? w[r], G = s.useId().replace(/:/g, ""), K = n?.length ? n : [{
256
+ key: "value",
257
+ label: "Value",
258
+ data: t,
259
+ color: D
260
+ }], q = Math.max(...K.map((e) => e.data.length), 0), J = k === "ready" && q === 0 ? "empty" : k;
261
+ if (J !== "ready") return /* @__PURE__ */ c(O, {
262
+ state: J,
263
+ emptyLabel: M,
264
+ height: W
221
265
  });
222
- let L = t.map((e, t) => ({
223
- name: T(m?.[t], String(t + 1)),
224
- value: e,
225
- originalLabel: m?.[t] ?? String(t + 1)
226
- })), R = a ? u : g;
227
- return /* @__PURE__ */ c("div", {
228
- "data-slot": a ? "area-chart" : "line-chart",
266
+ let Y = Array.from({ length: q }, (e, t) => v?.[t] ?? String(t + 1)), X = Y.map((e, t) => Object.fromEntries([
267
+ ["name", E(e, String(t + 1))],
268
+ ["originalLabel", e],
269
+ ...K.map((e) => [e.key, e.data[t] ?? 0])
270
+ ])), Z = o ? d : _;
271
+ return /* @__PURE__ */ l("div", {
272
+ "data-slot": o ? "area-chart" : "line-chart",
229
273
  role: "img",
230
- "aria-label": j,
231
- "data-chart-width": r,
232
- className: e("min-w-0", M),
233
- style: N,
234
- ...P,
235
- children: [/* @__PURE__ */ s("div", {
236
- style: { height: F },
237
- children: /* @__PURE__ */ s(y, {
238
- width: "100%",
239
- height: "100%",
240
- minWidth: 1,
241
- minHeight: 1,
242
- children: /* @__PURE__ */ c(R, {
243
- data: L,
244
- margin: {
245
- top: 10,
246
- right: 10,
247
- bottom: d ? 8 : 0,
248
- left: d ? -12 : 0
249
- },
250
- children: [
251
- o ? /* @__PURE__ */ s(p, {
252
- vertical: !1,
253
- stroke: "var(--border)",
254
- strokeDasharray: "4 6"
255
- }) : null,
256
- /* @__PURE__ */ s(x, {
257
- dataKey: "name",
258
- hide: !d,
259
- axisLine: !1,
260
- tickLine: !1,
261
- tick: {
262
- fill: "var(--muted-foreground)",
263
- fontSize: 12
264
- },
265
- interval: "preserveStartEnd"
266
- }),
267
- /* @__PURE__ */ s(S, {
268
- hide: !d,
269
- domain: A,
270
- axisLine: !1,
271
- tickLine: !1,
272
- width: 44,
273
- tick: {
274
- fill: "var(--muted-foreground)",
275
- fontSize: 11
276
- }
277
- }),
278
- f ? /* @__PURE__ */ s(b, { content: /* @__PURE__ */ s(k, { valueFormatter: _ }) }) : null,
279
- a ? /* @__PURE__ */ s(l, {
280
- type: "monotone",
281
- dataKey: "value",
282
- name: "Value",
283
- stroke: v,
284
- strokeWidth: 2.5,
285
- fill: v,
286
- fillOpacity: .14,
287
- activeDot: { r: 5 },
288
- isAnimationActive: !1
289
- }) : /* @__PURE__ */ s(h, {
290
- type: "monotone",
291
- dataKey: "value",
292
- name: "Value",
293
- stroke: v,
294
- strokeWidth: 2.5,
295
- dot: {
296
- r: 3.5,
297
- fill: v
298
- },
299
- activeDot: { r: 5 },
300
- isAnimationActive: !1
301
- })
302
- ]
274
+ "aria-label": P,
275
+ "data-chart-width": i,
276
+ className: e("min-w-0", V),
277
+ style: H,
278
+ ...U,
279
+ children: [
280
+ /* @__PURE__ */ c("div", {
281
+ style: { height: W },
282
+ children: /* @__PURE__ */ c(b, {
283
+ width: "100%",
284
+ height: "100%",
285
+ minWidth: 1,
286
+ minHeight: 1,
287
+ children: /* @__PURE__ */ l(Z, {
288
+ data: X,
289
+ margin: {
290
+ top: 10,
291
+ right: 10,
292
+ bottom: p ? 8 : 0,
293
+ left: p ? -12 : 0
294
+ },
295
+ children: [
296
+ o && z ? /* @__PURE__ */ c("defs", { children: K.map((e, t) => {
297
+ let n = T(t, e.color);
298
+ return /* @__PURE__ */ l("linearGradient", {
299
+ id: `${G}-${e.key}`,
300
+ x1: "0",
301
+ y1: "0",
302
+ x2: "0",
303
+ y2: "1",
304
+ children: [/* @__PURE__ */ c("stop", {
305
+ offset: "0%",
306
+ stopColor: n,
307
+ stopOpacity: .34
308
+ }), /* @__PURE__ */ c("stop", {
309
+ offset: "92%",
310
+ stopColor: n,
311
+ stopOpacity: .02
312
+ })]
313
+ }, e.key);
314
+ }) }) : null,
315
+ f ? /* @__PURE__ */ c(m, {
316
+ vertical: !1,
317
+ stroke: "var(--border)",
318
+ strokeDasharray: "4 6"
319
+ }) : null,
320
+ /* @__PURE__ */ c(S, {
321
+ dataKey: "name",
322
+ hide: !p,
323
+ axisLine: !1,
324
+ tickLine: !1,
325
+ tick: {
326
+ fill: "var(--muted-foreground)",
327
+ fontSize: 12
328
+ },
329
+ interval: "preserveStartEnd"
330
+ }),
331
+ /* @__PURE__ */ c(C, {
332
+ hide: !p,
333
+ domain: N,
334
+ axisLine: !1,
335
+ tickLine: !1,
336
+ width: 44,
337
+ tick: {
338
+ fill: "var(--muted-foreground)",
339
+ fontSize: 11
340
+ }
341
+ }),
342
+ h ? /* @__PURE__ */ c(x, { content: /* @__PURE__ */ c(j, { valueFormatter: y }) }) : null,
343
+ K.map((e, t) => {
344
+ let n = T(t, e.color);
345
+ return o ? /* @__PURE__ */ c(u, {
346
+ type: F,
347
+ dataKey: e.key,
348
+ name: E(e.label, e.key),
349
+ stroke: n,
350
+ strokeWidth: B,
351
+ fill: z ? `url(#${G}-${e.key})` : n,
352
+ fillOpacity: z ? 1 : .12,
353
+ dot: I ? {
354
+ r: 3,
355
+ fill: n,
356
+ strokeWidth: 2,
357
+ stroke: "var(--background)"
358
+ } : !1,
359
+ activeDot: {
360
+ r: 5,
361
+ strokeWidth: 2,
362
+ stroke: "var(--background)"
363
+ },
364
+ isAnimationActive: !1
365
+ }, e.key) : /* @__PURE__ */ c(g, {
366
+ type: F,
367
+ dataKey: e.key,
368
+ name: E(e.label, e.key),
369
+ stroke: n,
370
+ strokeWidth: B,
371
+ dot: I ? {
372
+ r: 3,
373
+ fill: n,
374
+ strokeWidth: 2,
375
+ stroke: "var(--background)"
376
+ } : !1,
377
+ activeDot: {
378
+ r: 5,
379
+ strokeWidth: 2,
380
+ stroke: "var(--background)"
381
+ },
382
+ isAnimationActive: !1
383
+ }, e.key);
384
+ })
385
+ ]
386
+ })
303
387
  })
388
+ }),
389
+ L && K.length > 1 ? /* @__PURE__ */ c(R, {
390
+ className: "mt-3",
391
+ data: K.map((e, t) => ({
392
+ label: e.label,
393
+ value: 0,
394
+ color: T(t, e.color)
395
+ }))
396
+ }) : null,
397
+ /* @__PURE__ */ c(A, {
398
+ labels: Y,
399
+ series: K,
400
+ valueFormatter: y,
401
+ caption: P
304
402
  })
305
- }), /* @__PURE__ */ s(O, {
306
- data: t.map((e, t) => ({
307
- label: m?.[t] ?? t + 1,
308
- value: e
309
- })),
310
- valueFormatter: _,
311
- caption: j
312
- })]
403
+ ]
313
404
  });
314
405
  }
315
- function N(e) {
316
- return /* @__PURE__ */ s(M, {
406
+ function F(e) {
407
+ return /* @__PURE__ */ c(P, {
317
408
  showArea: !0,
318
409
  ...e
319
410
  });
320
411
  }
321
- function P({ values: t, positive: n = !0, stroke: r, className: i, showTooltip: a = !1, ...o }) {
322
- return /* @__PURE__ */ s(M, {
412
+ function I({ values: t, positive: n = !0, stroke: r, className: i, showTooltip: a = !1, ...o }) {
413
+ return /* @__PURE__ */ c(P, {
323
414
  values: t,
324
415
  size: "sm",
325
416
  stroke: r ?? (n ? "var(--aui-success,var(--primary))" : "var(--destructive)"),
@@ -331,20 +422,20 @@ function P({ values: t, positive: n = !0, stroke: r, className: i, showTooltip:
331
422
  ...o
332
423
  });
333
424
  }
334
- function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, state: o = "ready", emptyLabel: l = "No distribution data.", showTooltip: u = !0, valueFormatter: d, ariaLabel: f = "Donut chart", className: p, style: h, ...g }) {
335
- let x = o === "ready" && t.length === 0 ? "empty" : o;
336
- if (x !== "ready") return /* @__PURE__ */ s(D, {
337
- state: x,
338
- emptyLabel: l,
425
+ function L({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, centerValue: a, state: o = "ready", emptyLabel: s = "No distribution data.", showTooltip: u = !0, valueFormatter: d, ariaLabel: f = "Donut chart", className: p, style: m, ...g }) {
426
+ let _ = o === "ready" && t.length === 0 ? "empty" : o;
427
+ if (_ !== "ready") return /* @__PURE__ */ c(O, {
428
+ state: _,
429
+ emptyLabel: s,
339
430
  height: n
340
431
  });
341
432
  let S = t.map((e, t) => ({
342
- name: T(e.label, `Item ${t + 1}`),
433
+ name: E(e.label, `Item ${t + 1}`),
343
434
  value: Math.max(0, e.value),
344
- fill: w(t, e.color),
435
+ fill: T(t, e.color),
345
436
  description: e.description
346
437
  })), C = Math.max(8, n / 2 - 8);
347
- return /* @__PURE__ */ c("div", {
438
+ return /* @__PURE__ */ l("div", {
348
439
  "data-slot": "donut-chart",
349
440
  role: "img",
350
441
  "aria-label": f,
@@ -352,16 +443,16 @@ function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
352
443
  style: {
353
444
  width: n,
354
445
  height: n,
355
- ...h
446
+ ...m
356
447
  },
357
448
  ...g,
358
449
  children: [
359
- /* @__PURE__ */ s(y, {
450
+ /* @__PURE__ */ c(b, {
360
451
  width: "100%",
361
452
  height: "100%",
362
453
  minWidth: 1,
363
454
  minHeight: 1,
364
- children: /* @__PURE__ */ c(v, { children: [u ? /* @__PURE__ */ s(b, { content: /* @__PURE__ */ s(k, { valueFormatter: d }) }) : null, /* @__PURE__ */ s(_, {
455
+ children: /* @__PURE__ */ l(y, { children: [u ? /* @__PURE__ */ c(x, { content: /* @__PURE__ */ c(j, { valueFormatter: d }) }) : null, /* @__PURE__ */ c(v, {
365
456
  data: S,
366
457
  dataKey: "value",
367
458
  nameKey: "name",
@@ -373,20 +464,20 @@ function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
373
464
  stroke: "var(--background)",
374
465
  strokeWidth: 2,
375
466
  isAnimationActive: !1,
376
- children: S.map((e) => /* @__PURE__ */ s(m, { fill: e.fill }, e.name))
467
+ children: S.map((e) => /* @__PURE__ */ c(h, { fill: e.fill }, e.name))
377
468
  })] })
378
469
  }),
379
- a || i ? /* @__PURE__ */ c("div", {
470
+ a || i ? /* @__PURE__ */ l("div", {
380
471
  className: "pointer-events-none absolute inset-0 grid place-content-center text-center",
381
- children: [/* @__PURE__ */ s("div", {
472
+ children: [/* @__PURE__ */ c("div", {
382
473
  className: "text-xl font-semibold tabular-nums",
383
474
  children: a
384
- }), /* @__PURE__ */ s("div", {
475
+ }), /* @__PURE__ */ c("div", {
385
476
  className: "text-xs text-muted-foreground",
386
477
  children: i
387
478
  })]
388
479
  }) : null,
389
- /* @__PURE__ */ s(O, {
480
+ /* @__PURE__ */ c(k, {
390
481
  data: t,
391
482
  valueFormatter: d,
392
483
  caption: f
@@ -394,49 +485,49 @@ function F({ data: t, size: n = 180, strokeWidth: r = 18, centerLabel: i, center
394
485
  ]
395
486
  });
396
487
  }
397
- function I({ data: t, className: n, ...r }) {
398
- return /* @__PURE__ */ s("div", {
488
+ function R({ data: t, className: n, ...r }) {
489
+ return /* @__PURE__ */ c("div", {
399
490
  "data-slot": "chart-legend",
400
491
  className: e("flex flex-wrap gap-x-4 gap-y-2 text-xs text-muted-foreground", n),
401
492
  ...r,
402
- children: t.map((e, t) => /* @__PURE__ */ c("div", {
493
+ children: t.map((e, t) => /* @__PURE__ */ l("div", {
403
494
  className: "inline-flex min-w-0 items-center gap-2",
404
- children: [/* @__PURE__ */ s("span", {
495
+ children: [/* @__PURE__ */ c("span", {
405
496
  className: "size-2.5 shrink-0 rounded-sm",
406
- style: { background: w(t, e.color) }
407
- }), /* @__PURE__ */ s("span", {
497
+ style: { background: T(t, e.color) }
498
+ }), /* @__PURE__ */ c("span", {
408
499
  className: "truncate",
409
500
  children: e.label
410
501
  })]
411
502
  }, t))
412
503
  });
413
504
  }
414
- function L({ label: t, value: n, change: r, positive: i = !0, values: a, className: o, ...l }) {
415
- return /* @__PURE__ */ c("div", {
505
+ function z({ label: t, value: n, change: r, positive: i = !0, values: a, className: o, ...s }) {
506
+ return /* @__PURE__ */ l("div", {
416
507
  "data-slot": "metric-trend",
417
508
  className: e("grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-end gap-4", o),
418
- ...l,
419
- children: [/* @__PURE__ */ c("div", {
509
+ ...s,
510
+ children: [/* @__PURE__ */ l("div", {
420
511
  className: "min-w-0",
421
512
  children: [
422
- /* @__PURE__ */ s("div", {
513
+ /* @__PURE__ */ c("div", {
423
514
  className: "text-sm text-muted-foreground",
424
515
  children: t
425
516
  }),
426
- /* @__PURE__ */ s("div", {
517
+ /* @__PURE__ */ c("div", {
427
518
  className: "mt-1 text-2xl font-semibold tracking-tight tabular-nums",
428
519
  children: n
429
520
  }),
430
- r ? /* @__PURE__ */ s("div", {
521
+ r ? /* @__PURE__ */ c("div", {
431
522
  className: e("mt-1 text-xs font-medium", i ? "text-[color:var(--aui-success,var(--primary))]" : "text-destructive"),
432
523
  children: r
433
524
  }) : null
434
525
  ]
435
- }), a?.length ? /* @__PURE__ */ s(P, {
526
+ }), a?.length ? /* @__PURE__ */ c(I, {
436
527
  values: a,
437
528
  positive: i
438
529
  }) : null]
439
530
  });
440
531
  }
441
532
  //#endregion
442
- export { N as AreaChart, j as BarChart, A as ChartFrame, I as ChartLegend, k as ChartTooltipContent, F as DonutChart, M as LineChart, L as MetricTrend, P as Sparkline };
533
+ export { F as AreaChart, N as BarChart, M as ChartFrame, R as ChartLegend, j as ChartTooltipContent, L as DonutChart, P as LineChart, z as MetricTrend, I as Sparkline };