@godxjp/ui 14.0.1 → 15.0.0

package/dist/components/data-display/data-table.js

@@ -1,11 +1,45 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { ArrowDown, ArrowUp, ChevronsUpDown, Layers, Layers2, MoreHorizontal } from "lucide-react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import {
+  ArrowDown,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
+  ChevronsUpDown,
+  Layers,
+  Layers2,
+  MoreHorizontal,
+  SlidersHorizontal
+} from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation";
 import { Flex } from "../layout/flex";
 import { Button } from "../general/button";
 import { EmptyState } from "./empty-state";
 import { Checkbox } from "../data-entry/checkbox";
+import { SearchInput } from "../data-entry/search-input";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../data-entry/select";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from "../navigation/dropdown-menu";
 import {
   Table,
   TableBody,
@@ -21,6 +55,17 @@ import {
   tableCellPaddingClass,
   tableRowHeightClass
 } from "../../lib/control-styles";
+function toTanstackColumns(columns) {
+  return columns.map((col) => ({
+    id: col.key,
+    accessorFn: (row) => row[col.key],
+    header: () => col.header,
+    enableSorting: !!col.sortable,
+    enableHiding: col.enableHiding ?? true,
+    enableGlobalFilter: true,
+    meta: { lean: col }
+  }));
+}
 const DataTableContext = React.createContext(null);
 function useDataTableContext() {
   const ctx = React.useContext(DataTableContext);
@@ -36,6 +81,13 @@ const noopGetRowId = (row) => {
   if (typeof id === "number") return String(id);
   return "";
 };
+function sortToSortingState(sort) {
+  return sort ? [{ id: sort.key, desc: sort.direction === "desc" }] : [];
+}
+function sortingStateToSort(state) {
+  const first = state[0];
+  return first ? { key: first.id, direction: first.desc ? "desc" : "asc" } : void 0;
+}
 function DataTable({
   data,
   columns,
@@ -48,6 +100,16 @@ function DataTable({
   onDensityChange,
   sort,
   onSortChange,
+  globalFilter: controlledGlobalFilter,
+  onGlobalFilterChange,
+  pagination: controlledPagination,
+  onPaginationChange,
+  rowCount,
+  columnVisibility: controlledVisibility,
+  onColumnVisibilityChange,
+  manualSorting = false,
+  manualFiltering = false,
+  manualPagination = false,
   loading = false,
   empty,
   striped = false,
@@ -63,43 +125,87 @@ function DataTable({
     setInternalDensity(d);
     onDensityChange?.(d);
   };
-  const [internalSelected, setInternalSelected] = React.useState(/* @__PURE__ */ new Set());
-  const selected = controlledSelected ?? internalSelected;
-  const setSelected = (next) => {
-    setInternalSelected(next);
-    onSelectChange?.(next);
+  const [internalSorting, setInternalSorting] = React.useState([]);
+  const [internalFilters] = React.useState([]);
+  const [internalGlobal, setInternalGlobal] = React.useState("");
+  const [internalPagination, setInternalPagination] = React.useState({
+    pageIndex: 0,
+    pageSize: 10
+  });
+  const [internalSelection, setInternalSelection] = React.useState({});
+  const [internalVisibility, setInternalVisibility] = React.useState({});
+  const selectionFromSet = React.useCallback(
+    (set) => Object.fromEntries([...set].map((id) => [id, true])),
+    []
+  );
+  const sortingState = sort !== void 0 ? sortToSortingState(sort) : internalSorting;
+  const rowSelection = controlledSelected !== void 0 ? selectionFromSet(controlledSelected) : internalSelection;
+  const onSortingChange = (updater) => {
+    const next = typeof updater === "function" ? updater(sortingState) : updater;
+    if (sort !== void 0 || onSortChange) {
+      onSortChange?.(sortingStateToSort(next));
+    } else {
+      setInternalSorting(next);
+    }
   };
-  const toggleSelect = (id) => {
-    const next = new Set(selected);
-    if (next.has(id)) next.delete(id);
-    else next.add(id);
-    setSelected(next);
+  const onRowSelectionChange = (updater) => {
+    const next = typeof updater === "function" ? updater(rowSelection) : updater;
+    if (controlledSelected !== void 0 || onSelectChange) {
+      const set = new Set(Object.keys(next).filter((id) => next[id]));
+      onSelectChange?.(set);
+      if (controlledSelected === void 0) setInternalSelection(next);
+    } else {
+      setInternalSelection(next);
+    }
   };
-  const emptyColSpan = columns.length + (selectable ? 1 : 0);
-  const allSelected = data.length > 0 && data.every((r) => selected.has(getRowId(r)));
-  const someSelected = !allSelected && data.some((r) => selected.has(getRowId(r)));
-  const toggleSelectAll = () => {
-    if (allSelected) setSelected(/* @__PURE__ */ new Set());
-    else setSelected(new Set(data.map(getRowId)));
+  const onGlobalFilterChangeFn = (updater) => {
+    const current = controlledGlobalFilter ?? internalGlobal;
+    const next = typeof updater === "function" ? updater(current) : updater;
+    if (controlledGlobalFilter !== void 0 || onGlobalFilterChange) {
+      onGlobalFilterChange?.(next);
+      if (controlledGlobalFilter === void 0) setInternalGlobal(next);
+    } else {
+      setInternalGlobal(next);
+    }
   };
-  const ctx = {
+  const tanstackColumns = React.useMemo(() => toTanstackColumns(columns), [columns]);
+  const table = useReactTable({
     data,
-    columns,
+    columns: tanstackColumns,
+    getRowId,
+    getCoreRowModel: getCoreRowModel(),
+    ...manualSorting ? {} : { getSortedRowModel: getSortedRowModel() },
+    ...manualFiltering ? {} : { getFilteredRowModel: getFilteredRowModel() },
+    ...manualPagination ? {} : { getPaginationRowModel: getPaginationRowModel() },
+    manualSorting,
+    manualFiltering,
+    manualPagination,
+    rowCount,
+    enableRowSelection: selectable,
+    state: {
+      sorting: sortingState,
+      columnFilters: internalFilters,
+      globalFilter: controlledGlobalFilter ?? internalGlobal,
+      pagination: controlledPagination ?? internalPagination,
+      rowSelection,
+      columnVisibility: controlledVisibility ?? internalVisibility
+    },
+    onSortingChange,
+    onGlobalFilterChange: onGlobalFilterChangeFn,
+    onPaginationChange: onPaginationChange ?? setInternalPagination,
+    onRowSelectionChange,
+    onColumnVisibilityChange: onColumnVisibilityChange ?? setInternalVisibility
+  });
+  const ctx = {
+    table,
     density,
     setDensity,
-    selected,
-    toggleSelect,
-    toggleSelectAll,
-    allSelected,
-    someSelected,
     selectable,
-    getRowId,
-    onRowClick,
     sort,
     onSortChange,
+    onRowClick,
     loading,
     empty,
-    emptyColSpan,
     striped,
     hoverable,
     stickyHeader,
@@ -117,18 +223,82 @@ DataTable.Toolbar = function DataTableToolbar({
   children,
   className
 }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("ui-data-table-toolbar", className), children });
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "row",
+      align: "center",
+      justify: "between",
+      gap: "sm",
+      wrap: true,
+      className: cn("ui-data-table-toolbar", className),
+      children
+    }
+  );
 };
 DataTable.Toolbar.displayName = "DataTable.Toolbar";
+DataTable.Search = function DataTableSearch({
+  placeholder,
+  className
+}) {
+  const { table } = useDataTableContext();
+  const { t } = useTranslation();
+  const value = table.getState().globalFilter ?? "";
+  return /* @__PURE__ */ jsx(
+    SearchInput,
+    {
+      value,
+      onValueChange: (q) => table.setGlobalFilter(q),
+      onSearch: (q) => table.setGlobalFilter(q),
+      placeholder: placeholder ?? t("dataGrid.searchPlaceholder"),
+      ariaLabel: t("dataGrid.search"),
+      className
+    }
+  );
+};
+DataTable.Search.displayName = "DataTable.Search";
+DataTable.ViewOptions = function DataTableViewOptions({ className }) {
+  const { table } = useDataTableContext();
+  const { t } = useTranslation();
+  const hideable = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  if (hideable.length === 0) return null;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className, children: [
+      /* @__PURE__ */ jsx(SlidersHorizontal, { className: "size-4 shrink-0", "aria-hidden": "true" }),
+      t("dataGrid.view")
+    ] }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align: "end", children: [
+      /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t("dataGrid.toggleColumns") }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      hideable.map((column) => /* @__PURE__ */ jsx(
+        DropdownMenuCheckboxItem,
+        {
+          checked: column.getIsVisible(),
+          onCheckedChange: (v) => column.toggleVisibility(!!v),
+          children: columnLabel(column)
+        },
+        column.id
+      ))
+    ] })
+  ] });
+};
+DataTable.ViewOptions.displayName = "DataTable.ViewOptions";
+function columnLabel(column) {
+  const header = column.columnDef.meta?.lean?.header;
+  if (typeof header === "string" && header.length > 0) return header;
+  return column.id;
+}
 DataTable.SelectAll = function DataTableSelectAll() {
-  const { allSelected, someSelected, toggleSelectAll, selectable } = useDataTableContext();
+  const { table, selectable } = useDataTableContext();
   const { t } = useTranslation();
   if (!selectable) return null;
+  const allSelected = table.getIsAllPageRowsSelected();
+  const someSelected = table.getIsSomePageRowsSelected();
   return /* @__PURE__ */ jsx(
     Checkbox,
     {
       checked: allSelected ? true : someSelected ? "indeterminate" : false,
-      onCheckedChange: toggleSelectAll,
+      onCheckedChange: (v) => table.toggleAllPageRowsSelected(!!v),
       "aria-label": t("dataTable.selectAll")
     }
   );
@@ -141,8 +311,23 @@ DataTable.BulkActions = function DataTableBulkActions({
 }) {
   const ctx = useOptionalDataTableContext();
   const { t } = useTranslation();
-  const c = count ?? ctx?.selected.size ?? 0;
+  const selectedCount = ctx?.table.getSelectedRowModel().rows.length ?? 0;
+  const c = count ?? selectedCount;
   if (c === 0) return null;
+  if (typeof children === "function") {
+    return /* @__PURE__ */ jsx(
+      Flex,
+      {
+        direction: "row",
+        align: "center",
+        gap: "sm",
+        role: "region",
+        "aria-label": t("dataTable.bulkActions"),
+        className,
+        children: children(c)
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -182,19 +367,13 @@ DataTable.DensityToggle = function DataTableDensityToggle() {
 DataTable.DensityToggle.displayName = "DataTable.DensityToggle";
 DataTable.Content = function DataTableContent() {
   const {
-    data,
-    columns,
-    density: _density,
+    table,
     selectable,
-    selected,
-    toggleSelect,
-    getRowId,
-    onRowClick,
     sort,
     onSortChange,
+    onRowClick,
     loading,
     empty,
-    emptyColSpan,
     striped,
     hoverable,
     stickyHeader,
@@ -203,17 +382,27 @@ DataTable.Content = function DataTableContent() {
   const { t } = useTranslation();
   const rowPadding = tableRowHeightClass;
   const cellPadding = tableCellPaddingClass;
-  const hasPinEnd = columns.some((col) => col.pin === "end");
+  const visibleColumns = table.getVisibleLeafColumns().map((c) => c.columnDef.meta?.lean).filter((c) => !!c);
+  const emptyColSpan = visibleColumns.length + (selectable ? 1 : 0);
+  const hasPinEnd = visibleColumns.some((col) => col.pin === "end");
+  const activeSort = sort ?? sortingStateToSort(table.getState().sorting);
+  const isControlledSort = sort !== void 0 || !!onSortChange;
   const onHeaderClick = (col) => {
-    if (!col.sortable || !onSortChange) return;
-    if (sort?.key !== col.key) {
-      onSortChange({ key: col.key, direction: "asc" });
-    } else if (sort.direction === "asc") {
-      onSortChange({ key: col.key, direction: "desc" });
-    } else {
-      onSortChange(void 0);
+    if (!col.sortable) return;
+    if (isControlledSort) {
+      if (activeSort?.key !== col.key) {
+        onSortChange?.({ key: col.key, direction: "asc" });
+      } else if (activeSort.direction === "asc") {
+        onSortChange?.({ key: col.key, direction: "desc" });
+      } else {
+        onSortChange?.(void 0);
+      }
+      return;
     }
+    table.getColumn(col.key)?.toggleSorting();
   };
+  const dataRows = table.getRowModel().rows;
+  const rowCount = dataRows.length;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -228,10 +417,10 @@ DataTable.Content = function DataTableContent() {
           children: /* @__PURE__ */ jsxs(Table, { children: [
             /* @__PURE__ */ jsx(TableHeader, { className: cn("bg-secondary", stickyHeader && "sticky top-0 z-10"), children: /* @__PURE__ */ jsxs(TableRow, { children: [
               selectable && /* @__PURE__ */ jsx(TableHead, { className: "w-10", children: /* @__PURE__ */ jsx(DataTable.SelectAll, {}) }),
-              columns.map((col) => {
-                const isSortable = !!col.sortable && !!onSortChange;
-                const isActiveSort = isSortable && sort?.key === col.key;
-                const sortIndicator = isSortable ? isActiveSort ? sort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
+              visibleColumns.map((col) => {
+                const isSortable = !!col.sortable;
+                const isActiveSort = isSortable && activeSort?.key === col.key;
+                const sortIndicator = isSortable ? isActiveSort ? activeSort?.direction === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ArrowDown, { className: "size-3", "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronsUpDown, { className: "text-muted-foreground size-3", "aria-hidden": "true" }) : null;
                 const label = /* @__PURE__ */ jsxs("span", { className: "ui-data-table-sort-label", children: [
                   col.header,
                   sortIndicator
@@ -240,7 +429,7 @@ DataTable.Content = function DataTableContent() {
                   TableHead,
                   {
                     "data-empty": !col.header || void 0,
-                    "aria-sort": isSortable ? isActiveSort ? sort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
+                    "aria-sort": isSortable ? isActiveSort ? activeSort?.direction === "asc" ? "ascending" : "descending" : "none" : void 0,
                     className: cn(
                       col.width,
                       col.align === "right" && "text-end",
@@ -270,9 +459,9 @@ DataTable.Content = function DataTableContent() {
               // share its borders + column widths — no second framed container
               // (which double-borders when the table sits in a Card). Count is
               // bounded to the previous page so the height barely shifts.
-              Array.from({ length: Math.min(Math.max(data.length, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
+              Array.from({ length: Math.min(Math.max(rowCount, 6), 10) }).map((_, i) => /* @__PURE__ */ jsxs(TableRow, { className: cn(rowPadding, "hover:bg-transparent"), children: [
                 selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx("div", { className: "ui-skeleton-block size-4 rounded-sm" }) }),
-                columns.map((col, j) => /* @__PURE__ */ jsx(
+                visibleColumns.map((col, j) => /* @__PURE__ */ jsx(
                   TableCell,
                   {
                     className: cn(
@@ -298,7 +487,7 @@ DataTable.Content = function DataTableContent() {
                   col.key
                 ))
               ] }, `skeleton-${i}`))
-            ) : data.length === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
+            ) : rowCount === 0 ? /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(
               TableCell,
               {
                 colSpan: emptyColSpan,
@@ -306,10 +495,12 @@ DataTable.Content = function DataTableContent() {
                 "aria-live": "polite",
                 children: empty ?? /* @__PURE__ */ jsx(EmptyState, { title: t("dataTable.empty") })
               }
-            ) }) : data.map((row) => {
-              const id = getRowId(row);
-              const isSelected = selected.has(id);
-              const isInteractiveTarget = (target) => !!target.closest("button, a, input, select, textarea, [role=menuitem]");
+            ) }) : dataRows.map((row) => {
+              const original = row.original;
+              const isSelected = row.getIsSelected();
+              const isInteractiveTarget = (target) => !!target.closest(
+                "button, a, input, select, textarea, [role=menuitem], [role=checkbox]"
+              );
               return /* @__PURE__ */ jsxs(
                 TableRow,
                 {
@@ -318,13 +509,13 @@ DataTable.Content = function DataTableContent() {
                   onClick: (e) => {
                     const target = e.target;
                     if (isInteractiveTarget(target)) return;
-                    onRowClick?.(row);
+                    onRowClick?.(original);
                   },
                   onKeyDown: onRowClick ? (e) => {
                     if (e.key !== "Enter" && e.key !== " ") return;
                     if (e.target !== e.currentTarget) return;
                     e.preventDefault();
-                    onRowClick?.(row);
+                    onRowClick?.(original);
                   } : void 0,
                   className: cn(
                     rowPadding,
@@ -333,23 +524,23 @@ DataTable.Content = function DataTableContent() {
                     // …but the affordance (cursor + focus ring) only when clickable.
                     onRowClick && "focus-visible:ring-ring cursor-pointer focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset",
                     isSelected && "bg-muted/30",
-                    rowClassName?.(row)
+                    rowClassName?.(original)
                   ),
                   children: [
                     selectable && /* @__PURE__ */ jsx(TableCell, { className: cellPadding, children: /* @__PURE__ */ jsx(
                       Checkbox,
                       {
                         checked: isSelected,
-                        onCheckedChange: () => {
-                          toggleSelect(id);
+                        onCheckedChange: (v) => {
+                          row.toggleSelected(!!v);
                         },
-                        "aria-label": t("dataTable.selectRow", { id }),
+                        "aria-label": t("dataTable.selectRow", { id: row.id }),
                         onClick: (e) => {
                           e.stopPropagation();
                         }
                       }
                     ) }),
-                    columns.map((col) => /* @__PURE__ */ jsx(
+                    visibleColumns.map((col) => /* @__PURE__ */ jsx(
                       TableCell,
                       {
                         className: cn(
@@ -360,8 +551,8 @@ DataTable.Content = function DataTableContent() {
                           col.hiddenOnMobile && "hidden md:table-cell",
                           col.pin === "end" && "ui-data-table-pin-end"
                         ),
-                        children: col.render ? col.render(row) : (() => {
-                          const v = row[col.key];
+                        children: col.render ? col.render(original) : (() => {
+                          const v = original[col.key];
                           if (v == null) return "\u2014";
                           if (typeof v === "string" || typeof v === "number") return String(v);
                           return "\u2014";
@@ -371,7 +562,7 @@ DataTable.Content = function DataTableContent() {
                     ))
                   ]
                 },
-                id
+                row.id
               );
             }) })
           ] })
@@ -381,12 +572,14 @@ DataTable.Content = function DataTableContent() {
   );
 };
 DataTable.Content.displayName = "DataTable.Content";
-DataTable.Pagination = function DataTablePagination({
-  cursor,
-  hasMore,
-  onChange,
-  className
-}) {
+DataTable.Pagination = function DataTablePagination(props) {
+  if ("onChange" in props && typeof props.onChange === "function") {
+    return /* @__PURE__ */ jsx(CursorPagination, { ...props });
+  }
+  return /* @__PURE__ */ jsx(NumberedPagination, { ...props });
+};
+DataTable.Pagination.displayName = "DataTable.Pagination";
+function CursorPagination({ cursor, hasMore, onChange, className }) {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs("div", { className: cn("ui-data-table-pagination", className), children: [
     /* @__PURE__ */ jsx(
@@ -414,8 +607,68 @@ DataTable.Pagination = function DataTablePagination({
       }
     )
   ] });
-};
-DataTable.Pagination.displayName = "DataTable.Pagination";
+}
+function NumberedPagination({
+  pageSizeOptions = [10, 20, 50, 100],
+  className
+}) {
+  const { table } = useDataTableContext();
+  const { t } = useTranslation();
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "row",
+      align: "center",
+      justify: "between",
+      gap: "md",
+      wrap: true,
+      className: cn("ui-data-table-pagination", className),
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: t("dataGrid.rowsPerPage") }),
+          /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: String(pageSize),
+              onValueChange: (v) => table.setPageSize(Number(v)),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { size: "sm", "aria-label": t("dataGrid.rowsPerPage"), className: "tabular-nums", children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+                /* @__PURE__ */ jsx(SelectContent, { children: pageSizeOptions.map((n) => /* @__PURE__ */ jsx(SelectItem, { value: String(n), className: "tabular-nums", children: n }, n)) })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(Flex, { direction: "row", align: "center", gap: "sm", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm tabular-nums", children: t("dataGrid.pageOf", { page: pageIndex + 1, total: Math.max(1, pageCount) }) }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              disabled: !table.getCanPreviousPage(),
+              onClick: () => table.previousPage(),
+              "aria-label": t("common.previous") ?? "Previous",
+              children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "icon",
+              disabled: !table.getCanNextPage(),
+              onClick: () => table.nextPage(),
+              "aria-label": t("common.next") ?? "Next",
+              children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
   const { t } = useTranslation();
   return /* @__PURE__ */ jsxs(
@@ -434,5 +687,6 @@ DataTable.RowActions = function DataTableRowActions({ ariaLabel, children }) {
 };
 DataTable.RowActions.displayName = "DataTable.RowActions";
 export {
-  DataTable
+  DataTable,
+  flexRender
 };

package/dist/components/data-display/index.d.ts

@@ -7,7 +7,7 @@ export { Card, CardBar, CardContent, CardCover, CardDescription, CardFooter, Car
 export type { StatCardProps, CardBarProps } from "./card";
 export { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
 export { Descriptions } from "./descriptions";
-export { DataTable } from "./data-table";
+export { DataTable, flexRender } from "./data-table";
 export type { ColumnDef, Density as TableDensity } from "./data-table";
 export type { SortStateProp } from "../../props/vocabulary";
 export { EmptyState } from "./empty-state";

package/dist/components/data-display/index.js

@@ -15,7 +15,7 @@ import {
 } from "./card";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
 import { Descriptions } from "./descriptions";
-import { DataTable } from "./data-table";
+import { DataTable, flexRender } from "./data-table";
 import { EmptyState } from "./empty-state";
 import { Progress } from "./progress";
 import { TreeList } from "./tree-list";
@@ -95,5 +95,6 @@ export {
   TableRow,
   Timeline,
   TreeList,
+  flexRender,
   useCarousel
 };

package/dist/components/data-entry/search-input.d.ts

@@ -6,7 +6,8 @@ interface SearchInputProps {
     debounce?: number;
     /** Fires on EVERY keystroke (immediate) — required to keep a controlled `value` responsive. */
     onValueChange?: (q: string) => void;
-    onSearch: (q: string) => void;
+    /** Fires with the DEBOUNCED term. Optional — omit it when you drive filtering off `onValueChange`. */
+    onSearch?: (q: string) => void;
     label?: React.ReactNode;
     ariaLabel?: string;
     className?: string;

package/dist/components/data-entry/search-input.js

@@ -34,7 +34,7 @@ function SearchInput({
     onSearchRef.current = onSearch;
   });
   React.useEffect(() => {
-    onSearchRef.current(debounced);
+    onSearchRef.current?.(debounced);
   }, [debounced]);
   const setValue = (v) => {
     if (!isControlled) setInternal(v);

package/dist/components/general/index.d.ts

@@ -2,5 +2,3 @@ export { Button, buttonVariants } from "./button";
 export type { ButtonProps } from "./button";
 export { Text, Heading } from "./typography";
 export type { TextProps, HeadingProps, TextProp, HeadingProp } from "./typography";
-export { Logo, logoVariants } from "./logo";
-export type { LogoProps } from "./logo";

package/dist/components/general/index.js

@@ -1,11 +1,8 @@
 import { Button, buttonVariants } from "./button";
 import { Text, Heading } from "./typography";
-import { Logo, logoVariants } from "./logo";
 export {
   Button,
   Heading,
-  Logo,
   Text,
-  buttonVariants,
-  logoVariants
+  buttonVariants
 };