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

package/dist/index.d.cts

@@ -1595,6 +1595,14 @@ type ButtonProps = {
     children?: React__default.ReactNode;
     /** Click event handler */
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse enter event handler */
+    onMouseEnter?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse leave event handler */
+    onMouseLeave?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse down event handler */
+    onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Blur event handler */
+    onBlur?: (e: React__default.FocusEvent<HTMLButtonElement>) => void;
     /** Accessible label for icon-only buttons (required when no children) */
     ariaLabel?: string;
     /** Disables button interaction and applies disabled styling */
@@ -2584,6 +2592,8 @@ type DataTableAction<T> = {
     iconColor?: StatusColorProp;
     /** Accessible label for the action (shown in tooltip or screen readers) */
     label: string;
+    /** Tooltip text to display on hover. If not provided, label will be used for aria-label only. */
+    tooltip?: string;
     /** Callback when the action is clicked */
     onClick: (row: T, index: number) => void;
     /** Visual variant for the action button */
@@ -3379,6 +3389,8 @@ interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'style' | 'children
     iconSize?: IconSize;
     iconColor?: StatusColorProp | 'currentColor';
     buttonStyle?: ButtonProps['style'];
+    /** Icon to display on hover (if not provided, hover will keep the same icon) */
+    hoverIcon?: string;
     children?: never;
 }
 /**

package/dist/index.d.ts

@@ -1595,6 +1595,14 @@ type ButtonProps = {
     children?: React__default.ReactNode;
     /** Click event handler */
     onClick?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse enter event handler */
+    onMouseEnter?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse leave event handler */
+    onMouseLeave?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Mouse down event handler */
+    onMouseDown?: (e: React__default.MouseEvent<HTMLButtonElement>) => void;
+    /** Blur event handler */
+    onBlur?: (e: React__default.FocusEvent<HTMLButtonElement>) => void;
     /** Accessible label for icon-only buttons (required when no children) */
     ariaLabel?: string;
     /** Disables button interaction and applies disabled styling */
@@ -2584,6 +2592,8 @@ type DataTableAction<T> = {
     iconColor?: StatusColorProp;
     /** Accessible label for the action (shown in tooltip or screen readers) */
     label: string;
+    /** Tooltip text to display on hover. If not provided, label will be used for aria-label only. */
+    tooltip?: string;
     /** Callback when the action is clicked */
     onClick: (row: T, index: number) => void;
     /** Visual variant for the action button */
@@ -3379,6 +3389,8 @@ interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'style' | 'children
     iconSize?: IconSize;
     iconColor?: StatusColorProp | 'currentColor';
     buttonStyle?: ButtonProps['style'];
+    /** Icon to display on hover (if not provided, hover will keep the same icon) */
+    hoverIcon?: string;
     children?: never;
 }
 /**

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useEffect, useCallback, useMemo, useContext, createElement, useRef, useLayoutEffect, isValidElement, cloneElement, useId, Fragment as Fragment$1 } from 'react';
+import React, { createContext, useState, useRef, useCallback, useEffect, useMemo, useContext, createElement, useLayoutEffect, isValidElement, cloneElement, useId, Fragment as Fragment$1 } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as TablerIcons from '@tabler/icons-react';
 import { createPortal } from 'react-dom';
@@ -1984,6 +1984,10 @@ var Button = React.forwardRef(
   ({
     children,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseDown,
+    onBlur,
     ariaLabel,
     disabled = false,
     type = "button",
@@ -2060,6 +2064,10 @@ var Button = React.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}`,
@@ -2223,9 +2231,73 @@ function useScrollReset(deps, container) {
 }
 var useScrollReset_default = useScrollReset;
 var IconButton = React.forwardRef(
-  ({ icon, iconSize = "md", iconColor = "currentColor", buttonStyle, ariaLabel, ...rest }, ref) => {
-    const iconNode = icon ? /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSize, color: iconColor }) : null;
-    return /* @__PURE__ */ 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] = useState(false);
+    const buttonRef = useRef(null);
+    const mergedRef = 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);
+    };
+    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__ */ jsx(Icon, { name: displayIcon, size: iconSize, color: iconColor }) : null;
+    return /* @__PURE__ */ jsx(
+      button_default,
+      {
+        ref: mergedRef,
+        icon: iconNode,
+        style: buttonStyle,
+        ariaLabel,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onClick: handleClick,
+        ...rest
+      }
+    );
   }
 );
 IconButton.displayName = "IconButton";
@@ -2319,7 +2391,8 @@ function LeftNavLayout({
                     /* @__PURE__ */ 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",
@@ -4304,7 +4377,7 @@ function DataTable({
                 return /* @__PURE__ */ 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__ */ jsx(
+                    const button = /* @__PURE__ */ jsx(
                       icon_button_default,
                       {
                         icon: actionConfig.icon,
@@ -4317,6 +4390,7 @@ function DataTable({
                       },
                       actionIndex
                     );
+                    return actionConfig.tooltip ? /* @__PURE__ */ jsx(tooltip_default, { content: actionConfig.tooltip, children: button }, actionIndex) : button;
                   } else {
                     return /* @__PURE__ */ jsx("div", { children: action }, actionIndex);
                   }