@cfx-dev/ui-components 3.0.4 → 4.0.0

package/dist/components/Select/SelectShowcase.js

@@ -2,7 +2,7 @@ import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import o from "react";
 import { Flex as a } from "../Layout/Flex/Flex.js";
 import { Text as i } from "../Text/Text.js";
-import { Select as n } from "./Select.js";
+import { S as n } from "../../Select-Ds-fm4CN.js";
 const t = [
   {
     value: "value",

package/dist/components/Select/index.d.ts

@@ -1,2 +1,2 @@
-export { Select } from './Select';
+export { Select, ICON_SIZE_MAP } from './Select';
 export type { SelectProps, SelectOption } from './Select';

package/dist/components/Select/index.js

@@ -1,4 +1,5 @@
-import { Select as r } from "./Select.js";
+import { I as S, S as a } from "../../Select-Ds-fm4CN.js";
 export {
-  r as Select
+  S as ICON_SIZE_MAP,
+  a as Select
 };

package/dist/components/Slider/Slider.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import * as RadixSlider from '@radix-ui/react-slider';
+interface SliderProps extends RadixSlider.SliderProps {
+    ariaLabel?: string;
+    className?: string;
+    title: string;
+    minLabel?: string | number;
+    maxLabel?: string | number;
+}
+export declare const Slider: React.FC<SliderProps>;
+export default Slider;

package/dist/components/Slider/Slider.js

@@ -0,0 +1,606 @@
+import { jsx as f, Fragment as pe, jsxs as B } from "react/jsx-runtime";
+import * as c from "react";
+import z from "react";
+import { u as he, c as Z } from "../../index-BW3WdIgK.js";
+import { u as Se, b as ge, a as be } from "../../index-BCnz73Lm.js";
+import "../../index-2hJuj4UN.js";
+import { c as _e } from "../../index-CjTSD6zB.js";
+import { clsx as ve } from "../../utils/clsx.js";
+function V(e, t, { checkForDefaultPrevented: n = !0 } = {}) {
+  return function(o) {
+    if (e == null || e(o), n === !1 || !o.defaultPrevented)
+      return t == null ? void 0 : t(o);
+  };
+}
+function G(e, t) {
+  if (typeof e == "function")
+    return e(t);
+  e != null && (e.current = t);
+}
+function q(...e) {
+  return (t) => {
+    let n = !1;
+    const r = e.map((o) => {
+      const s = G(o, t);
+      return !n && typeof s == "function" && (n = !0), s;
+    });
+    if (n)
+      return () => {
+        for (let o = 0; o < r.length; o++) {
+          const s = r[o];
+          typeof s == "function" ? s() : G(e[o], null);
+        }
+      };
+  };
+}
+function k(...e) {
+  return c.useCallback(q(...e), e);
+}
+function we(e, t = []) {
+  let n = [];
+  function r(s, i) {
+    const a = c.createContext(i), u = n.length;
+    n = [...n, i];
+    const m = (l) => {
+      var h;
+      const { scope: d, children: p, ..._ } = l, S = ((h = d == null ? void 0 : d[e]) == null ? void 0 : h[u]) || a, g = c.useMemo(() => _, Object.values(_));
+      return /* @__PURE__ */ f(S.Provider, { value: g, children: p });
+    };
+    m.displayName = s + "Provider";
+    function b(l, d) {
+      var S;
+      const p = ((S = d == null ? void 0 : d[e]) == null ? void 0 : S[u]) || a, _ = c.useContext(p);
+      if (_) return _;
+      if (i !== void 0) return i;
+      throw new Error(`\`${l}\` must be used within \`${s}\``);
+    }
+    return [m, b];
+  }
+  const o = () => {
+    const s = n.map((i) => c.createContext(i));
+    return function(a) {
+      const u = (a == null ? void 0 : a[e]) || s;
+      return c.useMemo(
+        () => ({ [`__scope${e}`]: { ...a, [e]: u } }),
+        [a, u]
+      );
+    };
+  };
+  return o.scopeName = e, [r, xe(o, ...t)];
+}
+function xe(...e) {
+  const t = e[0];
+  if (e.length === 1) return t;
+  const n = () => {
+    const r = e.map((o) => ({
+      useScope: o(),
+      scopeName: o.scopeName
+    }));
+    return function(s) {
+      const i = r.reduce((a, { useScope: u, scopeName: m }) => {
+        const l = u(s)[`__scope${m}`];
+        return { ...a, ...l };
+      }, {});
+      return c.useMemo(() => ({ [`__scope${t.scopeName}`]: i }), [i]);
+    };
+  };
+  return n.scopeName = t.scopeName, n;
+}
+var J = c.forwardRef((e, t) => {
+  const { children: n, ...r } = e, o = c.Children.toArray(n), s = o.find(ye);
+  if (s) {
+    const i = s.props.children, a = o.map((u) => u === s ? c.Children.count(i) > 1 ? c.Children.only(null) : c.isValidElement(i) ? i.props.children : null : u);
+    return /* @__PURE__ */ f(F, { ...r, ref: t, children: c.isValidElement(i) ? c.cloneElement(i, void 0, a) : null });
+  }
+  return /* @__PURE__ */ f(F, { ...r, ref: t, children: n });
+});
+J.displayName = "Slot";
+var F = c.forwardRef((e, t) => {
+  const { children: n, ...r } = e;
+  if (c.isValidElement(n)) {
+    const o = Ce(n);
+    return c.cloneElement(n, {
+      ...Pe(r, n.props),
+      // @ts-ignore
+      ref: t ? q(t, o) : o
+    });
+  }
+  return c.Children.count(n) > 1 ? c.Children.only(null) : null;
+});
+F.displayName = "SlotClone";
+var Re = ({ children: e }) => /* @__PURE__ */ f(pe, { children: e });
+function ye(e) {
+  return c.isValidElement(e) && e.type === Re;
+}
+function Pe(e, t) {
+  const n = { ...t };
+  for (const r in t) {
+    const o = e[r], s = t[r];
+    /^on[A-Z]/.test(r) ? o && s ? n[r] = (...a) => {
+      s(...a), o(...a);
+    } : o && (n[r] = o) : r === "style" ? n[r] = { ...o, ...s } : r === "className" && (n[r] = [o, s].filter(Boolean).join(" "));
+  }
+  return { ...e, ...n };
+}
+function Ce(e) {
+  var r, o;
+  let t = (r = Object.getOwnPropertyDescriptor(e.props, "ref")) == null ? void 0 : r.get, n = t && "isReactWarning" in t && t.isReactWarning;
+  return n ? e.ref : (t = (o = Object.getOwnPropertyDescriptor(e, "ref")) == null ? void 0 : o.get, n = t && "isReactWarning" in t && t.isReactWarning, n ? e.props.ref : e.props.ref || e.ref);
+}
+var De = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "span",
+  "svg",
+  "ul"
+], I = De.reduce((e, t) => {
+  const n = c.forwardRef((r, o) => {
+    const { asChild: s, ...i } = r, a = s ? J : t;
+    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ f(a, { ...i, ref: o });
+  });
+  return n.displayName = `Primitive.${t}`, { ...e, [t]: n };
+}, {}), Q = ["PageUp", "PageDown"], ee = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], te = {
+  "from-left": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
+  "from-right": ["Home", "PageDown", "ArrowDown", "ArrowRight"],
+  "from-bottom": ["Home", "PageDown", "ArrowDown", "ArrowLeft"],
+  "from-top": ["Home", "PageDown", "ArrowUp", "ArrowLeft"]
+}, M = "Slider", [H, Ee, Ve] = _e(M), [ne, at] = we(M, [
+  Ve
+]), [Me, K] = ne(M), re = c.forwardRef(
+  (e, t) => {
+    const {
+      name: n,
+      min: r = 0,
+      max: o = 100,
+      step: s = 1,
+      orientation: i = "horizontal",
+      disabled: a = !1,
+      minStepsBetweenThumbs: u = 0,
+      defaultValue: m = [r],
+      value: b,
+      onValueChange: l = () => {
+      },
+      onValueCommit: d = () => {
+      },
+      inverted: p = !1,
+      form: _,
+      ...S
+    } = e, g = c.useRef(/* @__PURE__ */ new Set()), h = c.useRef(0), w = i === "horizontal" ? Te : Ne, [v = [], T] = Se({
+      prop: b,
+      defaultProp: m,
+      onChange: (x) => {
+        var D;
+        (D = [...g.current][h.current]) == null || D.focus(), l(x);
+      }
+    }), O = c.useRef(v);
+    function L(x) {
+      const R = Ke(v, x);
+      N(x, R);
+    }
+    function fe(x) {
+      N(x, h.current);
+    }
+    function me() {
+      const x = O.current[h.current];
+      v[h.current] !== x && d(v);
+    }
+    function N(x, R, { commit: D } = { commit: !1 }) {
+      const Y = ze(s), $ = Fe(Math.round((x - r) / s) * s + r, Y), A = Z($, [r, o]);
+      T((E = []) => {
+        const y = Be(E, A, R);
+        if ($e(y, u * s)) {
+          h.current = y.indexOf(A);
+          const X = String(y) !== String(E);
+          return X && D && d(y), X ? y : E;
+        } else
+          return E;
+      });
+    }
+    return /* @__PURE__ */ f(
+      Me,
+      {
+        scope: e.__scopeSlider,
+        name: n,
+        disabled: a,
+        min: r,
+        max: o,
+        valueIndexToChangeRef: h,
+        thumbs: g.current,
+        values: v,
+        orientation: i,
+        form: _,
+        children: /* @__PURE__ */ f(H.Provider, { scope: e.__scopeSlider, children: /* @__PURE__ */ f(H.Slot, { scope: e.__scopeSlider, children: /* @__PURE__ */ f(
+          w,
+          {
+            "aria-disabled": a,
+            "data-disabled": a ? "" : void 0,
+            ...S,
+            ref: t,
+            onPointerDown: V(S.onPointerDown, () => {
+              a || (O.current = v);
+            }),
+            min: r,
+            max: o,
+            inverted: p,
+            onSlideStart: a ? void 0 : L,
+            onSlideMove: a ? void 0 : fe,
+            onSlideEnd: a ? void 0 : me,
+            onHomeKeyDown: () => !a && N(r, 0, { commit: !0 }),
+            onEndKeyDown: () => !a && N(o, v.length - 1, { commit: !0 }),
+            onStepKeyDown: ({ event: x, direction: R }) => {
+              if (!a) {
+                const $ = Q.includes(x.key) || x.shiftKey && ee.includes(x.key) ? 10 : 1, A = h.current, E = v[A], y = s * $ * R;
+                N(E + y, A, { commit: !0 });
+              }
+            }
+          }
+        ) }) })
+      }
+    );
+  }
+);
+re.displayName = M;
+var [oe, ie] = ne(M, {
+  startEdge: "left",
+  endEdge: "right",
+  size: "width",
+  direction: 1
+}), Te = c.forwardRef(
+  (e, t) => {
+    const {
+      min: n,
+      max: r,
+      dir: o,
+      inverted: s,
+      onSlideStart: i,
+      onSlideMove: a,
+      onSlideEnd: u,
+      onStepKeyDown: m,
+      ...b
+    } = e, [l, d] = c.useState(null), p = k(t, (w) => d(w)), _ = c.useRef(void 0), S = he(o), g = S === "ltr", h = g && !s || !g && s;
+    function C(w) {
+      const v = _.current || l.getBoundingClientRect(), T = [0, v.width], L = U(T, h ? [n, r] : [r, n]);
+      return _.current = v, L(w - v.left);
+    }
+    return /* @__PURE__ */ f(
+      oe,
+      {
+        scope: e.__scopeSlider,
+        startEdge: h ? "left" : "right",
+        endEdge: h ? "right" : "left",
+        direction: h ? 1 : -1,
+        size: "width",
+        children: /* @__PURE__ */ f(
+          se,
+          {
+            dir: S,
+            "data-orientation": "horizontal",
+            ...b,
+            ref: p,
+            style: {
+              ...b.style,
+              "--radix-slider-thumb-transform": "translateX(-50%)"
+            },
+            onSlideStart: (w) => {
+              const v = C(w.clientX);
+              i == null || i(v);
+            },
+            onSlideMove: (w) => {
+              const v = C(w.clientX);
+              a == null || a(v);
+            },
+            onSlideEnd: () => {
+              _.current = void 0, u == null || u();
+            },
+            onStepKeyDown: (w) => {
+              const T = te[h ? "from-left" : "from-right"].includes(w.key);
+              m == null || m({ event: w, direction: T ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+), Ne = c.forwardRef(
+  (e, t) => {
+    const {
+      min: n,
+      max: r,
+      inverted: o,
+      onSlideStart: s,
+      onSlideMove: i,
+      onSlideEnd: a,
+      onStepKeyDown: u,
+      ...m
+    } = e, b = c.useRef(null), l = k(t, b), d = c.useRef(void 0), p = !o;
+    function _(S) {
+      const g = d.current || b.current.getBoundingClientRect(), h = [0, g.height], w = U(h, p ? [r, n] : [n, r]);
+      return d.current = g, w(S - g.top);
+    }
+    return /* @__PURE__ */ f(
+      oe,
+      {
+        scope: e.__scopeSlider,
+        startEdge: p ? "bottom" : "top",
+        endEdge: p ? "top" : "bottom",
+        size: "height",
+        direction: p ? 1 : -1,
+        children: /* @__PURE__ */ f(
+          se,
+          {
+            "data-orientation": "vertical",
+            ...m,
+            ref: l,
+            style: {
+              ...m.style,
+              "--radix-slider-thumb-transform": "translateY(50%)"
+            },
+            onSlideStart: (S) => {
+              const g = _(S.clientY);
+              s == null || s(g);
+            },
+            onSlideMove: (S) => {
+              const g = _(S.clientY);
+              i == null || i(g);
+            },
+            onSlideEnd: () => {
+              d.current = void 0, a == null || a();
+            },
+            onStepKeyDown: (S) => {
+              const h = te[p ? "from-bottom" : "from-top"].includes(S.key);
+              u == null || u({ event: S, direction: h ? -1 : 1 });
+            }
+          }
+        )
+      }
+    );
+  }
+), se = c.forwardRef(
+  (e, t) => {
+    const {
+      __scopeSlider: n,
+      onSlideStart: r,
+      onSlideMove: o,
+      onSlideEnd: s,
+      onHomeKeyDown: i,
+      onEndKeyDown: a,
+      onStepKeyDown: u,
+      ...m
+    } = e, b = K(M, n);
+    return /* @__PURE__ */ f(
+      I.span,
+      {
+        ...m,
+        ref: t,
+        onKeyDown: V(e.onKeyDown, (l) => {
+          l.key === "Home" ? (i(l), l.preventDefault()) : l.key === "End" ? (a(l), l.preventDefault()) : Q.concat(ee).includes(l.key) && (u(l), l.preventDefault());
+        }),
+        onPointerDown: V(e.onPointerDown, (l) => {
+          const d = l.target;
+          d.setPointerCapture(l.pointerId), l.preventDefault(), b.thumbs.has(d) ? d.focus() : r(l);
+        }),
+        onPointerMove: V(e.onPointerMove, (l) => {
+          l.target.hasPointerCapture(l.pointerId) && o(l);
+        }),
+        onPointerUp: V(e.onPointerUp, (l) => {
+          const d = l.target;
+          d.hasPointerCapture(l.pointerId) && (d.releasePointerCapture(l.pointerId), s(l));
+        })
+      }
+    );
+  }
+), ae = "SliderTrack", ce = c.forwardRef(
+  (e, t) => {
+    const { __scopeSlider: n, ...r } = e, o = K(ae, n);
+    return /* @__PURE__ */ f(
+      I.span,
+      {
+        "data-disabled": o.disabled ? "" : void 0,
+        "data-orientation": o.orientation,
+        ...r,
+        ref: t
+      }
+    );
+  }
+);
+ce.displayName = ae;
+var j = "SliderRange", le = c.forwardRef(
+  (e, t) => {
+    const { __scopeSlider: n, ...r } = e, o = K(j, n), s = ie(j, n), i = c.useRef(null), a = k(t, i), u = o.values.length, m = o.values.map(
+      (d) => de(d, o.min, o.max)
+    ), b = u > 1 ? Math.min(...m) : 0, l = 100 - Math.max(...m);
+    return /* @__PURE__ */ f(
+      I.span,
+      {
+        "data-orientation": o.orientation,
+        "data-disabled": o.disabled ? "" : void 0,
+        ...r,
+        ref: a,
+        style: {
+          ...e.style,
+          [s.startEdge]: b + "%",
+          [s.endEdge]: l + "%"
+        }
+      }
+    );
+  }
+);
+le.displayName = j;
+var W = "SliderThumb", ue = c.forwardRef(
+  (e, t) => {
+    const n = Ee(e.__scopeSlider), [r, o] = c.useState(null), s = k(t, (a) => o(a)), i = c.useMemo(
+      () => r ? n().findIndex((a) => a.ref.current === r) : -1,
+      [n, r]
+    );
+    return /* @__PURE__ */ f(Ae, { ...e, ref: s, index: i });
+  }
+), Ae = c.forwardRef(
+  (e, t) => {
+    const { __scopeSlider: n, index: r, name: o, ...s } = e, i = K(W, n), a = ie(W, n), [u, m] = c.useState(null), b = k(t, (C) => m(C)), l = u ? i.form || !!u.closest("form") : !0, d = ge(u), p = i.values[r], _ = p === void 0 ? 0 : de(p, i.min, i.max), S = Ie(r, i.values.length), g = d == null ? void 0 : d[a.size], h = g ? Oe(g, _, a.direction) : 0;
+    return c.useEffect(() => {
+      if (u)
+        return i.thumbs.add(u), () => {
+          i.thumbs.delete(u);
+        };
+    }, [u, i.thumbs]), /* @__PURE__ */ B(
+      "span",
+      {
+        style: {
+          transform: "var(--radix-slider-thumb-transform)",
+          position: "absolute",
+          [a.startEdge]: `calc(${_}% + ${h}px)`
+        },
+        children: [
+          /* @__PURE__ */ f(H.ItemSlot, { scope: e.__scopeSlider, children: /* @__PURE__ */ f(
+            I.span,
+            {
+              role: "slider",
+              "aria-label": e["aria-label"] || S,
+              "aria-valuemin": i.min,
+              "aria-valuenow": p,
+              "aria-valuemax": i.max,
+              "aria-orientation": i.orientation,
+              "data-orientation": i.orientation,
+              "data-disabled": i.disabled ? "" : void 0,
+              tabIndex: i.disabled ? void 0 : 0,
+              ...s,
+              ref: b,
+              style: p === void 0 ? { display: "none" } : e.style,
+              onFocus: V(e.onFocus, () => {
+                i.valueIndexToChangeRef.current = r;
+              })
+            }
+          ) }),
+          l && /* @__PURE__ */ f(
+            ke,
+            {
+              name: o ?? (i.name ? i.name + (i.values.length > 1 ? "[]" : "") : void 0),
+              form: i.form,
+              value: p
+            },
+            r
+          )
+        ]
+      }
+    );
+  }
+);
+ue.displayName = W;
+var ke = (e) => {
+  const { value: t, ...n } = e, r = c.useRef(null), o = be(t);
+  return c.useEffect(() => {
+    const s = r.current, i = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(i, "value").set;
+    if (o !== t && u) {
+      const m = new Event("input", { bubbles: !0 });
+      u.call(s, t), s.dispatchEvent(m);
+    }
+  }, [o, t]), /* @__PURE__ */ f("input", { style: { display: "none" }, ...n, ref: r, defaultValue: t });
+};
+function Be(e = [], t, n) {
+  const r = [...e];
+  return r[n] = t, r.sort((o, s) => o - s);
+}
+function de(e, t, n) {
+  const s = 100 / (n - t) * (e - t);
+  return Z(s, [0, 100]);
+}
+function Ie(e, t) {
+  return t > 2 ? `Value ${e + 1} of ${t}` : t === 2 ? ["Minimum", "Maximum"][e] : void 0;
+}
+function Ke(e, t) {
+  if (e.length === 1) return 0;
+  const n = e.map((o) => Math.abs(o - t)), r = Math.min(...n);
+  return n.indexOf(r);
+}
+function Oe(e, t, n) {
+  const r = e / 2, s = U([0, 50], [0, r]);
+  return (r - s(t) * n) * n;
+}
+function Le(e) {
+  return e.slice(0, -1).map((t, n) => e[n + 1] - t);
+}
+function $e(e, t) {
+  if (t > 0) {
+    const n = Le(e);
+    return Math.min(...n) >= t;
+  }
+  return !0;
+}
+function U(e, t) {
+  return (n) => {
+    if (e[0] === e[1] || t[0] === t[1]) return t[0];
+    const r = (t[1] - t[0]) / (e[1] - e[0]);
+    return t[0] + r * (n - e[0]);
+  };
+}
+function ze(e) {
+  return (String(e).split(".")[1] || "").length;
+}
+function Fe(e, t) {
+  const n = Math.pow(10, t);
+  return Math.round(e * n) / n;
+}
+var He = re, je = ce, We = le, Ue = ue;
+const Ye = "cfxui__Slider__sliderContainer__fac82", Xe = "cfxui__Slider__sliderLabels__f63f4", Ge = "cfxui__Slider__sliderRoot__032df", Ze = "cfxui__Slider__sliderTrack__b32a8", qe = "cfxui__Slider__sliderRange__a13a7", Je = "cfxui__Slider__sliderThumb__e8450", Qe = "cfxui__Slider__sliderValueBubble__086d6", P = {
+  sliderContainer: Ye,
+  sliderLabels: Xe,
+  sliderRoot: Ge,
+  sliderTrack: Ze,
+  sliderRange: qe,
+  sliderThumb: Je,
+  sliderValueBubble: Qe
+}, ct = function({
+  value: t,
+  defaultValue: n,
+  title: r,
+  ariaLabel: o,
+  className: s,
+  minLabel: i = 0,
+  maxLabel: a = 5e3,
+  onValueChange: u,
+  ...m
+}) {
+  const [b, l] = z.useState(() => {
+    if (t)
+      return t;
+    if (n)
+      return n;
+  }), d = z.useCallback((p) => {
+    u && u(p), l(p);
+  }, [u]);
+  return z.useEffect(() => {
+    t && l(t);
+  }, [t]), /* @__PURE__ */ B("div", { className: P.sliderContainer, children: [
+    /* @__PURE__ */ B(
+      He,
+      {
+        ...m,
+        className: ve(P.sliderRoot, s),
+        onValueChange: d,
+        children: [
+          /* @__PURE__ */ f(je, { className: P.sliderTrack, children: /* @__PURE__ */ f(We, { className: P.sliderRange }) }),
+          /* @__PURE__ */ f(Ue, { className: P.sliderThumb, "aria-label": o, children: /* @__PURE__ */ f("div", { className: P.sliderValueBubble, children: `${b} ${r}` }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ B("div", { className: P.sliderLabels, children: [
+      /* @__PURE__ */ f("span", { children: i }),
+      /* @__PURE__ */ f("span", { children: a })
+    ] })
+  ] });
+};
+export {
+  ct as Slider,
+  ct as default
+};

package/dist/components/Slider/SliderShowcase.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function SliderShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof SliderShowcase>;
+export default _default;