@cfx-dev/ui-components 3.0.4 → 4.0.0

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/components/ui.d.ts

@@ -16,10 +16,10 @@ export declare enum OffsetEnum {
 export type OffesetType = keyof typeof OffsetEnum;
 export declare enum MediaQueryEnum {
     initial = "initial",
-    xxsmall = "xxsmall",
-    xsmall = "xsmall",
     small = "small",
+    'small-medium' = "small-medium",
     medium = "medium",
+    'medium-large' = "medium-large",
     large = "large",
     xlarge = "xlarge"
 }

package/dist/components/ui.js

@@ -1,13 +1,13 @@
-var z = /* @__PURE__ */ ((t) => (t.none = "none", t.hairthin = "hairthin", t.thin = "thin", t.xxsmall = "xxsmall", t.xsmall = "xsmall", t.small = "small", t.normal = "normal", t.medium = "medium", t.large = "large", t.xlarge = "xlarge", t.safezone = "safezone", t))(z || {}), A = /* @__PURE__ */ ((t) => (t.initial = "initial", t.xxsmall = "xxsmall", t.xsmall = "xsmall", t.small = "small", t.medium = "medium", t.large = "large", t.xlarge = "xlarge", t))(A || {}), d;
+var z = /* @__PURE__ */ ((t) => (t.none = "none", t.hairthin = "hairthin", t.thin = "thin", t.xxsmall = "xxsmall", t.xsmall = "xsmall", t.small = "small", t.normal = "normal", t.medium = "medium", t.large = "large", t.xlarge = "xlarge", t.safezone = "safezone", t))(z || {}), A = /* @__PURE__ */ ((t) => (t.initial = "initial", t.small = "small", t["small-medium"] = "small-medium", t.medium = "medium", t["medium-large"] = "medium-large", t.large = "large", t.xlarge = "xlarge", t))(A || {}), d;
 ((t) => {
   function i(r = 1) {
     return `calc(var(--quant) * ${r})`;
   }
   t.q = i;
-  function s(r) {
+  function m(r) {
     return `var(--offset-${r})`;
   }
-  t.offset = s;
+  t.offset = m;
   function u(r = "normal") {
     return `var(--font-size-${r})`;
   }
@@ -25,20 +25,20 @@ var z = /* @__PURE__ */ ((t) => (t.none = "none", t.hairthin = "hairthin", t.thi
   })(t.cls || (t.cls = {})), t.pc = (r) => `${r}%`, t.px = (r) => `${r}px`, t.ch = (r) => `${r}ch`, t.em = (r) => `${r}em`, t.rem = (r) => `${r}rem`, t.vh = (r) => `${r}vh`, t.vw = (r) => `${r}vw`, t.url = (r) => `url(${r})`, t.getOffsetAttrs = (r, l) => typeof l == "string" || typeof l == "number" ? {
     [`data-${r}-initial`]: l.toString()
   } : Object.entries(l).reduce((n, [e, o]) => (n[`data-${r}-${e}`] = o.toString(), n), {}), t.getOffsetStyles = (r, l) => typeof l == "string" ? {
-    [`--${r}-initial`]: s(l)
+    [`--${r}-initial`]: m(l)
   } : typeof l == "number" ? {
     [`--${r}-initial`]: i(l)
-  } : Object.entries(l).reduce((n, [e, o]) => (n[`--${r}-${e}`] = typeof o == "number" ? i(o) : s(o), n), {});
-  function x(r, l) {
+  } : Object.entries(l).reduce((n, [e, o]) => (n[`--${r}-${e}`] = typeof o == "number" ? i(o) : m(o), n), {});
+  function s(r, l) {
     const {
       m: n,
       mt: e,
       mr: o,
       mb: f,
-      ml: $,
-      p: m,
+      ml: g,
+      p: $,
       pt: p,
-      pr: g,
+      pr: x,
       pb: a,
       pl: h
     } = r;
@@ -47,15 +47,15 @@ var z = /* @__PURE__ */ ((t) => (t.none = "none", t.hairthin = "hairthin", t.thi
       ...e ? l("mt", e) : null,
       ...o ? l("mr", o) : null,
       ...f ? l("mb", f) : null,
-      ...$ ? l("ml", $) : null,
-      ...m ? l("p", m) : null,
+      ...g ? l("ml", g) : null,
+      ...$ ? l("p", $) : null,
       ...p ? l("pt", p) : null,
-      ...g ? l("pr", g) : null,
+      ...x ? l("pr", x) : null,
       ...a ? l("pb", a) : null,
       ...h ? l("pl", h) : null
     };
   }
-  t.callAllMPProps = x, t.getAllMPStyles = (r) => x(r, t.getOffsetStyles), t.getAllMPAttrs = (r) => x(r, t.getOffsetAttrs);
+  t.callAllMPProps = s, t.getAllMPStyles = (r) => s(r, t.getOffsetStyles), t.getAllMPAttrs = (r) => s(r, t.getOffsetAttrs);
 })(d || (d = {}));
 export {
   A as MediaQueryEnum,

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
+};