@flytedan/flytebot-design-system 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -2195,7 +2195,8 @@ function SegmentedMeter({
   const pct = safeTotal ? Math.min(100, Math.round(used / safeTotal * 100)) : 0;
   const w = (v) => safeTotal ? Math.max(0, Math.min(100, Number(v) / safeTotal * 100)) : 0;
   const fill = (s, i) => s.color || (s.variant ? VARIANT_FILL[s.variant] : void 0) || CHART[i % CHART.length];
-  const uid2 = React11.useId ? React11.useId() : id || "segmeter";
+  const generatedId = React11.useId();
+  const uid2 = id || generatedId;
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: ["fd-segmeter", className].filter(Boolean).join(" "), onClick, children: [
     label || showTotal ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "fd-segmeter-head", children: [
       label ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "fd-segmeter-label", id: uid2 + "-l", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", {}),
@@ -3489,6 +3490,36 @@ function RangeSlider({
   className = "",
   ...rest
 }) {
+  const fmt2 = format || ((v) => String(v));
+  const [a, b] = value || [min, max];
+  const [drag, setDrag] = React20.useState(null);
+  const [focus, setFocus] = React20.useState(null);
+  const railRef = React20.useRef(null);
+  const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
+  const clampPair = (i, v) => {
+    v = Math.min(max, Math.max(min, Math.round(v / step) * step));
+    if (snap && marks.length) {
+      const near = marks.reduce((best, m) => Math.abs(m.value - v) < Math.abs(best - v) ? m.value : best, Infinity);
+      if (Math.abs(near - v) <= (max - min) * 0.015) v = near;
+    }
+    const pair = i === 0 ? [Math.min(v, b - minGap), b] : [a, Math.max(v, a + minGap)];
+    return pair;
+  };
+  const fromEvent = (e) => {
+    const r = railRef.current.getBoundingClientRect();
+    return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
+  };
+  React20.useEffect(() => {
+    if (drag === null) return;
+    const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
+    const upH = () => setDrag(null);
+    window.addEventListener("pointermove", mv);
+    window.addEventListener("pointerup", upH);
+    return () => {
+      window.removeEventListener("pointermove", mv);
+      window.removeEventListener("pointerup", upH);
+    };
+  }, [drag, a, b]);
   if (stops && stops.length > 1) {
     const S = stops.map((s) => typeof s === "object" ? s : { value: s });
     const num = (v) => v === Infinity || v == null ? Number.MAX_SAFE_INTEGER : v;
@@ -3517,25 +3548,6 @@ function RangeSlider({
       }
     );
   }
-  const fmt2 = format || ((v) => String(v));
-  const [a, b] = value || [min, max];
-  const [drag, setDrag] = React20.useState(null);
-  const [focus, setFocus] = React20.useState(null);
-  const railRef = React20.useRef(null);
-  const pct = (v) => max === min ? 0 : (v - min) / (max - min) * 100;
-  const clampPair = (i, v) => {
-    v = Math.min(max, Math.max(min, Math.round(v / step) * step));
-    if (snap && marks.length) {
-      const near = marks.reduce((best, m) => Math.abs(m.value - v) < Math.abs(best - v) ? m.value : best, Infinity);
-      if (Math.abs(near - v) <= (max - min) * 0.015) v = near;
-    }
-    const pair = i === 0 ? [Math.min(v, b - minGap), b] : [a, Math.max(v, a + minGap)];
-    return pair;
-  };
-  const fromEvent = (e) => {
-    const r = railRef.current.getBoundingClientRect();
-    return min + Math.min(1, Math.max(0, (e.clientX - r.left) / r.width)) * (max - min);
-  };
   const startDrag = (i) => (e) => {
     e.preventDefault();
     e.target.setPointerCapture && e.target.setPointerCapture(e.pointerId);
@@ -3547,17 +3559,6 @@ function RangeSlider({
     onChange && onChange(clampPair(i, v));
     setDrag(i);
   };
-  React20.useEffect(() => {
-    if (drag === null) return;
-    const mv = (e) => onChange && onChange(clampPair(drag, fromEvent(e)));
-    const upH = () => setDrag(null);
-    window.addEventListener("pointermove", mv);
-    window.addEventListener("pointerup", upH);
-    return () => {
-      window.removeEventListener("pointermove", mv);
-      window.removeEventListener("pointerup", upH);
-    };
-  }, [drag, a, b]);
   const key = (i) => (e) => {
     const big = (max - min) / 10;
     let d = 0;