@cfx-dev/ui-components 3.0.2 → 3.0.4

package/dist/components/Icons/cfxIcons.js

@@ -1,24 +1,24 @@
 import { default as o } from "./cfx-icons/Close.js";
-import { default as t } from "./cfx-icons/Controller.js";
+import { default as a } from "./cfx-icons/Controller.js";
 import { default as l } from "./cfx-icons/Copy.js";
 import { default as p } from "./cfx-icons/DownArrow.js";
-import { default as u } from "./cfx-icons/DownChevron.js";
+import { default as d } from "./cfx-icons/DownChevron.js";
 import { default as m } from "./cfx-icons/Download.js";
 import { default as i } from "./cfx-icons/Expand.js";
 import { default as C } from "./cfx-icons/ExternalLink.js";
-import { default as M } from "./cfx-icons/Heart.js";
-import { default as U } from "./cfx-icons/HeartFilled.js";
-import { default as v } from "./cfx-icons/Help.js";
-import { default as A } from "./cfx-icons/LeftArrow.js";
-import { default as k } from "./cfx-icons/LeftChevron.js";
-import { default as H } from "./cfx-icons/Map.js";
-import { default as P } from "./cfx-icons/Menu.js";
+import { default as w } from "./cfx-icons/Heart.js";
+import { default as c } from "./cfx-icons/HeartFilled.js";
+import { default as S } from "./cfx-icons/Help.js";
+import { default as y } from "./cfx-icons/LeftArrow.js";
+import { default as R } from "./cfx-icons/LeftChevron.js";
+import { default as D } from "./cfx-icons/Map.js";
+import { default as L } from "./cfx-icons/Menu.js";
 import { default as T } from "./cfx-icons/Minus.js";
-import { default as q } from "./cfx-icons/More.js";
-import { default as V } from "./cfx-icons/MoreInfo.js";
-import { default as I } from "./cfx-icons/Pencil.js";
-import { default as W } from "./cfx-icons/Play.js";
-import { default as z } from "./cfx-icons/Plus.js";
+import { default as b } from "./cfx-icons/More.js";
+import { default as E } from "./cfx-icons/MoreInfo.js";
+import { default as F } from "./cfx-icons/Pencil.js";
+import { default as O } from "./cfx-icons/Play.js";
+import { default as j } from "./cfx-icons/Plus.js";
 import { default as G } from "./cfx-icons/Refresh.js";
 import { default as K } from "./cfx-icons/RightArrow.js";
 import { default as Q } from "./cfx-icons/RightChevron.js";
@@ -26,40 +26,46 @@ import { default as Y } from "./cfx-icons/Search.js";
 import { default as _ } from "./cfx-icons/Sort.js";
 import { default as rr } from "./cfx-icons/Square.js";
 import { default as or } from "./cfx-icons/SquareCheck.js";
-import { default as tr } from "./cfx-icons/Stop.js";
+import { default as ar } from "./cfx-icons/Stop.js";
 import { default as lr } from "./cfx-icons/Tick.js";
 import { default as pr } from "./cfx-icons/Transfer.js";
-import { default as ur } from "./cfx-icons/Trash.js";
+import { default as dr } from "./cfx-icons/Trash.js";
 import { default as mr } from "./cfx-icons/Undo.js";
 import { default as ir } from "./cfx-icons/UpArrow.js";
 import { default as Cr } from "./cfx-icons/UpChevron.js";
-import { default as Mr } from "./cfx-icons/Upload.js";
-import { default as Ur } from "./cfx-icons/Users.js";
-import { default as vr } from "./cfx-icons/Visibility.js";
-import { default as Ar } from "./cfx-icons/VisibilityOff.js";
-import { default as kr } from "./cfx-icons/Warning.js";
+import { default as wr } from "./cfx-icons/Upload.js";
+import { default as cr } from "./cfx-icons/Users.js";
+import { default as Sr } from "./cfx-icons/Visibility.js";
+import { default as yr } from "./cfx-icons/VisibilityOff.js";
+import { default as Rr } from "./cfx-icons/Warning.js";
+import { default as Dr } from "./cfx-icons/Cart.js";
+import { default as Lr } from "./cfx-icons/User.js";
+import { default as Tr } from "./cfx-icons/Verified.js";
+import { default as br } from "./cfx-icons/UpvotesBurst.js";
+import { default as Er } from "./cfx-icons/UpvotesRecurring.js";
 export {
+  Dr as Cart,
   o as Close,
-  t as Controller,
+  a as Controller,
   l as Copy,
   p as DownArrow,
-  u as DownChevron,
+  d as DownChevron,
   m as Download,
   i as Expand,
   C as ExternalLink,
-  M as Heart,
-  U as HeartFilled,
-  v as Help,
-  A as LeftArrow,
-  k as LeftChevron,
-  H as Map,
-  P as Menu,
+  w as Heart,
+  c as HeartFilled,
+  S as Help,
+  y as LeftArrow,
+  R as LeftChevron,
+  D as Map,
+  L as Menu,
   T as Minus,
-  q as More,
-  V as MoreInfo,
-  I as Pencil,
-  W as Play,
-  z as Plus,
+  b as More,
+  E as MoreInfo,
+  F as Pencil,
+  O as Play,
+  j as Plus,
   G as Refresh,
   K as RightArrow,
   Q as RightChevron,
@@ -67,16 +73,20 @@ export {
   _ as Sort,
   rr as Square,
   or as SquareCheck,
-  tr as Stop,
+  ar as Stop,
   lr as Tick,
   pr as Transfer,
-  ur as Trash,
+  dr as Trash,
   mr as Undo,
   ir as UpArrow,
   Cr as UpChevron,
-  Mr as Upload,
-  Ur as Users,
-  vr as Visibility,
-  Ar as VisibilityOff,
-  kr as Warning
+  wr as Upload,
+  br as UpvotesBurst,
+  Er as UpvotesRecurring,
+  Lr as User,
+  cr as Users,
+  Tr as Verified,
+  Sr as Visibility,
+  yr as VisibilityOff,
+  Rr as Warning
 };

package/dist/components/Icons/index.js

@@ -1,4 +1,4 @@
-import { I as s } from "../../cfxIcons-BlbKR-zU.js";
+import { I as s } from "../../cfxIcons-BNd1WgpX.js";
 import { I as a } from "../../cfxIconsBig-BLJjMT-Y.js";
 export {
   s as Icons,

package/dist/components/Indicator/Indicator.js

@@ -1,19 +1,19 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import i from "react";
-import { clsx as a } from "../../utils/clsx.js";
-const s = "_root_2gp9n_1", e = "_indicator_2gp9n_1", r = {
-  root: s,
-  indicator: e
-}, c = { animationDelay: "0ms" }, m = { animationDelay: "50ms" }, d = { animationDelay: "100ms" }, l = { animationDelay: "150ms" }, v = i.memo(function({
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
+import a from "react";
+import { clsx as n } from "../../utils/clsx.js";
+const c = "cfxui__Indicator__root__71ac4", s = "cfxui__Indicator__indicator__9d908", r = {
+  root: c,
+  indicator: s
+}, d = { animationDelay: "0ms" }, e = { animationDelay: "50ms" }, m = { animationDelay: "100ms" }, l = { animationDelay: "150ms" }, u = a.memo(function({
   className: t
 }) {
-  return /* @__PURE__ */ n("div", { className: a(r.root, t), children: [
-    /* @__PURE__ */ o("div", { style: c }),
-    /* @__PURE__ */ o("div", { style: m }),
+  return /* @__PURE__ */ i("div", { className: n(r.root, t), children: [
     /* @__PURE__ */ o("div", { style: d }),
+    /* @__PURE__ */ o("div", { style: e }),
+    /* @__PURE__ */ o("div", { style: m }),
     /* @__PURE__ */ o("div", { style: l })
   ] });
 });
 export {
-  v as Indicator
+  u as Indicator
 };

package/dist/components/InfoPanel/InfoPanel.js

@@ -1,56 +1,56 @@
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
 import u from "react";
-import { Icon as r } from "../Icon/Icon.js";
-import { clsx as v } from "../../utils/clsx.js";
-const y = "_rootUnset_5rtl4_1", f = "_root_5rtl4_1", x = "_interactive_5rtl4_19", z = "_interactiveIcon_5rtl4_22", d = "_icon_5rtl4_70", I = "_content_5rtl4_74", t = {
-  rootUnset: y,
-  root: f,
-  interactive: x,
-  interactiveIcon: z,
-  "type-neutral": "_type-neutral_5rtl4_34",
-  "type-error": "_type-error_5rtl4_41",
-  "type-success": "_type-success_5rtl4_48",
-  "type-warning": "_type-warning_5rtl4_55",
-  "size-small": "_size-small_5rtl4_62",
-  "size-large": "_size-large_5rtl4_66",
-  icon: d,
-  content: I
+import { Icon as _ } from "../Icon/Icon.js";
+import { clsx as x } from "../../utils/clsx.js";
+const I = "cfxui__InfoPanel__rootUnset__7ca3f", p = "cfxui__InfoPanel__root__a19ad", P = "cfxui__InfoPanel__interactive__1b051", v = "cfxui__InfoPanel__interactiveIcon__03510", y = "cfxui__InfoPanel__icon__b2fca", d = "cfxui__InfoPanel__content__43082", n = {
+  rootUnset: I,
+  root: p,
+  interactive: P,
+  interactiveIcon: v,
+  "type-neutral": "cfxui__InfoPanel__type-neutral__c4653",
+  "type-error": "cfxui__InfoPanel__type-error__bdfbf",
+  "type-success": "cfxui__InfoPanel__type-success__e3f02",
+  "type-warning": "cfxui__InfoPanel__type-warning__053e4",
+  "size-small": "cfxui__InfoPanel__size-small__815a3",
+  "size-large": "cfxui__InfoPanel__size-large__20a20",
+  icon: y,
+  content: d
 };
-function N(s) {
+function b(a) {
   const {
     type: c = "neutral",
-    size: a = "normal",
-    className: i,
+    size: i = "normal",
+    className: s,
     onClick: e,
-    ariaLabel: l,
-    icon: n,
-    children: _
-  } = s, m = v(
-    t.rootUnset,
-    t.root,
-    i,
-    t[`type-${c}`],
-    t[`size-${a}`],
+    ariaLabel: r,
+    icon: t,
+    children: l
+  } = a, f = x(
+    n.rootUnset,
+    n.root,
+    s,
+    n[`type-${c}`],
+    n[`size-${i}`],
     {
-      [t.interactive]: !!e
+      [n.interactive]: !!e
     }
   );
-  return /* @__PURE__ */ p(
+  return /* @__PURE__ */ m(
     e ? "button" : "div",
     {
       type: e ? "button" : void 0,
-      className: m,
+      className: f,
       onClick: e,
-      "aria-label": l,
+      "aria-label": r,
       children: [
-        n && /* @__PURE__ */ o(r, { size: "xxsmall", name: n, className: t.icon }),
-        /* @__PURE__ */ o("div", { className: t.content, children: _ }),
-        e && /* @__PURE__ */ o(r, { size: "xxsmall", name: "LeftArrow", className: t.interactiveIcon })
+        t && /* @__PURE__ */ o(_, { size: "xxsmall", name: t, className: n.icon }),
+        /* @__PURE__ */ o("div", { className: n.content, children: l }),
+        e && /* @__PURE__ */ o(_, { size: "xxsmall", name: "LeftArrow", className: n.interactiveIcon })
       ]
     }
   );
 }
-const R = u.memo(N);
+const w = u.memo(b);
 export {
-  R as default
+  w as default
 };

package/dist/components/Input/Input.js

@@ -1,110 +1,110 @@
-import { jsxs as G, jsx as t } from "react/jsx-runtime";
-import r from "react";
+import { jsxs as G, jsx as o } from "react/jsx-runtime";
+import l from "react";
 import { Icon as T } from "../Icon/Icon.js";
 import W from "../IconButton/IconButton.js";
 import { Indicator as X } from "../Indicator/Indicator.js";
 import { clsx as $ } from "../../utils/clsx.js";
 import { getValue as q } from "../../utils/getValue.js";
-const H = "_root_e1sis_1", J = "_input_e1sis_1", L = "_small_e1sis_5", O = "_large_e1sis_9", P = "_placeholderIcon_e1sis_72", Q = "_empty_e1sis_164", U = "_decorator_e1sis_169", Y = "_onlight_e1sis_186", e = {
+const H = "cfxui__Input__root__6392b", J = "cfxui__Input__input__07830", L = "cfxui__Input__small__c1513", O = "cfxui__Input__large__92d72", P = "cfxui__Input__placeholderIcon__4d079", Q = "cfxui__Input__empty__3b36a", U = "cfxui__Input__decorator__3b81f", Y = "cfxui__Input__onlight__7d0b7", e = {
   root: H,
   input: J,
   small: L,
   large: O,
   placeholderIcon: P,
-  "full-width": "_full-width_e1sis_158",
+  "full-width": "cfxui__Input__full-width__587b3",
   empty: Q,
   decorator: U,
   onlight: Y,
-  "backdrop-blur": "_backdrop-blur_e1sis_240"
+  "backdrop-blur": "cfxui__Input__backdrop-blur__6922f"
 };
-function Z(I) {
+function Z(b) {
   const {
-    decorator: o,
-    loading: i,
-    type: u,
-    hasValue: d,
-    onCleare: a
-  } = I;
-  return i ? /* @__PURE__ */ t("div", { className: e.decorator, children: /* @__PURE__ */ t(X, {}) }) : o ? /* @__PURE__ */ t("div", { className: e.decorator, children: q(o) }) : u === "search" && d ? /* @__PURE__ */ t("div", { className: e.decorator, children: /* @__PURE__ */ t(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: a }) }) : null;
+    decorator: t,
+    loading: s,
+    type: i,
+    hasValue: _,
+    onCleare: n
+  } = b;
+  return s ? /* @__PURE__ */ o("div", { className: e.decorator, children: /* @__PURE__ */ o(X, {}) }) : t ? /* @__PURE__ */ o("div", { className: e.decorator, children: q(t) }) : i === "search" && _ ? /* @__PURE__ */ o("div", { className: e.decorator, children: /* @__PURE__ */ o(W, { size: "xsmall", areaSize: "large", name: "Close", onClick: n }) }) : null;
 }
-const se = r.forwardRef(function(o, i) {
+const ce = l.forwardRef(function(t, s) {
   const {
-    id: u,
-    fullWidth: d = !1,
-    value: a,
-    onChange: m,
+    id: i,
+    fullWidth: _ = !1,
+    value: n,
+    onChange: d,
     onSubmit: f,
-    onKeyDown: _,
+    onKeyDown: m,
     pattern: p,
-    tabIndex: C,
-    loading: N = !1,
-    spellCheck: k = !0,
-    autofocus: w = !1,
-    disabled: x = !1,
+    tabIndex: y,
+    loading: C = !1,
+    spellCheck: N = !0,
+    autofocus: k = !1,
+    disabled: w = !1,
     className: v = "",
-    placeholder: s = "",
-    placeholderIcon: c,
-    type: g = "text",
+    placeholder: c = "",
+    placeholderIcon: u,
+    type: x = "text",
     size: E = "normal",
     theme: R = "default",
     decorator: V,
     backdropBlur: S = !1
-  } = o, [h, D] = r.useState(a), y = typeof h < "u" && h !== "" && h !== null || typeof a < "u" && a !== "" && a !== null, z = o.type === "number" && (o.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = o.type === "number" && (o.max ?? Number.MAX_SAFE_INTEGER) || void 0, n = r.useCallback((l) => {
-    D(l), m && m(l);
-  }, [m]), F = r.useCallback(
-    (l) => {
+  } = t, [h, D] = l.useState(n), g = typeof h < "u" && h !== "" && h !== null || typeof n < "u" && n !== "" && n !== null, z = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, r = l.useCallback((a) => {
+    D(a), d && d(a);
+  }, [d]), F = l.useCallback(
+    (a) => {
       const {
-        value: b
-      } = l.target;
+        value: I
+      } = a.target;
       if (p) {
-        p.test(b) && n(b);
+        p.test(I) && r(I);
         return;
       }
-      n(b);
+      r(I);
     },
-    [n, p]
-  ), K = r.useCallback((l) => {
-    _ && _(l), f && l.key === "Enter" && f();
-  }, [_, f]), M = r.useCallback(() => {
-    n("");
-  }, [n]), j = $(e.root, e[E], e[R], v, {
-    [e["full-width"]]: d,
+    [r, p]
+  ), K = l.useCallback((a) => {
+    m && m(a), f && a.key === "Enter" && f();
+  }, [m, f]), M = l.useCallback(() => {
+    r("");
+  }, [r]), j = $(e.root, e[E], e[R], v, {
+    [e["full-width"]]: _,
     [e["backdrop-blur"]]: S,
-    [e.empty]: !y
-  }), B = r.useMemo(() => s ? c ? `     ${s.trim()}` : s.trim() : "", [s, c]);
+    [e.empty]: !g
+  }), B = l.useMemo(() => c ? u ? `     ${c.trim()}` : c.trim() : "", [c, u]);
   return /* @__PURE__ */ G("div", { className: j, children: [
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ o(
       "input",
       {
-        id: u,
-        ref: i,
-        type: g,
-        tabIndex: C,
-        autoFocus: w,
+        id: i,
+        ref: s,
+        type: x,
+        tabIndex: y,
+        autoFocus: k,
         className: e.input,
-        value: a,
+        value: n,
         placeholder: B,
-        disabled: x,
+        disabled: w,
         onChange: F,
         onKeyDown: K,
-        spellCheck: k,
+        spellCheck: N,
         min: z,
         max: A
       }
     ),
-    c && /* @__PURE__ */ t(T, { name: c, className: e.placeholderIcon }),
-    /* @__PURE__ */ t(
+    u && /* @__PURE__ */ o(T, { name: u, className: e.placeholderIcon }),
+    /* @__PURE__ */ o(
       Z,
       {
         decorator: V,
-        loading: N,
-        type: g,
-        hasValue: y,
+        loading: C,
+        type: x,
+        hasValue: g,
         onCleare: M
       }
     )
   ] });
 });
 export {
-  se as default
+  ce as default
 };

package/dist/components/Input/RichInput.js

@@ -1,63 +1,63 @@
-import { jsxs as D, jsx as t } from "react/jsx-runtime";
+import { jsxs as B, jsx as n } from "react/jsx-runtime";
 import r from "react";
-import { Button as F } from "../Button/Button.js";
-import { clsx as I } from "../../utils/clsx.js";
+import { Button as D } from "../Button/Button.js";
+import { clsx as F } from "../../utils/clsx.js";
 import { useDynamicRef as i } from "../../utils/hooks/useDynamicRef.js";
 import "../../utils/hooks/useGlobalKeyboardEvent.js";
 import "../../utils/hooks/useKeyboardClose.js";
 import "../../index-2hJuj4UN.js";
-const L = "_root_1vnop_1", T = "_renderer_1vnop_1", j = "_small_1vnop_5", E = "_large_1vnop_10", z = "_clear_1vnop_157", o = {
+const L = "cfxui__RichInput__root__57e6e", T = "cfxui__RichInput__renderer__8b298", j = "cfxui__RichInput__small__cd3d1", E = "cfxui__RichInput__large__74aed", z = "cfxui__RichInput__clear__5538b", c = {
   root: L,
   renderer: T,
   small: j,
   large: E,
   clear: z
-}, P = r.forwardRef(function(f, m) {
+}, P = r.forwardRef(function(f, _) {
   const {
-    size: p = "normal",
-    value: c,
-    onChange: d,
-    onFocus: _,
+    size: d = "normal",
+    value: l,
+    onChange: m,
+    onFocus: p,
     onBlur: h,
-    onSelect: C,
-    onKeyDown: g,
-    className: R,
-    rendered: v,
-    placeholder: S,
-    autoFocus: k,
-    withClearButton: x = !1
-  } = f, s = r.useRef(null), n = r.useRef(null), a = i(d), u = i(C), N = r.useCallback((e) => {
-    a.current(e.target.value);
-  }, []), b = r.useCallback(() => {
+    onSelect: R,
+    onKeyDown: C,
+    className: g,
+    rendered: x,
+    placeholder: I,
+    autoFocus: S,
+    withClearButton: b = !1
+  } = f, a = r.useRef(null), t = r.useRef(null), s = i(m), u = i(R), k = r.useCallback((e) => {
+    s.current(e.target.value);
+  }, []), N = r.useCallback(() => {
     var e;
-    a.current(""), (e = s.current) == null || e.focus();
-  }, []), w = r.useCallback((e) => {
+    s.current(""), (e = a.current) == null || e.focus();
+  }, []), v = r.useCallback((e) => {
     if (!u.current || !(e.target instanceof HTMLInputElement))
       return;
-    const l = e.target;
-    u.current(l.selectionStart, l.selectionEnd, l.selectionDirection);
-  }, []), y = r.useCallback((e) => {
-    n.current && (n.current.scrollTop = e.target.scrollTop, n.current.scrollLeft = e.target.scrollLeft);
-  }, []), B = I(o.root, R, o[p]);
-  return /* @__PURE__ */ D("div", { ref: m, className: B, children: [
-    /* @__PURE__ */ t(
+    const o = e.target;
+    u.current(o.selectionStart, o.selectionEnd, o.selectionDirection);
+  }, []), w = r.useCallback((e) => {
+    t.current && (t.current.scrollTop = e.target.scrollTop, t.current.scrollLeft = e.target.scrollLeft);
+  }, []), y = F(c.root, g, c[d]);
+  return /* @__PURE__ */ B("div", { ref: _, className: y, children: [
+    /* @__PURE__ */ n(
       "input",
       {
-        ref: s,
-        autoFocus: k,
+        ref: a,
+        autoFocus: S,
         type: "text",
-        value: c,
-        onChange: N,
-        placeholder: S,
+        value: l,
+        onChange: k,
+        placeholder: I,
         onBlur: h,
-        onFocus: _,
-        onScroll: y,
-        onSelect: w,
-        onKeyDown: g
+        onFocus: p,
+        onScroll: w,
+        onSelect: v,
+        onKeyDown: C
       }
     ),
-    /* @__PURE__ */ t("div", { ref: n, className: o.renderer, children: v }),
-    x && c && /* @__PURE__ */ t("div", { className: o.clear, children: /* @__PURE__ */ t(F, { icon: "Close", onClick: b }) })
+    /* @__PURE__ */ n("div", { ref: t, className: c.renderer, children: x }),
+    b && l && /* @__PURE__ */ n("div", { className: c.clear, children: /* @__PURE__ */ n(D, { icon: "Close", onClick: N }) })
   ] });
 });
 export {