tekivex-ui 2.5.6 → 2.5.8

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 (49) hide show
  1. package/README.md +5 -5
  2. package/dist/TkxForm-2tGLCPH6.js +326 -0
  3. package/dist/TkxForm-C2VqR2wC.cjs +12 -0
  4. package/dist/charts.cjs +1 -1
  5. package/dist/charts.js +264 -251
  6. package/dist/headless.cjs +1 -1
  7. package/dist/headless.js +21 -20
  8. package/dist/index-BgHMZe4Z.js +66 -0
  9. package/dist/index-Bt5y50Qa.cjs +1 -0
  10. package/dist/index-DnqXtpwV.cjs +2 -0
  11. package/dist/{index-eT_U4qB2.js → index-iUUHRxqJ.js} +70 -67
  12. package/dist/index.cjs +21 -21
  13. package/dist/index.js +1076 -1074
  14. package/dist/quantum.cjs +2 -2
  15. package/dist/quantum.js +4 -4
  16. package/dist/realtime.cjs +8 -4
  17. package/dist/realtime.js +391 -377
  18. package/dist/{security-CzAmaMqa.js → security-C-ZPGoyG.js} +1 -1
  19. package/dist/{security-C369oOWH.cjs → security-Uf0mjv8o.cjs} +1 -1
  20. package/dist/src/charts/TkxDonutChart.d.ts.map +1 -1
  21. package/dist/src/charts/TkxPieChart.d.ts.map +1 -1
  22. package/dist/src/components/TkxAlert.d.ts.map +1 -1
  23. package/dist/src/components/TkxForm.d.ts +17 -16
  24. package/dist/src/components/TkxForm.d.ts.map +1 -1
  25. package/dist/src/components/TkxLiveMetrics.d.ts.map +1 -1
  26. package/dist/src/components/TkxPlayground.d.ts.map +1 -1
  27. package/dist/src/components/TkxProgress.d.ts.map +1 -1
  28. package/dist/src/components/TkxToast.d.ts +2 -1
  29. package/dist/src/components/TkxToast.d.ts.map +1 -1
  30. package/dist/src/engine/wcag.d.ts.map +1 -1
  31. package/dist/src/themes/index.d.ts.map +1 -1
  32. package/dist/{tkx-BJ10JtMv.js → tkx-BtHzWKTl.js} +1 -1
  33. package/dist/{tkx-BeNyC0w7.cjs → tkx-C7GvVUE9.cjs} +1 -1
  34. package/package.json +6 -6
  35. package/src/charts/TkxDonutChart.tsx +6 -2
  36. package/src/charts/TkxPieChart.tsx +7 -3
  37. package/src/charts/shared.ts +4 -4
  38. package/src/components/TkxAlert.tsx +2 -1
  39. package/src/components/TkxBadge.tsx +2 -2
  40. package/src/components/TkxForm.tsx +35 -32
  41. package/src/components/TkxLiveMetrics.tsx +24 -2
  42. package/src/components/TkxPlayground.tsx +40 -5
  43. package/src/components/TkxProgress.tsx +0 -2
  44. package/src/components/TkxToast.tsx +5 -4
  45. package/src/engine/wcag.ts +2 -1
  46. package/src/themes/index.ts +8 -1
  47. package/dist/TkxForm-DSMDo2Ol.js +0 -388
  48. package/dist/TkxForm-DwV_n-eE.cjs +0 -12
  49. package/dist/index-BINBzXuY.cjs +0 -2
package/dist/charts.js CHANGED
@@ -1,61 +1,66 @@
1
1
  import { jsx as t, jsxs as g, Fragment as R } from "react/jsx-runtime";
2
- import { ResponsiveContainer as v, AreaChart as j, CartesianGrid as D, XAxis as F, YAxis as K, Tooltip as L, Legend as w, Area as E, BarChart as G, Bar as q, LineChart as H, ReferenceLine as N, Line as U, PieChart as P, Pie as B, Cell as I, ScatterChart as V, ZAxis as X, Scatter as Y, RadarChart as Z, PolarGrid as _, PolarAngleAxis as J, PolarRadiusAxis as Q, Radar as tt } from "recharts";
3
- import { u as z } from "./index-eT_U4qB2.js";
2
+ import { ResponsiveContainer as v, AreaChart as E, CartesianGrid as D, XAxis as F, YAxis as K, Tooltip as L, Legend as w, Area as G, BarChart as q, Bar as H, LineChart as N, ReferenceLine as U, Line as V, PieChart as P, Pie as B, Cell as I, ScatterChart as X, ZAxis as Y, Scatter as Z, RadarChart as _, PolarGrid as J, PolarAngleAxis as Q, PolarRadiusAxis as tt, Radar as et } from "recharts";
3
+ import { u as z } from "./index-iUUHRxqJ.js";
4
4
  import { useState as O, useEffect as $ } from "react";
5
- function C(r) {
5
+ import { u as j } from "./index-BgHMZe4Z.js";
6
+ function M(e) {
6
7
  return [
7
- r.primary,
8
- r.secondary,
9
- r.info,
10
- r.success,
11
- r.warning,
12
- r.danger,
13
- "#a855f7",
14
- "#f97316",
15
- "#14b8a6",
16
- "#e879f9"
8
+ e.primary,
9
+ e.secondary,
10
+ e.info,
11
+ e.success,
12
+ e.warning,
13
+ e.danger,
14
+ e.primary + "aa",
15
+ // primary at 67% opacity
16
+ e.secondary + "aa",
17
+ // secondary at 67% opacity
18
+ e.info + "aa",
19
+ // info at 67% opacity
20
+ e.success + "aa"
21
+ // success at 67% opacity
17
22
  ];
18
23
  }
19
24
  const T = { top: 10, right: 30, bottom: 10, left: 0 };
20
- function M(r) {
25
+ function C(e) {
21
26
  return {
22
27
  contentStyle: {
23
- backgroundColor: r.surface,
24
- border: `1px solid ${r.border}`,
28
+ backgroundColor: e.surface,
29
+ border: `1px solid ${e.border}`,
25
30
  borderRadius: 8,
26
31
  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
27
- color: r.text,
32
+ color: e.text,
28
33
  fontSize: 13
29
34
  },
30
- labelStyle: { color: r.textMuted, fontWeight: 600, marginBottom: 4 },
31
- itemStyle: { color: r.text },
32
- cursor: { fill: `${r.primary}15` }
35
+ labelStyle: { color: e.textMuted, fontWeight: 600, marginBottom: 4 },
36
+ itemStyle: { color: e.text },
37
+ cursor: { fill: `${e.primary}15` }
33
38
  };
34
39
  }
35
- function ot({
36
- data: r,
37
- series: m,
38
- xKey: h,
39
- height: S = 300,
40
+ function nt({
41
+ data: e,
42
+ series: S,
43
+ xKey: f,
44
+ height: p = 300,
40
45
  margin: d = T,
41
46
  showGrid: y = !0,
42
- showLegend: k = !0,
43
- showTooltip: p = !0,
44
- smooth: o = !0,
47
+ showLegend: m = !0,
48
+ showTooltip: x = !0,
49
+ smooth: a = !0,
45
50
  xTickFormatter: u,
46
- yTickFormatter: i,
47
- yDomain: a,
48
- ariaLabel: s = "Area chart"
51
+ yTickFormatter: o,
52
+ yDomain: l,
53
+ ariaLabel: h = "Area chart"
49
54
  }) {
50
- const e = z(), c = C(e), l = M(e), x = { fill: e.textMuted, fontSize: 12 };
51
- return /* @__PURE__ */ t("div", { role: "img", "aria-label": s, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(j, { data: r, margin: d, children: [
52
- y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: e.border, vertical: !1 }),
55
+ const r = z(), n = M(r), i = C(r), k = { fill: r.textMuted, fontSize: 12 };
56
+ return /* @__PURE__ */ t("div", { role: "img", "aria-label": h, style: { width: "100%", height: p }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(E, { data: e, margin: d, children: [
57
+ y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: r.border, vertical: !1 }),
53
58
  /* @__PURE__ */ t(
54
59
  F,
55
60
  {
56
- dataKey: h,
57
- tick: x,
58
- axisLine: { stroke: e.border },
61
+ dataKey: f,
62
+ tick: k,
63
+ axisLine: { stroke: r.border },
59
64
  tickLine: !1,
60
65
  tickFormatter: u
61
66
  }
@@ -63,96 +68,96 @@ function ot({
63
68
  /* @__PURE__ */ t(
64
69
  K,
65
70
  {
66
- tick: x,
71
+ tick: k,
67
72
  axisLine: !1,
68
73
  tickLine: !1,
69
- tickFormatter: i,
70
- domain: a
74
+ tickFormatter: o,
75
+ domain: l
71
76
  }
72
77
  ),
73
- p && /* @__PURE__ */ t(
78
+ x && /* @__PURE__ */ t(
74
79
  L,
75
80
  {
76
- contentStyle: l.contentStyle,
77
- labelStyle: l.labelStyle,
78
- itemStyle: l.itemStyle,
79
- cursor: l.cursor
81
+ contentStyle: i.contentStyle,
82
+ labelStyle: i.labelStyle,
83
+ itemStyle: i.itemStyle,
84
+ cursor: i.cursor
80
85
  }
81
86
  ),
82
- k && /* @__PURE__ */ t(
87
+ m && /* @__PURE__ */ t(
83
88
  w,
84
89
  {
85
- wrapperStyle: { fontSize: 13, color: e.textMuted, paddingTop: 8 }
90
+ wrapperStyle: { fontSize: 13, color: r.textMuted, paddingTop: 8 }
86
91
  }
87
92
  ),
88
- m.map((f, b) => {
89
- const n = f.color ?? c[b % c.length];
93
+ S.map((s, b) => {
94
+ const c = s.color ?? n[b % n.length];
90
95
  return /* @__PURE__ */ t(
91
- E,
96
+ G,
92
97
  {
93
- type: o ? "monotone" : "linear",
94
- dataKey: f.key,
95
- name: f.label ?? f.key,
96
- stroke: n,
98
+ type: a ? "monotone" : "linear",
99
+ dataKey: s.key,
100
+ name: s.label ?? s.key,
101
+ stroke: c,
97
102
  strokeWidth: 2,
98
- fill: n,
99
- fillOpacity: f.fillOpacity ?? 0.2,
100
- stackId: f.stacked ? "stack" : void 0,
103
+ fill: c,
104
+ fillOpacity: s.fillOpacity ?? 0.2,
105
+ stackId: s.stacked ? "stack" : void 0,
101
106
  dot: !1,
102
107
  activeDot: { r: 5, strokeWidth: 0 }
103
108
  },
104
- f.key
109
+ s.key
105
110
  );
106
111
  })
107
112
  ] }) }) });
108
113
  }
109
- function at({
110
- data: r,
111
- series: m,
112
- xKey: h,
113
- height: S = 300,
114
+ function ct({
115
+ data: e,
116
+ series: S,
117
+ xKey: f,
118
+ height: p = 300,
114
119
  margin: d = T,
115
120
  showGrid: y = !0,
116
- showLegend: k = !0,
117
- showTooltip: p = !0,
118
- layout: o = "horizontal",
121
+ showLegend: m = !0,
122
+ showTooltip: x = !0,
123
+ layout: a = "horizontal",
119
124
  barSize: u,
120
- xTickFormatter: i,
121
- yTickFormatter: a,
122
- ariaLabel: s = "Bar chart"
125
+ xTickFormatter: o,
126
+ yTickFormatter: l,
127
+ ariaLabel: h = "Bar chart"
123
128
  }) {
124
- const e = z(), c = C(e), l = M(e), x = { fill: e.textMuted, fontSize: 12 }, f = o === "vertical";
125
- return /* @__PURE__ */ t("div", { role: "img", "aria-label": s, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(G, { data: r, margin: d, layout: o, children: [
129
+ const r = z(), n = M(r), i = C(r), k = { fill: r.textMuted, fontSize: 12 }, s = a === "vertical";
130
+ return /* @__PURE__ */ t("div", { role: "img", "aria-label": h, style: { width: "100%", height: p }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(q, { data: e, margin: d, layout: a, children: [
126
131
  y && /* @__PURE__ */ t(
127
132
  D,
128
133
  {
129
134
  strokeDasharray: "3 3",
130
- stroke: e.border,
131
- vertical: f,
132
- horizontal: !f
135
+ stroke: r.border,
136
+ vertical: s,
137
+ horizontal: !s
133
138
  }
134
139
  ),
135
- f ? /* @__PURE__ */ g(R, { children: [
136
- /* @__PURE__ */ t(K, { dataKey: h, type: "category", tick: x, axisLine: !1, tickLine: !1, tickFormatter: i, width: 100 }),
137
- /* @__PURE__ */ t(F, { type: "number", tick: x, axisLine: { stroke: e.border }, tickLine: !1, tickFormatter: a })
140
+ s ? /* @__PURE__ */ g(R, { children: [
141
+ /* @__PURE__ */ t(K, { dataKey: f, type: "category", tick: k, axisLine: !1, tickLine: !1, tickFormatter: o, width: 100 }),
142
+ /* @__PURE__ */ t(F, { type: "number", tick: k, axisLine: { stroke: r.border }, tickLine: !1, tickFormatter: l })
138
143
  ] }) : /* @__PURE__ */ g(R, { children: [
139
- /* @__PURE__ */ t(F, { dataKey: h, tick: x, axisLine: { stroke: e.border }, tickLine: !1, tickFormatter: i }),
140
- /* @__PURE__ */ t(K, { tick: x, axisLine: !1, tickLine: !1, tickFormatter: a })
144
+ /* @__PURE__ */ t(F, { dataKey: f, tick: k, axisLine: { stroke: r.border }, tickLine: !1, tickFormatter: o }),
145
+ /* @__PURE__ */ t(K, { tick: k, axisLine: !1, tickLine: !1, tickFormatter: l })
141
146
  ] }),
142
- p && /* @__PURE__ */ t(
147
+ x && /* @__PURE__ */ t(
143
148
  L,
144
149
  {
145
- contentStyle: l.contentStyle,
146
- labelStyle: l.labelStyle,
147
- itemStyle: l.itemStyle,
148
- cursor: { fill: `${e.surfaceAlt}` }
150
+ contentStyle: i.contentStyle,
151
+ labelStyle: i.labelStyle,
152
+ itemStyle: i.itemStyle,
153
+ cursor: { fill: `${r.surfaceAlt}` }
149
154
  }
150
155
  ),
151
- k && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: e.textMuted, paddingTop: 8 } }),
152
- m.map((b, n) => {
153
- const A = b.color ?? c[n % c.length];
156
+ m && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: r.textMuted, paddingTop: 8 } }),
157
+ S.map((b, c) => {
158
+ const A = b.color ?? n[c % n.length];
154
159
  return /* @__PURE__ */ t(
155
- q,
160
+ H,
156
161
  {
157
162
  dataKey: b.key,
158
163
  name: b.label ?? b.key,
@@ -166,34 +171,34 @@ function at({
166
171
  })
167
172
  ] }) }) });
168
173
  }
169
- function nt({
170
- data: r,
171
- series: m,
172
- xKey: h,
173
- height: S = 300,
174
+ function dt({
175
+ data: e,
176
+ series: S,
177
+ xKey: f,
178
+ height: p = 300,
174
179
  margin: d = T,
175
180
  showGrid: y = !0,
176
- showLegend: k = !0,
177
- showTooltip: p = !0,
178
- smooth: o = !0,
181
+ showLegend: m = !0,
182
+ showTooltip: x = !0,
183
+ smooth: a = !0,
179
184
  referenceLines: u = [],
180
- xTickFormatter: i,
181
- yTickFormatter: a,
182
- yDomain: s,
183
- connectNulls: e = !1,
184
- ariaLabel: c = "Line chart"
185
+ xTickFormatter: o,
186
+ yTickFormatter: l,
187
+ yDomain: h,
188
+ connectNulls: r = !1,
189
+ ariaLabel: n = "Line chart"
185
190
  }) {
186
- const l = z(), x = C(l), f = M(l), b = { fill: l.textMuted, fontSize: 12 };
187
- return /* @__PURE__ */ t("div", { role: "img", "aria-label": c, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(H, { data: r, margin: d, children: [
188
- y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: l.border, vertical: !1 }),
191
+ const i = z(), k = M(i), s = C(i), b = { fill: i.textMuted, fontSize: 12 };
192
+ return /* @__PURE__ */ t("div", { role: "img", "aria-label": n, style: { width: "100%", height: p }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(N, { data: e, margin: d, children: [
193
+ y && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: i.border, vertical: !1 }),
189
194
  /* @__PURE__ */ t(
190
195
  F,
191
196
  {
192
- dataKey: h,
197
+ dataKey: f,
193
198
  tick: b,
194
- axisLine: { stroke: l.border },
199
+ axisLine: { stroke: i.border },
195
200
  tickLine: !1,
196
- tickFormatter: i
201
+ tickFormatter: o
197
202
  }
198
203
  ),
199
204
  /* @__PURE__ */ t(
@@ -202,100 +207,104 @@ function nt({
202
207
  tick: b,
203
208
  axisLine: !1,
204
209
  tickLine: !1,
205
- tickFormatter: a,
206
- domain: s
210
+ tickFormatter: l,
211
+ domain: h
207
212
  }
208
213
  ),
209
- p && /* @__PURE__ */ t(
214
+ x && /* @__PURE__ */ t(
210
215
  L,
211
216
  {
212
- contentStyle: f.contentStyle,
213
- labelStyle: f.labelStyle,
214
- itemStyle: f.itemStyle,
215
- cursor: { stroke: l.border, strokeWidth: 1 }
217
+ contentStyle: s.contentStyle,
218
+ labelStyle: s.labelStyle,
219
+ itemStyle: s.itemStyle,
220
+ cursor: { stroke: i.border, strokeWidth: 1 }
216
221
  }
217
222
  ),
218
- k && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: l.textMuted, paddingTop: 8 } }),
219
- u.map((n, A) => /* @__PURE__ */ t(
220
- N,
223
+ m && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 } }),
224
+ u.map((c, A) => /* @__PURE__ */ t(
225
+ U,
221
226
  {
222
- y: n.y,
223
- x: n.x,
224
- label: n.label ? { value: n.label, fill: l.textMuted, fontSize: 11 } : void 0,
225
- stroke: n.color ?? l.border,
226
- strokeDasharray: n.dashed ? "4 4" : void 0
227
+ y: c.y,
228
+ x: c.x,
229
+ label: c.label ? { value: c.label, fill: i.textMuted, fontSize: 11 } : void 0,
230
+ stroke: c.color ?? i.border,
231
+ strokeDasharray: c.dashed ? "4 4" : void 0
227
232
  },
228
233
  A
229
234
  )),
230
- m.map((n, A) => {
231
- const W = n.color ?? x[A % x.length];
235
+ S.map((c, A) => {
236
+ const W = c.color ?? k[A % k.length];
232
237
  return /* @__PURE__ */ t(
233
- U,
238
+ V,
234
239
  {
235
- type: o ? "monotone" : "linear",
236
- dataKey: n.key,
237
- name: n.label ?? n.key,
240
+ type: a ? "monotone" : "linear",
241
+ dataKey: c.key,
242
+ name: c.label ?? c.key,
238
243
  stroke: W,
239
- strokeWidth: n.strokeWidth ?? 2,
240
- strokeDasharray: n.dashed ? "6 3" : void 0,
241
- dot: n.dot ?? !1,
244
+ strokeWidth: c.strokeWidth ?? 2,
245
+ strokeDasharray: c.dashed ? "6 3" : void 0,
246
+ dot: c.dot ?? !1,
242
247
  activeDot: { r: 5, strokeWidth: 0, fill: W },
243
- connectNulls: e
248
+ connectNulls: r
244
249
  },
245
- n.key
250
+ c.key
246
251
  );
247
252
  })
248
253
  ] }) }) });
249
254
  }
250
- function ct({
251
- data: r,
252
- height: m = 300,
253
- showLegend: h = !0,
254
- showTooltip: S = !0,
255
+ function st({
256
+ data: e,
257
+ height: S = 300,
258
+ showLegend: f = !0,
259
+ showTooltip: p = !0,
255
260
  showLabels: d = !1,
256
261
  outerRadius: y = "70%",
257
- startAngle: k = 90,
258
- ariaLabel: p = "Pie chart"
262
+ startAngle: m = 90,
263
+ ariaLabel: x = "Pie chart"
259
264
  }) {
260
- const o = z(), u = C(o), i = M(o), [a, s] = O(!1);
265
+ const a = z(), u = j(), o = M(a), l = C(a), [h, r] = O(u);
261
266
  return $(() => {
262
- const e = requestAnimationFrame(() => s(!0));
263
- return () => cancelAnimationFrame(e);
264
- }, []), /* @__PURE__ */ t(
267
+ if (u) {
268
+ r(!0);
269
+ return;
270
+ }
271
+ const n = requestAnimationFrame(() => r(!0));
272
+ return () => cancelAnimationFrame(n);
273
+ }, [u]), /* @__PURE__ */ t(
265
274
  "div",
266
275
  {
267
276
  role: "img",
268
- "aria-label": p,
269
- style: { width: "100%", minWidth: 240, height: m, position: "relative" },
270
- children: a && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
271
- S && /* @__PURE__ */ t(
277
+ "aria-label": x,
278
+ style: { width: "100%", minWidth: 240, height: S, position: "relative" },
279
+ children: h && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
280
+ p && /* @__PURE__ */ t(
272
281
  L,
273
282
  {
274
- contentStyle: i.contentStyle,
275
- labelStyle: i.labelStyle,
276
- itemStyle: i.itemStyle
283
+ contentStyle: l.contentStyle,
284
+ labelStyle: l.labelStyle,
285
+ itemStyle: l.itemStyle
277
286
  }
278
287
  ),
279
- h && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
288
+ f && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: a.textMuted } }),
280
289
  /* @__PURE__ */ t(
281
290
  B,
282
291
  {
283
- data: r,
292
+ data: e,
284
293
  dataKey: "value",
285
294
  nameKey: "name",
286
295
  outerRadius: y,
287
- startAngle: k,
288
- endAngle: k - 360,
289
- label: d ? ({ name: e, percent: c }) => `${e} (${(c * 100).toFixed(0)}%)` : void 0,
296
+ startAngle: m,
297
+ endAngle: m - 360,
298
+ label: d ? ({ name: n, percent: i }) => `${n} (${(i * 100).toFixed(0)}%)` : void 0,
290
299
  labelLine: d,
291
300
  strokeWidth: 2,
292
- stroke: o.bg,
293
- children: r.map((e, c) => /* @__PURE__ */ t(
301
+ stroke: a.bg,
302
+ children: e.map((n, i) => /* @__PURE__ */ t(
294
303
  I,
295
304
  {
296
- fill: e.color ?? u[c % u.length]
305
+ fill: n.color ?? o[i % o.length]
297
306
  },
298
- e.name
307
+ n.name
299
308
  ))
300
309
  }
301
310
  )
@@ -303,54 +312,58 @@ function ct({
303
312
  }
304
313
  );
305
314
  }
306
- function dt({
307
- data: r,
308
- height: m = 300,
309
- showLegend: h = !0,
310
- showTooltip: S = !0,
315
+ function yt({
316
+ data: e,
317
+ height: S = 300,
318
+ showLegend: f = !0,
319
+ showTooltip: p = !0,
311
320
  centerLabel: d,
312
321
  centerSublabel: y,
313
- innerRadius: k = "55%",
314
- outerRadius: p = "75%",
315
- startAngle: o = 90,
322
+ innerRadius: m = "55%",
323
+ outerRadius: x = "75%",
324
+ startAngle: a = 90,
316
325
  ariaLabel: u = "Donut chart"
317
326
  }) {
318
- const i = z(), a = C(i), s = M(i), [e, c] = O(!1);
327
+ const o = z(), l = j(), h = M(o), r = C(o), [n, i] = O(l);
319
328
  return $(() => {
320
- const l = requestAnimationFrame(() => c(!0));
321
- return () => cancelAnimationFrame(l);
322
- }, []), /* @__PURE__ */ g(
329
+ if (l) {
330
+ i(!0);
331
+ return;
332
+ }
333
+ const k = requestAnimationFrame(() => i(!0));
334
+ return () => cancelAnimationFrame(k);
335
+ }, [l]), /* @__PURE__ */ g(
323
336
  "div",
324
337
  {
325
338
  role: "img",
326
339
  "aria-label": u,
327
- style: { width: "100%", minWidth: 240, height: m, position: "relative" },
340
+ style: { width: "100%", minWidth: 240, height: S, position: "relative" },
328
341
  children: [
329
- e && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
330
- S && /* @__PURE__ */ t(
342
+ n && /* @__PURE__ */ t(v, { width: "100%", height: "100%", debounce: 50, children: /* @__PURE__ */ g(P, { children: [
343
+ p && /* @__PURE__ */ t(
331
344
  L,
332
345
  {
333
- contentStyle: s.contentStyle,
334
- labelStyle: s.labelStyle,
335
- itemStyle: s.itemStyle
346
+ contentStyle: r.contentStyle,
347
+ labelStyle: r.labelStyle,
348
+ itemStyle: r.itemStyle
336
349
  }
337
350
  ),
338
- h && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted } }),
351
+ f && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
339
352
  /* @__PURE__ */ t(
340
353
  B,
341
354
  {
342
- data: r,
355
+ data: e,
343
356
  dataKey: "value",
344
357
  nameKey: "name",
345
- innerRadius: k,
346
- outerRadius: p,
347
- startAngle: o,
348
- endAngle: o - 360,
358
+ innerRadius: m,
359
+ outerRadius: x,
360
+ startAngle: a,
361
+ endAngle: a - 360,
349
362
  strokeWidth: 3,
350
- stroke: i.bg,
363
+ stroke: o.bg,
351
364
  label: !1,
352
365
  labelLine: !1,
353
- children: r.map((l, x) => /* @__PURE__ */ t(I, { fill: l.color ?? a[x % a.length] }, l.name))
366
+ children: e.map((k, s) => /* @__PURE__ */ t(I, { fill: k.color ?? h[s % h.length] }, k.name))
354
367
  }
355
368
  ),
356
369
  (d || y) && /* @__PURE__ */ t("text", {})
@@ -366,11 +379,11 @@ function dt({
366
379
  alignItems: "center",
367
380
  justifyContent: "center",
368
381
  pointerEvents: "none",
369
- marginTop: h ? -24 : 0
382
+ marginTop: f ? -24 : 0
370
383
  },
371
384
  children: [
372
- d && /* @__PURE__ */ t("span", { style: { fontSize: 22, fontWeight: 700, color: i.text, lineHeight: 1 }, children: d }),
373
- y && /* @__PURE__ */ t("span", { style: { fontSize: 13, color: i.textMuted, marginTop: 4 }, children: y })
385
+ d && /* @__PURE__ */ t("span", { style: { fontSize: 22, fontWeight: 700, color: o.text, lineHeight: 1 }, children: d }),
386
+ y && /* @__PURE__ */ t("span", { style: { fontSize: 13, color: o.textMuted, marginTop: 4 }, children: y })
374
387
  ]
375
388
  }
376
389
  )
@@ -378,30 +391,30 @@ function dt({
378
391
  }
379
392
  );
380
393
  }
381
- function st({
382
- series: r,
383
- height: m = 300,
384
- margin: h = T,
385
- showGrid: S = !0,
394
+ function ut({
395
+ series: e,
396
+ height: S = 300,
397
+ margin: f = T,
398
+ showGrid: p = !0,
386
399
  showLegend: d = !0,
387
400
  showTooltip: y = !0,
388
- xTickFormatter: k,
389
- yTickFormatter: p,
390
- zRange: o = [20, 400],
401
+ xTickFormatter: m,
402
+ yTickFormatter: x,
403
+ zRange: a = [20, 400],
391
404
  ariaLabel: u = "Scatter chart"
392
405
  }) {
393
- const i = z(), a = C(i), s = M(i), e = { fill: i.textMuted, fontSize: 12 };
394
- return /* @__PURE__ */ t("div", { role: "img", "aria-label": u, style: { width: "100%", height: m }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(V, { margin: h, children: [
395
- S && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: i.border }),
406
+ const o = z(), l = M(o), h = C(o), r = { fill: o.textMuted, fontSize: 12 };
407
+ return /* @__PURE__ */ t("div", { role: "img", "aria-label": u, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(X, { margin: f, children: [
408
+ p && /* @__PURE__ */ t(D, { strokeDasharray: "3 3", stroke: o.border }),
396
409
  /* @__PURE__ */ t(
397
410
  F,
398
411
  {
399
412
  type: "number",
400
413
  dataKey: "x",
401
- tick: e,
402
- axisLine: { stroke: i.border },
414
+ tick: r,
415
+ axisLine: { stroke: o.border },
403
416
  tickLine: !1,
404
- tickFormatter: k
417
+ tickFormatter: m
405
418
  }
406
419
  ),
407
420
  /* @__PURE__ */ t(
@@ -409,59 +422,59 @@ function st({
409
422
  {
410
423
  type: "number",
411
424
  dataKey: "y",
412
- tick: e,
425
+ tick: r,
413
426
  axisLine: !1,
414
427
  tickLine: !1,
415
- tickFormatter: p
428
+ tickFormatter: x
416
429
  }
417
430
  ),
418
- /* @__PURE__ */ t(X, { type: "number", dataKey: "z", range: o }),
431
+ /* @__PURE__ */ t(Y, { type: "number", dataKey: "z", range: a }),
419
432
  y && /* @__PURE__ */ t(
420
433
  L,
421
434
  {
422
- contentStyle: s.contentStyle,
423
- labelStyle: s.labelStyle,
424
- itemStyle: s.itemStyle,
435
+ contentStyle: h.contentStyle,
436
+ labelStyle: h.labelStyle,
437
+ itemStyle: h.itemStyle,
425
438
  cursor: { strokeDasharray: "3 3" }
426
439
  }
427
440
  ),
428
- d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: i.textMuted, paddingTop: 8 } }),
429
- r.map((c, l) => /* @__PURE__ */ t(
430
- Y,
441
+ d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted, paddingTop: 8 } }),
442
+ e.map((n, i) => /* @__PURE__ */ t(
443
+ Z,
431
444
  {
432
- name: c.name,
433
- data: c.data,
434
- fill: c.color ?? a[l % a.length],
445
+ name: n.name,
446
+ data: n.data,
447
+ fill: n.color ?? l[i % l.length],
435
448
  fillOpacity: 0.8
436
449
  },
437
- c.name ?? l
450
+ n.name ?? i
438
451
  ))
439
452
  ] }) }) });
440
453
  }
441
- function yt({
442
- data: r,
443
- series: m,
444
- angleKey: h,
445
- height: S = 300,
454
+ function ht({
455
+ data: e,
456
+ series: S,
457
+ angleKey: f,
458
+ height: p = 300,
446
459
  showLegend: d = !0,
447
460
  showTooltip: y = !0,
448
- outerRadius: k = "70%",
449
- ariaLabel: p = "Radar chart"
461
+ outerRadius: m = "70%",
462
+ ariaLabel: x = "Radar chart"
450
463
  }) {
451
- const o = z(), u = C(o), i = M(o);
452
- return /* @__PURE__ */ t("div", { role: "img", "aria-label": p, style: { width: "100%", height: S }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(Z, { data: r, outerRadius: k, children: [
453
- /* @__PURE__ */ t(_, { stroke: o.border }),
464
+ const a = z(), u = M(a), o = C(a);
465
+ return /* @__PURE__ */ t("div", { role: "img", "aria-label": x, style: { width: "100%", height: p }, children: /* @__PURE__ */ t(v, { width: "100%", height: "100%", children: /* @__PURE__ */ g(_, { data: e, outerRadius: m, children: [
466
+ /* @__PURE__ */ t(J, { stroke: a.border }),
454
467
  /* @__PURE__ */ t(
455
- J,
468
+ Q,
456
469
  {
457
- dataKey: h,
458
- tick: { fill: o.textMuted, fontSize: 12 }
470
+ dataKey: f,
471
+ tick: { fill: a.textMuted, fontSize: 12 }
459
472
  }
460
473
  ),
461
474
  /* @__PURE__ */ t(
462
- Q,
475
+ tt,
463
476
  {
464
- tick: { fill: o.textMuted, fontSize: 10 },
477
+ tick: { fill: a.textMuted, fontSize: 10 },
465
478
  axisLine: !1,
466
479
  tickLine: !1
467
480
  }
@@ -469,35 +482,35 @@ function yt({
469
482
  y && /* @__PURE__ */ t(
470
483
  L,
471
484
  {
472
- contentStyle: i.contentStyle,
473
- labelStyle: i.labelStyle,
474
- itemStyle: i.itemStyle
485
+ contentStyle: o.contentStyle,
486
+ labelStyle: o.labelStyle,
487
+ itemStyle: o.itemStyle
475
488
  }
476
489
  ),
477
- d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: o.textMuted } }),
478
- m.map((a, s) => {
479
- const e = a.color ?? u[s % u.length];
490
+ d && /* @__PURE__ */ t(w, { wrapperStyle: { fontSize: 13, color: a.textMuted } }),
491
+ S.map((l, h) => {
492
+ const r = l.color ?? u[h % u.length];
480
493
  return /* @__PURE__ */ t(
481
- tt,
494
+ et,
482
495
  {
483
- name: a.label ?? a.key,
484
- dataKey: a.key,
485
- stroke: e,
486
- fill: e,
487
- fillOpacity: a.fillOpacity ?? 0.2,
496
+ name: l.label ?? l.key,
497
+ dataKey: l.key,
498
+ stroke: r,
499
+ fill: r,
500
+ fillOpacity: l.fillOpacity ?? 0.2,
488
501
  strokeWidth: 2
489
502
  },
490
- a.key
503
+ l.key
491
504
  );
492
505
  })
493
506
  ] }) }) });
494
507
  }
495
508
  export {
496
- ot as TkxAreaChart,
497
- at as TkxBarChart,
498
- dt as TkxDonutChart,
499
- nt as TkxLineChart,
500
- ct as TkxPieChart,
501
- yt as TkxRadarChart,
502
- st as TkxScatterChart
509
+ nt as TkxAreaChart,
510
+ ct as TkxBarChart,
511
+ yt as TkxDonutChart,
512
+ dt as TkxLineChart,
513
+ st as TkxPieChart,
514
+ ht as TkxRadarChart,
515
+ ut as TkxScatterChart
503
516
  };