@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.
- package/dist/NumberInput-Bnh2u7pp.js +381 -0
- package/dist/charts/BarList.d.ts +33 -0
- package/dist/charts/CategoryBar.d.ts +23 -0
- package/dist/charts/GaugeChart.d.ts +43 -0
- package/dist/charts/LineChart.d.ts +39 -0
- package/dist/charts/RadarChart.d.ts +34 -0
- package/dist/charts/StatusTracker.d.ts +27 -0
- package/dist/charts/index.d.ts +6 -0
- package/dist/charts.js +693 -100
- package/dist/commerce.js +2 -2
- package/dist/elements.css +206 -0
- package/dist/full.css +206 -0
- package/dist/index.d.ts +18 -1
- package/dist/index.js +5086 -3915
- package/dist/motion-jYMWmZqB.js +119 -0
- package/dist/ui/AnimatedBeam.d.ts +34 -0
- package/dist/ui/BentoGrid.d.ts +39 -0
- package/dist/ui/BorderBeam.d.ts +27 -0
- package/dist/ui/Callout.d.ts +27 -0
- package/dist/ui/Confetti.d.ts +46 -0
- package/dist/ui/CursorTrail.d.ts +25 -0
- package/dist/ui/DiffViewer.d.ts +33 -0
- package/dist/ui/Dock.d.ts +31 -0
- package/dist/ui/Globe.d.ts +44 -0
- package/dist/ui/Meteors.d.ts +23 -0
- package/dist/ui/ModelPicker.d.ts +38 -0
- package/dist/ui/ReasoningTrace.d.ts +28 -0
- package/dist/ui/Snippet.d.ts +19 -0
- package/dist/ui/SuggestionChips.d.ts +25 -0
- package/dist/ui/ToolCallTimeline.d.ts +34 -0
- package/dist/ui/UsageMeter.d.ts +26 -0
- package/dist/ui/WorldMap.d.ts +36 -0
- package/package.json +1 -1
- package/src/charts/BarList.tsx +83 -0
- package/src/charts/CategoryBar.tsx +95 -0
- package/src/charts/GaugeChart.tsx +175 -0
- package/src/charts/LineChart.tsx +264 -0
- package/src/charts/RadarChart.tsx +215 -0
- package/src/charts/StatusTracker.tsx +81 -0
- package/src/charts/index.ts +6 -0
- package/src/index.ts +31 -1
- package/src/ui/AnimatedBeam.tsx +187 -0
- package/src/ui/BentoGrid.tsx +89 -0
- package/src/ui/BorderBeam.tsx +96 -0
- package/src/ui/Callout.tsx +66 -0
- package/src/ui/Confetti.tsx +131 -0
- package/src/ui/CursorTrail.tsx +88 -0
- package/src/ui/DiffViewer.tsx +166 -0
- package/src/ui/Dock.tsx +124 -0
- package/src/ui/Globe.tsx +317 -0
- package/src/ui/Meteors.tsx +109 -0
- package/src/ui/ModelPicker.tsx +119 -0
- package/src/ui/ReasoningTrace.tsx +83 -0
- package/src/ui/Snippet.tsx +64 -0
- package/src/ui/SuggestionChips.tsx +65 -0
- package/src/ui/ToolCallTimeline.tsx +137 -0
- package/src/ui/UsageMeter.tsx +71 -0
- package/src/ui/WorldMap.tsx +191 -0
- package/dist/NumberInput-BQhVucw-.js +0 -491
- 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;
|
package/dist/charts/index.d.ts
CHANGED
|
@@ -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';
|