orbital-ds 0.9.0 → 0.10.0

package/dist/ui/data-table.js

@@ -0,0 +1,714 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  columnFilteringFeature,
+  columnVisibilityFeature,
+  constructSortFn,
+  createColumnHelper,
+  createFilteredRowModel,
+  createSortedRowModel,
+  filterFn_equalsString,
+  filterFn_includesString,
+  functionalUpdate,
+  globalFilteringFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  sortFn_alphanumeric,
+  sortFn_basic,
+  sortFn_datetime,
+  sortFn_text,
+  tableFeatures,
+  useTable
+} from "@tanstack/react-table";
+import {
+  ArrowDownIcon,
+  ArrowUpIcon,
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsUpDownIcon,
+  Columns3Icon,
+  SearchIcon
+} from "lucide-react";
+import * as React from "react";
+import { useDsLocale, useDsMessages } from "../hooks/use-ds-messages";
+import { dsFormat } from "../lib/i18n";
+import { cn } from "../lib/utils";
+import { Button } from "./button";
+import { Checkbox } from "./checkbox";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuTrigger
+} from "./dropdown-menu";
+import { Empty, EmptyHeader, EmptyTitle } from "./empty";
+import { Input } from "./input";
+import { NativeSelect, NativeSelectOption } from "./native-select";
+import { ProportionBar } from "./proportion-bar";
+import { Skeleton } from "./skeleton";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow
+} from "./table";
+const sortFn_number = constructSortFn({
+  sort: (a, b) => {
+    const x = Number(a);
+    const y = Number(b);
+    return x === y ? 0 : x > y ? 1 : -1;
+  }
+});
+const dataTableFeatures = tableFeatures({
+  rowSortingFeature,
+  columnFilteringFeature,
+  globalFilteringFeature,
+  columnVisibilityFeature,
+  rowSelectionFeature,
+  sortedRowModel: createSortedRowModel(),
+  filteredRowModel: createFilteredRowModel(),
+  filterFns: {
+    includesString: filterFn_includesString,
+    equalsString: filterFn_equalsString
+  },
+  sortFns: {
+    alphanumeric: sortFn_alphanumeric,
+    text: sortFn_text,
+    basic: sortFn_basic,
+    datetime: sortFn_datetime,
+    number: sortFn_number
+  },
+  columnMeta: {}
+});
+function createDataTableColumnHelper() {
+  return createColumnHelper();
+}
+const DATA_TABLE_PAGE_SIZES = [10, 20, 50, 100];
+const DEFAULT_STATE = {
+  search: "",
+  sorting: [],
+  page: 1,
+  pageSize: DATA_TABLE_PAGE_SIZES[0],
+  columnFilters: [],
+  columnVisibility: {},
+  rowSelection: {}
+};
+const ID_RE = /^[\w.-]+$/;
+function validateDataTableSearch(search, options = {}) {
+  const sizes = options.pageSizes ?? DATA_TABLE_PAGE_SIZES;
+  const text = (v) => typeof v === "string" || typeof v === "number" ? String(v) : "";
+  const out = {};
+  const q = text(search.q);
+  if (q.trim()) out.q = q;
+  const sort = text(search.sort);
+  if (sort && sort.split(",").every((s) => ID_RE.test(s.replace(/^-/, ""))))
+    out.sort = sort;
+  const page = Number(search.page);
+  if (Number.isInteger(page) && page > 1) out.page = page;
+  const size = Number(search.size);
+  if (sizes.includes(size) && size !== sizes[0]) out.size = size;
+  const hide = text(search.hide);
+  if (hide && hide.split(",").every((s) => ID_RE.test(s))) out.hide = hide;
+  for (const [key, value] of Object.entries(search)) {
+    if (!key.startsWith("f.") || !ID_RE.test(key.slice(2))) continue;
+    const v = text(value);
+    if (v) out[key] = v;
+  }
+  return out;
+}
+function dataTableStateFromSearch(search, options = {}) {
+  const s = validateDataTableSearch(search, options);
+  const sizes = options.pageSizes ?? DATA_TABLE_PAGE_SIZES;
+  const columnFilters = [];
+  for (const [key, value] of Object.entries(s)) {
+    if (key.startsWith("f.") && typeof value === "string")
+      columnFilters.push({ id: key.slice(2), value });
+  }
+  return {
+    search: s.q ?? "",
+    sorting: s.sort ? s.sort.split(",").map((part) => ({
+      id: part.replace(/^-/, ""),
+      desc: part.startsWith("-")
+    })) : [],
+    page: s.page ?? 1,
+    pageSize: s.size ?? sizes[0] ?? DEFAULT_STATE.pageSize,
+    columnFilters,
+    columnVisibility: Object.fromEntries(
+      (s.hide ? s.hide.split(",") : []).map((id) => [id, false])
+    )
+  };
+}
+function dataTableStateToSearch(state, options = {}) {
+  const sizes = options.pageSizes ?? DATA_TABLE_PAGE_SIZES;
+  const raw = {
+    q: state.search,
+    sort: state.sorting?.map((s) => `${s.desc ? "-" : ""}${s.id}`).join(","),
+    page: state.page,
+    size: state.pageSize === sizes[0] ? void 0 : state.pageSize,
+    hide: Object.entries(state.columnVisibility ?? {}).filter(([, visible]) => !visible).map(([id]) => id).join(",")
+  };
+  for (const f of state.columnFilters ?? []) {
+    if (f.value !== void 0 && f.value !== null && f.value !== "")
+      raw[`f.${f.id}`] = String(f.value);
+  }
+  return validateDataTableSearch(raw, options);
+}
+function NoData() {
+  const t = useDsMessages();
+  return /* @__PURE__ */ jsxs("span", { "data-slot": "data-table-no-data", className: "text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2014" }),
+    /* @__PURE__ */ jsx("span", { className: "sr-only", children: t.statNoData })
+  ] });
+}
+function DataTableNumber({
+  value,
+  format,
+  className
+}) {
+  const locale = useDsLocale();
+  const formatter = React.useMemo(
+    () => new Intl.NumberFormat(locale, format),
+    [locale, format]
+  );
+  if (value === null || value === void 0 || Number.isNaN(value))
+    return /* @__PURE__ */ jsx(NoData, {});
+  return /* @__PURE__ */ jsx("span", { "data-slot": "data-table-number", className: cn("tabular-nums", className), children: formatter.format(value) });
+}
+function DataTableBarCell({
+  value,
+  max,
+  format,
+  tone = "primary",
+  className
+}) {
+  const missing = value === null || value === void 0 || Number.isNaN(value);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "data-table-bar-cell",
+      className: cn("flex items-center justify-end gap-2", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          ProportionBar,
+          {
+            "aria-hidden": "true",
+            value: missing ? null : value,
+            unknown: missing,
+            max,
+            tone,
+            className: "w-full min-w-12 max-w-32"
+          }
+        ),
+        /* @__PURE__ */ jsx(DataTableNumber, { value, format, className: "shrink-0" })
+      ]
+    }
+  );
+}
+function metaOf(column) {
+  return column.columnDef.meta;
+}
+function alignOf(meta) {
+  return meta?.align ?? (meta?.numeric ? "end" : "start");
+}
+const ALIGN_CLASS = {
+  start: "text-start",
+  end: "text-end",
+  center: "text-center"
+};
+const JUSTIFY_CLASS = {
+  start: "justify-start",
+  end: "justify-end",
+  center: "justify-center"
+};
+function labelOf(column) {
+  const header = column.columnDef.header;
+  return metaOf(column)?.label ?? (typeof header === "string" ? header : column.id);
+}
+function readPath(row, path) {
+  let value = row;
+  for (const key of path.split(".")) {
+    if (value === null || value === void 0) return void 0;
+    value = value[key];
+  }
+  return value;
+}
+function prepareColumns(columns) {
+  return columns.map((input) => {
+    const col = { ...input };
+    const meta = col.meta;
+    if (meta?.filter && col.filterFn === void 0)
+      col.filterFn = meta.filter === "select" ? "equalsString" : "includesString";
+    if (meta?.numeric) {
+      if (typeof col.accessorKey === "string" && !col.accessorFn) {
+        const key = col.accessorKey;
+        col.id = col.id ?? key;
+        col.accessorFn = (row) => readPath(row, key) ?? void 0;
+        delete col.accessorKey;
+      } else if (typeof col.accessorFn === "function") {
+        const fn = col.accessorFn;
+        col.accessorFn = (...a) => fn(...a) ?? void 0;
+      }
+      col.sortFn ??= "number";
+      col.sortUndefined ??= "last";
+      col.cell ??= ({ getValue }) => {
+        const v = getValue();
+        return /* @__PURE__ */ jsx(
+          DataTableNumber,
+          {
+            value: v === void 0 || v === null ? null : Number(v),
+            format: meta.format
+          }
+        );
+      };
+    } else {
+      col.cell ??= ({ getValue }) => {
+        const v = getValue();
+        if (v === null || v === void 0 || v === "") return /* @__PURE__ */ jsx(NoData, {});
+        return String(v);
+      };
+    }
+    return col;
+  });
+}
+function DataTable({
+  columns,
+  data,
+  getRowId,
+  state: controlled,
+  onStateChange,
+  defaultState,
+  searchable = true,
+  selectable = false,
+  columnToggle = true,
+  pageSizes = DATA_TABLE_PAGE_SIZES,
+  loading = false,
+  empty,
+  onRowClick,
+  toolbar,
+  rowActions,
+  density = "comfortable",
+  "aria-label": ariaLabel,
+  className
+}) {
+  const t = useDsMessages();
+  const id = React.useId();
+  const [own, setOwn] = React.useState(() => ({
+    ...DEFAULT_STATE,
+    pageSize: pageSizes[0] ?? DEFAULT_STATE.pageSize,
+    ...defaultState
+  }));
+  const current = { ...own, ...controlled };
+  const sorting = React.useMemo(
+    () => current.sorting,
+    // biome-ignore lint/correctness/useExhaustiveDependencies: comparación por valor
+    [JSON.stringify(current.sorting)]
+  );
+  const columnFilters = React.useMemo(
+    () => current.columnFilters,
+    // biome-ignore lint/correctness/useExhaustiveDependencies: comparación por valor
+    [JSON.stringify(current.columnFilters)]
+  );
+  const columnVisibility = React.useMemo(
+    () => current.columnVisibility,
+    // biome-ignore lint/correctness/useExhaustiveDependencies: comparación por valor
+    [JSON.stringify(current.columnVisibility)]
+  );
+  const rowSelection = React.useMemo(
+    () => current.rowSelection,
+    // biome-ignore lint/correctness/useExhaustiveDependencies: comparación por valor
+    [JSON.stringify(current.rowSelection)]
+  );
+  const latest = React.useRef(current);
+  latest.current = current;
+  const update = React.useCallback(
+    (patch) => {
+      const next = { ...latest.current, ...patch };
+      latest.current = next;
+      setOwn(next);
+      onStateChange?.(next);
+    },
+    [onStateChange]
+  );
+  const prepared = React.useMemo(() => prepareColumns(columns), [columns]);
+  const table = useTable({
+    features: dataTableFeatures,
+    data,
+    columns: prepared,
+    getRowId,
+    state: {
+      sorting,
+      globalFilter: current.search,
+      columnFilters,
+      columnVisibility,
+      rowSelection
+    },
+    onSortingChange: (u) => update({ sorting: functionalUpdate(u, latest.current.sorting), page: 1 }),
+    onGlobalFilterChange: (u) => update({ search: functionalUpdate(u, latest.current.search) ?? "", page: 1 }),
+    onColumnFiltersChange: (u) => update({
+      columnFilters: functionalUpdate(u, latest.current.columnFilters),
+      page: 1
+    }),
+    onColumnVisibilityChange: (u) => update({
+      columnVisibility: functionalUpdate(u, latest.current.columnVisibility)
+    }),
+    onRowSelectionChange: (u) => update({ rowSelection: functionalUpdate(u, latest.current.rowSelection) }),
+    globalFilterFn: "includesString",
+    enableRowSelection: selectable
+  });
+  const allRows = table.getPrePaginatedRowModel().rows;
+  const total = allRows.length;
+  const pageSize = current.pageSize;
+  const pageCount = Math.max(1, Math.ceil(total / pageSize));
+  const pageIndex = Math.min(Math.max(1, current.page), pageCount) - 1;
+  const rows = allRows.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
+  const leafColumns = table.getVisibleLeafColumns();
+  const colSpan = leafColumns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0);
+  const filterColumns = table.getAllLeafColumns().filter((c) => metaOf(c)?.filter && c.getCanFilter());
+  const hideableColumns = table.getAllLeafColumns().filter((c) => c.getCanHide());
+  const pageSelected = rows.filter((r) => r.getIsSelected()).length;
+  const allPageSelected = rows.length > 0 && pageSelected === rows.length;
+  const somePageSelected = pageSelected > 0 && !allPageSelected;
+  const selectedCount = Object.keys(rowSelection).length;
+  const togglePage = (checked) => {
+    const next = { ...latest.current.rowSelection };
+    for (const r of rows) {
+      if (!r.getCanSelect()) continue;
+      if (checked) next[r.id] = true;
+      else delete next[r.id];
+    }
+    update({ rowSelection: next });
+  };
+  const stop = (e) => e.stopPropagation();
+  const skeletonRows = Math.min(pageSize, 5);
+  const hasToolbar = searchable || filterColumns.length > 0 || columnToggle && hideableColumns.length > 0 || toolbar;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "data-table",
+      "data-density": density,
+      "aria-busy": loading || void 0,
+      className: cn(
+        "group/data-table flex w-full min-w-0 flex-col gap-(--ds-section-gap)",
+        className
+      ),
+      children: [
+        hasToolbar && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "data-table-toolbar",
+            className: "flex flex-wrap items-center gap-(--ds-filter-gap)",
+            children: [
+              searchable && /* @__PURE__ */ jsxs("div", { "data-slot": "data-table-search", className: "relative w-full max-w-64", children: [
+                /* @__PURE__ */ jsx(
+                  SearchIcon,
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute start-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    type: "search",
+                    value: current.search,
+                    onChange: (e) => table.setGlobalFilter(e.target.value),
+                    placeholder: t.dataTableSearch,
+                    "aria-label": t.dataTableSearch,
+                    className: "ps-8"
+                  }
+                )
+              ] }),
+              filterColumns.map((column) => {
+                const meta = metaOf(column);
+                const label = labelOf(column);
+                const value = column.getFilterValue() ?? "";
+                const name = `${t.dataTableFilter}: ${label}`;
+                return meta?.filter === "select" ? /* @__PURE__ */ jsxs(
+                  NativeSelect,
+                  {
+                    "data-slot": "data-table-filter",
+                    "aria-label": name,
+                    value,
+                    onChange: (e) => column.setFilterValue(e.target.value || void 0),
+                    children: [
+                      /* @__PURE__ */ jsx(NativeSelectOption, { value: "", children: label }),
+                      meta.filterOptions?.map((o) => /* @__PURE__ */ jsx(NativeSelectOption, { value: o.value, children: o.label }, o.value))
+                    ]
+                  },
+                  column.id
+                ) : /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    "data-slot": "data-table-filter",
+                    "aria-label": name,
+                    placeholder: label,
+                    value,
+                    onChange: (e) => column.setFilterValue(e.target.value || void 0),
+                    className: "w-auto max-w-48"
+                  },
+                  column.id
+                );
+              }),
+              toolbar,
+              columnToggle && hideableColumns.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+                /* @__PURE__ */ jsxs(
+                  DropdownMenuTrigger,
+                  {
+                    "data-slot": "data-table-columns",
+                    className: "ms-auto",
+                    render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+                    children: [
+                      /* @__PURE__ */ jsx(Columns3Icon, { "aria-hidden": "true" }),
+                      t.dataTableColumns
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", className: "w-auto", children: /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+                  /* @__PURE__ */ jsx(DropdownMenuLabel, { children: t.dataTableColumns }),
+                  hideableColumns.map((column) => /* @__PURE__ */ jsx(
+                    DropdownMenuCheckboxItem,
+                    {
+                      checked: column.getIsVisible(),
+                      onCheckedChange: (v) => column.toggleVisibility(!!v),
+                      children: labelOf(column)
+                    },
+                    column.id
+                  ))
+                ] }) })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Table, { "aria-label": ariaLabel, "aria-describedby": loading ? `${id}-status` : void 0, children: [
+          /* @__PURE__ */ jsx(TableHeader, { "data-slot": "data-table-header", children: table.getHeaderGroups().map((group) => /* @__PURE__ */ jsxs(TableRow, { children: [
+            selectable && /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                "data-slot": "data-table-select",
+                className: "w-0 pe-0 group-data-[density=compact]/data-table:h-(--ds-table-head-h-compact)",
+                children: /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    checked: allPageSelected,
+                    indeterminate: somePageSelected,
+                    disabled: loading || rows.length === 0,
+                    onCheckedChange: (v) => togglePage(!!v),
+                    "aria-label": dsFormat(t.dataTableSelected, {
+                      n: pageSelected,
+                      total: rows.length
+                    })
+                  }
+                )
+              }
+            ),
+            group.headers.map((header) => {
+              const column = header.column;
+              const meta = metaOf(column);
+              const align = alignOf(meta);
+              const dir = column.getIsSorted();
+              const canSort = column.getCanSort();
+              const next = column.getNextSortingOrder();
+              return /* @__PURE__ */ jsx(
+                TableHead,
+                {
+                  colSpan: header.colSpan,
+                  "data-slot": "data-table-head",
+                  "data-align": align,
+                  "aria-sort": canSort ? dir === "asc" ? "ascending" : dir === "desc" ? "descending" : "none" : void 0,
+                  className: cn(
+                    ALIGN_CLASS[align],
+                    "group-data-[density=compact]/data-table:h-(--ds-table-head-h-compact)",
+                    meta?.className
+                  ),
+                  children: header.isPlaceholder ? null : canSort ? /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      "data-slot": "data-table-sort",
+                      title: next === "desc" ? t.dataTableSortDesc : next === "asc" ? t.dataTableSortAsc : void 0,
+                      onClick: column.getToggleSortingHandler(),
+                      className: cn(
+                        "-mx-1 inline-flex items-center gap-1 rounded-item px-1 outline-none hover:text-foreground focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color)",
+                        align === "end" && "flex-row-reverse"
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx(table.FlexRender, { header }),
+                        dir === "asc" ? /* @__PURE__ */ jsx(ArrowUpIcon, { "aria-hidden": "true", className: "size-3.5" }) : dir === "desc" ? /* @__PURE__ */ jsx(ArrowDownIcon, { "aria-hidden": "true", className: "size-3.5" }) : /* @__PURE__ */ jsx(
+                          ChevronsUpDownIcon,
+                          {
+                            "aria-hidden": "true",
+                            className: "size-3.5 text-muted-foreground"
+                          }
+                        )
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx(table.FlexRender, { header })
+                },
+                header.id
+              );
+            }),
+            rowActions && /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                "data-slot": "data-table-actions",
+                className: "w-0 group-data-[density=compact]/data-table:h-(--ds-table-head-h-compact)"
+              }
+            )
+          ] }, group.id)) }),
+          /* @__PURE__ */ jsx(TableBody, { "data-slot": "data-table-body", children: loading ? Array.from({ length: skeletonRows }, (_, i) => (
+            // biome-ignore lint/suspicious/noArrayIndexKey: filas skeleton sin identidad
+            /* @__PURE__ */ jsx(TableRow, { "data-slot": "data-table-skeleton-row", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: CELL_DENSITY, children: /* @__PURE__ */ jsx(Skeleton, { className: "h-(--ds-control-h-xs) w-full" }) }) }, i)
+          )) : rows.length === 0 ? /* @__PURE__ */ jsx(TableRow, { "data-slot": "data-table-empty-row", className: "hover:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan, className: "whitespace-normal", children: empty ?? /* @__PURE__ */ jsx(Empty, { "data-slot": "data-table-empty", children: /* @__PURE__ */ jsx(EmptyHeader, { children: /* @__PURE__ */ jsx(EmptyTitle, { children: t.dataTableNoResults }) }) }) }) }) : rows.map((row) => /* @__PURE__ */ jsxs(
+            TableRow,
+            {
+              "data-slot": "data-table-row",
+              "data-state": row.getIsSelected() ? "selected" : void 0,
+              "data-clickable": onRowClick ? "" : void 0,
+              tabIndex: onRowClick ? 0 : void 0,
+              onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+              onKeyDown: onRowClick ? (e) => {
+                if (e.target !== e.currentTarget) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  onRowClick(row.original);
+                }
+              } : void 0,
+              className: cn(
+                onRowClick && "cursor-pointer outline-none focus-visible:bg-(--ds-row-hover) focus-visible:ring-(length:--ds-ring-width) focus-visible:ring-(--ds-ring-color) focus-visible:ring-inset"
+              ),
+              children: [
+                selectable && /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    "data-slot": "data-table-select",
+                    className: cn("w-0 pe-0", CELL_DENSITY),
+                    onClick: stop,
+                    onKeyDown: stop,
+                    children: /* @__PURE__ */ jsx(
+                      Checkbox,
+                      {
+                        checked: row.getIsSelected(),
+                        disabled: !row.getCanSelect(),
+                        onCheckedChange: (v) => row.toggleSelected(!!v),
+                        "aria-labelledby": `${id}-${row.id}`
+                      }
+                    )
+                  }
+                ),
+                row.getVisibleCells().map(
+                  (cell, i) => {
+                    const meta = metaOf(cell.column);
+                    const align = alignOf(meta);
+                    return /* @__PURE__ */ jsx(
+                      TableCell,
+                      {
+                        id: i === 0 ? `${id}-${row.id}` : void 0,
+                        "data-slot": "data-table-cell",
+                        "data-align": align,
+                        className: cn(
+                          ALIGN_CLASS[align],
+                          meta?.numeric && "tabular-nums",
+                          CELL_DENSITY,
+                          meta?.className
+                        ),
+                        children: /* @__PURE__ */ jsx(table.FlexRender, { cell })
+                      },
+                      cell.id
+                    );
+                  }
+                ),
+                rowActions && /* @__PURE__ */ jsx(
+                  TableCell,
+                  {
+                    "data-slot": "data-table-actions",
+                    className: cn("w-0 text-end", CELL_DENSITY),
+                    onClick: stop,
+                    onKeyDown: stop,
+                    children: /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-1", JUSTIFY_CLASS.end), children: rowActions(row.original) })
+                  }
+                )
+              ]
+            },
+            row.id
+          )) })
+        ] }),
+        loading && /* @__PURE__ */ jsx("span", { id: `${id}-status`, role: "status", className: "sr-only", children: t.dataTableLoading }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "data-table-footer",
+            className: "flex flex-wrap items-center justify-between gap-(--ds-filter-gap) text-sm text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx("span", { "data-slot": "data-table-selected", className: "tabular-nums", "aria-live": "polite", children: selectable ? dsFormat(t.dataTableSelected, { n: selectedCount, total }) : null }),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "data-slot": "data-table-pagination",
+                  className: "flex flex-wrap items-center gap-(--ds-filter-gap)",
+                  children: [
+                    /* @__PURE__ */ jsx("label", { className: "flex items-center gap-2", htmlFor: `${id}-size`, children: t.dataTableRowsPerPage }),
+                    /* @__PURE__ */ jsx(
+                      NativeSelect,
+                      {
+                        id: `${id}-size`,
+                        size: "sm",
+                        value: String(pageSize),
+                        onChange: (e) => update({ pageSize: Number(e.target.value), page: 1 }),
+                        children: pageSizes.map((n) => /* @__PURE__ */ jsx(NativeSelectOption, { value: n, children: n }, n))
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { "data-slot": "data-table-page", className: "tabular-nums", "aria-live": "polite", children: dsFormat(t.dataTablePage, { page: pageIndex + 1, pages: pageCount }) }),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "sm",
+                        disabled: pageIndex === 0 || loading,
+                        "aria-label": t.paginationPreviousLabel,
+                        onClick: () => update({ page: pageIndex }),
+                        children: [
+                          /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true", className: "rtl:rotate-180" }),
+                          t.paginationPrevious
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs(
+                      Button,
+                      {
+                        variant: "outline",
+                        size: "sm",
+                        disabled: pageIndex >= pageCount - 1 || loading,
+                        "aria-label": t.paginationNextLabel,
+                        onClick: () => update({ page: pageIndex + 2 }),
+                        children: [
+                          t.paginationNext,
+                          /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true", className: "rtl:rotate-180" })
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const CELL_DENSITY = "group-data-[density=compact]/data-table:py-(--ds-cell-p-compact)";
+export {
+  DATA_TABLE_PAGE_SIZES,
+  DataTable,
+  DataTableBarCell,
+  DataTableNumber,
+  createDataTableColumnHelper,
+  dataTableFeatures,
+  dataTableStateFromSearch,
+  dataTableStateToSearch,
+  validateDataTableSearch
+};