@ngrok/mantle 0.84.2 → 0.85.0

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.84.2",
+	"version": "0.85.0",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",

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,7 @@ 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.
  *
  * | Data Attribute   | Value                         | Description                                             |
  * | ---------------- | ----------------------------- | ------------------------------------------------------- |
@@ -297,7 +352,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 +374,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 +411,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 +479,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 +510,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 +525,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 +559,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 +584,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 | null;
+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 +641,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 +682,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 +718,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 +745,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 +773,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 +833,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 +898,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 +927,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 +952,7 @@ declare function ExpandedRow<TData>({ children, className, colSpan, row, ...prop
  *       </DataTable.ActionCell>
  *     ),
  *   }),
- * ];
+ * ]);
  * ```
  *
  * @example
@@ -858,13 +960,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 +1004,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 +1012,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 +1185,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 +1295,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-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-0jpWGqu6.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{callMemoOrStaticFn as m,flexRender as h}from"@tanstack/react-table";import{MinusIcon as g}from"@phosphor-icons/react/Minus";import{PlusIcon as _}from"@phosphor-icons/react/Plus";import{column_getIsSorted as v,row_getIsExpanded as y,row_getVisibleCells as b,table_getVisibleLeafColumns as x}from"@tanstack/react-table/static-functions";export*from"@tanstack/react-table";const S=[`unsorted`,`asc`,`desc`],C=[`unsorted`,`desc`,`asc`];function w(e,t){return T(t===`alphanumeric`?S:C,e)??`unsorted`}function T(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 E=s(null);function D(){let e=c(E);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function O({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return f(E.Provider,{value:r,children:f(a.Root,{"data-slot":`data-table`,...n,children:f(a.Element,{children:e})})})}function k({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(q,{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&&J(a,l)},intent:c,type:`button`,...p,children:r})}function A(e){if(e==null)return;let t=m(e,`getIsSorted`,v);if(t===`asc`)return`ascending`;if(t===`desc`)return`descending`}function j({children:t,className:n,column:r,...i}){return f(a.Header,{"aria-sort":A(r),"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...i,children:t})}const M=e=>f(a.Body,{"data-slot":`data-table-body`,...e});function N(e){let{table:t}=D();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,{}):h(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function P(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 F({className:t,onClick:n,renderExpanded:r,row:i,...s}){let c=m(i,`getIsExpanded`,y),l=m(i,`getVisibleCells`,b),u=f(a.Row,{"data-slot":`data-table-row`,"data-expanded":c||void 0,"data-clickable":n==null?void 0:``,className:e(n!=null&&`cursor-pointer`,t),onClick:n&&(e=>{P(e)&&n(e)}),...s,children:l.map(e=>f(o,{children:h(e.column.columnDef.cell,e.getContext())},e.id))});return r==null?u:p(d,{children:[u,c&&f(G,{row:i,children:r(i)})]})}function I({children:e,...t}){let{table:n}=D(),r=m(n,`getVisibleLeafColumns`,x).length;return f(a.Row,{"data-slot":`data-table-empty-row`,...t,children:f(a.Cell,{colSpan:r,children:e})})}function L(){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 R({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(L,{}),t]})}function z({children:t,className:n,...r}){let{table:i}=D(),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(L,{})]})}function B(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function V({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 H=f(_,{weight:`bold`,className:`size-3.5`}),U=f(g,{weight:`bold`,className:`size-3.5`});function W({appearance:t=`ghost`,className:r,collapseIcon:i=U,expandIcon:a=H,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?B(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 G({children:t,className:n,colSpan:r,row:i,...o}){let s=r??m(i,`getVisibleCells`,b).length;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:B(i),colSpan:s,className:`bg-card font-sans text-body`,children:t})})}const K={Root:O,ActionCell:R,ActionHeader:z,Cell:a.Cell,Body:M,EmptyRow:I,Head:N,Header:j,HeaderSortButton:k,Row:F,ExpandHeader:V,RowExpandButton:W,ExpandedRow:G};function q({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?f(`svg`,{"aria-hidden":!0,...n}):f(r,{mode:t,direction:e,...n})}function J(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(w(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{K as DataTable,B as expandedRowId};

package/dist/input.d.ts

@@ -2,6 +2,9 @@ import { o as WithValidation, r as Validation } from "./field-7QeiTFwl.js";
 import { a as AutoComplete, c as WithInputType, i as InputProps, n as InputCapture, o as InputType, r as InputCaptureProps, s as WithAutoComplete, t as Input } from "./input-DpnC3Xgj.js";
 import { ComponentProps } from "react";
 //#region src/components/input/password-input.d.ts
+/**
+ * The props for the `PasswordInput` component.
+ */
 type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
   /**
    * Called with the next visibility when the user clicks the toggle. In
@@ -26,14 +29,16 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
  *   accurately and may want to verify visually before submitting.
  *
  * **When not to use**
- * - For values that are never sensitive — use a plain {@link https://mantle.ngrok.com/components/forms/input Input}.
+ * - For values that are never sensitive: use a plain {@link https://mantle.ngrok.com/components/forms/input Input}.
  * - For controls where the toggle would be confusing (e.g. masked input
  *   formatting like phone numbers).
  *
  * **Visibility state.** The toggle is uncontrolled by default. Pass
- * `showValue` to control the visibility from the outside (useful when one
- * UI control toggles multiple password fields), and `onValueVisibilityChange`
- * to be notified when the user toggles via the built-in button.
+ * `showValue` to control the visibility from the outside, for example when
+ * one control reveals several password fields. Pass `onValueVisibilityChange`
+ * to receive the next visibility when the user clicks the built-in toggle.
+ * The eye icon animates on every visibility change, from the built-in toggle
+ * or from `showValue`, unless the user prefers reduced motion.
  *
  * **Accessibility.** Always pair with a {@link https://mantle.ngrok.com/components/forms/label Label}.
  * The toggle is a focusable `aria-pressed` button named "Show value". Its
@@ -47,11 +52,14 @@ type PasswordInputProps = Omit<ComponentProps<"input">, "autoComplete" | "type">
  * | Data Attribute | Value | Description |
  * | --- | --- | --- |
  * | `data-slot` | `"password-input"` | The chrome around the input. |
+ * | `data-slot` | `"input-capture"` | The `<input>` element. |
  * | `data-slot` | `"password-input-toggle"` | The visibility toggle button. |
+ * | `data-disabled` | present when disabled | On the chrome. Style with `data-disabled:`. |
+ * | `data-validation` | `"error"` \| `"success"` \| `"warning"` | On the chrome and the `<input>`. Omitted when unset. |
  *
  * **Browser password managers.** When revealed, the input switches to
- * `type="text"` — some password managers may pause autofill in this state,
- * which is the intended security tradeoff.
+ * `type="text"`. Some password managers may pause autofill in this state,
+ * which is the intended security trade-off.
  *
  * @see https://mantle.ngrok.com/components/forms/password-input
  *

package/dist/input.js

@@ -1 +1 @@
-import{t as e}from"./icon-CGKaq_tV.js";import{n as t,t as n}from"./input-BhykQSvJ.js";import{t as r}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{t as i}from"./input-DQyN6gN0.js";import{useId as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{flushSync as u}from"react-dom";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";const p=({disabled:i,id:p,onValueVisibilityChange:m,ref:h,showValue:g,..._})=>{let v=a(),y=p??v,b=g!=null,[x,S]=s(!1),C=b?g:x,w=C?`text`:`password`,T=C?d:f,E=o(null),D=o(null);return l(n,{"data-slot":`password-input`,disabled:i,id:y,type:w,ref:h,..._,children:[c(t,{}),c(`button`,{type:`button`,disabled:i,"data-slot":`password-input-toggle`,"aria-label":`Show value`,"aria-pressed":C,"aria-controls":y,className:`text-body hover:text-strong focus-visible:ring-focus-accent ml-1 cursor-pointer rounded-xs bg-inherit p-0 focus-visible:ring-2 focus-visible:outline-hidden`,onClick:()=>{D.current&&=(D.current.cancel(),null);let e=!C;u(()=>{b||S(e),m?.(e)});let t=E.current;t&&!r()&&(D.current=t.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`}),D.current.onfinish=()=>{D.current=null},D.current.finished.catch(()=>{}))},children:c(e,{ref:E,svg:c(T,{"aria-hidden":!0})})})]})};export{n as Input,t as InputCapture,p as PasswordInput,i as isInput};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{t}from"./icon-CGKaq_tV.js";import{n,t as r}from"./input-BhykQSvJ.js";import{t as i}from"./use-prefers-reduced-motion-DHYDQk1h.js";import{t as a}from"./input-DQyN6gN0.js";import{useId as o,useRef as s,useState as c}from"react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{EyeIcon as d}from"@phosphor-icons/react/Eye";import{EyeClosedIcon as f}from"@phosphor-icons/react/EyeClosed";const p=({disabled:a,id:p,onValueVisibilityChange:m,ref:h,showValue:g,..._})=>{let v=o(),y=p??v,b=g!=null,[x,S]=c(!1),C=b?g:x,w=C?`text`:`password`,T=C?d:f,E=s(null),D=s(C);return e(()=>{if(D.current===C)return;D.current=C;let e=E.current;e==null||i()||e.animate([{transform:`scaleY(0)`},{transform:`scaleY(1)`}],{duration:200,easing:`ease-out`})},[C]),u(r,{"data-slot":`password-input`,disabled:a,id:y,type:w,ref:h,..._,children:[l(n,{}),l(`button`,{type:`button`,disabled:a,"data-slot":`password-input-toggle`,"aria-label":`Show value`,"aria-pressed":C,"aria-controls":y,className:`text-body hover:text-strong focus-visible:ring-focus-accent ml-1 cursor-pointer rounded-xs bg-inherit p-0 focus-visible:ring-2 focus-visible:outline-hidden`,onClick:()=>{let e=!C;b||S(e),m?.(e)},children:l(t,{ref:E,svg:l(T,{"aria-hidden":!0})})})]})};export{r as Input,n as InputCapture,p as PasswordInput,a as isInput};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.84.2)
+# @ngrok/mantle (0.85.0)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 

package/dist/table-0jpWGqu6.js

@@ -0,0 +1 @@
+import{n as e}from"./compose-refs-DdUwopIY.js";import{t}from"./cx-0HCjnNv1.js";import{useLayoutEffect as n,useMemo as r,useRef as i,useState as a}from"react";import{jsx as o}from"react/jsx-runtime";import{flushSync as s}from"react-dom";const c={Body:({children:e,className:n,ref:r,...i})=>o(`tbody`,{"data-slot":`table-body`,className:t(`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-body`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover [&>tr]:not-only:has-focus-visible:bg-card-hover`,n),ref:r,...i,children:e}),Caption:({children:e,className:n,ref:r,...i})=>o(`caption`,{"data-slot":`table-caption`,ref:r,className:t(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...i,children:e}),Cell:({children:e,className:n,ref:r,...i})=>o(`td`,{"data-slot":`table-cell`,ref:r,className:t(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...i,children:e}),Element:({children:e,className:n,ref:r,...i})=>o(`table`,{"data-slot":`table-element`,ref:r,className:t(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...i,children:e}),Foot:({children:e,className:n,ref:r,...i})=>o(`tfoot`,{"data-slot":`table-foot`,ref:r,className:t(`font-medium text-body`,`[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...i,children:e}),Head:({children:e,className:n,ref:r,...i})=>o(`thead`,{"data-slot":`table-head`,ref:r,className:t(`[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...i,children:e}),Header:({children:e,className:n,ref:r,scope:i=`col`,...a})=>o(`th`,{"data-slot":`table-header`,ref:r,scope:i,className:t(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...a,children:e}),Root:({children:n,className:r,ref:i,...a})=>{let s=l(),c=e(s.ref,i);return o(`div`,{"data-slot":`table`,className:t(`group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100`,r),"data-sticky-active":s.state.hasOverflow&&!s.state.scrolledToEnd||void 0,"data-x-overflow":s.state.hasOverflow,"data-x-scroll-end":s.state.hasOverflow&&s.state.scrolledToEnd,...a,children:o(`div`,{className:t(`scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none`,`has-data-mantle-table-sticky-right:[--_fade-right:black]`),ref:c,children:n})})},Row:({children:e,ref:t,...n})=>o(`tr`,{"data-slot":`table-row`,ref:t,...n,children:e})};function l(){let e=i(null),[t,o]=a({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return n(()=>{let t=e.current;if(!t)return;let n=0,r=()=>{let e=t.scrollWidth>t.clientWidth,n=t.scrollLeft<1,r=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;o(t=>t.hasOverflow!==e||t.scrolledToStart!==n||t.scrolledToEnd!==r?{hasOverflow:e,scrolledToStart:n,scrolledToEnd:r}:t)},i=()=>{n===0&&(n=requestAnimationFrame(()=>{n=0,r()}))},a=new ResizeObserver(()=>{s(r)});a.observe(t);let c=new MutationObserver(i);return c.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,i,{passive:!0}),()=>{cancelAnimationFrame(n),a.disconnect(),c.disconnect(),t.removeEventListener(`scroll`,i)}},[]),r(()=>({ref:e,state:t}),[t])}export{c as t};

package/dist/table.js

@@ -1 +1 @@
-import{t as e}from"./table-EZNW3nFk.js";export{e as Table};
+import{t as e}from"./table-0jpWGqu6.js";export{e as Table};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.84.2",
+  "version": "0.85.0",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",
@@ -132,7 +132,7 @@
     "@radix-ui/react-switch": "1.3.7",
     "@radix-ui/react-tabs": "1.1.21",
     "@radix-ui/react-tooltip": "1.2.16",
-    "@tanstack/react-table": "8.21.3",
+    "@tanstack/react-table": "9.2.4",
     "@tanstack/react-virtual": "3.14.11",
     "class-variance-authority": "0.7.1",
     "cmdk": "1.1.1",

package/dist/table-EZNW3nFk.js

@@ -1 +0,0 @@
-import{n as e}from"./compose-refs-DdUwopIY.js";import{t}from"./cx-0HCjnNv1.js";import{useLayoutEffect as n,useMemo as r,useRef as i,useState as a}from"react";import{jsx as o}from"react/jsx-runtime";const s={Body:({children:e,className:n,ref:r,...i})=>o(`tbody`,{"data-slot":`table-body`,className:t(`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-body`,`[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover [&>tr]:not-only:has-focus-visible:bg-card-hover`,n),ref:r,...i,children:e}),Caption:({children:e,className:n,ref:r,...i})=>o(`caption`,{"data-slot":`table-caption`,ref:r,className:t(`py-4 text-sm text-gray-500`,`border-t border-card-muted`,n),...i,children:e}),Cell:({children:e,className:n,ref:r,...i})=>o(`td`,{"data-slot":`table-cell`,ref:r,className:t(`p-3 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono`,n),...i,children:e}),Element:({children:e,className:n,ref:r,...i})=>o(`table`,{"data-slot":`table-element`,ref:r,className:t(`table-auto border-separate border-spacing-0 caption-bottom w-full min-w-full text-left`,n),...i,children:e}),Foot:({children:e,className:n,ref:r,...i})=>o(`tfoot`,{"data-slot":`table-foot`,ref:r,className:t(`font-medium text-body`,`[&>tr:first-child>*]:border-t [&>tr:first-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover`,n),...i,children:e}),Head:({children:e,className:n,ref:r,...i})=>o(`thead`,{"data-slot":`table-head`,ref:r,className:t(`[&>tr:last-child>*]:border-b [&>tr:last-child>*]:border-card-muted`,`[&>tr+tr>*]:border-t [&>tr+tr>*]:border-card-muted`,`text-muted bg-base`,`[&>tr]:bg-base`,n),...i,children:e}),Header:({children:e,className:n,ref:r,scope:i=`col`,...a})=>o(`th`,{"data-slot":`table-header`,ref:r,scope:i,className:t(`h-11 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0`,n),...a,children:e}),Root:({children:n,className:r,ref:i,...a})=>{let s=c(),l=e(s.ref,i);return o(`div`,{"data-slot":`table`,className:t(`group/table relative w-full overflow-hidden rounded-lg border border-card bg-white dark:bg-gray-100`,r),"data-sticky-active":s.state.hasOverflow&&!s.state.scrolledToEnd||void 0,"data-x-overflow":s.state.hasOverflow,"data-x-scroll-end":s.state.hasOverflow&&s.state.scrolledToEnd,...a,children:o(`div`,{className:t(`scrollbar scroll-fade-x overflow-x-auto overflow-y-clip overscroll-x-none`,`has-data-mantle-table-sticky-right:[--_fade-right:black]`),ref:l,children:n})})},Row:({children:e,ref:t,...n})=>o(`tr`,{"data-slot":`table-row`,ref:t,...n,children:e})};function c(){let e=i(null),[t,o]=a({hasOverflow:!1,scrolledToStart:!0,scrolledToEnd:!1});return n(()=>{let t=e.current;if(!t)return;let n=0,r=()=>{let e=t.scrollWidth>t.clientWidth,n=t.scrollLeft<1,r=Math.abs(t.scrollWidth-t.scrollLeft-t.clientWidth)<1;o(t=>t.hasOverflow!==e||t.scrolledToStart!==n||t.scrolledToEnd!==r?{hasOverflow:e,scrolledToStart:n,scrolledToEnd:r}:t)},i=()=>{n===0&&(n=requestAnimationFrame(()=>{n=0,r()}))},a=new ResizeObserver(i);a.observe(t);let s=new MutationObserver(i);return s.observe(t,{childList:!0,subtree:!0}),t.addEventListener(`scroll`,i,{passive:!0}),r(),()=>{cancelAnimationFrame(n),a.disconnect(),s.disconnect(),t.removeEventListener(`scroll`,i)}},[]),r(()=>({ref:e,state:t}),[t])}export{s as t};