@cfx-dev/ui-components 2.1.12 → 2.1.14

package/dist/components/Badge/Badge.d.ts

@@ -2,8 +2,10 @@ import { default as React } from 'react';
 import { IconName } from '../Icon';
 
 export type BadgeColor = 'success' | 'neutral' | 'warning' | 'error';
+export type BadgeSize = 'small' | 'normal';
 export interface BadgeProps {
     color?: BadgeColor;
+    size?: BadgeSize;
     icon?: IconName;
     children?: React.ReactNode;
     className?: string;

package/dist/components/Badge/Badge.js

@@ -1,28 +1,30 @@
-import { jsxs as l, jsx as i } from "react/jsx-runtime";
-import m from "react";
-import { Icon as u } from "../Icon/Icon.js";
-import { clsx as f } from "../../utils/clsx.js";
-import '../../assets/Badge.css';const d = "_root_15tkr_1", h = "_success_15tkr_13", k = "_hoverable_15tkr_17", v = "_neutral_15tkr_20", b = "_warning_15tkr_24", g = "_error_15tkr_31", p = "_icon_15tkr_39", o = {
-  root: d,
-  success: h,
-  hoverable: k,
-  neutral: v,
+import { jsxs as i, jsx as m } from "react/jsx-runtime";
+import h from "react";
+import { Icon as v } from "../Icon/Icon.js";
+import { clsx as u } from "../../utils/clsx.js";
+import '../../assets/Badge.css';const f = "_root_5qhvc_1", q = "_success_5qhvc_12", d = "_hoverable_5qhvc_16", x = "_neutral_5qhvc_19", b = "_warning_5qhvc_23", g = "_error_5qhvc_30", p = "_small_5qhvc_37", w = "_icon_5qhvc_41", o = {
+  root: f,
+  success: q,
+  hoverable: d,
+  neutral: x,
   warning: b,
   error: g,
-  icon: p
-}, R = m.forwardRef(function(s, e) {
+  small: p,
+  icon: w
+}, C = h.forwardRef(function(c, r) {
   const {
-    color: t = "success",
-    children: c,
-    icon: r,
-    className: n,
-    hoverable: a = !1
-  } = s, _ = f(o.root, n, o[t], { [o.hoverable]: a });
-  return /* @__PURE__ */ l("div", { ref: e, className: _, children: [
-    c,
-    !!r && /* @__PURE__ */ i(u, { name: r, className: o.icon })
+    color: e = "success",
+    size: n = "normal",
+    children: a,
+    icon: s,
+    className: t,
+    hoverable: l = !1
+  } = c, _ = u(o.root, t, o[e], o[n], { [o.hoverable]: l });
+  return /* @__PURE__ */ i("div", { ref: r, className: _, children: [
+    a,
+    !!s && /* @__PURE__ */ m(v, { size: "xxsmall", name: s, className: o.icon })
   ] });
 });
 export {
-  R as Badge
+  C as Badge
 };

package/dist/components/Badge/BadgeShowcase.js

@@ -1,56 +1,78 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
 import n from "react";
-import { Flex as c } from "../Layout/Flex/Flex.js";
-import { Text as l } from "../Text/Text.js";
-import { Badge as i } from "./Badge.js";
+import { Flex as l } from "../Layout/Flex/Flex.js";
+import { Text as i } from "../Text/Text.js";
+import { Badge as c } from "./Badge.js";
 function o() {
-  return /* @__PURE__ */ e(c, { gap: "large", vertical: !0, children: [
-    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ r(l, { children: "Success" }),
+  return /* @__PURE__ */ e(l, { gap: "large", vertical: !0, children: [
+    /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Success" }),
       /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-        i,
+        c,
         {
           color: "success",
-          children: /* @__PURE__ */ r("p", { children: "success" })
+          children: "success"
         }
       ) })
     ] }),
-    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ r(l, { children: "Neutral" }),
+    /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Neutral" }),
       /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-        i,
+        c,
         {
           color: "neutral",
-          children: /* @__PURE__ */ r("p", { children: "neutral" })
+          children: "neutral"
         }
       ) })
     ] }),
-    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ r(l, { children: "Warning with hoverable" }),
+    /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Warning with hoverable" }),
       /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-        i,
+        c,
         {
           color: "warning",
           icon: "MoreInfo",
           hoverable: !0,
-          children: /* @__PURE__ */ r("p", { children: "warning" })
+          children: "warning"
         }
       ) })
     ] }),
-    /* @__PURE__ */ e(c, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ r(l, { children: "Error" }),
+    /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Error" }),
       /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
-        i,
+        c,
         {
           color: "error",
+          icon: "Sort",
+          children: "error"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Small" }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        c,
+        {
+          size: "small",
+          children: "Small"
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ e(l, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ r(i, { children: "Small Error" }),
+      /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(
+        c,
+        {
+          color: "error",
+          size: "small",
           icon: "MoreInfo",
-          children: /* @__PURE__ */ r("p", { children: "error" })
+          children: "Small Error"
         }
       ) })
     ] })
   ] });
 }
-const u = n.memo(o);
+const s = n.memo(o);
 export {
-  u as default
+  s as default
 };

package/dist/components/IconButton/IconButton.d.ts

@@ -3,9 +3,11 @@ import { IconSize } from '../Icon';
 import { IconName } from '../Icons';
 import { TextColorProps } from '../Text';
 
+type IconButtonAreaSize = 'small' | 'medium' | 'large';
 export interface IconButtonProps extends TextColorProps {
     name: IconName;
     size?: IconSize;
+    areaSize?: IconButtonAreaSize;
     onClick?: () => void;
     className?: string;
     disabled?: boolean;

package/dist/components/IconButton/IconButton.js

@@ -1,35 +1,38 @@
-import { jsx as o } from "react/jsx-runtime";
-import u from "react";
+import { jsx as t } from "react/jsx-runtime";
+import _ from "react";
 import { Icon as p } from "../Icon/Icon.js";
-import { clsx as _ } from "../../utils/clsx.js";
-import '../../assets/IconButton.css';const f = "_unset_1cc2r_1", b = "_root_1cc2r_5", t = {
-  unset: f,
-  root: b
+import { clsx as x } from "../../utils/clsx.js";
+import '../../assets/IconButton.css';const d = "_unset_1l0x5_1", f = "_root_1l0x5_5", b = "_medium_1l0x5_19", g = "_large_1l0x5_22", o = {
+  unset: d,
+  root: f,
+  medium: b,
+  large: g
 };
-function d(r) {
+function y(e) {
   const {
-    name: s,
-    onClick: n,
-    className: c,
-    disabled: a,
-    ariaLabel: e,
-    size: l = "xxsmall",
-    color: m = "primary",
-    ...i
-  } = r;
-  return /* @__PURE__ */ o(
+    name: r,
+    onClick: s,
+    className: a,
+    disabled: l,
+    ariaLabel: n,
+    areaSize: m = "small",
+    size: c = "xxsmall",
+    color: i = "primary",
+    ...u
+  } = e;
+  return /* @__PURE__ */ t(
     "button",
     {
       type: "button",
-      className: _(t.unset, t.root, c),
-      onClick: n,
-      disabled: a,
-      "aria-label": e,
-      children: /* @__PURE__ */ o(p, { as: "span", name: s, ...i, color: m, size: l })
+      className: x(o.unset, o.root, a, o[m]),
+      onClick: s,
+      disabled: l,
+      "aria-label": n,
+      children: /* @__PURE__ */ t(p, { as: "span", name: r, ...u, color: i, size: c })
     }
   );
 }
-const N = u.memo(d);
+const h = _.memo(y);
 export {
-  N as default
+  h as default
 };

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

@@ -2,6 +2,7 @@ import { default as React } from 'react';
 import { IconName } from '../Icon';
 
 export type InputSize = 'small' | 'normal' | 'large';
+export type InputTheme = 'default' | 'onlight';
 type InputTypeSpecificProps = {
     type?: 'text' | 'password' | 'search';
     value?: string;
@@ -14,6 +15,7 @@ type InputTypeSpecificProps = {
 export type InputProps = InputTypeSpecificProps & {
     id?: string;
     size?: InputSize;
+    theme?: InputTheme;
     tabIndex?: number;
     autofocus?: boolean;
     pattern?: RegExp;

package/dist/components/Input/Input.js

@@ -1,88 +1,110 @@
-import { jsxs as b, jsx as p } from "react/jsx-runtime";
-import o from "react";
-import { Icon as j } from "../Icon/Icon.js";
-import { Indicator as G } from "../Indicator/Indicator.js";
-import { clsx as T } from "../../utils/clsx.js";
-import { getValue as B } from "../../utils/getValue.js";
-import '../../assets/Input.css';const W = "_root_1truz_1", X = "_input_1truz_1", $ = "_small_1truz_5", q = "_large_1truz_9", H = "_placeholderIcon_1truz_75", J = "_empty_1truz_151", L = "_decorator_1truz_156", e = {
-  root: W,
-  input: X,
-  small: $,
-  large: q,
-  placeholderIcon: H,
-  "full-width": "_full-width_1truz_145",
-  empty: J,
-  decorator: L,
-  "backdrop-blur": "_backdrop-blur_1truz_173"
-}, te = o.forwardRef(function(a, y) {
+import { jsxs as G, jsx as t } from "react/jsx-runtime";
+import r 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";
+import '../../assets/Input.css';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 = {
+  root: H,
+  input: J,
+  small: L,
+  large: O,
+  placeholderIcon: P,
+  "full-width": "_full-width_e1sis_158",
+  empty: Q,
+  decorator: U,
+  onlight: Y,
+  "backdrop-blur": "_backdrop-blur_e1sis_240"
+};
+function Z(I) {
+  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;
+}
+const se = r.forwardRef(function(o, i) {
   const {
-    id: I,
-    fullWidth: N = !1,
-    value: r,
-    onChange: c,
-    onSubmit: u,
-    onKeyDown: s,
-    pattern: d,
-    tabIndex: z,
-    loading: h = !1,
-    spellCheck: g = !0,
-    autofocus: k = !1,
-    disabled: w = !1,
-    className: x = "",
-    placeholder: l = "",
-    placeholderIcon: n,
-    type: C = "text",
+    id: u,
+    fullWidth: d = !1,
+    value: a,
+    onChange: m,
+    onSubmit: f,
+    onKeyDown: _,
+    pattern: p,
+    tabIndex: C,
+    loading: N = !1,
+    spellCheck: k = !0,
+    autofocus: w = !1,
+    disabled: x = !1,
+    className: v = "",
+    placeholder: s = "",
+    placeholderIcon: c,
+    type: g = "text",
     size: E = "normal",
-    decorator: i,
-    backdropBlur: v = !1
-  } = a, [m, R] = o.useState(r), V = typeof m < "u" && m !== "" && m !== null || typeof r < "u" && r !== "" && r !== null, S = a.type === "number" && (a.min ?? Number.MIN_SAFE_INTEGER) || void 0, A = a.type === "number" && (a.max ?? Number.MAX_SAFE_INTEGER) || void 0, _ = o.useCallback((t) => {
-    R(t), c && c(t);
-  }, [c]), D = o.useCallback(
-    (t) => {
+    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) => {
       const {
-        value: f
-      } = t.target;
-      if (d) {
-        d.test(f) && _(f);
+        value: b
+      } = l.target;
+      if (p) {
+        p.test(b) && n(b);
         return;
       }
-      _(f);
+      n(b);
     },
-    [_, d]
-  ), F = o.useCallback((t) => {
-    s && s(t), u && t.key === "Enter" && u();
-  }, [s, u]), K = T(e.root, e[E], x, {
-    [e["full-width"]]: N,
-    [e["backdrop-blur"]]: v,
-    [e.empty]: !V
-  }), M = o.useMemo(() => l ? n ? `     ${l.trim()}` : l.trim() : "", [l, n]);
-  return /* @__PURE__ */ b("div", { className: K, children: [
-    /* @__PURE__ */ p(
+    [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,
+    [e["backdrop-blur"]]: S,
+    [e.empty]: !y
+  }), B = r.useMemo(() => s ? c ? `     ${s.trim()}` : s.trim() : "", [s, c]);
+  return /* @__PURE__ */ G("div", { className: j, children: [
+    /* @__PURE__ */ t(
       "input",
       {
-        id: I,
-        ref: y,
-        type: C,
-        tabIndex: z,
-        autoFocus: k,
+        id: u,
+        ref: i,
+        type: g,
+        tabIndex: C,
+        autoFocus: w,
         className: e.input,
-        value: r,
-        placeholder: M,
-        disabled: w,
-        onChange: D,
-        onKeyDown: F,
-        spellCheck: g,
-        min: S,
+        value: a,
+        placeholder: B,
+        disabled: x,
+        onChange: F,
+        onKeyDown: K,
+        spellCheck: k,
+        min: z,
         max: A
       }
     ),
-    n && /* @__PURE__ */ p(j, { name: n, className: e.placeholderIcon }),
-    (h || !!i) && /* @__PURE__ */ b("div", { className: e.decorator, children: [
-      !!h && /* @__PURE__ */ p(G, {}),
-      !!i && B(i)
-    ] })
+    c && /* @__PURE__ */ t(T, { name: c, className: e.placeholderIcon }),
+    /* @__PURE__ */ t(
+      Z,
+      {
+        decorator: V,
+        loading: N,
+        type: g,
+        hasValue: y,
+        onCleare: M
+      }
+    )
   ] });
 });
 export {
-  te as default
+  se as default
 };

package/dist/components/Input/InputShowcase.js

@@ -3,9 +3,9 @@ import i from "react";
 import { Flex as r } from "../Layout/Flex/Flex.js";
 import { Text as a } from "../Text/Text.js";
 import c from "./Input.js";
-const p = /^\+?[0-9]*$/;
-function u() {
-  const [d, o] = i.useState(""), [n, h] = i.useState(0);
+const m = /^\+?[0-9]*$/;
+function s() {
+  const [d, h] = i.useState(""), [o, n] = i.useState(0), [t, p] = i.useState("");
   return /* @__PURE__ */ l(r, { gap: "large", vertical: !0, children: [
     /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
       /* @__PURE__ */ e(a, { children: "Small" }),
@@ -45,12 +45,12 @@ function u() {
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         c,
         {
-          pattern: p,
+          pattern: m,
           placeholder: "Placeholder",
           size: "large",
           placeholderIcon: "Tick",
           value: d,
-          onChange: o
+          onChange: h
         }
       ) })
     ] }),
@@ -67,7 +67,7 @@ function u() {
       ) })
     ] }),
     /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
-      /* @__PURE__ */ e(a, { children: "Number input with min=1 max=100" }),
+      /* @__PURE__ */ e(a, { children: "Type Number input with min=1 max=100" }),
       /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
         c,
         {
@@ -77,14 +77,28 @@ function u() {
           type: "number",
           min: 1,
           max: 100,
-          value: n,
-          onChange: (t) => h(Number(t))
+          value: o,
+          onChange: (u) => n(Number(u))
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ l(r, { gap: "normal", vertical: !0, children: [
+      /* @__PURE__ */ e(a, { children: "Type search" }),
+      /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(
+        c,
+        {
+          placeholder: "Placeholder",
+          size: "large",
+          placeholderIcon: "Search",
+          type: "search",
+          value: t,
+          onChange: p
         }
       ) })
     ] })
   ] });
 }
-const z = i.memo(u);
+const x = i.memo(s);
 export {
-  z as default
+  x as default
 };

package/dist/components/Input/RichInput.js

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

package/dist/components/InputDropzone/InputDropzone.d.ts

@@ -1,10 +1,18 @@
 import { default as React } from 'react';
-import { DropzoneOptions, FileWithPath as DropzoneFileWithPath } from 'react-dropzone';
+import { DropzoneOptions, FileWithPath as DropzoneFileWithPath, FileError as DropzoneFileError, ErrorCode as DropzoneErrorCode } from 'react-dropzone';
 
 export type FileWithPath = DropzoneFileWithPath;
+export type FileError = DropzoneFileError;
+export type ErrorCode = DropzoneErrorCode;
+export interface FileRejection {
+    file: FileWithPath;
+    errors: FileError[];
+}
 export interface InputDropzoneProps extends DropzoneOptions {
     value?: FileWithPath[];
+    rejections?: FileRejection[];
     onRemoveFile?: (file: FileWithPath) => void;
+    onRemoveRejection?: (file: FileWithPath) => void;
     text?: string;
     linkText?: string;
     removeItemAriaLabel?: string;