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

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentProps, MouseEvent, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
+import React__default, { ReactNode, ComponentProps, MouseEvent, ComponentType, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
 
 declare const colors: {
     background: string;
@@ -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 */
@@ -2020,6 +2028,10 @@ type BreadcrumbItem = {
     label: string;
     /** Optional navigation link (last item typically has no href) */
     href?: string;
+    /** Optional click handler for client-side navigation */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional props passed to the link component (e.g., 'to' for React Router Link) */
+    [key: string]: unknown;
 };
 type BreadcrumbsProps = {
     /** Array of breadcrumb items to display in hierarchical order */
@@ -2028,11 +2040,40 @@ type BreadcrumbsProps = {
     separator?: ReactNode;
     /** Additional CSS classes for the breadcrumb container */
     className?: string;
+    /** Custom link component (e.g., React Router Link) for client-side navigation */
+    linkComponent?: ComponentType<{
+        className?: string;
+        onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+        [key: string]: unknown;
+    }>;
 };
 /**
  * Breadcrumbs - Hierarchical path display
+ *
+ * @example
+ * // With onClick handlers
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/', onClick: () => navigate('/') },
+ *     { label: 'Products', href: '/products', onClick: () => navigate('/products') },
+ *     { label: 'Item' }
+ *   ]}
+ * />
+ *
+ * @example
+ * // With React Router Link component
+ * import { Link } from 'react-router-dom';
+ *
+ * <Breadcrumbs
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Item' }
+ *   ]}
+ * />
  */
-declare function Breadcrumbs({ items, separator, className }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
+declare function Breadcrumbs({ items, separator, className, linkComponent }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
@@ -2551,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 */
@@ -2589,6 +2632,8 @@ type ColumnDef<T> = {
     chipVariant?: StatusColorProp;
     /** Size for badge or chip rendering */
     componentSize?: 'sm' | 'md' | 'lg';
+    /** Fallback value to display when cell value is null, undefined, or empty string */
+    fallback?: string;
 };
 type DataTableProps<T> = {
     /** Array of data objects to display in the table */
@@ -3344,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

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentProps, MouseEvent, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
+import React__default, { ReactNode, ComponentProps, MouseEvent, ComponentType, HTMLAttributes, CSSProperties, FormEvent, RefObject } from 'react';
 
 declare const colors: {
     background: string;
@@ -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 */
@@ -2020,6 +2028,10 @@ type BreadcrumbItem = {
     label: string;
     /** Optional navigation link (last item typically has no href) */
     href?: string;
+    /** Optional click handler for client-side navigation */
+    onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
+    /** Additional props passed to the link component (e.g., 'to' for React Router Link) */
+    [key: string]: unknown;
 };
 type BreadcrumbsProps = {
     /** Array of breadcrumb items to display in hierarchical order */
@@ -2028,11 +2040,40 @@ type BreadcrumbsProps = {
     separator?: ReactNode;
     /** Additional CSS classes for the breadcrumb container */
     className?: string;
+    /** Custom link component (e.g., React Router Link) for client-side navigation */
+    linkComponent?: ComponentType<{
+        className?: string;
+        onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+        [key: string]: unknown;
+    }>;
 };
 /**
  * Breadcrumbs - Hierarchical path display
+ *
+ * @example
+ * // With onClick handlers
+ * <Breadcrumbs
+ *   items={[
+ *     { label: 'Home', href: '/', onClick: () => navigate('/') },
+ *     { label: 'Products', href: '/products', onClick: () => navigate('/products') },
+ *     { label: 'Item' }
+ *   ]}
+ * />
+ *
+ * @example
+ * // With React Router Link component
+ * import { Link } from 'react-router-dom';
+ *
+ * <Breadcrumbs
+ *   linkComponent={Link}
+ *   items={[
+ *     { label: 'Home', to: '/' },
+ *     { label: 'Products', to: '/products' },
+ *     { label: 'Item' }
+ *   ]}
+ * />
  */
-declare function Breadcrumbs({ items, separator, className }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
+declare function Breadcrumbs({ items, separator, className, linkComponent }: Readonly<BreadcrumbsProps>): react_jsx_runtime.JSX.Element;
 declare namespace Breadcrumbs {
     var displayName: string;
 }
@@ -2551,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 */
@@ -2589,6 +2632,8 @@ type ColumnDef<T> = {
     chipVariant?: StatusColorProp;
     /** Size for badge or chip rendering */
     componentSize?: 'sm' | 'md' | 'lg';
+    /** Fallback value to display when cell value is null, undefined, or empty string */
+    fallback?: string;
 };
 type DataTableProps<T> = {
     /** Array of data objects to display in the table */
@@ -3344,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",
@@ -2813,15 +2886,21 @@ var PageTransition = ({
 };
 PageTransition.displayName = "PageTransition";
 var page_transition_default = PageTransition;
-function Breadcrumbs({ items, separator = "/", className = "" }) {
+function Breadcrumbs({ items, separator = "/", className = "", linkComponent }) {
+  const LinkComponent = linkComponent || "a";
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center space-x-2 text-sm", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
     const key = item.href || item.label;
+    const { label: _label, onClick, href, ...linkProps } = item;
+    const hasLinkProps = href || onClick || Object.keys(linkProps).length > 0;
+    const shouldRenderLink = hasLinkProps && !isLast;
     return /* @__PURE__ */ jsxs("li", { className: "flex items-center", children: [
-      item.href && !isLast ? /* @__PURE__ */ jsx(
-        "a",
+      shouldRenderLink ? /* @__PURE__ */ jsx(
+        LinkComponent,
         {
-          href: item.href,
+          ...href ? { href } : {},
+          ...linkProps,
+          onClick,
           className: "text-primary hover:text-primary/80 hover:underline cursor-pointer transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ring rounded px-1 -mx-1",
           children: item.label
         }
@@ -4181,6 +4260,10 @@ function DataTable({
     }
   };
   const renderCellContent = (value, column, row, rowIndex) => {
+    const isEmpty = value == null || value === "";
+    if (isEmpty && column.fallback !== void 0) {
+      return column.fallback;
+    }
     if (column.render) {
       return column.render(value, row, rowIndex);
     }
@@ -4294,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,
@@ -4307,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);
                   }