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

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 */
@@ -2650,6 +2660,14 @@ type DataTableProps<T> = {
     pageSize?: number;
     /** Whether to show checkboxes for row selection */
     selectable?: boolean;
+    /** Whether to enable search/filter functionality */
+    searchable?: boolean;
+    /** Specific keys to search within. If not provided, searches all fields. */
+    searchKeys?: (keyof T)[];
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
     /** Action buttons, function returning actions based on row data, or custom render function for the actions column */
     actions?: DataTableActionItem<T>[] | ((row: T, index: number) => DataTableActionItem<T>[] | ReactNode);
     /** Label for the actions column header */
@@ -2766,7 +2784,7 @@ type HeaderAction = {
  * />
  * ```
  */
-declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, searchable, searchKeys, searchPlaceholder, onSearchChange, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -2783,10 +2801,13 @@ type UseTableOptions<T> = {
         direction: 'asc' | 'desc';
     };
     pageSize?: number;
+    searchQuery?: string;
+    searchKeys?: (keyof T)[];
 };
 type UseTableReturn<T> = {
     currentData: T[];
     sortedData: T[];
+    filteredData: T[];
     sortConfig: SortConfig<T>;
     handleSort: (key: keyof T) => void;
     currentPage: number;
@@ -2805,9 +2826,9 @@ type UseTableReturn<T> = {
 };
 /**
  * useTable Hook - Client-side table state management
- * Handles sorting, pagination, and selection
+ * Handles filtering, sorting, pagination, and selection
  */
-declare function useTable<T>({ data, initialSort, pageSize }: UseTableOptions<T>): UseTableReturn<T>;
+declare function useTable<T>({ data, initialSort, pageSize, searchQuery, searchKeys }: UseTableOptions<T>): UseTableReturn<T>;
 
 type EmptyStateProps = {
     /** Main heading text for the empty state */
@@ -3379,6 +3400,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 */
@@ -2650,6 +2660,14 @@ type DataTableProps<T> = {
     pageSize?: number;
     /** Whether to show checkboxes for row selection */
     selectable?: boolean;
+    /** Whether to enable search/filter functionality */
+    searchable?: boolean;
+    /** Specific keys to search within. If not provided, searches all fields. */
+    searchKeys?: (keyof T)[];
+    /** Placeholder text for the search input */
+    searchPlaceholder?: string;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
     /** Action buttons, function returning actions based on row data, or custom render function for the actions column */
     actions?: DataTableActionItem<T>[] | ((row: T, index: number) => DataTableActionItem<T>[] | ReactNode);
     /** Label for the actions column header */
@@ -2766,7 +2784,7 @@ type HeaderAction = {
  * />
  * ```
  */
-declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ data, columns, className, striped, bordered, hoverable, compact, stickyHeader, sortable, paginated, pageSize, selectable, searchable, searchKeys, searchPlaceholder, onSearchChange, actions, actionsLabel, actionsWidth, onRowClick, onSelectionChange, emptyMessage, emptyIcon, headerActions, title, initialSort }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 declare namespace DataTable {
     var displayName: string;
 }
@@ -2783,10 +2801,13 @@ type UseTableOptions<T> = {
         direction: 'asc' | 'desc';
     };
     pageSize?: number;
+    searchQuery?: string;
+    searchKeys?: (keyof T)[];
 };
 type UseTableReturn<T> = {
     currentData: T[];
     sortedData: T[];
+    filteredData: T[];
     sortConfig: SortConfig<T>;
     handleSort: (key: keyof T) => void;
     currentPage: number;
@@ -2805,9 +2826,9 @@ type UseTableReturn<T> = {
 };
 /**
  * useTable Hook - Client-side table state management
- * Handles sorting, pagination, and selection
+ * Handles filtering, sorting, pagination, and selection
  */
-declare function useTable<T>({ data, initialSort, pageSize }: UseTableOptions<T>): UseTableReturn<T>;
+declare function useTable<T>({ data, initialSort, pageSize, searchQuery, searchKeys }: UseTableOptions<T>): UseTableReturn<T>;
 
 type EmptyStateProps = {
     /** Main heading text for the empty state */
@@ -3379,6 +3400,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;
 }
 /**