@cfx-dev/ui-components 1.0.2 → 1.1.1

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 
-export type ButtonTheme = 'default' | 'default-blurred' | 'primary' | 'transparent';
+export type ButtonTheme = 'default' | 'primary' | 'transparent';
 export type ButtonSize = 'normal' | 'small' | 'large';
 export interface ButtonProps {
     text?: React.ReactNode;

package/dist/components/Button/Button.js

@@ -2,7 +2,7 @@ import { jsx as c, jsxs as j, Fragment as w } from "react/jsx-runtime";
 import b from "react";
 import { clsx as z } from "../../utils/clsx.js";
 import { noop as p } from "../../utils/functional.js";
-import { s as t } from "../../Button.module-Z6njvP9Z.js";
+import { s as t } from "../../Button.module-Cv-7p0xt.js";
 function F(a) {
   const {
     text: e = null,

package/dist/components/Button/ButtonBar.js

@@ -1,6 +1,6 @@
 import { jsx as m } from "react/jsx-runtime";
 import { clsx as s } from "../../utils/clsx.js";
-import { s as a } from "../../Button.module-Z6njvP9Z.js";
+import { s as a } from "../../Button.module-Cv-7p0xt.js";
 function e(r) {
   const {
     children: o,

package/dist/components/Flyout/Flyout.js

@@ -1,57 +1,57 @@
-import { jsxs as i, jsx as s } from "react/jsx-runtime";
+import { jsxs as i, jsx as o } from "react/jsx-runtime";
 import _ from "react";
-import { F as p } from "../../Combination-Dp_plIQU.js";
-import { Button as h } from "../Button/Button.js";
+import { F as h } from "../../Combination-Dp_plIQU.js";
+import { Button as y } from "../Button/Button.js";
 import { Interactive as f } from "../Interactive/Interactive.js";
-import { I as u } from "../../Icons-NE1cibCU.js";
+import { Icons as u } from "../../style-guide/Icons/Icons.js";
 import { clsx as l } from "../../utils/clsx.js";
-import { noop as v } from "../../utils/functional.js";
-import { useOutlet as b, useKeyboardClose as z } from "../../utils/hooks.js";
-import '../../assets/Flyout.css';const N = "_root_11ks7_1", C = "_holder_11ks7_6", y = "_active_11ks7_15", F = "_backdrop_11ks7_15", x = "_mask_11ks7_28", I = "_content_11ks7_90", L = "_header_11ks7_95", O = "_title_11ks7_101", e = {
-  root: N,
-  "size-normal": "_size-normal_11ks7_6",
-  holder: C,
-  "size-small": "_size-small_11ks7_9",
-  "size-xsmall": "_size-xsmall_11ks7_12",
-  active: y,
-  backdrop: F,
-  "backdrop-appearance": "_backdrop-appearance_11ks7_1",
-  mask: x,
-  "holder-appearance": "_holder-appearance_11ks7_1",
-  content: I,
-  header: L,
+import { noop as x } from "../../utils/functional.js";
+import { useOutlet as k, useKeyboardClose as v } from "../../utils/hooks.js";
+import '../../assets/Flyout.css';const b = "_root_xny34_1", z = "_holder_xny34_6", N = "_active_xny34_15", C = "_backdrop_xny34_15", F = "_mask_xny34_28", L = "_content_xny34_83", I = "_header_xny34_88", O = "_title_xny34_94", e = {
+  root: b,
+  "size-normal": "_size-normal_xny34_6",
+  holder: z,
+  "size-small": "_size-small_xny34_9",
+  "size-xsmall": "_size-xsmall_xny34_12",
+  active: N,
+  backdrop: C,
+  "backdrop-appearance": "_backdrop-appearance_xny34_1",
+  mask: F,
+  "holder-appearance": "_holder-appearance_xny34_1",
+  content: L,
+  header: I,
   title: O
 }, E = "flyout-outlet";
 function T(c) {
   const {
-    disabled: o = !1,
-    size: a = "normal",
-    onClose: r = v,
-    children: n,
+    disabled: t = !1,
+    size: n = "normal",
+    onClose: r = x,
+    children: a,
     holderClassName: d
-  } = c, m = b(E);
+  } = c, m = k(E);
   _.useEffect(() => {
-    if (o)
+    if (t)
       return;
-    const t = document.getElementById("cfxui-root");
-    return t == null || t.classList.add("shrink"), () => t == null ? void 0 : t.classList.remove("shrink");
-  }, [o]), z(r);
-  const k = l(e.root, e[`size-${a}`], {
-    [e.active]: !o
+    const s = document.getElementById("cfxui-root");
+    return s == null || s.classList.add("shrink"), () => s == null ? void 0 : s.classList.remove("shrink");
+  }, [t]), v(r);
+  const p = l(e.root, e[`size-${n}`], {
+    [e.active]: !t
   });
-  return /* @__PURE__ */ s(m, { children: /* @__PURE__ */ i("div", { className: k, children: [
-    /* @__PURE__ */ s(f, { showPointer: !1, className: e.backdrop, onClick: r }),
-    /* @__PURE__ */ s("div", { className: e.mask, children: /* @__PURE__ */ s("div", { className: l(e.holder, d), children: /* @__PURE__ */ s(p, { disabled: !!o, className: e.content, children: n }) }) })
+  return /* @__PURE__ */ o(m, { children: /* @__PURE__ */ i("div", { className: p, children: [
+    /* @__PURE__ */ o(f, { showPointer: !1, className: e.backdrop, onClick: r }),
+    /* @__PURE__ */ o("div", { className: e.mask, children: /* @__PURE__ */ o("div", { className: l(e.holder, d), children: /* @__PURE__ */ o(h, { disabled: !!t, className: e.content, children: a }) }) })
   ] }) });
 }
-T.Header = _.forwardRef(function(o, a) {
+T.Header = _.forwardRef(function(t, n) {
   const {
     onClose: r,
-    children: n
-  } = o;
-  return /* @__PURE__ */ i("div", { ref: a, className: e.header, children: [
-    /* @__PURE__ */ s("div", { className: e.title, children: n }),
-    !!r && /* @__PURE__ */ s(h, { size: "large", icon: u.exit, onClick: r })
+    children: a
+  } = t;
+  return /* @__PURE__ */ i("div", { ref: n, className: e.header, children: [
+    /* @__PURE__ */ o("div", { className: e.title, children: a }),
+    !!r && /* @__PURE__ */ o(y, { size: "large", icon: u.exit, onClick: r })
   ] });
 });
 export {

package/dist/components/Input/Input.d.ts

@@ -20,7 +20,6 @@ export type InputProps = TypeSpecific & {
     autofocus?: boolean;
     pattern?: RegExp;
     className?: string;
-    backdropBlur?: boolean;
     inputClassName?: string;
     inputRef?: React.Ref<HTMLInputElement>;
     label?: React.ReactNode;

package/dist/components/Input/Input.js

@@ -1,96 +1,93 @@
-import { jsxs as r, jsx as c } from "react/jsx-runtime";
-import n from "react";
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import r from "react";
 import { Indicator as q } from "../Indicator/Indicator.js";
-import { clsx as H } from "../../utils/clsx.js";
-import { getValue as J } from "../../utils/getValue.js";
+import { clsx as B } from "../../utils/clsx.js";
+import { getValue as H } from "../../utils/getValue.js";
 import { useDynamicRef as i } from "../../utils/hooks.js";
-import '../../assets/Input.css';const O = "_root_gmtev_1", P = "_input_gmtev_1", Q = "_small_gmtev_8", U = "_large_gmtev_12", Y = "_decorator_gmtev_60", Z = "_error_gmtev_68", $ = "_disabled_gmtev_72", ee = "_description_gmtev_106", e = {
-  root: O,
-  input: P,
-  small: Q,
-  large: U,
-  "full-width": "_full-width_gmtev_57",
-  decorator: Y,
-  error: Z,
-  disabled: $,
-  description: ee,
-  "backdrop-blur": "_backdrop-blur_gmtev_111"
-}, ce = n.forwardRef(function(t, g) {
+import '../../assets/Input.css';const J = "_root_1eaux_1", O = "_input_1eaux_1", P = "_small_1eaux_8", Q = "_large_1eaux_12", U = "_decorator_1eaux_60", Y = "_error_1eaux_68", Z = "_disabled_1eaux_72", $ = "_description_1eaux_106", e = {
+  root: J,
+  input: O,
+  small: P,
+  large: Q,
+  "full-width": "_full-width_1eaux_57",
+  decorator: U,
+  error: Y,
+  disabled: Z,
+  description: $
+}, le = r.forwardRef(function(o, N) {
   const {
-    label: d,
-    value: v,
-    onChange: N,
-    onSubmit: C,
-    onKeyDown: k = () => !1,
+    label: u,
+    value: b,
+    onChange: C,
+    onSubmit: g,
+    onKeyDown: w = () => !1,
     pattern: a,
-    tabIndex: w,
-    error: y = !1,
-    fullWidth: I = !1,
-    showLoader: u = !1,
-    noSpellCheck: R = !1,
-    autofocus: x = !1,
+    tabIndex: y,
+    error: I = !1,
+    fullWidth: R = !1,
+    showLoader: d = !1,
+    noSpellCheck: v = !1,
+    autofocus: E = !1,
     disabled: m = !1,
-    className: E = "",
+    className: k = "",
     placeholder: D = "",
     inputClassName: S = "",
     inputRef: F,
     description: _ = "",
     type: K = "text",
     size: A = "normal",
-    decorator: l,
-    backdropBlur: j = !1
-  } = t, G = t.type === "number" && (t.min ?? Number.MIN_SAFE_INTEGER) || void 0, M = t.type === "number" && (t.max ?? Number.MAX_SAFE_INTEGER) || void 0, f = n.useId(), p = i(N), T = i(k), b = i(C), V = n.useCallback(
-    (o) => {
+    decorator: s
+  } = o, j = o.type === "number" && (o.min ?? Number.MIN_SAFE_INTEGER) || void 0, G = o.type === "number" && (o.max ?? Number.MAX_SAFE_INTEGER) || void 0, f = r.useId(), p = i(C), M = i(w), h = i(g), T = r.useCallback(
+    (t) => {
       const {
-        value: s
-      } = o.target;
+        value: l
+      } = t.target;
       if (a) {
-        a.test(s) && p.current(s);
+        a.test(l) && p.current(l);
         return;
       }
-      return p.current(s);
+      return p.current(l);
     },
     [a]
-  ), z = n.useCallback((o) => {
-    T.current(o) || b.current && o.key === "Enter" && b.current();
-  }, []), B = u || l ? /* @__PURE__ */ r("div", { className: e.decorator, children: [
-    !!u && /* @__PURE__ */ c(q, {}),
-    !!l && J(l)
-  ] }) : null, h = /* @__PURE__ */ r("div", { className: e.input, children: [
+  ), V = r.useCallback((t) => {
+    M.current(t) || h.current && t.key === "Enter" && h.current();
+  }, []), z = d || s ? /* @__PURE__ */ n("div", { className: e.decorator, children: [
+    !!d && /* @__PURE__ */ c(q, {}),
+    !!s && H(s)
+  ] }) : null, x = /* @__PURE__ */ n("div", { className: e.input, children: [
     /* @__PURE__ */ c(
       "input",
       {
         id: f,
         ref: F,
         type: K,
-        tabIndex: w,
-        autoFocus: x,
+        tabIndex: y,
+        autoFocus: E,
         className: S,
-        value: v,
+        value: b,
         placeholder: D,
         disabled: m,
-        onChange: V,
-        onKeyDown: z,
-        spellCheck: !R,
-        min: G,
-        max: M
+        onChange: T,
+        onKeyDown: V,
+        spellCheck: !v,
+        min: j,
+        max: G
       }
     ),
-    B
-  ] }), L = _ ? /* @__PURE__ */ c("div", { className: e.description, children: _ }) : null, W = d ? /* @__PURE__ */ r("label", { htmlFor: f, children: [
-    d,
-    h
-  ] }) : h, X = H(e.root, e[A], E, {
-    [e["full-width"]]: I,
-    [e.error]: y,
-    [e.disabled]: m,
-    [e["backdrop-blur"]]: j
+    z
+  ] }), L = _ ? /* @__PURE__ */ c("div", { className: e.description, children: _ }) : null, W = u ? /* @__PURE__ */ n("label", { htmlFor: f, children: [
+    u,
+    x
+  ] }) : x, X = B(e.root, e[A], k, {
+    [e["full-width"]]: R,
+    [e.error]: I,
+    [e.disabled]: m
   });
-  return /* @__PURE__ */ r("div", { ref: g, className: X, children: [
+  return /* @__PURE__ */ n("div", { ref: N, className: X, children: [
     W,
     L
   ] });
 });
 export {
-  ce as Input
+  le as Input
 };

package/dist/components/Input/RichInput.js

@@ -1,16 +1,16 @@
-import { jsxs as B, jsx as o } from "react/jsx-runtime";
-import r from "react";
-import { Button as D } from "../Button/Button.js";
-import { I as F } from "../../Icons-NE1cibCU.js";
-import { clsx as L } from "../../utils/clsx.js";
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import n from "react";
+import { Button as B } from "../Button/Button.js";
+import { Icons as D } from "../../style-guide/Icons/Icons.js";
+import { clsx as F } from "../../utils/clsx.js";
 import { useDynamicRef as i } from "../../utils/hooks.js";
-import '../../assets/RichInput.css';const T = "_root_16on4_1", j = "_renderer_16on4_1", z = "_small_16on4_8", E = "_large_16on4_13", H = "_clear_16on4_95", t = {
-  root: T,
-  renderer: j,
+import '../../assets/RichInput.css';const L = "_root_1n2jn_1", T = "_renderer_1n2jn_1", z = "_small_1n2jn_8", E = "_large_1n2jn_13", H = "_clear_1n2jn_88", o = {
+  root: L,
+  renderer: T,
   small: z,
   large: E,
   clear: H
-}, O = r.forwardRef(function(f, m) {
+}, O = n.forwardRef(function(f, m) {
   const {
     size: d = "normal",
     value: c,
@@ -20,42 +20,42 @@ import '../../assets/RichInput.css';const T = "_root_16on4_1", j = "_renderer_16
     onSelect: g,
     onKeyDown: C,
     className: R,
-    rendered: S,
-    placeholder: x,
-    autoFocus: k,
-    withClearButton: I = !1
-  } = f, s = r.useRef(null), n = r.useRef(null), a = i(p), u = i(g), N = r.useCallback((e) => {
+    rendered: j,
+    placeholder: S,
+    autoFocus: x,
+    withClearButton: k = !1
+  } = f, s = n.useRef(null), r = n.useRef(null), a = i(p), u = i(g), N = n.useCallback((e) => {
     a.current(e.target.value);
-  }, []), b = r.useCallback(() => {
+  }, []), b = n.useCallback(() => {
     var e;
     a.current(""), (e = s.current) == null || e.focus();
-  }, []), v = r.useCallback((e) => {
+  }, []), I = n.useCallback((e) => {
     if (!u.current || !(e.target instanceof HTMLInputElement))
       return;
     const l = e.target;
     u.current(l.selectionStart, l.selectionEnd, l.selectionDirection);
-  }, []), w = r.useCallback((e) => {
-    n.current && (n.current.scrollTop = e.target.scrollTop, n.current.scrollLeft = e.target.scrollLeft);
-  }, []), y = L(t.root, R, t[d]);
-  return /* @__PURE__ */ B("div", { ref: m, className: y, children: [
-    /* @__PURE__ */ o(
+  }, []), v = n.useCallback((e) => {
+    r.current && (r.current.scrollTop = e.target.scrollTop, r.current.scrollLeft = e.target.scrollLeft);
+  }, []), w = F(o.root, R, o[d]);
+  return /* @__PURE__ */ y("div", { ref: m, className: w, children: [
+    /* @__PURE__ */ t(
       "input",
       {
         ref: s,
-        autoFocus: k,
+        autoFocus: x,
         type: "text",
         value: c,
         onChange: N,
-        placeholder: x,
+        placeholder: S,
         onBlur: h,
         onFocus: _,
-        onScroll: w,
-        onSelect: v,
+        onScroll: v,
+        onSelect: I,
         onKeyDown: C
       }
     ),
-    /* @__PURE__ */ o("div", { ref: n, className: t.renderer, children: S }),
-    I && c && /* @__PURE__ */ o("div", { className: t.clear, children: /* @__PURE__ */ o(D, { size: "small", icon: F.exit, onClick: b }) })
+    /* @__PURE__ */ t("div", { ref: r, className: o.renderer, children: j }),
+    k && c && /* @__PURE__ */ t("div", { className: o.clear, children: /* @__PURE__ */ t(B, { size: "small", icon: D.exit, onClick: b }) })
   ] });
 });
 export {