@apexcura/ui-components 0.0.14-Beta107 → 0.0.14-Beta109

package/dist/index.css

@@ -341,12 +341,29 @@ video {
 .m-\[10px\] {
   margin: 10px;
 }
+.mr-3 {
+  margin-right: 0.75rem;
+}
 .flex {
   display: flex;
 }
 .table {
   display: table;
 }
+.h-5 {
+  height: 1.25rem;
+}
+.w-5 {
+  width: 1.25rem;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.animate-spin {
+  animation: spin 1s linear infinite;
+}
 .rounded-\[8px\] {
   border-radius: 8px;
 }
@@ -385,6 +402,16 @@ video {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+.opacity-25 {
+  opacity: 0.25;
+}
+.opacity-75 {
+  opacity: 0.75;
+}
 .shadow-\[0px_0px_1px_1px_\#919191\] {
   --tw-shadow: 0px 0px 1px 1px #919191;
   --tw-shadow-colored: 0px 0px 1px 1px var(--tw-shadow-color);

package/dist/index.js

@@ -439,15 +439,45 @@ var ButtonElement = (props) => {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
+      onMouseLeave: handleMouseLeave,
+      disabled: props.loading,
+      style: {
+        cursor: props.loading ? "no-drop" : "pointer"
+      }
     },
-    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
+    props.isLoading ? /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement(
+      "svg",
+      {
+        className: "animate-spin h-5 w-5 mr-3 text-white",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ import_react11.default.createElement(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ import_react11.default.createElement(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ), props.label) : /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ import_react11.default.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ),
-    props.label
+    ), props.label)
   );
 };
 

package/dist/index.mjs

@@ -378,15 +378,45 @@ var ButtonElement = (props) => {
       onClick: props.onClick,
       className: `${props.className ? props.className : ""}`,
       onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave
+      onMouseLeave: handleMouseLeave,
+      disabled: props.loading,
+      style: {
+        cursor: props.loading ? "no-drop" : "pointer"
+      }
     },
-    props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
+    props.isLoading ? /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(
+      "svg",
+      {
+        className: "animate-spin h-5 w-5 mr-3 text-white",
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ React11.createElement(
+        "circle",
+        {
+          className: "opacity-25",
+          cx: "12",
+          cy: "12",
+          r: "10",
+          stroke: "currentColor",
+          strokeWidth: "4"
+        }
+      ),
+      /* @__PURE__ */ React11.createElement(
+        "path",
+        {
+          className: "opacity-75",
+          fill: "currentColor",
+          d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+        }
+      )
+    ), props.label) : /* @__PURE__ */ React11.createElement(React11.Fragment, null, props.isSVGStylesOverride === false ? props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon, alt: props.label }) : svgContent && /* @__PURE__ */ React11.createElement(
       "span",
       {
         dangerouslySetInnerHTML: { __html: svgContent }
       }
-    ),
-    props.label
+    ), props.label)
   );
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apexcura/ui-components",
-  "version": "0.0.14-Beta107",
+  "version": "0.0.14-Beta109",
   "description": "Apex cura React components library",
   "keywords": [
     "apex cura",