@ngrok/mantle 0.84.3 → 0.85.1

package/dist/data-table.d.ts

@@ -3,21 +3,41 @@ import { i as IconButtonIntent, r as IconButtonAppearance, t as IconButton } fro
 import { s as SortingMode } from "./direction-BjU0bPST.js";
 import { t as Table$1 } from "./table-DEI-qvSC.js";
 import { ComponentProps, ReactNode } from "react";
-import { HeaderContext, Row, Table } from "@tanstack/react-table";
+import { CellData, Column, Column_RowSorting, Row, RowData, Row_RowExpanding, StockFeatures, Table, TableFeatures } from "@tanstack/react-table";
 export * from "@tanstack/react-table";
 //#region src/components/data-table/types.d.ts
 declare const sortDirections: readonly ["asc", "desc", "unsorted"];
 type SortDirection = (typeof sortDirections)[number];
 //#endregion
 //#region src/components/data-table/data-table.d.ts
-type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
-  table: Table<TData>;
+/**
+ * The table features a sortable column needs. `DataTable.HeaderSortButton`
+ * calls the column's sorting API, which exists only when the table registers
+ * `rowSortingFeature`.
+ */
+type SortableTableFeatures = Pick<StockFeatures, "rowSortingFeature">;
+/**
+ * The table features an expandable row needs. `DataTable.RowExpandButton`
+ * calls the row's expansion API, which exists only when the table registers
+ * `rowExpandingFeature`.
+ */
+type ExpandableTableFeatures = Pick<StockFeatures, "rowExpandingFeature">;
+/** A column from a table that registers `rowSortingFeature`. */
+type SortableColumn<TFeatures extends SortableTableFeatures, TData extends RowData, TValue extends CellData> = Column<TFeatures, TData, TValue> & Column_RowSorting<TFeatures, TData>;
+/** A row from a table that registers `rowExpandingFeature`. */
+type ExpandableRow<TFeatures extends ExpandableTableFeatures, TData extends RowData> = Row<TFeatures, TData> & Row_RowExpanding;
+type DataTableProps<TFeatures extends TableFeatures, TData extends RowData> = ComponentProps<typeof Table$1.Root> & {
+  /**
+   * The TanStack Table instance from `useTable`. Every other `DataTable` part
+   * reads it through context.
+   */
+  table: Table<TFeatures, TData>;
 };
 /**
  * The root container for a data table. Wraps all other `DataTable`
  * sub-components and provides the table context to its descendants.
  *
- * REQUIRED: Construct a TanStack Table instance via `useReactTable` (from
+ * REQUIRED: Construct a TanStack Table instance via `useTable` (from
  * `@tanstack/react-table`, also re-exported from `@ngrok/mantle/data-table`)
  * and pass it through the `table` prop. The instance owns columns, data, and
  * any sorting / filtering / pagination state — the wrapper components read
@@ -30,22 +50,23 @@ type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
  * import {
  *   DataTable,
  *   createColumnHelper,
- *   getCoreRowModel,
- *   useReactTable,
+ *   tableFeatures,
+ *   useTable,
  * } from "@ngrok/mantle/data-table";
  *
  * type Row = { id: string; name: string };
- * const columnHelper = createColumnHelper<Row>();
- * const columns = [
+ * const features = tableFeatures({});
+ * const columnHelper = createColumnHelper<typeof features, Row>();
+ * const columns = columnHelper.columns([
  *   columnHelper.accessor("name", {
  *     id: "name",
  *     header: () => <DataTable.Header>Name</DataTable.Header>,
  *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
  *   }),
- * ];
+ * ]);
  *
  * function MyTable({ data }: { data: Row[] }) {
- *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ *   const table = useTable({ features, data, columns });
  *   const rows = table.getRowModel().rows;
  *
  *   return (
@@ -61,8 +82,13 @@ type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
  * }
  * ```
  */
-declare function Root<TData>({ children, table, ...props }: DataTableProps<TData>): import("react").JSX.Element;
-type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, "appearance" | "icon" | "intent"> & Pick<HeaderContext<TData, TValue>, "column"> & {
+declare function Root<TFeatures extends TableFeatures, TData extends RowData>({ children, table, ...props }: DataTableProps<TFeatures, TData>): import("react").JSX.Element;
+type DataTableHeaderSortButtonProps<TFeatures extends SortableTableFeatures, TData extends RowData, TValue extends CellData> = Omit<ComponentProps<typeof Button>, "appearance" | "icon" | "intent"> & {
+  /**
+   * The TanStack Table column this button sorts (`props.column` in `header`).
+   * The table must register `rowSortingFeature`.
+   */
+  column: SortableColumn<TFeatures, TData, TValue>;
   /**
    * The visual style of the sort button. Optional — the header sort button's
    * design is a ghost button, so the wrapper defaults it.
@@ -114,6 +140,11 @@ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof
  * - For `"alphanumeric"` sorting: `unsorted → ascending → descending → unsorted`
  * - For `"time"` sorting: `unsorted → newest-first → oldest-first → unsorted`
  *
+ * The table must register `rowSortingFeature`; the `column` prop's type rejects a
+ * column from a table without it. Pair it with `sortedRowModel: createSortedRowModel()`,
+ * or the button toggles the icon and never reorders a row. Register a `sortFns` slot
+ * too: without one, auto-sort falls back to `sortFn_basic`.
+ *
  * When the column cannot sort (`disableSorting`, or `enableSorting: false` on
  * the column), the part renders the label as plain text in a `<span>`: no
  * button, no icon. The other props, `ref` included, land on that span.
@@ -122,10 +153,26 @@ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof
  * For right-aligned numeric columns, pass `className="justify-end"` and
  * `iconPlacement="start"` so the sort icon stays paired with the label.
  *
+ * | Data Attribute             | Value                              | Description                                                                                                                 |
+ * | -------------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+ * | `data-sort-direction`      | `"asc"`, `"desc"`, or `"unsorted"` | The column's current sort direction. Always `"unsorted"` on the plain-text span.                                            |
+ * | `data-table-header-action` | present on the button              | Presence-only. `DataTable.Header` drops its horizontal padding when a descendant carries it. Absent on the plain-text span. |
+ *
  * @see https://mantle.ngrok.com/components/data-display/data-table#datatableheadersortbutton
  *
  * @example
  * ```tsx
+ * const features = tableFeatures({
+ *   rowSortingFeature,
+ *   sortedRowModel: createSortedRowModel(),
+ *   sortFns: {
+ *     alphanumeric: sortFn_alphanumeric,
+ *     datetime: sortFn_datetime,
+ *     text: sortFn_text,
+ *   },
+ * });
+ * const columnHelper = createColumnHelper<typeof features, Row>();
+ *
  * columnHelper.accessor("email", {
  *   id: "email",
  *   header: (props) => (
@@ -139,8 +186,14 @@ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof
  * });
  * ```
  */
-declare function HeaderSortButton<TData, TValue>({ appearance, children, className, column, disableSorting, iconPlacement, intent, sortingMode, sortIcon: propSortIcon, onClick, ...props }: DataTableHeaderSortButtonProps<TData, TValue>): import("react").JSX.Element;
-type DataTableHeaderProps<TData, TValue> = ComponentProps<typeof Table$1.Header> & Partial<Pick<HeaderContext<TData, TValue>, "column">>;
+declare function HeaderSortButton<TFeatures extends SortableTableFeatures, TData extends RowData, TValue extends CellData>({ appearance, children, className, column, disableSorting, iconPlacement, intent, sortingMode, sortIcon: propSortIcon, onClick, ...props }: DataTableHeaderSortButtonProps<TFeatures, TData, TValue>): import("react").JSX.Element;
+type DataTableHeaderProps<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData> = ComponentProps<typeof Table$1.Header> & {
+  /**
+   * The TanStack Table column this cell heads (`props.column` in `header`).
+   * When the column is sorted, the cell carries `aria-sort`.
+   */
+  column?: Column<TFeatures, TData, TValue>;
+};
 /**
  * A `<th>` optimized for header actions. Wrap each column's header content in
  * this; for sortable columns, nest a `DataTable.HeaderSortButton` inside and
@@ -164,7 +217,7 @@ type DataTableHeaderProps<TData, TValue> = ComponentProps<typeof Table$1.Header>
  * });
  * ```
  */
-declare function Header<TData, TValue>({ children, className, column, ...props }: DataTableHeaderProps<TData, TValue>): import("react").JSX.Element;
+declare function Header<TFeatures extends TableFeatures, TData extends RowData, TValue extends CellData>({ children, className, column, ...props }: DataTableHeaderProps<TFeatures, TData, TValue>): import("react").JSX.Element;
 /**
  * The `<tbody>` container for rows of data. Typically wraps a map of
  * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is no data.
@@ -173,7 +226,7 @@ declare function Header<TData, TValue>({ children, className, column, ...props }
  *
  * @example
  * ```tsx
- * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ * const table = useTable({ features, data, columns });
  * const rows = table.getRowModel().rows;
  *
  * <DataTable.Root table={table}>
@@ -197,7 +250,7 @@ type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
  *
  * @example
  * ```tsx
- * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ * const table = useTable({ features, data, columns });
  * const rows = table.getRowModel().rows;
  *
  * <DataTable.Root table={table}>
@@ -210,21 +263,23 @@ type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
  * </DataTable.Root>
  * ```
  */
-declare function Head<TData>(props: DataTableHeadProps): import("react").JSX.Element;
-type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
-  row: Row<TData>;
+declare function Head(props: DataTableHeadProps): import("react").JSX.Element;
+type DataTableRowProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
+  /** The TanStack Table row instance to render. */
+  row: Row<TFeatures, TData>;
   /**
    * Renders an inline detail panel beneath the row. Called only while the row is
    * expanded (`row.getIsExpanded()`), so the panel — and any expensive work it
    * does — stays lazy. Mantle wraps the returned content in a sibling
    * `DataTable.ExpandedRow` spanning every visible column, so return the
-   * panel content (not a `<tr>`). Requires the table to be configured for
-   * expansion (`getExpandedRowModel`, plus `getRowCanExpand` for detail panels);
-   * pair it with a `DataTable.RowExpandButton` toggle in a leading column. For
-   * full control over the detail row (custom `colSpan`, multiple panels), omit
-   * this and render `DataTable.ExpandedRow` yourself.
+   * panel content (not a `<tr>`). Requires the table to register
+   * `rowExpandingFeature`, plus `getRowCanExpand` for detail panels; pair it
+   * with a `DataTable.RowExpandButton` toggle in a leading column. Add
+   * `expandedRowModel: createExpandedRowModel()` when rows have sub-rows. For
+   * full control over the detail row (custom `colSpan`,
+   * multiple panels), omit this and render `DataTable.ExpandedRow` yourself.
    */
-  renderExpanded?: (row: Row<TData>) => ReactNode;
+  renderExpanded?: (row: Row<TFeatures, TData>) => ReactNode;
 };
 /**
  * A single data table body row rendered from a TanStack Table row instance.
@@ -253,7 +308,12 @@ type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "childr
  * Pass `renderExpanded` to give the row an inline detail panel: when the row is
  * expanded the row renders its data `<tr>` plus a sibling `DataTable.ExpandedRow`
  * holding the returned content. Pair it with a `DataTable.RowExpandButton` toggle
- * and configure the table for expansion (`getExpandedRowModel`, `getRowCanExpand`).
+ * and register `rowExpandingFeature` and `getRowCanExpand` on the table.
+ *
+ * The row subscribes to the whole table state and to the table options. It
+ * re-renders its cells when any state slice changes or when `useTable` receives
+ * new options, so a column's `cell` renderer can read state through `row` or
+ * `cell` (`row.getIsSelected()`) and close over your component's values.
  *
  * | Data Attribute   | Value                         | Description                                             |
  * | ---------------- | ----------------------------- | ------------------------------------------------------- |
@@ -297,7 +357,7 @@ type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "childr
  * ))}
  * ```
  */
-declare function Row$1<TData>({ className, onClick, renderExpanded, row, ...props }: DataTableRowProps<TData>): import("react").JSX.Element;
+declare function Row$1<TFeatures extends TableFeatures, TData extends RowData>({ className, onClick, renderExpanded, row, ...props }: DataTableRowProps<TFeatures, TData>): import("react").JSX.Element;
 type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
 /**
  * An empty-state row that spans every column. Render this as the `else` branch
@@ -319,9 +379,9 @@ type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
  * import { MagnifyingGlassIcon } from "@phosphor-icons/react/MagnifyingGlass";
  * import { TrayIcon } from "@phosphor-icons/react/Tray";
  *
- * // `table` is your useReactTable instance; derive everything else from it.
+ * // `table` is your useTable instance; derive everything else from it.
  * const rows = table.getRowModel().rows;
- * const isFiltered = (table.getState().globalFilter ?? "") !== "";
+ * const isFiltered = (table.state.globalFilter ?? "") !== "";
  *
  * // EmptyRow already spans every column and Empty.Root centers itself — drop a
  * // single Empty.Root in as the child; don't hand-roll a <td> or any centering.
@@ -356,7 +416,7 @@ type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
  * </DataTable.Body>
  * ```
  */
-declare function EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps): import("react").JSX.Element;
+declare function EmptyRow({ children, ...props }: DataTableEmptyRowProps): import("react").JSX.Element;
 type DataTableActionCellProps = ComponentProps<typeof Table$1.Cell>;
 /**
  * A sticky-right `<td>` for per-row action buttons (typically an `IconButton`
@@ -424,7 +484,7 @@ declare function ActionHeader({ children, className, ...props }: DataTableAction
  * // ...renders id={expandedRowId(row)} — the same value, so they stay associated.
  * ```
  */
-declare function expandedRowId<TData>(row: Row<TData>): string;
+declare function expandedRowId<TFeatures extends TableFeatures, TData extends RowData>(row: Row<TFeatures, TData>): string;
 type DataTableExpandHeaderProps = Omit<ComponentProps<typeof Table$1.Header>, "children"> & {
   /**
    * Optional header content — e.g. an "expand all" toggle wired to
@@ -455,7 +515,7 @@ type DataTableExpandHeaderProps = Omit<ComponentProps<typeof Table$1.Header>, "c
  * ```
  */
 declare function ExpandHeader({ children, className, ...props }: DataTableExpandHeaderProps): import("react").JSX.Element;
-type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButton>, "appearance" | "aria-controls" | "aria-expanded" | "icon" | "intent" | "label"> & {
+type DataTableRowExpandButtonProps<TFeatures extends ExpandableTableFeatures, TData extends RowData> = Omit<ComponentProps<typeof IconButton>, "appearance" | "aria-controls" | "aria-expanded" | "icon" | "intent" | "label"> & {
   /**
    * The visual style of the expand toggle. Optional — the row expand button's
    * design is a ghost button, so the wrapper defaults it.
@@ -470,11 +530,11 @@ type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButto
    */
   intent?: IconButtonIntent;
   /**
-   * The TanStack Table row this button toggles. The table must be configured for
-   * expansion (`getExpandedRowModel`, plus `getRowCanExpand: () => true` for
-   * custom detail panels, which have no sub-rows).
+   * The TanStack Table row this button toggles. The table must register
+   * `rowExpandingFeature`, plus `getRowCanExpand: () => true` for custom detail
+   * panels, which have no sub-rows.
    */
-  row: Row<TData>;
+  row: ExpandableRow<TFeatures, TData>;
   /**
    * A human-readable name for the row, woven into the accessible label:
    * `Show details for {label}` / `Hide details for {label}`.
@@ -504,10 +564,20 @@ type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButto
  * pass `onClick` to run side effects before the toggle (call
  * `event.preventDefault()` to veto it).
  *
+ * The table must register `rowExpandingFeature`; the `row` prop's type rejects a row
+ * from a table without it. Add `expandedRowModel: createExpandedRowModel()` when rows
+ * have sub-rows; a detail panel expands without it.
+ *
  * @see https://mantle.ngrok.com/components/data-display/data-table#datatablerowexpandbutton
  *
  * @example
  * ```tsx
+ * const features = tableFeatures({
+ *   rowExpandingFeature,
+ *   expandedRowModel: createExpandedRowModel(),
+ * });
+ * const columnHelper = createColumnHelper<typeof features, Row>();
+ *
  * columnHelper.display({
  *   id: "expander",
  *   header: () => <DataTable.ExpandHeader />,
@@ -519,10 +589,10 @@ type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButto
  * });
  * ```
  */
-declare function RowExpandButton<TData>({ appearance, className, collapseIcon, expandIcon, intent, label, onClick, row, size, ...props }: DataTableRowExpandButtonProps<TData>): import("react").JSX.Element | null;
-type DataTableExpandedRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
+declare function RowExpandButton<TFeatures extends ExpandableTableFeatures, TData extends RowData>({ appearance, className, collapseIcon, expandIcon, intent, label, onClick, row, size, ...props }: DataTableRowExpandButtonProps<TFeatures, TData>): import("react").JSX.Element;
+type DataTableExpandedRowProps<TFeatures extends TableFeatures, TData extends RowData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
   /** The row whose detail panel this displays. */
-  row: Row<TData>;
+  row: Row<TFeatures, TData>;
   /**
    * Override the cell's `colSpan`. Defaults to the row's visible-cell count so
    * the panel spans every visible column (visibility- and pinning-aware).
@@ -576,16 +646,16 @@ type DataTableExpandedRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>,
  * ))}
  * ```
  */
-declare function ExpandedRow<TData>({ children, className, colSpan, row, ...props }: DataTableExpandedRowProps<TData>): import("react").JSX.Element;
+declare function ExpandedRow<TFeatures extends TableFeatures, TData extends RowData>({ children, className, colSpan, row, ...props }: DataTableExpandedRowProps<TFeatures, TData>): import("react").JSX.Element;
 /**
  * Use `DataTable` for INTERACTIVE tabular data — sorting, filtering, pagination,
  * row selection, and server-side or client-side data. Built on TanStack Table;
- * the consumer MUST construct a `useReactTable` instance from
+ * the consumer MUST construct a `useTable` instance from
  * `@tanstack/react-table` and pass it to `DataTable.Root` via the `table` prop.
- * Every TanStack utility (`createColumnHelper`, `getCoreRowModel`,
- * `getSortedRowModel`, `getPaginationRowModel`, `getFilteredRowModel`,
- * `useReactTable`, …) is re-exported from `@ngrok/mantle/data-table` so a single
- * import covers both the wrapper components and the TanStack helpers.
+ * Every TanStack export (`useTable`, `tableFeatures`, `createColumnHelper`, the
+ * `*Feature` objects, the `create*RowModel` factories, the `sortFn_*` and `filterFn_*` comparators,
+ * …) is re-exported from `@ngrok/mantle/data-table` so a single import covers
+ * both the wrapper components and the TanStack helpers.
  *
  * For STATIC, layout-driven tables (read-only data dumps, simple key/value
  * displays, plain markup tables with no interactivity), use `Table` instead.
@@ -617,14 +687,31 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  * import {
  *   DataTable,
  *   createColumnHelper,
- *   getCoreRowModel,
- *   useReactTable,
+ *   createSortedRowModel,
+ *   rowSortingFeature,
+ *   sortFn_alphanumeric,
+ *   sortFn_datetime,
+ *   sortFn_text,
+ *   tableFeatures,
+ *   useTable,
  * } from "@ngrok/mantle/data-table";
  *
  * type Row = { id: string; name: string };
  *
- * const columnHelper = createColumnHelper<Row>();
- * const columns = [
+ * // Register only the features the table uses. Auto-sort resolves the
+ * // `alphanumeric`, `text`, and `datetime` comparators by name, so register those three.
+ * const features = tableFeatures({
+ *   rowSortingFeature,
+ *   sortedRowModel: createSortedRowModel(),
+ *   sortFns: {
+ *     alphanumeric: sortFn_alphanumeric,
+ *     datetime: sortFn_datetime,
+ *     text: sortFn_text,
+ *   },
+ * });
+ *
+ * const columnHelper = createColumnHelper<typeof features, Row>();
+ * const columns = columnHelper.columns([
  *   columnHelper.accessor("name", {
  *     id: "name",
  *     header: (props) => (
@@ -636,10 +723,10 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  *     ),
  *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
  *   }),
- * ];
+ * ]);
  *
  * function MyTable({ data }: { data: Row[] }) {
- *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ *   const table = useTable({ features, data, columns });
  *   const rows = table.getRowModel().rows;
  *
  *   return (
@@ -663,12 +750,19 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  * ```tsx
  * import {
  *   DataTable,
+ *   columnFilteringFeature,
  *   createColumnHelper,
- *   getCoreRowModel,
- *   getFilteredRowModel,
- *   getPaginationRowModel,
- *   getSortedRowModel,
- *   useReactTable,
+ *   createFilteredRowModel,
+ *   createPaginatedRowModel,
+ *   createSortedRowModel,
+ *   globalFilteringFeature,
+ *   rowPaginationFeature,
+ *   rowSortingFeature,
+ *   sortFn_alphanumeric,
+ *   sortFn_datetime,
+ *   sortFn_text,
+ *   tableFeatures,
+ *   useTable,
  * } from "@ngrok/mantle/data-table";
  * import { Button } from "@ngrok/mantle/button";
  * import { CursorPagination } from "@ngrok/mantle/pagination";
@@ -684,8 +778,24 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  * // (default 5 | 10 | 20 | 50 | 100).
  * const DEFAULT_PAGE_SIZE = 10;
  *
- * const columnHelper = createColumnHelper<Payment>();
- * const columns = [
+ * // `globalFilteringFeature` builds on `columnFilteringFeature`, so register both.
+ * const features = tableFeatures({
+ *   columnFilteringFeature,
+ *   globalFilteringFeature,
+ *   rowPaginationFeature,
+ *   rowSortingFeature,
+ *   filteredRowModel: createFilteredRowModel(),
+ *   paginatedRowModel: createPaginatedRowModel(),
+ *   sortedRowModel: createSortedRowModel(),
+ *   sortFns: {
+ *     alphanumeric: sortFn_alphanumeric,
+ *     datetime: sortFn_datetime,
+ *     text: sortFn_text,
+ *   },
+ * });
+ *
+ * const columnHelper = createColumnHelper<typeof features, Payment>();
+ * const columns = columnHelper.columns([
  *   columnHelper.accessor("status", {
  *     id: "status",
  *     header: (props) => (
@@ -728,21 +838,18 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  *       </DataTable.Cell>
  *     ),
  *   }),
- * ];
+ * ]);
  *
  * function PaymentsTable({ data }: { data: Payment[] }) {
  *   const [globalFilter, setGlobalFilter] = useState("");
  *
- *   const table = useReactTable({
+ *   const table = useTable({
+ *     features,
  *     data,
  *     columns,
  *     state: { globalFilter },
  *     onGlobalFilterChange: setGlobalFilter,
- *     getCoreRowModel: getCoreRowModel(),
- *     getSortedRowModel: getSortedRowModel(),
- *     getFilteredRowModel: getFilteredRowModel(),
- *     getPaginationRowModel: getPaginationRowModel(),
- *     initialState: { pagination: { pageSize: DEFAULT_PAGE_SIZE } },
+ *     initialState: { pagination: { pageIndex: 0, pageSize: DEFAULT_PAGE_SIZE } },
  *   });
  *   const rows = table.getRowModel().rows;
  *   const isFiltered = globalFilter.trim() !== "";
@@ -796,7 +903,7 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  *       </DataTable.Root>
  *       <CursorPagination.Root
  *         className="flex justify-end"
- *         pageSize={table.getState().pagination.pageSize}
+ *         pageSize={table.state.pagination.pageSize}
  *         onChangePageSize={(size) => {
  *           table.setPageSize(size);
  *           table.setPageIndex(0); // reset to the first page when the size changes
@@ -825,9 +932,9 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  * import { IconButton } from "@ngrok/mantle/button";
  * import { DotsThreeVerticalIcon } from "@phosphor-icons/react/DotsThreeVertical";
  *
- * const columnHelper = createColumnHelper<Payment>();
+ * const columnHelper = createColumnHelper<typeof features, Payment>();
  *
- * const columns = [
+ * const columns = columnHelper.columns([
  *   // …other columns…
  *   columnHelper.display({
  *     id: "actions",
@@ -850,7 +957,7 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  *       </DataTable.ActionCell>
  *     ),
  *   }),
- * ];
+ * ]);
  * ```
  *
  * @example
@@ -858,13 +965,13 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  * primary cell also renders a `<Link>` as the keyboard and screen-reader path.
  * `SandboxedOnClick` keeps the link's click from also running the row handler:
  * ```tsx
- * import { DataTable } from "@ngrok/mantle/data-table";
+ * import { DataTable, useTable } from "@ngrok/mantle/data-table";
  * import { SandboxedOnClick } from "@ngrok/mantle/sandboxed-on-click";
  * import { Link, href, useNavigate } from "react-router";
  *
  * function PaymentsTable({ data }: { data: Payment[] }) {
  *   const navigate = useNavigate();
- *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ *   const table = useTable({ features, data, columns });
  *   const rows = table.getRowModel().rows;
  *
  *   return (
@@ -902,7 +1009,7 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
 declare const DataTable: {
   /**
    * The root container of the data table component. REQUIRED: pass a
-   * `useReactTable` instance (from `@tanstack/react-table`, also re-exported
+   * `useTable` instance (from `@tanstack/react-table`, also re-exported
    * from `@ngrok/mantle/data-table`) via the `table` prop — every other
    * `DataTable.*` part reads from it through context.
    *
@@ -910,7 +1017,7 @@ declare const DataTable: {
    *
    * @example
    * ```tsx
-   * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+   * const table = useTable({ features, data, columns });
    * const rows = table.getRowModel().rows;
    *
    * <DataTable.Root table={table}>
@@ -1083,16 +1190,37 @@ declare const DataTable: {
    * - For `"alphanumeric"` sorting: `unsorted → ascending → descending → unsorted`
    * - For `"time"` sorting: `unsorted → newest-first → oldest-first → unsorted`
    *
+   * The table must register `rowSortingFeature`; the `column` prop's type rejects a
+   * column from a table without it. Pair it with `sortedRowModel: createSortedRowModel()`,
+   * or the button toggles the icon and never reorders a row. Register a `sortFns` slot
+   * too: without one, auto-sort falls back to `sortFn_basic`.
+   *
    * When the column cannot sort (`disableSorting`, or `enableSorting: false` on
    * the column), the part renders the label as plain text: no button, no icon.
    *
    * For right-aligned numeric columns, pass `className="justify-end"` and
    * `iconPlacement="start"` so the sort icon stays paired with the label.
    *
+   * | Data Attribute             | Value                              | Description                                                                                                                 |
+   * | -------------------------- | ---------------------------------- | --------------------------------------------------------------------------------------------------------------------------- |
+   * | `data-sort-direction`      | `"asc"`, `"desc"`, or `"unsorted"` | The column's current sort direction. Always `"unsorted"` on the plain-text span.                                            |
+   * | `data-table-header-action` | present on the button              | Presence-only. `DataTable.Header` drops its horizontal padding when a descendant carries it. Absent on the plain-text span. |
+   *
    * @see https://mantle.ngrok.com/components/data-display/data-table#datatableheadersortbutton
    *
    * @example
    * ```tsx
+   * const features = tableFeatures({
+   *   rowSortingFeature,
+   *   sortedRowModel: createSortedRowModel(),
+   *   sortFns: {
+   *     alphanumeric: sortFn_alphanumeric,
+   *     datetime: sortFn_datetime,
+   *     text: sortFn_text,
+   *   },
+   * });
+   * const columnHelper = createColumnHelper<typeof features, Row>();
+   *
    * columnHelper.accessor("email", {
    *   id: "email",
    *   header: (props) => (
@@ -1172,7 +1300,8 @@ declare const DataTable: {
    * column and pair it with `DataTable.ExpandedRow`. Sets `aria-expanded` and
    * (while expanded) `aria-controls`, stops click propagation so it never fires
    * a row-level `onClick`, and renders nothing when `row.getCanExpand()` is
-   * false.
+   * false. The table must register `rowExpandingFeature`; the `row` prop's
+   * type rejects a row from a table without it.
    *
    * @see https://mantle.ngrok.com/components/data-display/data-table#datatablerowexpandbutton
    *

package/dist/data-table.js

@@ -1 +1 @@
-import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./button-DGsTE3P2.js";import{t as n}from"./button-CaM-ZAH5.js";import{t as r}from"./icons-B_DDQcVD.js";import{n as i}from"./sandboxed-on-click-UagMFl_U.js";import{t as a}from"./table-EZNW3nFk.js";import{Fragment as o,createContext as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{flexRender as m}from"@tanstack/react-table";import{MinusIcon as h}from"@phosphor-icons/react/Minus";import{PlusIcon as g}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const _=[`unsorted`,`asc`,`desc`],v=[`unsorted`,`desc`,`asc`];function y(e,t){return b(t===`alphanumeric`?_:v,e)??`unsorted`}function b(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const x=s(null);function S(){let e=c(x);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function C({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(x.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function w({appearance:n=`ghost`,children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,intent:c=`neutral`,sortingMode:l,sortIcon:u,onClick:d,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`;if(!h)return f(`span`,{"data-slot":`data-table-header-sort-button`,"data-sort-direction":`unsorted`,className:e(`flex w-full items-center justify-start`,n===`ghost`&&c===`neutral`&&`text-muted`,i),...p,children:r});let _=u?.(g)??f(H,{mode:l,direction:g});return f(t,{appearance:n,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,n===`ghost`&&c===`neutral`&&`text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{d?.(e),!e.defaultPrevented&&l!==void 0&&U(a,l)},intent:c,type:`button`,...p,children:r})}function T(e){let t=e?.getIsSorted();if(t===`asc`)return`ascending`;if(t===`desc`)return`descending`}function E({children:t,className:n,column:r,...i}){return f(a.Header,{"aria-sort":T(r),"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...i,children:t})}const D=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function O(e){let{table:t}=S();return f(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>f(a.Row,{children:e.headers.map(e=>f(o,{children:e.isPlaceholder?f(a.Header,{},e.id):m(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function k(e){if(e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return!1;let t=e.currentTarget.ownerDocument.getSelection();return t==null||t.isCollapsed?!0:!e.currentTarget.contains(t.anchorNode)}function A({className:t,onClick:n,renderExpanded:r,row:i,...s}){let c=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":i.getIsExpanded()||void 0,"data-clickable":n==null?void 0:``,className:e(n!=null&&`cursor-pointer`,t),onClick:n&&(e=>{k(e)&&n(e)}),...s,children:i.getVisibleCells().map(e=>f(o,{children:m(e.column.columnDef.cell,e.getContext())},e.id))});return r==null?c:p(d,{children:[c,i.getIsExpanded()&&f(B,{row:i,children:r(i)})]})}function j({children:e,...t}){let{table:n}=S(),r=n.getVisibleLeafColumns().length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function M(){return f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function N({children:t,className:n,onClick:r,...o}){let{onClick:s}=i({allowClickEventDefault:!0,onClick:r});return p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),onClick:s,...o,children:[f(M,{}),t]})}function P({children:t,className:n,...r}){let{table:i}=S(),o=i.getRowModel().rows.length>0;return p(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[t??f(`span`,{className:`sr-only`,children:`Actions`}),o&&f(M,{})]})}function F(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function I({children:t,className:n,...r}){return f(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??f(`span`,{className:`sr-only`,children:`Row details`})})}const L=f(g,{weight:`bold`,className:`size-3.5`}),R=f(h,{weight:`bold`,className:`size-3.5`});function z({appearance:t=`ghost`,className:r,collapseIcon:i=R,expandIcon:a=L,intent:o=`neutral`,label:s,onClick:c,row:l,size:u=`sm`,...d}){if(!l.getCanExpand())return null;let p=l.getIsExpanded(),m=l.getToggleExpandedHandler();return f(n,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:t,intent:o,size:u,className:e(`rounded`,r),"aria-expanded":p,"aria-controls":p?F(l):void 0,icon:p?i:a,label:`${p?`Hide`:`Show`} details for ${s}`,onClick:e=>{e.stopPropagation(),c?.(e),!e.defaultPrevented&&m()},...d})}function B({children:t,className:n,colSpan:r,row:i,...o}){return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:f(a.Cell,{id:F(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}const V={Root:C,ActionCell:N,ActionHeader:P,Cell:a.Cell,Body:D,EmptyRow:j,Head:O,Header:E,HeaderSortButton:w,Row:A,ExpandHeader:I,RowExpandButton:z,ExpandedRow:B};function H({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(r,{mode:t,direction:e,...n})}function U(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(y(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{V as DataTable,F as expandedRowId};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./button-Dij5vCQG.js";import{t as n}from"./button-pwkdtR3U.js";import{t as r}from"./icons-Bu-2boul.js";import{n as i}from"./sandboxed-on-click-BLvvSqOP.js";import{t as a}from"./table-Bje71vHb.js";import{c as o}from"react/compiler-runtime";import{Fragment as s,createContext as c,useContext as l}from"react";import u from"tiny-invariant";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{Subscribe as m,callMemoOrStaticFn as h,flexRender as g}from"@tanstack/react-table";import{MinusIcon as _}from"@phosphor-icons/react/Minus";import{PlusIcon as v}from"@phosphor-icons/react/Plus";import{column_getIsSorted as y,row_getIsExpanded as b,row_getVisibleCells as x,table_getVisibleLeafColumns as S}from"@tanstack/react-table/static-functions";export*from"@tanstack/react-table";const C=[`unsorted`,`asc`,`desc`],w=[`unsorted`,`desc`,`asc`];function T(e,t){return E(t===`alphanumeric`?C:w,e)??`unsorted`}function E(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const D=c(null);function O(){return l(D)?.table.options}function k(){let e=l(D);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function A(e){let t=o(14),n,r,i;t[0]===e?(n=t[1],r=t[2],i=t[3]):({children:n,table:i,...r}=e,t[0]=e,t[1]=n,t[2]=r,t[3]=i);let s;t[4]===i?s=t[5]:(s={table:i},t[4]=i,t[5]=s);let c=s,l;t[6]===n?l=t[7]:(l=f(a.Element,{children:n}),t[6]=n,t[7]=l);let u;t[8]!==r||t[9]!==l?(u=f(a.Root,{"data-slot":`data-table`,...r,children:l}),t[8]=r,t[9]=l,t[10]=u):u=t[10];let d;return t[11]!==c||t[12]!==u?(d=f(D.Provider,{value:c,children:u}),t[11]=c,t[12]=u,t[13]=d):d=t[13],d}function j(n){let r=o(31),i,a,s,c,l,u,d,p,h,g,_;r[0]===n?(i=r[1],a=r[2],s=r[3],c=r[4],l=r[5],u=r[6],d=r[7],p=r[8],h=r[9],g=r[10],_=r[11]):({appearance:p,children:i,className:a,column:s,disableSorting:h,iconPlacement:g,intent:_,sortingMode:d,sortIcon:l,onClick:c,...u}=n,r[0]=n,r[1]=i,r[2]=a,r[3]=s,r[4]=c,r[5]=l,r[6]=u,r[7]=d,r[8]=p,r[9]=h,r[10]=g,r[11]=_);let v=p===void 0?`ghost`:p,y=h!==void 0&&h,b=g===void 0?`end`:g,x=_===void 0?`neutral`:_,S;r[12]!==v||r[13]!==i||r[14]!==a||r[15]!==s||r[16]!==y||r[17]!==b||r[18]!==x||r[19]!==c||r[20]!==l||r[21]!==u||r[22]!==d?(S=()=>{let n=s.getIsSorted(),r=!y&&s.getCanSort(),o=r&&typeof n==`string`?n:`unsorted`;if(!r)return f(`span`,{"data-slot":`data-table-header-sort-button`,"data-sort-direction":`unsorted`,className:e(`flex w-full items-center justify-start`,v===`ghost`&&x===`neutral`&&`text-muted`,a),...u,children:i});let p=l?.(o)??f(Q,{mode:d,direction:o});return f(t,{appearance:v,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none`,v===`ghost`&&x===`neutral`&&`text-muted`,a),"data-sort-direction":o,"data-table-header-action":!0,icon:p,iconPlacement:b,onClick:e=>{c?.(e),!e.defaultPrevented&&d!==void 0&&$(s,d)},intent:x,type:`button`,...u,children:i})},r[12]=v,r[13]=i,r[14]=a,r[15]=s,r[16]=y,r[17]=b,r[18]=x,r[19]=c,r[20]=l,r[21]=u,r[22]=d,r[23]=S):S=r[23];let C=S,w=O(),T;r[24]!==s||r[25]!==w?(T=()=>({sorted:s.getIsSorted(),options:w}),r[24]=s,r[25]=w,r[26]=T):T=r[26];let E;return r[27]!==s.table.store||r[28]!==C||r[29]!==T?(E=f(m,{source:s.table.store,selector:T,children:C}),r[27]=s.table.store,r[28]=C,r[29]=T,r[30]=E):E=r[30],E}function M(e){if(e==null)return;let t=h(e,`getIsSorted`,y);if(t===`asc`)return`ascending`;if(t===`desc`)return`descending`}function N(t){let n=o(19),r,i,s,c;n[0]===t?(r=n[1],i=n[2],s=n[3],c=n[4]):({children:r,className:i,column:s,...c}=t,n[0]=t,n[1]=r,n[2]=i,n[3]=s,n[4]=c);let l;n[5]!==r||n[6]!==i||n[7]!==s||n[8]!==c?(l=()=>f(a.Header,{"aria-sort":M(s),"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,i),...c,children:r}),n[5]=r,n[6]=i,n[7]=s,n[8]=c,n[9]=l):l=n[9];let u=l,d=O();if(s==null){let e;return n[10]===u?e=n[11]:(e=u(),n[10]=u,n[11]=e),e}let p;n[12]!==s||n[13]!==d?(p=()=>({ariaSort:M(s),options:d}),n[12]=s,n[13]=d,n[14]=p):p=n[14];let h;return n[15]!==s.table.store||n[16]!==u||n[17]!==p?(h=f(m,{source:s.table.store,selector:p,children:u}),n[15]=s.table.store,n[16]=u,n[17]=p,n[18]=h):h=n[18],h}const P=e=>{let t=o(2),n;return t[0]===e?n=t[1]:(n=f(a.Body,{"data-slot":`data-table-body`,...e}),t[0]=e,t[1]=n),n};function F(e){let t=o(5),{table:n}=k(),r;t[0]===n?r=t[1]:(r=n.getHeaderGroups().map(I),t[0]=n,t[1]=r);let i;return t[2]!==e||t[3]!==r?(i=f(a.Head,{"data-slot":`data-table-head`,...e,children:r}),t[2]=e,t[3]=r,t[4]=i):i=t[4],i}function I(e){return f(a.Row,{children:e.headers.map(L)},e.id)}function L(e){return f(s,{children:e.isPlaceholder?f(a.Header,{}):g(e.column.columnDef.header,e.getContext())},e.id)}function R(e){if(e.button!==0||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey)return!1;let t=e.currentTarget.ownerDocument.getSelection();return t==null||t.isCollapsed?!0:!e.currentTarget.contains(t.anchorNode)}function z(t){let n=o(9),r,i;if(n[0]!==t){let{className:o,onClick:s,renderExpanded:c,row:l,...u}=t;r=l,i=()=>{let t=h(r,`getIsExpanded`,b),n=h(r,`getVisibleCells`,x),i=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":t||void 0,"data-clickable":s==null?void 0:``,className:e(s!=null&&`cursor-pointer`,o),onClick:s&&(e=>{R(e)&&s(e)}),...u,children:n.map(B)});return c==null?i:p(d,{children:[i,t&&f(X,{row:r,children:c(r)})]})},n[0]=t,n[1]=r,n[2]=i}else r=n[1],i=n[2];let s=i,c=O(),l;n[3]===c?l=n[4]:(l=e=>({state:e,options:c}),n[3]=c,n[4]=l);let u;return n[5]!==s||n[6]!==r.table.store||n[7]!==l?(u=f(m,{source:r.table.store,selector:l,children:s}),n[5]=s,n[6]=r.table.store,n[7]=l,n[8]=u):u=n[8],u}function B(e){return f(s,{children:g(e.column.columnDef.cell,e.getContext())},e.id)}function V(e){let t=o(11),n,r;t[0]===e?(n=t[1],r=t[2]):({children:n,...r}=e,t[0]=e,t[1]=n,t[2]=r);let{table:i}=k(),s;t[3]===i?s=t[4]:(s=h(i,`getVisibleLeafColumns`,S),t[3]=i,t[4]=s);let c=s.length,l;t[5]!==n||t[6]!==c?(l=f(a.Cell,{colSpan:c,children:n}),t[5]=n,t[6]=c,t[7]=l):l=t[7];let u;return t[8]!==r||t[9]!==l?(u=f(a.Row,{"data-slot":`data-table-empty-row`,...r,children:l}),t[8]=r,t[9]=l,t[10]=u):u=t[10],u}function H(){let t=o(1),n;return t[0]===Symbol.for(`react.memo_cache_sentinel`)?(n=f(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)}),t[0]=n):n=t[0],n}function U(t){let n=o(15),r,s,c,l;n[0]===t?(r=n[1],s=n[2],c=n[3],l=n[4]):({children:r,className:s,onClick:c,...l}=t,n[0]=t,n[1]=r,n[2]=s,n[3]=c,n[4]=l);let u;n[5]===c?u=n[6]:(u=i({allowClickEventDefault:!0,onClick:c}),n[5]=c,n[6]=u);let{onClick:d}=u,m;n[7]===s?m=n[8]:(m=e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,s),n[7]=s,n[8]=m);let h;n[9]===Symbol.for(`react.memo_cache_sentinel`)?(h=f(H,{}),n[9]=h):h=n[9];let g;return n[10]!==r||n[11]!==l||n[12]!==d||n[13]!==m?(g=p(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:m,onClick:d,...l,children:[h,r]}),n[10]=r,n[11]=l,n[12]=d,n[13]=m,n[14]=g):g=n[14],g}function W(t){let n=o(21),r,i,s;n[0]===t?(r=n[1],i=n[2],s=n[3]):({children:r,className:i,...s}=t,n[0]=t,n[1]=r,n[2]=i,n[3]=s);let{table:c}=k(),l;n[4]===c?l=n[5]:(l=c.getRowModel(),n[4]=c,n[5]=l);let u=l.rows.length>0,d;n[6]===u?d=n[7]:(d=u?{"data-mantle-table-sticky-right":!0}:{},n[6]=u,n[7]=d);let m=u&&`sticky z-10 right-0 bg-inherit`,h;n[8]!==i||n[9]!==m?(h=e(m,i),n[8]=i,n[9]=m,n[10]=h):h=n[10];let g;n[11]===r?g=n[12]:(g=r??f(`span`,{className:`sr-only`,children:`Actions`}),n[11]=r,n[12]=g);let _;n[13]===u?_=n[14]:(_=u&&f(H,{}),n[13]=u,n[14]=_);let v;return n[15]!==s||n[16]!==d||n[17]!==h||n[18]!==g||n[19]!==_?(v=p(a.Header,{...d,"data-slot":`data-table-action-header`,className:h,...s,children:[g,_]}),n[15]=s,n[16]=d,n[17]=h,n[18]=g,n[19]=_,n[20]=v):v=n[20],v}function G(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function K(t){let n=o(12),r,i,s;n[0]===t?(r=n[1],i=n[2],s=n[3]):({children:r,className:i,...s}=t,n[0]=t,n[1]=r,n[2]=i,n[3]=s);let c;n[4]===i?c=n[5]:(c=e(`w-9 px-0 text-center`,i),n[4]=i,n[5]=c);let l;n[6]===r?l=n[7]:(l=r??f(`span`,{className:`sr-only`,children:`Row details`}),n[6]=r,n[7]=l);let u;return n[8]!==s||n[9]!==c||n[10]!==l?(u=f(a.Header,{"data-slot":`data-table-expand-header`,className:c,...s,children:l}),n[8]=s,n[9]=c,n[10]=l,n[11]=u):u=n[11],u}const q=f(v,{weight:`bold`,className:`size-3.5`}),J=f(_,{weight:`bold`,className:`size-3.5`});function Y(t){let r=o(29),i,a,s,c,l,u,d,p,h,g;r[0]===t?(i=r[1],a=r[2],s=r[3],c=r[4],l=r[5],u=r[6],d=r[7],p=r[8],h=r[9],g=r[10]):({appearance:u,className:i,collapseIcon:d,expandIcon:p,intent:h,label:a,onClick:s,row:l,size:g,...c}=t,r[0]=t,r[1]=i,r[2]=a,r[3]=s,r[4]=c,r[5]=l,r[6]=u,r[7]=d,r[8]=p,r[9]=h,r[10]=g);let _=u===void 0?`ghost`:u,v=d===void 0?J:d,y=p===void 0?q:p,b=h===void 0?`neutral`:h,x=g===void 0?`sm`:g,S;r[11]!==_||r[12]!==i||r[13]!==v||r[14]!==y||r[15]!==b||r[16]!==a||r[17]!==s||r[18]!==c||r[19]!==l||r[20]!==x?(S=()=>{if(!l.getCanExpand())return null;let t=l.getIsExpanded(),r=l.getToggleExpandedHandler();return f(n,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:_,intent:b,size:x,className:e(`rounded`,i),"aria-expanded":t,"aria-controls":t?G(l):void 0,icon:t?v:y,label:`${t?`Hide`:`Show`} details for ${a}`,onClick:e=>{e.stopPropagation(),s?.(e),!e.defaultPrevented&&r()},...c})},r[11]=_,r[12]=i,r[13]=v,r[14]=y,r[15]=b,r[16]=a,r[17]=s,r[18]=c,r[19]=l,r[20]=x,r[21]=S):S=r[21];let C=S,w=O(),T;r[22]!==w||r[23]!==l?(T=()=>({isExpanded:l.getIsExpanded(),options:w}),r[22]=w,r[23]=l,r[24]=T):T=r[24];let E;return r[25]!==C||r[26]!==l.table.store||r[27]!==T?(E=f(m,{source:l.table.store,selector:T,children:C}),r[25]=C,r[26]=l.table.store,r[27]=T,r[28]=E):E=r[28],E}function X(t){let n=o(23),r,i,s,c,l;n[0]===t?(r=n[1],i=n[2],s=n[3],c=n[4],l=n[5]):({children:r,className:i,colSpan:s,row:l,...c}=t,n[0]=t,n[1]=r,n[2]=i,n[3]=s,n[4]=c,n[5]=l);let u;n[6]===l?u=n[7]:(u=()=>h(l,`getVisibleCells`,x).length,n[6]=l,n[7]=u);let d=u,p;n[8]!==r||n[9]!==i||n[10]!==c||n[11]!==l?(p=t=>{let{numberOfColumns:n}=t;return f(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,i),...c,children:f(a.Cell,{id:G(l),colSpan:n,className:`bg-card font-sans text-body`,children:r})})},n[8]=r,n[9]=i,n[10]=c,n[11]=l,n[12]=p):p=n[12];let g=p,_=O();if(s!=null){let e;return n[13]!==s||n[14]!==g?(e=g({numberOfColumns:s}),n[13]=s,n[14]=g,n[15]=e):e=n[15],e}let v;n[16]!==d||n[17]!==_?(v=()=>({numberOfColumns:d(),options:_}),n[16]=d,n[17]=_,n[18]=v):v=n[18];let y;return n[19]!==g||n[20]!==l.table.store||n[21]!==v?(y=f(m,{source:l.table.store,selector:v,children:g}),n[19]=g,n[20]=l.table.store,n[21]=v,n[22]=y):y=n[22],y}const Z={Root:A,ActionCell:U,ActionHeader:W,Cell:a.Cell,Body:P,EmptyRow:V,Head:F,Header:N,HeaderSortButton:j,Row:z,ExpandHeader:K,RowExpandButton:Y,ExpandedRow:X};function Q(e){let t=o(10),n,i,a;if(t[0]===e?(n=t[1],i=t[2],a=t[3]):({direction:n,mode:i,...a}=e,t[0]=e,t[1]=n,t[2]=i,t[3]=a),n===`unsorted`||!i||!n){let e;return t[4]===a?e=t[5]:(e=f(`svg`,{"aria-hidden":!0,...a}),t[4]=a,t[5]=e),e}let s;return t[6]!==n||t[7]!==i||t[8]!==a?(s=f(r,{mode:i,direction:n,...a}),t[6]=n,t[7]=i,t[8]=a,t[9]=s):s=t[9],s}function $(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(T(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{Z as DataTable,G as expandedRowId};

package/dist/description-list.js

@@ -1 +1 @@
-import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-C3gII_9c.js";import{jsx as r}from"react/jsx-runtime";const i={Root:({asChild:i=!1,className:a,children:o,"data-slot":s,ref:c,...l})=>r(i?n:`dl`,{ref:c,"data-slot":t(s,`description-list`),className:e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1`,a),...l,children:o}),Item:({asChild:t=!1,className:i,children:a,ref:o,...s})=>r(t?n:`div`,{ref:o,"data-slot":`description-list-item`,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...s,children:a}),Label:({asChild:t=!1,className:i,children:a,ref:o,...s})=>r(t?n:`dt`,{ref:o,"data-slot":`description-list-label`,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...s,children:a}),Value:({asChild:t=!1,className:i,children:a,ref:o,...s})=>r(t?n:`dd`,{ref:o,"data-slot":`description-list-value`,className:e(`text-body font-mono text-mono py-2 px-3`,i),...s,children:a})};export{i as DescriptionList};
+import{t as e}from"./cx-0HCjnNv1.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-BsvE2ntj.js";import{c as r}from"react/compiler-runtime";import{jsx as i}from"react/jsx-runtime";const a={Root:a=>{let o=r(18),s,c,l,u,d,f;o[0]===a?(s=o[1],c=o[2],l=o[3],u=o[4],d=o[5],f=o[6]):({asChild:f,className:c,children:s,"data-slot":l,ref:u,...d}=a,o[0]=a,o[1]=s,o[2]=c,o[3]=l,o[4]=u,o[5]=d,o[6]=f);let p=f!==void 0&&f?n:`dl`,m;o[7]===l?m=o[8]:(m=t(l,`description-list`),o[7]=l,o[8]=m);let h;o[9]===c?h=o[10]:(h=e(`relative scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card grid grid-cols-[auto_1fr] gap-x-4 [&>*:nth-child(odd)]:bg-neutral-500/5 p-1`,c),o[9]=c,o[10]=h);let g;return o[11]!==p||o[12]!==s||o[13]!==u||o[14]!==d||o[15]!==m||o[16]!==h?(g=i(p,{ref:u,"data-slot":m,className:h,...d,children:s}),o[11]=p,o[12]=s,o[13]=u,o[14]=d,o[15]=m,o[16]=h,o[17]=g):g=o[17],g},Item:t=>{let a=r(14),o,s,c,l,u;a[0]===t?(o=a[1],s=a[2],c=a[3],l=a[4],u=a[5]):({asChild:u,className:s,children:o,ref:c,...l}=t,a[0]=t,a[1]=o,a[2]=s,a[3]=c,a[4]=l,a[5]=u);let d=u!==void 0&&u?n:`div`,f;a[6]===s?f=a[7]:(f=e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,s),a[6]=s,a[7]=f);let p;return a[8]!==d||a[9]!==o||a[10]!==c||a[11]!==l||a[12]!==f?(p=i(d,{ref:c,"data-slot":`description-list-item`,className:f,...l,children:o}),a[8]=d,a[9]=o,a[10]=c,a[11]=l,a[12]=f,a[13]=p):p=a[13],p},Label:t=>{let a=r(14),o,s,c,l,u;a[0]===t?(o=a[1],s=a[2],c=a[3],l=a[4],u=a[5]):({asChild:u,className:s,children:o,ref:c,...l}=t,a[0]=t,a[1]=o,a[2]=s,a[3]=c,a[4]=l,a[5]=u);let d=u!==void 0&&u?n:`dt`,f;a[6]===s?f=a[7]:(f=e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,s),a[6]=s,a[7]=f);let p;return a[8]!==d||a[9]!==o||a[10]!==c||a[11]!==l||a[12]!==f?(p=i(d,{ref:c,"data-slot":`description-list-label`,className:f,...l,children:o}),a[8]=d,a[9]=o,a[10]=c,a[11]=l,a[12]=f,a[13]=p):p=a[13],p},Value:t=>{let a=r(14),o,s,c,l,u;a[0]===t?(o=a[1],s=a[2],c=a[3],l=a[4],u=a[5]):({asChild:u,className:s,children:o,ref:c,...l}=t,a[0]=t,a[1]=o,a[2]=s,a[3]=c,a[4]=l,a[5]=u);let d=u!==void 0&&u?n:`dd`,f;a[6]===s?f=a[7]:(f=e(`text-body font-mono text-mono py-2 px-3`,s),a[6]=s,a[7]=f);let p;return a[8]!==d||a[9]!==o||a[10]!==c||a[11]!==l||a[12]!==f?(p=i(d,{ref:c,"data-slot":`description-list-value`,className:f,...l,children:o}),a[8]=d,a[9]=o,a[10]=c,a[11]=l,a[12]=f,a[13]=p):p=a[13],p}};export{a as DescriptionList};