@mahatisystems/mahati-ui-components 5.3.1 → 5.3.3

package/dist/index.mjs

@@ -505,6 +505,17 @@ var ButtonBase = React2.forwardRef(function(_0, _1) {
         "style"
     ]), _rest1 = _sliced_to_array(_rest, 1), ref = _rest1[0];
     var color = getColorByName(name);
+    var getHoverStyles = function getHoverStyles() {
+        if (iconButtonHoverBgClass) return {};
+        if (iconButtonHoverIntensity) {
+            var opacity = iconButtonHoverIntensity / 100;
+            return {
+                "--hover-bg": "rgba(0,0,0,".concat(opacity, ")"),
+                "--active-bg": "rgba(0,0,0,".concat(Math.min(opacity + 0.2, 1), ")")
+            };
+        }
+        return {};
+    };
     if (iconButton) {
         var height = parseHeightWidth(iconButtonHeightClass);
         var width = parseHeightWidth(iconButtonWidthClass);
@@ -516,8 +527,11 @@ var ButtonBase = React2.forwardRef(function(_0, _1) {
                 minHeight: height,
                 minWidth: width,
                 color: color.startsWith("linear") ? "white" : color
+            }, iconButtonHoverIntensity && {
+                "--hover-bg": "rgba(0,0,0,".concat(iconButtonHoverIntensity / 100, ")"),
+                "--active-bg": "rgba(0,0,0,".concat(Math.min(iconButtonHoverIntensity / 100 + 0.2, 1), ")")
             }, style),
-            className: "\n            inline-flex items-center justify-center\n            transition-all duration-200\n            focus-visible:outline focus-visible:outline-2 focus-visible:outline-white\n            ".concat(iconButtonRadiusClass || "rounded-md", "\n            ").concat(iconButtonBgPaddingClass || "p-[2px]", "\n            ").concat(iconButtonBgClass || "bg-white/10", "\n            hover:opacity-85 active:opacity-70\n            ").concat(className || "", "\n          ")
+            className: "\n  inline-flex items-center justify-center\n  transition-all duration-200\n  ".concat(iconButtonRadiusClass || "rounded-md", "\n  ").concat(iconButtonBgPaddingClass || "p-[2px]", "\n  ").concat(iconButtonBgClass || "bg-white/10", "\n\n  ").concat(iconButtonHoverBgClass ? iconButtonHoverBgClass : iconButtonHoverIntensity ? "hover:bg-[var(--hover-bg)] active:bg-[var(--active-bg)]" : "hover:opacity-85 active:opacity-70", "\n\n  ").concat(className || "", "\n")
         }, props), {
             children: children
         }));
@@ -532,7 +546,10 @@ var ButtonBase = React2.forwardRef(function(_0, _1) {
         }, style) : style,
         className: "\n          inline-flex items-center justify-center\n          whitespace-nowrap\n          font-medium\n          text-[14px]\n          transition-all duration-200\n          cursor-pointer\n          focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-400\n          disabled:pointer-events-none disabled:opacity-50\n          ".concat(!name ? variantClasses[variant] : "", "\n          ").concat(sizeClasses[size], "\n          ").concat(className || "", "\n        ")
     }, props), {
-        children: children
+        children: /* @__PURE__ */ jsx2("span", {
+            className: "".concat(iconButtonBgPaddingClass || "p-[2px]", " flex items-center justify-center"),
+            children: children
+        })
     }));
 });
 ButtonBase.displayName = "Button";
@@ -12600,7 +12617,8 @@ var MahatiCameraAccessModal = function MahatiCameraAccessModal(param) {
                     onClick: onClose,
                     className: "absolute right-5 top-5 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-[0_2px_6px_rgba(0,0,0,0.15)]",
                     children: /* @__PURE__ */ jsx33(X4, {
-                        size: 16
+                        size: 16,
+                        color: "black"
                     })
                 }),
                 image && /* @__PURE__ */ jsx33("div", {