@hyddenlabs/hydn-ui 0.3.0-alpha.187 → 0.3.0-alpha.188

package/dist/index.cjs

@@ -2009,6 +2009,10 @@ var Button = React__default.default.forwardRef(
   ({
     children,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onBlur,
     ariaLabel,
     disabled = false,
     type = "button",
@@ -2085,6 +2089,10 @@ var Button = React__default.default.forwardRef(
         ref,
         type,
         onClick,
+        onMouseEnter,
+        onMouseLeave,
+        onMouseDown,
+        onBlur,
         "aria-label": ariaLabel,
         disabled: disabled || loading,
         className: `${baseDisplayClass} items-center justify-center ${alignmentClass} ${roundedClasses[rounded]} font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 cursor-pointer disabled:cursor-not-allowed disabled:opacity-50 ${styleClasses} ${sizeClasses} ${isIconOnly ? "p-0" : ""} ${widthClasses} ${activeClasses} ${className}`,
@@ -2248,9 +2256,73 @@ function useScrollReset(deps, container) {
 }
 var useScrollReset_default = useScrollReset;
 var IconButton = React__default.default.forwardRef(
-  ({ icon, iconSize = "md", iconColor = "currentColor", buttonStyle, ariaLabel, ...rest }, ref) => {
-    const iconNode = icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: icon, size: iconSize, color: iconColor }) : null;
-    return /* @__PURE__ */ jsxRuntime.jsx(button_default, { ref, icon: iconNode, style: buttonStyle, ariaLabel, ...rest });
+  ({
+    icon,
+    iconSize = "md",
+    iconColor = "currentColor",
+    buttonStyle,
+    ariaLabel,
+    hoverIcon,
+    onMouseEnter,
+    onMouseLeave,
+    onClick,
+    ...rest
+  }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const buttonRef = React.useRef(null);
+    const mergedRef = React.useCallback(
+      (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
+    const handleMouseEnter = (e) => {
+      setIsHovered(true);
+      onMouseEnter?.(e);
+    };
+    const handleMouseLeave = (e) => {
+      setIsHovered(false);
+      onMouseLeave?.(e);
+    };
+    const handleClick = (e) => {
+      setIsHovered(false);
+      onClick?.(e);
+    };
+    React.useEffect(() => {
+      if (!hoverIcon || !isHovered) return;
+      const handleGlobalMouseMove = (e) => {
+        if (!buttonRef.current) return;
+        const rect = buttonRef.current.getBoundingClientRect();
+        const isOutside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+        if (isOutside) {
+          setIsHovered(false);
+        }
+      };
+      document.addEventListener("mousemove", handleGlobalMouseMove);
+      return () => {
+        document.removeEventListener("mousemove", handleGlobalMouseMove);
+      };
+    }, [hoverIcon, isHovered]);
+    const displayIcon = isHovered && hoverIcon ? hoverIcon : icon;
+    const iconNode = displayIcon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: displayIcon, size: iconSize, color: iconColor }) : null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      button_default,
+      {
+        ref: mergedRef,
+        icon: iconNode,
+        style: buttonStyle,
+        ariaLabel,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        ...rest
+      }
+    );
   }
 );
 IconButton.displayName = "IconButton";
@@ -2344,7 +2416,8 @@ function LeftNavLayout({
                     /* @__PURE__ */ jsxRuntime.jsx(
                       icon_button_default,
                       {
-                        icon: collapsed ? "chevron-right" : "chevron-left",
+                        icon: collapsed ? "layout-sidebar-left-expand" : "layout-sidebar-left-collapse",
+                        hoverIcon: collapsed ? "layout-sidebar-left-expand-filled" : "layout-sidebar-left-collapse-filled",
                         ariaLabel: collapsed ? "Expand sidebar" : "Collapse sidebar",
                         buttonStyle: "ghost",
                         variant: "neutral",
@@ -4329,7 +4402,7 @@ function DataTable({
                 return /* @__PURE__ */ jsxRuntime.jsx(stack_default, { direction: "horizontal", spacing: "sm", justify: "center", children: rowActions.map((action, actionIndex) => {
                   if (action && typeof action === "object" && "onClick" in action) {
                     const actionConfig = action;
-                    return /* @__PURE__ */ jsxRuntime.jsx(
+                    const button = /* @__PURE__ */ jsxRuntime.jsx(
                       icon_button_default,
                       {
                         icon: actionConfig.icon,
@@ -4342,6 +4415,7 @@ function DataTable({
                       },
                       actionIndex
                     );
+                    return actionConfig.tooltip ? /* @__PURE__ */ jsxRuntime.jsx(tooltip_default, { content: actionConfig.tooltip, children: button }, actionIndex) : button;
                   } else {
                     return /* @__PURE__ */ jsxRuntime.jsx("div", { children: action }, actionIndex);
                   }