@cfx-dev/ui-components 4.5.8 → 4.5.9

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

@@ -7,6 +7,7 @@ export interface ButtonProps<T = HTMLButtonElement> {
     title?: string;
     type?: HTMLButtonElement['type'];
     icon?: IconName;
+    iconClassName?: string;
     theme?: ButtonTheme;
     tabIndex?: number;
     className?: string;
@@ -19,8 +20,9 @@ export interface ButtonProps<T = HTMLButtonElement> {
     onMouseUp?: (event: React.MouseEvent<T>) => void;
     decorator?: React.ReactNode;
     ref?: React.Ref<T>;
+    style?: React.CSSProperties;
 }
-export declare function ButtonContent(props: Pick<ButtonProps, 'text' | 'icon' | 'decorator'>): React.ReactNode;
+export declare function ButtonContent(props: Pick<ButtonProps, 'text' | 'icon' | 'decorator' | 'iconClassName'>): React.ReactNode;
 export declare function getButtonClassName<T = HTMLButtonElement>(props: Partial<Omit<ButtonProps<T>, 'onClick'>>): string;
 declare function Button(props: ButtonProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Button>;

package/dist/components/Button/Button.js

@@ -1,113 +1,115 @@
-import { jsx as s, jsxs as W, Fragment as g } from "react/jsx-runtime";
+import { jsx as s, jsxs as A, Fragment as q } from "react/jsx-runtime";
 import m from "react";
-import { Icon as A } from "../Icon/Icon.js";
-import { clsx as q } from "../../utils/clsx.js";
+import { Icon as I } from "../Icon/Icon.js";
+import { clsx as B } from "../../utils/clsx.js";
 import { noop as d } from "../../utils/functional.js";
-const I = "cfxui__Button__unsetAll__44b96", M = "cfxui__Button__root__e2ace", j = "cfxui__Button__fullWidth__f61d9", F = "cfxui__Button__primary__1c59f", v = "cfxui__Button__secondary__b2b84", w = "cfxui__Button__linked__330cb", D = "cfxui__Button__quicklink__204ac", L = "cfxui__Button__icon__44e51", P = "cfxui__Button__icononly__4f786", R = "cfxui__Button__decorator__39a9b", t = {
-  unsetAll: I,
-  root: M,
-  fullWidth: j,
-  primary: F,
-  secondary: v,
+const M = "cfxui__Button__unsetAll__44b96", j = "cfxui__Button__root__e2ace", F = "cfxui__Button__fullWidth__f61d9", v = "cfxui__Button__primary__1c59f", w = "cfxui__Button__secondary__b2b84", D = "cfxui__Button__linked__330cb", L = "cfxui__Button__quicklink__204ac", P = "cfxui__Button__icon__44e51", R = "cfxui__Button__icononly__4f786", U = "cfxui__Button__decorator__39a9b", t = {
+  unsetAll: M,
+  root: j,
+  fullWidth: F,
+  primary: v,
+  secondary: w,
   "on-light": "cfxui__Button__on-light__ae69c",
-  linked: w,
-  quicklink: D,
-  icon: L,
-  icononly: P,
-  decorator: R
+  linked: D,
+  quicklink: L,
+  icon: P,
+  icononly: R,
+  decorator: U
 };
-function U(c) {
+function $(c) {
   const {
     text: o = null,
     icon: n,
+    iconClassName: u,
     decorator: l = null
   } = c;
-  return /* @__PURE__ */ W(g, { children: [
+  return /* @__PURE__ */ A(q, { children: [
     o,
-    !!n && /* @__PURE__ */ s(A, { name: n, className: t.icon }),
+    !!n && /* @__PURE__ */ s(I, { name: n, className: B(t.icon, u) }),
     !!l && /* @__PURE__ */ s("div", { className: t.decorator, children: l })
   ] });
 }
-function $(c) {
+function z(c) {
   const {
     text: o = null,
     icon: n,
-    theme: l = "default",
-    disabled: a = !1,
-    className: u = "",
-    autofocus: _ = !1,
-    fullWidth: e = !1,
-    tabIndex: i
+    theme: u = "default",
+    disabled: l = !1,
+    className: a = "",
+    autofocus: i = !1,
+    fullWidth: _ = !1,
+    tabIndex: e
   } = c;
-  return q(t.unsetAll, t.root, t[l], u, {
-    [t.disabled]: a,
+  return B(t.unsetAll, t.root, t[u], a, {
+    [t.disabled]: l,
     [t.icononly]: !!n && (o === null || typeof o > "u"),
     [t.text]: !!o,
-    [t.autofocus]: _ || typeof i < "u",
-    [t.fullWidth]: e
+    [t.autofocus]: i || typeof e < "u",
+    [t.fullWidth]: _
   });
 }
-function z(c) {
+function E(c) {
   const {
     text: o = null,
     icon: n,
+    iconClassName: u,
     title: l = "",
     type: a = "button",
-    className: u = "",
+    className: i = "",
     theme: _ = "default",
     disabled: e = !1,
-    onClick: i = d,
-    onMouseDown: b = d,
-    onMouseUp: B = d,
+    onClick: x = d,
+    onMouseDown: h = d,
+    onMouseUp: k = d,
     autofocus: r = !1,
     tabIndex: f,
-    fullWidth: x = !1,
-    ariaLabel: h = "",
-    ref: k,
-    ...p
-  } = c, y = m.useMemo(() => $({
+    fullWidth: b = !1,
+    ariaLabel: p = "",
+    ref: y,
+    ...C
+  } = c, N = m.useMemo(() => z({
     text: o,
     icon: n,
     theme: _,
     disabled: e,
-    className: u,
+    className: i,
     autofocus: r,
-    fullWidth: x,
+    fullWidth: b,
     tabIndex: f
   }), [
     r,
-    u,
-    x,
+    i,
+    b,
     e,
     n,
     f,
     o,
     _
-  ]), C = m.useCallback((N) => {
-    e || i(N);
-  }, [e, i]);
+  ]), W = m.useCallback((g) => {
+    e || x(g);
+  }, [e, x]);
   return /* @__PURE__ */ s(
     "button",
     {
-      ref: k,
+      ref: y,
       disabled: e,
-      className: y,
-      onClick: C,
-      onMouseDown: b,
-      onMouseUp: B,
+      className: N,
+      onClick: W,
+      onMouseDown: h,
+      onMouseUp: k,
       autoFocus: r,
       tabIndex: f,
       title: l,
       type: a,
-      "aria-label": h,
-      ...p,
-      children: /* @__PURE__ */ s(U, { ...c })
+      "aria-label": p,
+      ...C,
+      children: /* @__PURE__ */ s($, { ...c })
     }
   );
 }
-const O = m.memo(z);
+const Q = m.memo(E);
 export {
-  U as ButtonContent,
-  O as default,
-  $ as getButtonClassName
+  $ as ButtonContent,
+  Q as default,
+  z as getButtonClassName
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "4.5.8",
+  "version": "4.5.9",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",