@flytedan/flytebot-design-system 0.1.1 → 0.1.3
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/index.cjs +32 -31
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +32 -31
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
- package/styles/components.css +42 -0
- package/styles/fonts/figtree-latin-ext.woff2 +0 -0
- package/styles/fonts/figtree-latin.woff2 +0 -0
- package/styles/foundations.css +44 -228
- package/styles/tokens.css +296 -264
package/dist/index.js
CHANGED
|
@@ -2014,7 +2014,8 @@ function SegmentedMeter({
|
|
|
2014
2014
|
const pct = safeTotal ? Math.min(100, Math.round(used / safeTotal * 100)) : 0;
|
|
2015
2015
|
const w = (v) => safeTotal ? Math.max(0, Math.min(100, Number(v) / safeTotal * 100)) : 0;
|
|
2016
2016
|
const fill = (s, i) => s.color || (s.variant ? VARIANT_FILL[s.variant] : void 0) || CHART[i % CHART.length];
|
|
2017
|
-
const
|
|
2017
|
+
const generatedId = React11.useId();
|
|
2018
|
+
const uid2 = id || generatedId;
|
|
2018
2019
|
return /* @__PURE__ */ jsxs28("div", { className: ["fd-segmeter", className].filter(Boolean).join(" "), onClick, children: [
|
|
2019
2020
|
label || showTotal ? /* @__PURE__ */ jsxs28("div", { className: "fd-segmeter-head", children: [
|
|
2020
2021
|
label ? /* @__PURE__ */ jsx32("span", { className: "fd-segmeter-label", id: uid2 + "-l", children: label }) : /* @__PURE__ */ jsx32("span", {}),
|
|
@@ -3308,6 +3309,36 @@ function RangeSlider({
|
|
|
3308
3309
|
className = "",
|
|
3309
3310
|
...rest
|
|
3310
3311
|
}) {
|
|
3312
|
+
const fmt2 = format || ((v) => String(v));
|
|
3313
|
+
const [a, b] = value || [min, max];
|
|
3314
|
+
const [drag, setDrag] = React20.useState(null);
|
|
3315
|
+
const [focus, setFocus] = React20.useState(null);
|
|
3316
|
+
const railRef = React20.useRef(null);
|
|
3317
|
+
const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
|
|
3318
|
+
const clampPair = (i, v) => {
|
|
3319
|
+
v = Math.min(max, Math.max(min, Math.round(v / step) * step));
|
|
3320
|
+
if (snap && marks.length) {
|
|
3321
|
+
const near = marks.reduce((best, m) => Math.abs(m.value - v) < Math.abs(best - v) ? m.value : best, Infinity);
|
|
3322
|
+
if (Math.abs(near - v) <= (max - min) * 0.015) v = near;
|
|
3323
|
+
}
|
|
3324
|
+
const pair = i === 0 ? [Math.min(v, b - minGap), b] : [a, Math.max(v, a + minGap)];
|
|
3325
|
+
return pair;
|
|
3326
|
+
};
|
|
3327
|
+
const fromEvent = (e) => {
|
|
3328
|
+
const r = railRef.current.getBoundingClientRect();
|
|
3329
|
+
return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
|
|
3330
|
+
};
|
|
3331
|
+
React20.useEffect(() => {
|
|
3332
|
+
if (drag === null) return;
|
|
3333
|
+
const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
|
|
3334
|
+
const upH = () => setDrag(null);
|
|
3335
|
+
window.addEventListener("pointermove", mv);
|
|
3336
|
+
window.addEventListener("pointerup", upH);
|
|
3337
|
+
return () => {
|
|
3338
|
+
window.removeEventListener("pointermove", mv);
|
|
3339
|
+
window.removeEventListener("pointerup", upH);
|
|
3340
|
+
};
|
|
3341
|
+
}, [drag, a, b]);
|
|
3311
3342
|
if (stops && stops.length > 1) {
|
|
3312
3343
|
const S = stops.map((s) => typeof s === "object" ? s : { value: s });
|
|
3313
3344
|
const num = (v) => v === Infinity || v == null ? Number.MAX_SAFE_INTEGER : v;
|
|
@@ -3336,25 +3367,6 @@ function RangeSlider({
|
|
|
3336
3367
|
}
|
|
3337
3368
|
);
|
|
3338
3369
|
}
|
|
3339
|
-
const fmt2 = format || ((v) => String(v));
|
|
3340
|
-
const [a, b] = value || [min, max];
|
|
3341
|
-
const [drag, setDrag] = React20.useState(null);
|
|
3342
|
-
const [focus, setFocus] = React20.useState(null);
|
|
3343
|
-
const railRef = React20.useRef(null);
|
|
3344
|
-
const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
|
|
3345
|
-
const clampPair = (i, v) => {
|
|
3346
|
-
v = Math.min(max, Math.max(min, Math.round(v / step) * step));
|
|
3347
|
-
if (snap && marks.length) {
|
|
3348
|
-
const near = marks.reduce((best, m) => Math.abs(m.value - v) < Math.abs(best - v) ? m.value : best, Infinity);
|
|
3349
|
-
if (Math.abs(near - v) <= (max - min) * 0.015) v = near;
|
|
3350
|
-
}
|
|
3351
|
-
const pair = i === 0 ? [Math.min(v, b - minGap), b] : [a, Math.max(v, a + minGap)];
|
|
3352
|
-
return pair;
|
|
3353
|
-
};
|
|
3354
|
-
const fromEvent = (e) => {
|
|
3355
|
-
const r = railRef.current.getBoundingClientRect();
|
|
3356
|
-
return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
|
|
3357
|
-
};
|
|
3358
3370
|
const startDrag = (i) => (e) => {
|
|
3359
3371
|
e.preventDefault();
|
|
3360
3372
|
e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId);
|
|
@@ -3366,17 +3378,6 @@ function RangeSlider({
|
|
|
3366
3378
|
onChange && onChange(clampPair(i, v));
|
|
3367
3379
|
setDrag(i);
|
|
3368
3380
|
};
|
|
3369
|
-
React20.useEffect(() => {
|
|
3370
|
-
if (drag === null) return;
|
|
3371
|
-
const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
|
|
3372
|
-
const upH = () => setDrag(null);
|
|
3373
|
-
window.addEventListener("pointermove", mv);
|
|
3374
|
-
window.addEventListener("pointerup", upH);
|
|
3375
|
-
return () => {
|
|
3376
|
-
window.removeEventListener("pointermove", mv);
|
|
3377
|
-
window.removeEventListener("pointerup", upH);
|
|
3378
|
-
};
|
|
3379
|
-
}, [drag, a, b]);
|
|
3380
3381
|
const key = (i) => (e) => {
|
|
3381
3382
|
const big = (max - min) / 10;
|
|
3382
3383
|
let d = 0;
|