@companix/uikit 0.0.45 → 0.0.47

package/dist/Button/Button.scss

@@ -20,11 +20,14 @@
   }
 
   &[data-loading] {
-    @include mixins.use-styles(button, $appearance, $mode, loading);
+    &:hover,
+    &[data-active],
+    &:active {
+      @include mixins.use-styles(button, $appearance, $mode, enabled);
+    }
   }
 
   &[disabled] {
-    cursor: not-allowed;
     @include mixins.use-styles(button, $appearance, $mode, disabled);
   }
 }
@@ -71,6 +74,12 @@
     width: 100%;
   }
 
+  // disabled
+
+  &[disabled] {
+    cursor: not-allowed;
+  }
+
   // align
 
   &[data-align='center'] {
@@ -125,4 +134,19 @@
   @include use-appearance(neutral);
   @include use-appearance(negative);
   @include use-appearance(positive);
+
+  &[data-loading] {
+    cursor: progress;
+    position: relative;
+
+    .button-text {
+      visibility: hidden;
+    }
+
+    .button-spinner {
+      position: absolute;
+      margin: 0;
+      color: inherit;
+    }
+  }
 }

package/dist/bundle.es4.js

@@ -1,42 +1,45 @@
-import { jsx as e, jsxs as x, Fragment as j } from "react/jsx-runtime";
-import k from "classnames";
-import { Spinner as z } from "./bundle.es6.js";
-import { forwardRef as N } from "react";
-import { attr as r } from "@companix/utils-browser";
-const F = N(
+import { jsx as a, jsxs as i, Fragment as l } from "react/jsx-runtime";
+import h from "classnames";
+import { Spinner as j } from "./bundle.es6.js";
+import { forwardRef as k } from "react";
+import { attr as d } from "@companix/utils-browser";
+const F = k(
   ({
-    children: d,
-    fill: l,
-    text: m,
-    active: c,
-    mode: f = "default",
-    appearance: s = "neutral",
-    size: p = "md",
-    align: u,
-    icon: n,
+    children: e,
+    fill: c,
+    text: r,
+    active: f,
+    mode: p = "default",
+    appearance: u = "neutral",
+    size: b = "md",
+    align: N,
+    icon: m,
     loading: t,
-    className: b,
+    className: v,
     iconRight: o,
-    Component: i = "button",
-    ...a
-  }, v) => /* @__PURE__ */ e(
-    i,
+    Component: s = "button",
+    ...n
+  }, x) => /* @__PURE__ */ a(
+    s,
     {
-      ref: v,
-      className: k("button", b),
-      "data-size": p,
-      "data-loading": r(t),
-      "data-align": t ? "center" : u ?? (n && o ? "left" : "center"),
-      "data-appearance": s,
-      "data-mode": f,
-      "data-fill": r(l),
-      "data-active": r(c),
-      type: i === "button" ? "button" : void 0,
-      ...a,
-      onClick: t ?? a.disabled ? void 0 : a.onClick,
-      children: t ? /* @__PURE__ */ e(z, { size: 14 }) : /* @__PURE__ */ x(j, { children: [
-        n,
-        (d ?? m) && /* @__PURE__ */ e("span", { className: "button-text", children: m ?? d }),
+      ref: x,
+      className: h("button", v),
+      "data-size": b,
+      "data-loading": d(t),
+      "data-align": t ? "center" : N ?? (m && o ? "left" : "center"),
+      "data-appearance": u,
+      "data-mode": p,
+      "data-fill": d(c),
+      "data-active": d(f),
+      type: s === "button" ? "button" : void 0,
+      ...n,
+      onClick: t ?? n.disabled ? void 0 : n.onClick,
+      children: t ? /* @__PURE__ */ i(l, { children: [
+        /* @__PURE__ */ a(j, { size: 16, className: "button-spinner" }),
+        /* @__PURE__ */ a("span", { className: "button-text", children: r ?? e })
+      ] }) : /* @__PURE__ */ i(l, { children: [
+        m,
+        (e ?? r) && /* @__PURE__ */ a("span", { className: "button-text", children: r ?? e }),
         o
       ] })
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@companix/uikit",
-  "version": "0.0.45",
+  "version": "0.0.47",
   "main": "./dist/bundle.es.js",
   "module": "./dist/bundle.es.js",
   "types": "./dist/index.d.ts",