@cfx-dev/ui-components 3.0.3 → 3.0.5

package/dist/components/Slider/SliderShowcase.js

@@ -0,0 +1,63 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import i from "react";
+import { Flex as l } from "../Layout/Flex/Flex.js";
+import { Text as r } from "../Text/Text.js";
+import { Slider as t } from "./Slider.js";
+function m() {
+  return /* @__PURE__ */ a(l, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ a(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Default Slider" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            marginTop: "40px",
+            marginLeft: "40px"
+          },
+          children: /* @__PURE__ */ e(
+            t,
+            {
+              defaultValue: [5],
+              max: 5e3,
+              step: 1,
+              ariaLabel: "Volume",
+              className: "",
+              minLabel: 0,
+              maxLabel: 5e3,
+              title: "Upvotes"
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ a(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(r, { children: "Custom Slider" }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          style: {
+            marginTop: "40px",
+            marginLeft: "40px"
+          },
+          children: /* @__PURE__ */ e(
+            t,
+            {
+              defaultValue: [10],
+              max: 200,
+              step: 5,
+              ariaLabel: "Custom Slider",
+              className: "custom-slider-class",
+              minLabel: 0,
+              maxLabel: 1e4,
+              title: "Upvotes"
+            }
+          )
+        }
+      )
+    ] })
+  ] });
+}
+const p = i.memo(m);
+export {
+  p as default
+};

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

@@ -0,0 +1 @@
+export { Slider } from './Slider';

package/dist/components/Slider/index.js

@@ -0,0 +1,4 @@
+import { Slider as o } from "./Slider.js";
+export {
+  o as Slider
+};

package/dist/components/Switch/Switch.js

@@ -1,96 +1,159 @@
-import { jsxs as N, jsx as i } from "react/jsx-runtime";
-import * as a from "react";
-import U from "react";
-import { c as B, u as H, a as I, P as C, b as M, d as j, e as q } from "../../index-CjWRnNpt.js";
+import { jsx as l, jsxs as $ } from "react/jsx-runtime";
+import * as u from "react";
+import g from "react";
+import { u as B, a as U, b as j } from "../../index-BCnz73Lm.js";
+import { P } from "../../index-BlbvKsmN.js";
 import { clsx as k } from "../../utils/clsx.js";
-var S = "Switch", [z, Y] = B(S), [A, O] = z(S), P = a.forwardRef(
+function I(t, o, { checkForDefaultPrevented: e = !0 } = {}) {
+  return function(c) {
+    if (t == null || t(c), e === !1 || !c.defaultPrevented)
+      return o == null ? void 0 : o(c);
+  };
+}
+function E(t, o) {
+  typeof t == "function" ? t(o) : t != null && (t.current = o);
+}
+function O(...t) {
+  return (o) => t.forEach((e) => E(e, o));
+}
+function q(...t) {
+  return u.useCallback(O(...t), t);
+}
+function z(t, o = []) {
+  let e = [];
+  function r(h, n) {
+    const s = u.createContext(n), i = e.length;
+    e = [...e, n];
+    function f(a) {
+      const { scope: p, children: b, ...d } = a, S = (p == null ? void 0 : p[t][i]) || s, m = u.useMemo(() => d, Object.values(d));
+      return /* @__PURE__ */ l(S.Provider, { value: m, children: b });
+    }
+    function w(a, p) {
+      const b = (p == null ? void 0 : p[t][i]) || s, d = u.useContext(b);
+      if (d) return d;
+      if (n !== void 0) return n;
+      throw new Error(`\`${a}\` must be used within \`${h}\``);
+    }
+    return f.displayName = h + "Provider", [f, w];
+  }
+  const c = () => {
+    const h = e.map((n) => u.createContext(n));
+    return function(s) {
+      const i = (s == null ? void 0 : s[t]) || h;
+      return u.useMemo(
+        () => ({ [`__scope${t}`]: { ...s, [t]: i } }),
+        [s, i]
+      );
+    };
+  };
+  return c.scopeName = t, [r, A(c, ...o)];
+}
+function A(...t) {
+  const o = t[0];
+  if (t.length === 1) return o;
+  const e = () => {
+    const r = t.map((c) => ({
+      useScope: c(),
+      scopeName: c.scopeName
+    }));
+    return function(h) {
+      const n = r.reduce((s, { useScope: i, scopeName: f }) => {
+        const a = i(h)[`__scope${f}`];
+        return { ...s, ...a };
+      }, {});
+      return u.useMemo(() => ({ [`__scope${o.scopeName}`]: n }), [n]);
+    };
+  };
+  return e.scopeName = o.scopeName, e;
+}
+var x = "Switch", [D, ot] = z(x), [F, L] = D(x), v = u.forwardRef(
   (t, o) => {
     const {
       __scopeSwitch: e,
-      name: c,
-      checked: s,
-      defaultChecked: d,
-      required: u,
-      disabled: r,
-      value: h = "on",
+      name: r,
+      checked: c,
+      defaultChecked: h,
+      required: n,
+      disabled: s,
+      value: i = "on",
       onCheckedChange: f,
-      ..._
-    } = t, [n, m] = a.useState(null), T = H(o, (p) => m(p)), w = a.useRef(!1), v = n ? !!n.closest("form") : !0, [l = !1, g] = I({
-      prop: s,
-      defaultProp: d,
+      ...w
+    } = t, [a, p] = u.useState(null), b = q(o, (_) => p(_)), d = u.useRef(!1), S = a ? !!a.closest("form") : !0, [m = !1, N] = B({
+      prop: c,
+      defaultProp: h,
       onChange: f
     });
-    return /* @__PURE__ */ N(A, { scope: e, checked: l, disabled: r, children: [
-      /* @__PURE__ */ i(
-        C.button,
+    return /* @__PURE__ */ $(F, { scope: e, checked: m, disabled: s, children: [
+      /* @__PURE__ */ l(
+        P.button,
         {
           type: "button",
           role: "switch",
-          "aria-checked": l,
-          "aria-required": u,
-          "data-state": y(l),
-          "data-disabled": r ? "" : void 0,
-          disabled: r,
-          value: h,
-          ..._,
-          ref: T,
-          onClick: M(t.onClick, (p) => {
-            g((E) => !E), v && (w.current = p.isPropagationStopped(), w.current || p.stopPropagation());
+          "aria-checked": m,
+          "aria-required": n,
+          "data-state": T(m),
+          "data-disabled": s ? "" : void 0,
+          disabled: s,
+          value: i,
+          ...w,
+          ref: b,
+          onClick: I(t.onClick, (_) => {
+            N((M) => !M), S && (d.current = _.isPropagationStopped(), d.current || _.stopPropagation());
           })
         }
       ),
-      v && /* @__PURE__ */ i(
-        $,
+      S && /* @__PURE__ */ l(
+        W,
         {
-          control: n,
-          bubbles: !w.current,
-          name: c,
-          value: h,
-          checked: l,
-          required: u,
-          disabled: r,
+          control: a,
+          bubbles: !d.current,
+          name: r,
+          value: i,
+          checked: m,
+          required: n,
+          disabled: s,
           style: { transform: "translateX(-100%)" }
         }
       )
     ] });
   }
 );
-P.displayName = S;
-var R = "SwitchThumb", x = a.forwardRef(
+v.displayName = x;
+var R = "SwitchThumb", y = u.forwardRef(
   (t, o) => {
-    const { __scopeSwitch: e, ...c } = t, s = O(R, e);
-    return /* @__PURE__ */ i(
-      C.span,
+    const { __scopeSwitch: e, ...r } = t, c = L(R, e);
+    return /* @__PURE__ */ l(
+      P.span,
       {
-        "data-state": y(s.checked),
-        "data-disabled": s.disabled ? "" : void 0,
-        ...c,
+        "data-state": T(c.checked),
+        "data-disabled": c.disabled ? "" : void 0,
+        ...r,
         ref: o
       }
     );
   }
 );
-x.displayName = R;
-var $ = (t) => {
-  const { control: o, checked: e, bubbles: c = !0, ...s } = t, d = a.useRef(null), u = j(e), r = q(o);
-  return a.useEffect(() => {
-    const h = d.current, f = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(f, "checked").set;
-    if (u !== e && n) {
-      const m = new Event("click", { bubbles: c });
-      n.call(h, e), h.dispatchEvent(m);
+y.displayName = R;
+var W = (t) => {
+  const { control: o, checked: e, bubbles: r = !0, ...c } = t, h = u.useRef(null), n = U(e), s = j(o);
+  return u.useEffect(() => {
+    const i = h.current, f = window.HTMLInputElement.prototype, a = Object.getOwnPropertyDescriptor(f, "checked").set;
+    if (n !== e && a) {
+      const p = new Event("click", { bubbles: r });
+      a.call(i, e), i.dispatchEvent(p);
     }
-  }, [u, e, c]), /* @__PURE__ */ i(
+  }, [n, e, r]), /* @__PURE__ */ l(
     "input",
     {
       type: "checkbox",
       "aria-hidden": !0,
       defaultChecked: e,
-      ...s,
+      ...c,
       tabIndex: -1,
-      ref: d,
+      ref: h,
       style: {
         ...t.style,
-        ...r,
+        ...s,
         position: "absolute",
         pointerEvents: "none",
         opacity: 0,
@@ -99,24 +162,24 @@ var $ = (t) => {
     }
   );
 };
-function y(t) {
+function T(t) {
   return t ? "checked" : "unchecked";
 }
-var D = P, F = x;
-const L = "cfxui__Switch__switchUnset__c8b03", W = "cfxui__Switch__switchRoot__f2911", X = "cfxui__Switch__switchThumb__9cbf5", b = {
-  switchUnset: L,
-  switchRoot: W,
-  switchThumb: X
+var X = v, G = y;
+const J = "cfxui__Switch__switchUnset__c8b03", K = "cfxui__Switch__switchRoot__f2911", Q = "cfxui__Switch__switchThumb__9cbf5", C = {
+  switchUnset: J,
+  switchRoot: K,
+  switchThumb: Q
 };
-function G(t) {
+function V(t) {
   const {
     classNameRoot: o,
     classNameThumb: e,
-    ...c
+    ...r
   } = t;
-  return /* @__PURE__ */ i(D, { ...c, className: k(b.switchRoot, b.switchUnset, o), children: /* @__PURE__ */ i(F, { className: k(b.switchThumb, e) }) });
+  return /* @__PURE__ */ l(X, { ...r, className: k(C.switchRoot, C.switchUnset, o), children: /* @__PURE__ */ l(G, { className: k(C.switchThumb, e) }) });
 }
-const Z = U.memo(G);
+const ct = g.memo(V);
 export {
-  Z as default
+  ct as default
 };

package/dist/index-BCnz73Lm.js

@@ -0,0 +1,72 @@
+import * as s from "react";
+function l(e) {
+  const t = s.useRef(e);
+  return s.useEffect(() => {
+    t.current = e;
+  }), s.useMemo(() => (...o) => {
+    var r;
+    return (r = t.current) == null ? void 0 : r.call(t, ...o);
+  }, []);
+}
+function S({
+  prop: e,
+  defaultProp: t,
+  onChange: o = () => {
+  }
+}) {
+  const [r, n] = b({ defaultProp: t, onChange: o }), u = e !== void 0, f = u ? e : r, c = l(o), a = s.useCallback(
+    (i) => {
+      if (u) {
+        const d = typeof i == "function" ? i(e) : i;
+        d !== e && c(d);
+      } else
+        n(i);
+    },
+    [u, e, n, c]
+  );
+  return [f, a];
+}
+function b({
+  defaultProp: e,
+  onChange: t
+}) {
+  const o = s.useState(e), [r] = o, n = s.useRef(r), u = l(t);
+  return s.useEffect(() => {
+    n.current !== r && (u(r), n.current = r);
+  }, [r, n, u]), o;
+}
+function z(e) {
+  const t = s.useRef({ value: e, previous: e });
+  return s.useMemo(() => (t.current.value !== e && (t.current.previous = t.current.value, t.current.value = e), t.current.previous), [e]);
+}
+var h = globalThis != null && globalThis.document ? s.useLayoutEffect : () => {
+};
+function y(e) {
+  const [t, o] = s.useState(void 0);
+  return h(() => {
+    if (e) {
+      o({ width: e.offsetWidth, height: e.offsetHeight });
+      const r = new ResizeObserver((n) => {
+        if (!Array.isArray(n) || !n.length)
+          return;
+        const u = n[0];
+        let f, c;
+        if ("borderBoxSize" in u) {
+          const a = u.borderBoxSize, i = Array.isArray(a) ? a[0] : a;
+          f = i.inlineSize, c = i.blockSize;
+        } else
+          f = e.offsetWidth, c = e.offsetHeight;
+        o({ width: f, height: c });
+      });
+      return r.observe(e, { box: "border-box" }), () => r.unobserve(e);
+    } else
+      o(void 0);
+  }, [e]), t;
+}
+export {
+  z as a,
+  y as b,
+  h as c,
+  l as d,
+  S as u
+};

package/dist/index-BW3WdIgK.js

@@ -0,0 +1,14 @@
+import * as r from "react";
+import "react/jsx-runtime";
+function i(t, [o, e]) {
+  return Math.min(e, Math.max(o, t));
+}
+var n = r.createContext(void 0);
+function c(t) {
+  const o = r.useContext(n);
+  return t || o || "ltr";
+}
+export {
+  i as c,
+  c as u
+};

package/dist/index-BlbvKsmN.js

@@ -0,0 +1,82 @@
+import * as o from "react";
+import { r as d } from "./index-2hJuj4UN.js";
+import { jsx as c, Fragment as m } from "react/jsx-runtime";
+function h(r, e) {
+  typeof r == "function" ? r(e) : r != null && (r.current = e);
+}
+function y(...r) {
+  return (e) => r.forEach((n) => h(n, e));
+}
+var u = o.forwardRef((r, e) => {
+  const { children: n, ...t } = r, i = o.Children.toArray(n), l = i.find(E);
+  if (l) {
+    const s = l.props.children, a = i.map((p) => p === l ? o.Children.count(s) > 1 ? o.Children.only(null) : o.isValidElement(s) ? s.props.children : null : p);
+    return /* @__PURE__ */ c(f, { ...t, ref: e, children: o.isValidElement(s) ? o.cloneElement(s, void 0, a) : null });
+  }
+  return /* @__PURE__ */ c(f, { ...t, ref: e, children: n });
+});
+u.displayName = "Slot";
+var f = o.forwardRef((r, e) => {
+  const { children: n, ...t } = r;
+  if (o.isValidElement(n)) {
+    const i = C(n);
+    return o.cloneElement(n, {
+      ...g(t, n.props),
+      // @ts-ignore
+      ref: e ? y(e, i) : i
+    });
+  }
+  return o.Children.count(n) > 1 ? o.Children.only(null) : null;
+});
+f.displayName = "SlotClone";
+var v = ({ children: r }) => /* @__PURE__ */ c(m, { children: r });
+function E(r) {
+  return o.isValidElement(r) && r.type === v;
+}
+function g(r, e) {
+  const n = { ...e };
+  for (const t in e) {
+    const i = r[t], l = e[t];
+    /^on[A-Z]/.test(t) ? i && l ? n[t] = (...a) => {
+      l(...a), i(...a);
+    } : i && (n[t] = i) : t === "style" ? n[t] = { ...i, ...l } : t === "className" && (n[t] = [i, l].filter(Boolean).join(" "));
+  }
+  return { ...r, ...n };
+}
+function C(r) {
+  var t, i;
+  let e = (t = Object.getOwnPropertyDescriptor(r.props, "ref")) == null ? void 0 : t.get, n = e && "isReactWarning" in e && e.isReactWarning;
+  return n ? r.ref : (e = (i = Object.getOwnPropertyDescriptor(r, "ref")) == null ? void 0 : i.get, n = e && "isReactWarning" in e && e.isReactWarning, n ? r.props.ref : r.props.ref || r.ref);
+}
+var R = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "span",
+  "svg",
+  "ul"
+], P = R.reduce((r, e) => {
+  const n = o.forwardRef((t, i) => {
+    const { asChild: l, ...s } = t, a = l ? u : e;
+    return typeof window < "u" && (window[Symbol.for("radix-ui")] = !0), /* @__PURE__ */ c(a, { ...s, ref: i });
+  });
+  return n.displayName = `Primitive.${e}`, { ...r, [e]: n };
+}, {});
+function b(r, e) {
+  r && d.flushSync(() => r.dispatchEvent(e));
+}
+export {
+  P,
+  u as S,
+  b as d
+};

package/dist/index-CjTSD6zB.js

@@ -0,0 +1,161 @@
+import * as s from "react";
+import y from "react";
+import { jsx as h, Fragment as O } from "react/jsx-runtime";
+function w(e, t = []) {
+  let n = [];
+  function r(c, l) {
+    const i = s.createContext(l), a = n.length;
+    n = [...n, l];
+    const S = (R) => {
+      var d;
+      const { scope: C, children: f, ...u } = R, p = ((d = C == null ? void 0 : C[e]) == null ? void 0 : d[a]) || i, m = s.useMemo(() => u, Object.values(u));
+      return /* @__PURE__ */ h(p.Provider, { value: m, children: f });
+    };
+    S.displayName = c + "Provider";
+    function v(R, C) {
+      var p;
+      const f = ((p = C == null ? void 0 : C[e]) == null ? void 0 : p[a]) || i, u = s.useContext(f);
+      if (u) return u;
+      if (l !== void 0) return l;
+      throw new Error(`\`${R}\` must be used within \`${c}\``);
+    }
+    return [S, v];
+  }
+  const o = () => {
+    const c = n.map((l) => s.createContext(l));
+    return function(i) {
+      const a = (i == null ? void 0 : i[e]) || c;
+      return s.useMemo(
+        () => ({ [`__scope${e}`]: { ...i, [e]: a } }),
+        [i, a]
+      );
+    };
+  };
+  return o.scopeName = e, [r, b(o, ...t)];
+}
+function b(...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(c) {
+      const l = r.reduce((i, { useScope: a, scopeName: S }) => {
+        const R = a(c)[`__scope${S}`];
+        return { ...i, ...R };
+      }, {});
+      return s.useMemo(() => ({ [`__scope${t.scopeName}`]: l }), [l]);
+    };
+  };
+  return n.scopeName = t.scopeName, n;
+}
+function _(e, t) {
+  if (typeof e == "function")
+    return e(t);
+  e != null && (e.current = t);
+}
+function A(...e) {
+  return (t) => {
+    let n = !1;
+    const r = e.map((o) => {
+      const c = _(o, t);
+      return !n && typeof c == "function" && (n = !0), c;
+    });
+    if (n)
+      return () => {
+        for (let o = 0; o < r.length; o++) {
+          const c = r[o];
+          typeof c == "function" ? c() : _(e[o], null);
+        }
+      };
+  };
+}
+function N(...e) {
+  return s.useCallback(A(...e), e);
+}
+var g = s.forwardRef((e, t) => {
+  const { children: n, ...r } = e, o = s.Children.toArray(n), c = o.find(V);
+  if (c) {
+    const l = c.props.children, i = o.map((a) => a === c ? s.Children.count(l) > 1 ? s.Children.only(null) : s.isValidElement(l) ? l.props.children : null : a);
+    return /* @__PURE__ */ h(M, { ...r, ref: t, children: s.isValidElement(l) ? s.cloneElement(l, void 0, i) : null });
+  }
+  return /* @__PURE__ */ h(M, { ...r, ref: t, children: n });
+});
+g.displayName = "Slot";
+var M = s.forwardRef((e, t) => {
+  const { children: n, ...r } = e;
+  if (s.isValidElement(n)) {
+    const o = j(n);
+    return s.cloneElement(n, {
+      ...$(r, n.props),
+      // @ts-ignore
+      ref: t ? A(t, o) : o
+    });
+  }
+  return s.Children.count(n) > 1 ? s.Children.only(null) : null;
+});
+M.displayName = "SlotClone";
+var T = ({ children: e }) => /* @__PURE__ */ h(O, { children: e });
+function V(e) {
+  return s.isValidElement(e) && e.type === T;
+}
+function $(e, t) {
+  const n = { ...t };
+  for (const r in t) {
+    const o = e[r], c = t[r];
+    /^on[A-Z]/.test(r) ? o && c ? n[r] = (...i) => {
+      c(...i), o(...i);
+    } : o && (n[r] = o) : r === "style" ? n[r] = { ...o, ...c } : r === "className" && (n[r] = [o, c].filter(Boolean).join(" "));
+  }
+  return { ...e, ...n };
+}
+function j(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);
+}
+function L(e) {
+  const t = e + "CollectionProvider", [n, r] = w(t), [o, c] = n(
+    t,
+    { collectionRef: { current: null }, itemMap: /* @__PURE__ */ new Map() }
+  ), l = (f) => {
+    const { scope: u, children: p } = f, m = y.useRef(null), d = y.useRef(/* @__PURE__ */ new Map()).current;
+    return /* @__PURE__ */ h(o, { scope: u, itemMap: d, collectionRef: m, children: p });
+  };
+  l.displayName = t;
+  const i = e + "CollectionSlot", a = y.forwardRef(
+    (f, u) => {
+      const { scope: p, children: m } = f, d = c(i, p), x = N(u, d.collectionRef);
+      return /* @__PURE__ */ h(g, { ref: x, children: m });
+    }
+  );
+  a.displayName = i;
+  const S = e + "CollectionItemSlot", v = "data-radix-collection-item", R = y.forwardRef(
+    (f, u) => {
+      const { scope: p, children: m, ...d } = f, x = y.useRef(null), P = N(u, x), E = c(S, p);
+      return y.useEffect(() => (E.itemMap.set(x, { ref: x, ...d }), () => void E.itemMap.delete(x))), /* @__PURE__ */ h(g, { [v]: "", ref: P, children: m });
+    }
+  );
+  R.displayName = S;
+  function C(f) {
+    const u = c(e + "CollectionConsumer", f);
+    return y.useCallback(() => {
+      const m = u.collectionRef.current;
+      if (!m) return [];
+      const d = Array.from(m.querySelectorAll(`[${v}]`));
+      return Array.from(u.itemMap.values()).sort(
+        (E, I) => d.indexOf(E.ref.current) - d.indexOf(I.ref.current)
+      );
+    }, [u.collectionRef, u.itemMap]);
+  }
+  return [
+    { Provider: l, Slot: a, ItemSlot: R },
+    C,
+    r
+  ];
+}
+export {
+  L as c
+};

package/dist/main.d.ts

@@ -54,8 +54,10 @@ export { PremiumBadge } from './components/PremiumBadge/PremiumBadge';
 export { Prose } from './components/Prose/Prose';
 export { Radio } from './components/Radio/Radio';
 export { Select } from './components/Select';
+export { DropdownSelect } from './components/DropdownSelect';
 export { Separator } from './components/Separator/Separator';
 export { Shroud } from './components/Shroud/Shroud';
+export { Slider } from './components/Slider/Slider';
 export { Spacer } from './components/Spacer/Spacer';
 export { Style, useContextualStyle } from './components/Style/Style';
 export { Switch } from './components/Switch';