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

package/dist/index.js

@@ -3945,6 +3945,110 @@ function CodeBlock({ code, className = "", showCopy = true }) {
 }
 CodeBlock.displayName = "CodeBlock";
 var code_block_default = CodeBlock;
+function Input({
+  value,
+  defaultValue,
+  onChange,
+  onFocus,
+  onBlur,
+  placeholder,
+  disabled = false,
+  type = "text",
+  ariaLabel,
+  ref,
+  id,
+  name,
+  required = false,
+  size = "md",
+  width,
+  validationState = "default",
+  autoComplete,
+  maxLength,
+  minLength,
+  pattern,
+  title,
+  readOnly = false
+}) {
+  const widthClass = width ? inputWidthSizes[width] : "w-full";
+  const inputClasses = `${getInputClasses(size, validationState)} ${widthClass}`.trim();
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type,
+      value,
+      defaultValue,
+      ref,
+      onChange,
+      onFocus,
+      onBlur,
+      placeholder,
+      autoComplete,
+      disabled,
+      "aria-label": ariaLabel,
+      id,
+      name,
+      required,
+      readOnly,
+      maxLength,
+      minLength,
+      pattern,
+      title,
+      "aria-invalid": validationState === "error",
+      className: inputClasses
+    }
+  );
+}
+Input.displayName = "Input";
+var input_default = Input;
+var containerBaseClasses = "inline-flex items-stretch rounded-lg border shadow-sm bg-background focus-within:ring-2 focus-within:ring-ring/20 transition-colors duration-150 overflow-hidden";
+var inputResetClasses = [
+  "[&>input]:border-0 [&>input]:shadow-none [&>input]:rounded-none [&>input]:ring-0",
+  "[&>input]:focus:ring-0 [&>input]:focus:border-0 [&>input]:bg-transparent",
+  "[&>input]:flex-1 [&>input]:min-w-0"
+].join(" ");
+var buttonResetClasses = [
+  "[&_button]:rounded-none [&_button]:border-0 [&_button]:shadow-none [&_button]:m-0",
+  "[&_button]:h-full"
+].join(" ");
+function InputGroup({
+  children,
+  prefix,
+  suffix,
+  validationState = "default",
+  disabled = false,
+  className
+}) {
+  const isTextPrefix = typeof prefix === "string" || typeof prefix === "number";
+  const isTextSuffix = typeof suffix === "string" || typeof suffix === "number";
+  const borderClass = validationState === "default" ? "border-input focus-within:border-ring" : validationBorderClasses[validationState].split(" ")[0];
+  const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "";
+  const enhancedChild = isValidElement(children) && disabled ? cloneElement(children, { disabled: true }) : children;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass} ${className ?? ""}`.trim(),
+      children: [
+        prefix && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `flex items-center shrink-0 ${isTextPrefix ? "px-3 bg-muted/50 text-muted-foreground text-sm" : "px-3 text-muted-foreground"}`,
+            children: prefix
+          }
+        ),
+        enhancedChild,
+        suffix && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: isTextSuffix ? "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0" : "flex items-stretch shrink-0",
+            children: suffix
+          }
+        )
+      ]
+    }
+  );
+}
+InputGroup.displayName = "InputGroup";
+var input_group_default = InputGroup;
 function Table({
   children,
   className = "",
@@ -4075,15 +4179,41 @@ function EmptyState({ title, description, icon, action, className = "" }) {
 }
 EmptyState.displayName = "EmptyState";
 var empty_state_default = EmptyState;
-function useTable({ data, initialSort, pageSize = 10 }) {
+function useTable({
+  data,
+  initialSort,
+  pageSize = 10,
+  searchQuery = "",
+  searchKeys
+}) {
   const [sortConfig, setSortConfig] = useState(
     initialSort ? { key: initialSort.key, direction: initialSort.direction } : null
   );
   const [currentPage, setCurrentPage] = useState(1);
   const [selectedRows, setSelectedRows] = useState(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [searchQuery]);
+  const filteredData = useMemo(() => {
+    if (!searchQuery || searchQuery.trim() === "") return data;
+    const query = searchQuery.toLowerCase();
+    return data.filter((row) => {
+      if (searchKeys && searchKeys.length > 0) {
+        return searchKeys.some((key) => {
+          const value = row[key];
+          if (value == null) return false;
+          return String(value).toLowerCase().includes(query);
+        });
+      }
+      return Object.values(row).some((value) => {
+        if (value == null) return false;
+        return String(value).toLowerCase().includes(query);
+      });
+    });
+  }, [data, searchQuery, searchKeys]);
   const sortedData = useMemo(() => {
-    if (!sortConfig) return data;
-    const sorted = [...data].sort((a, b) => {
+    if (!sortConfig) return filteredData;
+    const sorted = [...filteredData].sort((a, b) => {
       const aValue = a[sortConfig.key];
       const bValue = b[sortConfig.key];
       if (aValue === bValue) return 0;
@@ -4095,7 +4225,7 @@ function useTable({ data, initialSort, pageSize = 10 }) {
       return sortConfig.direction === "asc" ? 1 : -1;
     });
     return sorted;
-  }, [data, sortConfig]);
+  }, [filteredData, sortConfig]);
   const totalPages = Math.ceil(sortedData.length / pageSize);
   const startIndex = (currentPage - 1) * pageSize;
   const endIndex = startIndex + pageSize;
@@ -4145,6 +4275,7 @@ function useTable({ data, initialSort, pageSize = 10 }) {
   return {
     currentData,
     sortedData,
+    filteredData,
     sortConfig,
     handleSort,
     currentPage,
@@ -4176,6 +4307,10 @@ function DataTable({
   paginated = false,
   pageSize = 10,
   selectable = false,
+  searchable = false,
+  searchKeys,
+  searchPlaceholder = "Search...",
+  onSearchChange,
   actions,
   actionsLabel = "Actions",
   actionsWidth = "w-32",
@@ -4187,14 +4322,24 @@ function DataTable({
   title,
   initialSort
 }) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const handleSearchChange = (value) => {
+    setSearchQuery(value);
+    if (onSearchChange) {
+      onSearchChange(value);
+    }
+  };
   const tableOptions = {
     data,
     initialSort,
-    pageSize
+    pageSize,
+    searchQuery,
+    searchKeys
   };
   const {
     currentData,
     sortedData,
+    filteredData,
     sortConfig,
     handleSort,
     currentPage,
@@ -4210,7 +4355,7 @@ function DataTable({
     isAllSelected
   } = useTable(tableOptions);
   const displayData = paginated ? currentData : sortedData;
-  const hasHeader = Boolean(title && String(title).length > 0 || headerActions);
+  const hasHeader = Boolean(title && String(title).length > 0 || headerActions || searchable);
   const handleToggleRow = (index) => {
     toggleRow(index);
     if (onSelectionChange) {
@@ -4295,126 +4440,152 @@ function DataTable({
     return /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(empty_state_default, { title: emptyMessage, icon: emptyIcon, className: "py-12" }) });
   }
   return /* @__PURE__ */ jsxs("div", { className, children: [
-    hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: Array.isArray(headerActions) && headerActions.map((act, idx) => /* @__PURE__ */ jsxs(
-        button_default,
-        {
-          onClick: act.onClick,
-          variant: act.variant,
-          style: act.style,
-          size: act.size,
-          className: act.className,
-          ariaLabel: act.label && act.icon && !act.label ? act.label : void 0,
-          children: [
-            act.icon ? /* @__PURE__ */ jsx(Icon, { name: act.icon, size: "sm" }) : null,
-            act.label
-          ]
-        },
-        idx
-      )) })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: `${stickyHeader ? "overflow-auto max-h-[600px]" : ""} overflow-x-auto`, children: /* @__PURE__ */ jsxs(Table, { striped, bordered, hoverable, compact, children: [
-      /* @__PURE__ */ jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxs(TableRow, { children: [
-        selectable && /* @__PURE__ */ jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsx(checkbox_default, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
-        columns.map((column) => /* @__PURE__ */ jsx(
-          TableHeadCell,
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 mb-3", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+        searchable && /* @__PURE__ */ jsx("div", { className: "flex-1 max-w-md", children: /* @__PURE__ */ jsx(input_group_default, { prefix: /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm" }), className: "w-full", children: /* @__PURE__ */ jsx(
+          input_default,
           {
-            align: column.align,
-            className: column.width ? `w-[${column.width}]` : "",
-            children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxs(
-              "button",
-              {
-                onClick: () => handleSort(column.key),
-                className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium",
-                type: "button",
-                children: [
-                  column.label,
-                  renderSortIcon(column.key)
-                ]
-              }
-            ) : column.label
-          },
-          String(column.key)
-        )),
-        actions && /* @__PURE__ */ jsx(TableHeadCell, { align: "center", className: actionsWidth, children: actionsLabel })
-      ] }) }),
-      /* @__PURE__ */ jsx(TableBody, { children: displayData.map((row, rowIndex) => {
-        const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
-        const isSelected = isRowSelected(actualIndex);
-        return /* @__PURE__ */ jsxs(
-          TableRow,
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => handleSearchChange(e.target.value),
+            placeholder: searchPlaceholder
+          }
+        ) }) }),
+        Array.isArray(headerActions) && headerActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: headerActions.map((act, idx) => /* @__PURE__ */ jsxs(
+          button_default,
           {
-            selected: isSelected,
-            onClick: onRowClick ? () => onRowClick(row, actualIndex) : void 0,
-            className: onRowClick ? "cursor-pointer" : "",
+            onClick: act.onClick,
+            variant: act.variant,
+            style: act.style,
+            size: act.size,
+            className: act.className,
+            ariaLabel: act.label && act.icon && !act.label ? act.label : void 0,
             children: [
-              selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
-                checkbox_default,
+              act.icon ? /* @__PURE__ */ jsx(Icon, { name: act.icon, size: "sm" }) : null,
+              act.label
+            ]
+          },
+          idx
+        )) })
+      ] })
+    ] }),
+    filteredData.length === 0 && searchQuery.trim() ? /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(
+      empty_state_default,
+      {
+        title: "No results found",
+        description: `No items match "${searchQuery}". Try adjusting your search.`,
+        icon: "search",
+        className: "py-12"
+      }
+    ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: `${stickyHeader ? "overflow-auto max-h-[600px]" : ""} overflow-x-auto`, children: /* @__PURE__ */ jsxs(Table, { striped, bordered, hoverable, compact, children: [
+        /* @__PURE__ */ jsx(TableHeader, { className: stickyHeader ? "sticky top-0 z-10 bg-background shadow-sm" : "", children: /* @__PURE__ */ jsxs(TableRow, { children: [
+          selectable && /* @__PURE__ */ jsx(TableHeadCell, { className: "w-12", children: /* @__PURE__ */ jsx(checkbox_default, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
+          columns.map((column) => /* @__PURE__ */ jsx(
+            TableHeadCell,
+            {
+              align: column.align,
+              className: column.width ? `w-[${column.width}]` : "",
+              children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxs(
+                "button",
                 {
-                  checked: isSelected,
-                  onChange: () => handleToggleRow(actualIndex),
-                  ariaLabel: `Select row ${actualIndex + 1}`
+                  onClick: () => handleSort(column.key),
+                  className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium",
+                  type: "button",
+                  children: [
+                    column.label,
+                    renderSortIcon(column.key)
+                  ]
                 }
-              ) }),
-              columns.map((column) => {
-                const value = row[column.key];
-                const content = renderCellContent(value, column, row, actualIndex);
-                return /* @__PURE__ */ jsx(TableCell, { align: column.align, wrapText: column.wrapText, children: content }, String(column.key));
-              }),
-              actions && /* @__PURE__ */ jsx(TableCell, { align: "center", onClick: (e) => e.stopPropagation(), children: (() => {
-                let rowActions;
-                if (Array.isArray(actions)) {
-                  rowActions = actions;
-                } else {
-                  const result = actions(row, actualIndex);
-                  if (Array.isArray(result)) {
-                    rowActions = result;
-                  } else {
-                    return result;
+              ) : column.label
+            },
+            String(column.key)
+          )),
+          actions && /* @__PURE__ */ jsx(TableHeadCell, { align: "center", className: actionsWidth, children: actionsLabel })
+        ] }) }),
+        /* @__PURE__ */ jsx(TableBody, { children: displayData.map((row, rowIndex) => {
+          const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
+          const isSelected = isRowSelected(actualIndex);
+          return /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              selected: isSelected,
+              onClick: onRowClick ? () => onRowClick(row, actualIndex) : void 0,
+              className: onRowClick ? "cursor-pointer" : "",
+              children: [
+                selectable && /* @__PURE__ */ jsx(TableCell, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(
+                  checkbox_default,
+                  {
+                    checked: isSelected,
+                    onChange: () => handleToggleRow(actualIndex),
+                    ariaLabel: `Select row ${actualIndex + 1}`
                   }
-                }
-                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;
-                    const button = /* @__PURE__ */ jsx(
-                      icon_button_default,
-                      {
-                        icon: actionConfig.icon,
-                        iconSize: actionConfig.iconSize || "md",
-                        buttonStyle: "ghost",
-                        variant: actionConfig.variant || "neutral",
-                        iconColor: actionConfig.iconColor,
-                        ariaLabel: actionConfig.label,
-                        onClick: () => actionConfig.onClick(row, actualIndex)
-                      },
-                      actionIndex
-                    );
-                    return actionConfig.tooltip ? /* @__PURE__ */ jsx(tooltip_default, { content: actionConfig.tooltip, children: button }, actionIndex) : button;
+                ) }),
+                columns.map((column) => {
+                  const value = row[column.key];
+                  const content = renderCellContent(value, column, row, actualIndex);
+                  return /* @__PURE__ */ jsx(TableCell, { align: column.align, wrapText: column.wrapText, children: content }, String(column.key));
+                }),
+                actions && /* @__PURE__ */ jsx(TableCell, { align: "center", onClick: (e) => e.stopPropagation(), children: (() => {
+                  let rowActions;
+                  if (Array.isArray(actions)) {
+                    rowActions = actions;
                   } else {
-                    return /* @__PURE__ */ jsx("div", { children: action }, actionIndex);
+                    const result = actions(row, actualIndex);
+                    if (Array.isArray(result)) {
+                      rowActions = result;
+                    } else {
+                      return result;
+                    }
                   }
-                }) });
-              })() })
-            ]
-          },
-          actualIndex
-        );
-      }) })
-    ] }) }),
-    paginated && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
-        "Page ",
-        currentPage,
-        " of ",
-        totalPages,
-        " (",
-        data.length,
-        " total rows)"
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
-        /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
+                  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;
+                      const button = /* @__PURE__ */ jsx(
+                        icon_button_default,
+                        {
+                          icon: actionConfig.icon,
+                          iconSize: actionConfig.iconSize || "md",
+                          buttonStyle: "ghost",
+                          variant: actionConfig.variant || "neutral",
+                          iconColor: actionConfig.iconColor,
+                          ariaLabel: actionConfig.label,
+                          onClick: () => actionConfig.onClick(row, actualIndex)
+                        },
+                        actionIndex
+                      );
+                      return actionConfig.tooltip ? /* @__PURE__ */ jsx(tooltip_default, { content: actionConfig.tooltip, children: button }, actionIndex) : button;
+                    } else {
+                      return /* @__PURE__ */ jsx("div", { children: action }, actionIndex);
+                    }
+                  }) });
+                })() })
+              ]
+            },
+            actualIndex
+          );
+        }) })
+      ] }) }),
+      paginated && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          currentPage,
+          " of ",
+          totalPages,
+          " (",
+          filteredData.length,
+          " ",
+          searchQuery.trim() ? "filtered" : "total",
+          " ",
+          "rows",
+          searchQuery.trim() && data.length !== filteredData.length ? ` of ${data.length}` : "",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
+          /* @__PURE__ */ jsx(button_default, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
+        ] })
       ] })
     ] })
   ] });
@@ -5612,61 +5783,6 @@ function FormField({
 }
 FormField.displayName = "FormField";
 var form_field_default = FormField;
-function Input({
-  value,
-  defaultValue,
-  onChange,
-  onFocus,
-  onBlur,
-  placeholder,
-  disabled = false,
-  type = "text",
-  ariaLabel,
-  ref,
-  id,
-  name,
-  required = false,
-  size = "md",
-  width,
-  validationState = "default",
-  autoComplete,
-  maxLength,
-  minLength,
-  pattern,
-  title,
-  readOnly = false
-}) {
-  const widthClass = width ? inputWidthSizes[width] : "w-full";
-  const inputClasses = `${getInputClasses(size, validationState)} ${widthClass}`.trim();
-  return /* @__PURE__ */ jsx(
-    "input",
-    {
-      type,
-      value,
-      defaultValue,
-      ref,
-      onChange,
-      onFocus,
-      onBlur,
-      placeholder,
-      autoComplete,
-      disabled,
-      "aria-label": ariaLabel,
-      id,
-      name,
-      required,
-      readOnly,
-      maxLength,
-      minLength,
-      pattern,
-      title,
-      "aria-invalid": validationState === "error",
-      className: inputClasses
-    }
-  );
-}
-Input.displayName = "Input";
-var input_default = Input;
 function FormInput({
   // FormField props
   label,
@@ -5866,55 +5982,6 @@ function FormTextarea({
 }
 FormTextarea.displayName = "FormTextarea";
 var form_textarea_default = FormTextarea;
-var containerBaseClasses = "inline-flex items-stretch rounded-lg border shadow-sm bg-background focus-within:ring-2 focus-within:ring-ring/20 transition-colors duration-150 overflow-hidden";
-var inputResetClasses = [
-  "[&>input]:border-0 [&>input]:shadow-none [&>input]:rounded-none [&>input]:ring-0",
-  "[&>input]:focus:ring-0 [&>input]:focus:border-0 [&>input]:bg-transparent",
-  "[&>input]:flex-1 [&>input]:min-w-0"
-].join(" ");
-var buttonResetClasses = [
-  "[&_button]:rounded-none [&_button]:border-0 [&_button]:shadow-none [&_button]:m-0",
-  "[&_button]:h-full"
-].join(" ");
-function InputGroup({
-  children,
-  prefix,
-  suffix,
-  validationState = "default",
-  disabled = false,
-  className
-}) {
-  const isTextPrefix = typeof prefix === "string" || typeof prefix === "number";
-  const isTextSuffix = typeof suffix === "string" || typeof suffix === "number";
-  const borderClass = validationState === "default" ? "border-input focus-within:border-ring" : validationBorderClasses[validationState].split(" ")[0];
-  const disabledClass = disabled ? "opacity-50 cursor-not-allowed" : "";
-  const enhancedChild = isValidElement(children) && disabled ? cloneElement(children, { disabled: true }) : children;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${containerBaseClasses} ${borderClass} ${inputResetClasses} ${buttonResetClasses} ${disabledClass} ${className ?? ""}`.trim(),
-      children: [
-        prefix && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `flex items-center shrink-0 ${isTextPrefix ? "px-3 bg-muted/50 text-muted-foreground text-sm" : "px-3 text-muted-foreground"}`,
-            children: prefix
-          }
-        ),
-        enhancedChild,
-        suffix && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: isTextSuffix ? "flex items-center px-3 bg-muted/50 text-muted-foreground text-sm shrink-0" : "flex items-stretch shrink-0",
-            children: suffix
-          }
-        )
-      ]
-    }
-  );
-}
-InputGroup.displayName = "InputGroup";
-var input_group_default = InputGroup;
 function MultiSelect({
   options,
   value = [],