@a4ui/core 0.31.1 → 0.33.0

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 (60) hide show
  1. package/dist/NumberInput-Bnh2u7pp.js +381 -0
  2. package/dist/charts/BarList.d.ts +33 -0
  3. package/dist/charts/CategoryBar.d.ts +23 -0
  4. package/dist/charts/GaugeChart.d.ts +43 -0
  5. package/dist/charts/LineChart.d.ts +39 -0
  6. package/dist/charts/RadarChart.d.ts +34 -0
  7. package/dist/charts/StatusTracker.d.ts +27 -0
  8. package/dist/charts/index.d.ts +6 -0
  9. package/dist/charts.js +693 -100
  10. package/dist/commerce.js +2 -2
  11. package/dist/elements.css +206 -0
  12. package/dist/full.css +206 -0
  13. package/dist/index.d.ts +18 -1
  14. package/dist/index.js +5086 -3915
  15. package/dist/motion-jYMWmZqB.js +119 -0
  16. package/dist/ui/AnimatedBeam.d.ts +34 -0
  17. package/dist/ui/BentoGrid.d.ts +39 -0
  18. package/dist/ui/BorderBeam.d.ts +27 -0
  19. package/dist/ui/Callout.d.ts +27 -0
  20. package/dist/ui/Confetti.d.ts +46 -0
  21. package/dist/ui/CursorTrail.d.ts +25 -0
  22. package/dist/ui/DiffViewer.d.ts +33 -0
  23. package/dist/ui/Dock.d.ts +31 -0
  24. package/dist/ui/Globe.d.ts +44 -0
  25. package/dist/ui/Meteors.d.ts +23 -0
  26. package/dist/ui/ModelPicker.d.ts +38 -0
  27. package/dist/ui/ReasoningTrace.d.ts +28 -0
  28. package/dist/ui/Snippet.d.ts +19 -0
  29. package/dist/ui/SuggestionChips.d.ts +25 -0
  30. package/dist/ui/ToolCallTimeline.d.ts +34 -0
  31. package/dist/ui/UsageMeter.d.ts +26 -0
  32. package/dist/ui/WorldMap.d.ts +36 -0
  33. package/package.json +1 -1
  34. package/src/charts/BarList.tsx +83 -0
  35. package/src/charts/CategoryBar.tsx +95 -0
  36. package/src/charts/GaugeChart.tsx +175 -0
  37. package/src/charts/LineChart.tsx +264 -0
  38. package/src/charts/RadarChart.tsx +215 -0
  39. package/src/charts/StatusTracker.tsx +81 -0
  40. package/src/charts/index.ts +6 -0
  41. package/src/index.ts +31 -1
  42. package/src/ui/AnimatedBeam.tsx +187 -0
  43. package/src/ui/BentoGrid.tsx +89 -0
  44. package/src/ui/BorderBeam.tsx +96 -0
  45. package/src/ui/Callout.tsx +66 -0
  46. package/src/ui/Confetti.tsx +131 -0
  47. package/src/ui/CursorTrail.tsx +88 -0
  48. package/src/ui/DiffViewer.tsx +166 -0
  49. package/src/ui/Dock.tsx +124 -0
  50. package/src/ui/Globe.tsx +317 -0
  51. package/src/ui/Meteors.tsx +109 -0
  52. package/src/ui/ModelPicker.tsx +119 -0
  53. package/src/ui/ReasoningTrace.tsx +83 -0
  54. package/src/ui/Snippet.tsx +64 -0
  55. package/src/ui/SuggestionChips.tsx +65 -0
  56. package/src/ui/ToolCallTimeline.tsx +137 -0
  57. package/src/ui/UsageMeter.tsx +71 -0
  58. package/src/ui/WorldMap.tsx +191 -0
  59. package/dist/NumberInput-BQhVucw-.js +0 -491
  60. package/dist/cn-B6yFEsav.js +0 -8
@@ -0,0 +1,381 @@
1
+ import { spread as b, mergeProps as x, insert as d, createComponent as m, template as h, effect as v, className as p, use as $, delegateEvents as C, setAttribute as _ } from "solid-js/web";
2
+ import { splitProps as y, Show as k, onMount as L, onCleanup as E, createSignal as z, For as D } from "solid-js";
3
+ import { c, m as S } from "./motion-jYMWmZqB.js";
4
+ import { Star as B, ChevronDown as V } from "lucide-solid";
5
+ import { NumberField as w } from "@kobalte/core/number-field";
6
+ var X = /* @__PURE__ */ h('<span class="relative flex h-1.5 w-1.5"aria-hidden=true><span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75"></span><span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current">'), Y = /* @__PURE__ */ h("<span>");
7
+ const F = {
8
+ neutral: "bg-muted text-muted-foreground ring-border",
9
+ success: "bg-emerald-500/15 text-emerald-300 ring-emerald-500/30 light:text-emerald-700",
10
+ warning: "bg-amber-500/15 text-amber-300 ring-amber-500/30 light:text-amber-700",
11
+ danger: "bg-rose-500/15 text-rose-300 ring-rose-500/30 light:text-rose-700",
12
+ info: "bg-sky-500/15 text-sky-300 ring-sky-500/30 light:text-sky-700"
13
+ }, G = "badge inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ring-1 ring-inset whitespace-nowrap";
14
+ function se(e) {
15
+ const [t, n] = y(e, ["tone", "class", "children", "pulse"]);
16
+ return (() => {
17
+ var r = Y();
18
+ return b(r, x({
19
+ get class() {
20
+ return c(G, F[t.tone ?? "neutral"], t.class);
21
+ }
22
+ }, n), !1, !0), d(r, m(k, {
23
+ get when() {
24
+ return t.pulse;
25
+ },
26
+ get children() {
27
+ return X();
28
+ }
29
+ }), null), d(r, () => t.children, null), r;
30
+ })();
31
+ }
32
+ var O = /* @__PURE__ */ h("<span>");
33
+ function P(e, t, n = {}) {
34
+ if (S()) return;
35
+ const r = e.getBoundingClientRect(), i = t.clientX - r.left, a = t.clientY - r.top, o = 2 * Math.max(Math.hypot(i, a), Math.hypot(r.width - i, a), Math.hypot(i, r.height - a), Math.hypot(r.width - i, r.height - a)), g = document.createElement("span");
36
+ g.setAttribute("aria-hidden", "true"), Object.assign(g.style, {
37
+ position: "absolute",
38
+ left: `${i}px`,
39
+ top: `${a}px`,
40
+ width: `${o}px`,
41
+ height: `${o}px`,
42
+ borderRadius: "9999px",
43
+ background: n.color ?? "currentColor",
44
+ pointerEvents: "none",
45
+ transform: "translate(-50%,-50%) scale(0)"
46
+ }), e.appendChild(g);
47
+ const s = g.animate([{
48
+ transform: "translate(-50%,-50%) scale(0)",
49
+ opacity: String(n.opacity ?? 0.3)
50
+ }, {
51
+ transform: "translate(-50%,-50%) scale(1)",
52
+ opacity: "0"
53
+ }], {
54
+ duration: 600,
55
+ easing: "ease-out"
56
+ }), l = () => g.remove();
57
+ s.finished.then(l).catch(l);
58
+ }
59
+ function ce(e) {
60
+ let t;
61
+ const n = (r) => {
62
+ t && P(t, r, {
63
+ color: e.color,
64
+ opacity: e.opacity
65
+ });
66
+ };
67
+ return (() => {
68
+ var r = O();
69
+ r.$$pointerdown = n;
70
+ var i = t;
71
+ return typeof i == "function" ? $(i, r) : t = r, d(r, () => e.children), v(() => p(r, c("relative inline-block overflow-hidden", e.class))), r;
72
+ })();
73
+ }
74
+ C(["pointerdown"]);
75
+ var j = /* @__PURE__ */ h("<a>"), H = /* @__PURE__ */ h("<button>");
76
+ const U = {
77
+ primary: "bg-primary text-primary-foreground hover:bg-primary/90",
78
+ secondary: "bg-muted text-foreground hover:bg-muted/70",
79
+ outline: "border border-border bg-transparent text-foreground hover:bg-muted",
80
+ ghost: "bg-transparent text-foreground hover:bg-muted"
81
+ }, q = "inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-[color,background-color,transform] duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring disabled:pointer-events-none disabled:opacity-50";
82
+ function de(e) {
83
+ const [t, n] = y(e, ["variant", "class", "type", "children", "ripple", "onPointerDown", "href", "target", "rel"]), r = () => c(q, U[t.variant ?? "primary"], t.ripple && "relative overflow-hidden", t.class), i = (a) => {
84
+ t.ripple && P(a.currentTarget, a, {
85
+ opacity: 0.35
86
+ });
87
+ const o = t.onPointerDown;
88
+ typeof o == "function" ? o(a) : o && o[0](o[1], a);
89
+ };
90
+ return m(k, {
91
+ get when() {
92
+ return t.href !== void 0;
93
+ },
94
+ get fallback() {
95
+ return (() => {
96
+ var a = H();
97
+ return a.$$pointerdown = i, b(a, x({
98
+ get type() {
99
+ return t.type ?? "button";
100
+ },
101
+ get class() {
102
+ return r();
103
+ }
104
+ }, n), !1, !0), d(a, () => t.children), a;
105
+ })();
106
+ },
107
+ get children() {
108
+ var a = j();
109
+ return a.$$pointerdown = i, b(a, x({
110
+ get href() {
111
+ return t.href;
112
+ },
113
+ get target() {
114
+ return t.target;
115
+ },
116
+ get rel() {
117
+ return t.rel;
118
+ },
119
+ get class() {
120
+ return r();
121
+ }
122
+ }, n), !1, !0), d(a, () => t.children), a;
123
+ }
124
+ });
125
+ }
126
+ C(["pointerdown"]);
127
+ var J = /* @__PURE__ */ h("<div>");
128
+ function N(e, t = {}) {
129
+ if (S()) return () => {
130
+ };
131
+ const n = document.createElement("span");
132
+ n.setAttribute("aria-hidden", "true"), n.className = "pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-300", e.appendChild(n);
133
+ const r = t.size ?? 180, i = t.color ?? "hsl(var(--primary))", a = (l, u) => {
134
+ n.style.background = `radial-gradient(${r}px circle at ${l}px ${u}px, color-mix(in srgb, ${i} 30%, transparent), transparent 70%)`;
135
+ }, o = (l) => {
136
+ const u = e.getBoundingClientRect();
137
+ a(l.clientX - u.left, l.clientY - u.top);
138
+ }, g = () => {
139
+ n.style.opacity = "1";
140
+ }, s = () => {
141
+ n.style.opacity = "0";
142
+ };
143
+ return e.addEventListener("pointermove", o), e.addEventListener("pointerenter", g), e.addEventListener("pointerleave", s), () => {
144
+ e.removeEventListener("pointermove", o), e.removeEventListener("pointerenter", g), e.removeEventListener("pointerleave", s), n.remove();
145
+ };
146
+ }
147
+ function ue(e) {
148
+ let t;
149
+ return L(() => {
150
+ const n = N(t, {
151
+ color: e.color,
152
+ size: e.size
153
+ });
154
+ E(n);
155
+ }), (() => {
156
+ var n = J(), r = t;
157
+ return typeof r == "function" ? $(r, n) : t = n, d(n, () => e.children), v(() => p(n, c("relative overflow-hidden", e.class))), n;
158
+ })();
159
+ }
160
+ var K = /* @__PURE__ */ h("<div style=perspective:800px><div style=transform-style:preserve-3d>");
161
+ function I(e, t, n = {}) {
162
+ if (S()) return () => {
163
+ };
164
+ t.style.willChange = "transform";
165
+ const r = (a) => {
166
+ const o = e.getBoundingClientRect(), g = (a.clientX - o.left) / o.width - 0.5, s = (a.clientY - o.top) / o.height - 0.5, l = n.max ?? 10;
167
+ t.style.transition = "transform 0.15s ease-out", t.style.transform = `perspective(800px) rotateX(${(s * -2 * l).toFixed(2)}deg) rotateY(${(g * 2 * l).toFixed(2)}deg) scale(1.02)`;
168
+ }, i = () => {
169
+ t.style.transition = "transform 0.4s ease", t.style.transform = "perspective(800px) rotateX(0deg) rotateY(0deg) scale(1)";
170
+ };
171
+ return e.addEventListener("pointermove", r), e.addEventListener("pointerleave", i), () => {
172
+ e.removeEventListener("pointermove", r), e.removeEventListener("pointerleave", i), t.style.transform = "", t.style.transition = "", t.style.willChange = "";
173
+ };
174
+ }
175
+ function ge(e) {
176
+ let t, n;
177
+ return L(() => {
178
+ const r = I(t, n, {
179
+ max: e.max
180
+ });
181
+ E(r);
182
+ }), (() => {
183
+ var r = K(), i = r.firstChild, a = t;
184
+ typeof a == "function" ? $(a, r) : t = r;
185
+ var o = n;
186
+ return typeof o == "function" ? $(o, i) : n = i, d(i, () => e.children), v(() => p(r, c("inline-block", e.class))), r;
187
+ })();
188
+ }
189
+ var A = /* @__PURE__ */ h("<div>"), Q = /* @__PURE__ */ h("<h2>");
190
+ function fe(e) {
191
+ const [t, n] = y(e, ["class", "children", "glass", "glow", "tilt", "spotlight"]), r = () => (t.glow ?? t.glass) === !0;
192
+ let i;
193
+ return L(() => {
194
+ const a = [t.tilt && i ? I(i, i) : null, t.spotlight && i ? N(i) : null].filter((o) => o !== null);
195
+ E(() => a.forEach((o) => o()));
196
+ }), (() => {
197
+ var a = A(), o = i;
198
+ return typeof o == "function" ? $(o, a) : i = a, b(a, x({
199
+ get class() {
200
+ return c(t.glass ? "card rounded-xl text-card-foreground" : "rounded-xl border border-border bg-card text-card-foreground shadow-sm", r() && "glow-edge", t.spotlight && "relative overflow-hidden", t.tilt && "will-change-transform", t.class);
201
+ }
202
+ }, n), !1, !0), d(a, () => t.children), a;
203
+ })();
204
+ }
205
+ function he(e) {
206
+ const [t, n] = y(e, ["class", "children"]);
207
+ return (() => {
208
+ var r = A();
209
+ return b(r, x({
210
+ get class() {
211
+ return c("flex flex-col space-y-1.5 p-6", t.class);
212
+ }
213
+ }, n), !1, !0), d(r, () => t.children), r;
214
+ })();
215
+ }
216
+ function me(e) {
217
+ const [t, n] = y(e, ["class", "children"]);
218
+ return (() => {
219
+ var r = Q();
220
+ return b(r, x({
221
+ get class() {
222
+ return c("text-lg font-semibold leading-none tracking-tight", t.class);
223
+ }
224
+ }, n), !1, !0), d(r, () => t.children), r;
225
+ })();
226
+ }
227
+ function ve(e) {
228
+ const [t, n] = y(e, ["class", "children"]);
229
+ return (() => {
230
+ var r = A();
231
+ return b(r, x({
232
+ get class() {
233
+ return c("p-6 pt-0", t.class);
234
+ }
235
+ }, n), !1, !0), d(r, () => t.children), r;
236
+ })();
237
+ }
238
+ var W = /* @__PURE__ */ h("<div role=radiogroup>"), Z = /* @__PURE__ */ h("<div role=img>"), ee = /* @__PURE__ */ h('<button type=button role=radio class="rounded outline-none focus-visible:ring-2 focus-visible:ring-ring/40">');
239
+ function pe(e) {
240
+ const [t, n] = z(0), r = () => e.max ?? 5, i = () => Array.from({
241
+ length: r()
242
+ }, (s, l) => l + 1), a = () => t() > 0 ? t() : e.value, o = (s) => {
243
+ var l;
244
+ e.readonly || (l = e.onChange) == null || l.call(e, s);
245
+ }, g = (s) => c("h-5 w-5 transition-colors", s <= a() ? "fill-primary text-primary" : "fill-transparent text-muted-foreground");
246
+ return m(k, {
247
+ get when() {
248
+ return !e.readonly;
249
+ },
250
+ get fallback() {
251
+ return (() => {
252
+ var s = Z();
253
+ return d(s, m(D, {
254
+ get each() {
255
+ return i();
256
+ },
257
+ children: (l) => m(B, {
258
+ get class() {
259
+ return g(l);
260
+ },
261
+ "aria-hidden": "true"
262
+ })
263
+ })), v((l) => {
264
+ var u = c("inline-flex items-center gap-1", e.class), f = `Rating ${e.value} of ${r()}`;
265
+ return u !== l.e && p(s, l.e = u), f !== l.t && _(s, "aria-label", l.t = f), l;
266
+ }, {
267
+ e: void 0,
268
+ t: void 0
269
+ }), s;
270
+ })();
271
+ },
272
+ get children() {
273
+ var s = W();
274
+ return s.addEventListener("mouseleave", () => n(0)), d(s, m(D, {
275
+ get each() {
276
+ return i();
277
+ },
278
+ children: (l) => (() => {
279
+ var u = ee();
280
+ return u.$$keydown = (f) => {
281
+ f.key === "ArrowRight" || f.key === "ArrowUp" ? (f.preventDefault(), o(Math.min(e.value + 1, r()))) : (f.key === "ArrowLeft" || f.key === "ArrowDown") && (f.preventDefault(), o(Math.max(e.value - 1, 0)));
282
+ }, u.$$click = () => o(l), u.addEventListener("blur", () => n(0)), u.addEventListener("focus", () => n(l)), u.addEventListener("mouseenter", () => n(l)), d(u, m(B, {
283
+ get class() {
284
+ return g(l);
285
+ },
286
+ "aria-hidden": "true"
287
+ })), v((f) => {
288
+ var R = e.value === l, T = `Rate ${l} of ${r()}`;
289
+ return R !== f.e && _(u, "aria-checked", f.e = R), T !== f.t && _(u, "aria-label", f.t = T), f;
290
+ }, {
291
+ e: void 0,
292
+ t: void 0
293
+ }), u;
294
+ })()
295
+ })), v(() => p(s, c("inline-flex items-center gap-1", e.class))), s;
296
+ }
297
+ });
298
+ }
299
+ C(["click", "keydown"]);
300
+ var te = /* @__PURE__ */ h('<label><input type=checkbox class="h-4 w-4 rounded border-input accent-primary">');
301
+ function be(e) {
302
+ return (() => {
303
+ var t = te(), n = t.firstChild;
304
+ return n.addEventListener("change", (r) => e.onChange(r.currentTarget.checked)), d(t, () => e.label, null), v(() => p(t, c("inline-flex items-center gap-2 text-sm text-foreground", e.class))), v(() => n.checked = e.checked), t;
305
+ })();
306
+ }
307
+ var re = /* @__PURE__ */ h('<div><button type=button class="flex w-full items-center justify-between rounded-md px-3 py-2 text-sm font-medium text-foreground hover:bg-muted"></button><div><div class=overflow-hidden><div class="px-3 py-2 text-sm text-muted-foreground">');
308
+ function xe(e) {
309
+ return (() => {
310
+ var t = re(), n = t.firstChild, r = n.nextSibling, i = r.firstChild, a = i.firstChild;
311
+ return n.$$click = () => e.onOpenChange(!e.open), d(n, () => e.title, null), d(n, m(V, {
312
+ get class() {
313
+ return c("h-4 w-4 shrink-0 transition-transform duration-200", e.open && "rotate-180");
314
+ }
315
+ }), null), d(a, () => e.children), v((o) => {
316
+ var g = c(e.class), s = e.open, l = c("grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none", e.open ? "grid-rows-[1fr]" : "grid-rows-[0fr]");
317
+ return g !== o.e && p(t, o.e = g), s !== o.t && _(n, "aria-expanded", o.t = s), l !== o.a && p(r, o.a = l), o;
318
+ }, {
319
+ e: void 0,
320
+ t: void 0,
321
+ a: void 0
322
+ }), t;
323
+ })();
324
+ }
325
+ C(["click"]);
326
+ const M = "grid h-9 w-9 shrink-0 place-items-center border border-input bg-background text-foreground transition-colors hover:bg-muted disabled:cursor-not-allowed disabled:opacity-50";
327
+ function ye(e) {
328
+ return m(w, {
329
+ get rawValue() {
330
+ return e.value;
331
+ },
332
+ onRawValueChange: (t) => e.onChange(t),
333
+ get minValue() {
334
+ return e.min;
335
+ },
336
+ get maxValue() {
337
+ return e.max;
338
+ },
339
+ get class() {
340
+ return c("inline-flex items-stretch", e.class);
341
+ },
342
+ get children() {
343
+ return [m(w.DecrementTrigger, {
344
+ get class() {
345
+ return c(M, "rounded-l-md");
346
+ },
347
+ "aria-label": "Decrement",
348
+ children: "−"
349
+ }), m(w.Input, {
350
+ get "aria-label"() {
351
+ return e["aria-label"];
352
+ },
353
+ class: "w-16 border-y border-input bg-background px-3 py-2 text-center text-sm text-foreground outline-none transition-colors a4-field"
354
+ }), m(w.IncrementTrigger, {
355
+ get class() {
356
+ return c(M, "rounded-r-md");
357
+ },
358
+ "aria-label": "Increment",
359
+ children: "+"
360
+ })];
361
+ }
362
+ });
363
+ }
364
+ export {
365
+ se as B,
366
+ fe as C,
367
+ ye as N,
368
+ pe as R,
369
+ ue as S,
370
+ ge as T,
371
+ de as a,
372
+ be as b,
373
+ xe as c,
374
+ ve as d,
375
+ he as e,
376
+ me as f,
377
+ ce as g,
378
+ N as h,
379
+ I as i,
380
+ P as s
381
+ };
@@ -0,0 +1,33 @@
1
+ import { JSX } from 'solid-js';
2
+ export interface BarListDatum {
3
+ name: string;
4
+ value: number;
5
+ href?: string;
6
+ }
7
+ export interface BarListProps {
8
+ data: BarListDatum[];
9
+ /** Formats the raw value shown at the row's end. Default `String`. */
10
+ valueFormat?: (n: number) => string;
11
+ /** Fill color token. Default 'primary'. */
12
+ tone?: 'primary' | 'accent';
13
+ class?: string;
14
+ }
15
+ /**
16
+ * Ranked horizontal bar list: rows sorted by `value` descending, each a
17
+ * full-width track with a low-opacity fill sized to `value / max` of the
18
+ * tallest row, the `name` overlaid at the left (truncated, rendered as a
19
+ * link when `href` is set) and the formatted value at the right. Compact
20
+ * and reflows with its container.
21
+ *
22
+ * @example
23
+ * ```tsx
24
+ * <BarList
25
+ * data={[
26
+ * { name: '/dashboard', value: 842, href: '/pages/dashboard' },
27
+ * { name: '/settings', value: 231 },
28
+ * ]}
29
+ * tone="accent"
30
+ * />
31
+ * ```
32
+ */
33
+ export declare function BarList(props: BarListProps): JSX.Element;
@@ -0,0 +1,23 @@
1
+ import { JSX } from 'solid-js';
2
+ export type CategoryBarTone = 'primary' | 'accent' | 'success' | 'warning' | 'destructive';
3
+ export interface CategoryBarProps {
4
+ values: number[];
5
+ /** A value along the cumulative total to mark with a caret above the bar. */
6
+ marker?: number;
7
+ /** Per-segment color tokens; cycles the default order below when omitted or shorter than `values`. */
8
+ tones?: CategoryBarTone[];
9
+ class?: string;
10
+ }
11
+ /**
12
+ * Single segmented bar: each `values[i]` sets a segment's flex-grow share of
13
+ * the total, colored by `tones[i]` (cycling a sensible default), joined
14
+ * seamlessly inside one rounded track. An optional `marker` renders a caret
15
+ * above the bar at that value's position along the total, and cumulative
16
+ * boundary labels sit beneath (muted, tabular-nums).
17
+ *
18
+ * @example
19
+ * ```tsx
20
+ * <CategoryBar values={[40, 25, 20, 15]} marker={62} />
21
+ * ```
22
+ */
23
+ export declare function CategoryBar(props: CategoryBarProps): JSX.Element;
@@ -0,0 +1,43 @@
1
+ import { JSX } from 'solid-js';
2
+ export interface GaugeThreshold {
3
+ value: number;
4
+ tone: 'primary' | 'accent' | 'destructive' | 'muted';
5
+ }
6
+ export interface GaugeChartProps {
7
+ value: number;
8
+ /** Value mapped to the arc's start (-135°). Default 0. */
9
+ min?: number;
10
+ /** Value mapped to the arc's end (+135°). Default 100. */
11
+ max?: number;
12
+ label?: JSX.Element;
13
+ unit?: string;
14
+ /** Overall SVG width/height in px (square). Default 160. */
15
+ size?: number;
16
+ /** Value arc color when `thresholds` are omitted. Default 'primary'. */
17
+ tone?: 'primary' | 'accent';
18
+ /** Recolor the value arc once `value` reaches a threshold's `value` (highest match wins). */
19
+ thresholds?: GaugeThreshold[];
20
+ class?: string;
21
+ }
22
+ /**
23
+ * SVG radial gauge: a 270° arc (from -135° to +135°) with a background track
24
+ * and a value arc filled proportionally to `value` within `[min, max]`,
25
+ * colored by `tone` or by the highest `threshold` reached. The center shows
26
+ * the value plus optional `unit`/`label`. The sweep animates on mount and on
27
+ * value change, jumping instantly under reduced motion.
28
+ *
29
+ * @example
30
+ * ```tsx
31
+ * <GaugeChart
32
+ * value={72}
33
+ * unit="%"
34
+ * label="CPU load"
35
+ * thresholds={[
36
+ * { value: 0, tone: 'primary' },
37
+ * { value: 60, tone: 'accent' },
38
+ * { value: 85, tone: 'destructive' },
39
+ * ]}
40
+ * />
41
+ * ```
42
+ */
43
+ export declare function GaugeChart(props: GaugeChartProps): JSX.Element;
@@ -0,0 +1,39 @@
1
+ import { JSX } from 'solid-js';
2
+ export interface LineSeries {
3
+ name?: string;
4
+ tone?: 'primary' | 'accent' | 'muted' | 'foreground';
5
+ data: number[];
6
+ area?: boolean;
7
+ }
8
+ export interface LineChartProps {
9
+ series: LineSeries[];
10
+ labels?: string[];
11
+ /** Height of the plot area in px. Default 200. */
12
+ height?: number;
13
+ /** Render a small circle at each data point. Default false. */
14
+ showDots?: boolean;
15
+ /** Show a crosshair + value tooltip on pointer hover. Default false. */
16
+ showTooltip?: boolean;
17
+ class?: string;
18
+ }
19
+ /**
20
+ * Multi-series SVG line chart scaled to fit its container (responsive
21
+ * viewBox, `preserveAspectRatio="none"`), with a shared y-scale across all
22
+ * series. Series with `area: true` also get a faint fill to the baseline.
23
+ * Assumes equal-length `data` arrays across series; if lengths differ, the
24
+ * x-axis is built from the longest one.
25
+ *
26
+ * @example
27
+ * ```tsx
28
+ * <LineChart
29
+ * series={[
30
+ * { name: 'Revenue', tone: 'primary', data: [4, 6, 5, 9, 8, 12], area: true },
31
+ * { name: 'Costs', tone: 'muted', data: [2, 3, 3, 4, 5, 6] },
32
+ * ]}
33
+ * labels={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']}
34
+ * showDots
35
+ * showTooltip
36
+ * />
37
+ * ```
38
+ */
39
+ export declare function LineChart(props: LineChartProps): JSX.Element;
@@ -0,0 +1,34 @@
1
+ import { JSX } from 'solid-js';
2
+ export interface RadarSeries {
3
+ name?: string;
4
+ tone?: 'primary' | 'accent';
5
+ values: number[];
6
+ }
7
+ export interface RadarChartProps {
8
+ axes: string[];
9
+ series: RadarSeries[];
10
+ /** Value that reaches the outer edge of the grid. Default: max across all series. */
11
+ max?: number;
12
+ /** Overall SVG width/height in px (square). Default 240. */
13
+ size?: number;
14
+ class?: string;
15
+ }
16
+ /**
17
+ * SVG spider/radar chart: a concentric polygon grid with one spoke per axis,
18
+ * and one translucent-filled polygon per series connecting its values
19
+ * (normalized by `max`, default the max value across all series). Series
20
+ * colors come from each datum's `tone`, or cycle through `primary`/`accent`
21
+ * by index when omitted. Shows a small legend when 2+ series have a `name`.
22
+ *
23
+ * @example
24
+ * ```tsx
25
+ * <RadarChart
26
+ * axes={['Speed', 'Power', 'Range', 'Defense', 'Utility']}
27
+ * series={[
28
+ * { name: 'Model A', tone: 'primary', values: [80, 60, 90, 40, 70] },
29
+ * { name: 'Model B', tone: 'accent', values: [50, 85, 60, 75, 55] },
30
+ * ]}
31
+ * />
32
+ * ```
33
+ */
34
+ export declare function RadarChart(props: RadarChartProps): JSX.Element;
@@ -0,0 +1,27 @@
1
+ import { JSX } from 'solid-js';
2
+ export interface StatusSegment {
3
+ status: 'ok' | 'degraded' | 'down';
4
+ label?: string;
5
+ }
6
+ export interface StatusTrackerProps {
7
+ segments: StatusSegment[];
8
+ class?: string;
9
+ }
10
+ /**
11
+ * Status-page style history bar: a row of thin rounded segments colored by
12
+ * `status` (ok/degraded/down), each with a native hover tooltip showing its
13
+ * label and status, plus a summary uptime line above.
14
+ *
15
+ * @example
16
+ * ```tsx
17
+ * <StatusTracker
18
+ * segments={[
19
+ * { status: 'ok', label: 'Jul 1' },
20
+ * { status: 'degraded', label: 'Jul 2' },
21
+ * { status: 'ok', label: 'Jul 3' },
22
+ * { status: 'down', label: 'Jul 4' },
23
+ * ]}
24
+ * />
25
+ * ```
26
+ */
27
+ export declare function StatusTracker(props: StatusTrackerProps): JSX.Element;
@@ -1,3 +1,9 @@
1
1
  export { Sparkline, type SparklineProps } from './Sparkline';
2
2
  export { BarChart, type BarDatum, type BarChartProps } from './BarChart';
3
3
  export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart';
4
+ export { LineChart, type LineSeries, type LineChartProps } from './LineChart';
5
+ export { GaugeChart, type GaugeThreshold, type GaugeChartProps } from './GaugeChart';
6
+ export { RadarChart, type RadarSeries, type RadarChartProps } from './RadarChart';
7
+ export { BarList, type BarListDatum, type BarListProps } from './BarList';
8
+ export { StatusTracker, type StatusSegment, type StatusTrackerProps } from './StatusTracker';
9
+ export { CategoryBar, type CategoryBarTone, type CategoryBarProps } from './CategoryBar';