@ngrok/mantle 0.70.0 → 0.70.2

package/dist/data-table.d.ts

@@ -1,6 +1,6 @@
-import { t as Button } from "./button-DDK6nEac.js";
-import { s as SortingMode } from "./direction-Jk7BkzGo.js";
-import { t as Table$1 } from "./table-4q1UxE7L.js";
+import { t as Button } from "./button-BMgAxAwM.js";
+import { s as SortingMode } from "./direction-DtBAQn7p.js";
+import { t as Table$1 } from "./table--DsTqaWO.js";
 import * as _$react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
@@ -16,19 +16,25 @@ type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
   table: Table<TData>;
 };
 /**
- * A data table component that provides sorting and other data table functionality.
- * Built on top of TanStack Table for advanced table features.
+ * The root container for a data table. Wraps all other `DataTable`
+ * sub-components and provides the table context via the `table` instance
+ * returned from `useReactTable`. Built on top of TanStack Table.
  *
  * @see https://mantle.ngrok.com/components/data-table#datatableroot
  *
  * @example
  * ```tsx
- * <DataTable table={table}>
+ * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ * const rows = table.getRowModel().rows;
+ *
+ * <DataTable.Root table={table}>
  *   <DataTable.Head />
  *   <DataTable.Body>
- *     <DataTable.Rows />
+ *     {rows.length > 0
+ *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+ *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
  *   </DataTable.Body>
- * </DataTable>
+ * </DataTable.Root>
  * ```
  */
 declare function Root<TData>({
@@ -68,25 +74,33 @@ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof
   sortingMode: SortingMode;
 });
 /**
- * A sortable button toggle for a column header in a data table.
- * If the column is sortable, clicking the button will toggle the sorting
- * direction.
+ * A sortable button toggle for a column header in a data table. Renders a sort
+ * icon that reflects the current direction, handles ARIA announcements, and
+ * cycles through sort states on click.
+ *
+ * Each click cycles through:
+ * - For `"alphanumeric"` sorting: `unsorted → ascending → descending → unsorted`
+ * - For `"time"` sorting: `unsorted → newest-first → oldest-first → unsorted`
+ *
+ * For right-aligned numeric columns, pass `className="justify-end"` and
+ * `iconPlacement="start"` so the sort icon stays paired with the label.
  *
  * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton
  *
  * @example
  * ```tsx
- * <DataTable.HeaderSortButton
- *   column={column}
- *   sortingMode="alphanumeric"
- * >
- *   Column Title
- * </DataTable.HeaderSortButton>
+ * columnHelper.accessor("email", {
+ *   id: "email",
+ *   header: (props) => (
+ *     <DataTable.Header>
+ *       <DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">
+ *         Email
+ *       </DataTable.HeaderSortButton>
+ *     </DataTable.Header>
+ *   ),
+ *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
+ * });
  * ```
- *
- * Each click cycles through:
- * - For alphanumeric sorting: unsorted ➡️ ascending ➡️ descending ➡️ unsorted
- * - For time sorting: unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted
  */
 declare function HeaderSortButton<TData, TValue>({
   children,
@@ -104,18 +118,25 @@ declare namespace HeaderSortButton {
 }
 type DataTableHeaderProps = ComponentProps<typeof Table$1.Header>;
 /**
- * A header for a data table.
- * This is typically used to wrap the `DataTable.HeaderSortButton` component.
+ * A `<th>` optimized for header actions. Wrap each column's header content in
+ * this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.
+ * Non-sortable columns can render plain text.
  *
  * @see https://mantle.ngrok.com/components/data-table#datatableheader
  *
  * @example
  * ```tsx
- * <DataTable.Header>
- *   <DataTable.HeaderSortButton column={column} sortingMode="alphanumeric">
- *     Column Title
- *   </DataTable.HeaderSortButton>
- * </DataTable.Header>
+ * columnHelper.accessor("name", {
+ *   id: "name",
+ *   header: (props) => (
+ *     <DataTable.Header>
+ *       <DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">
+ *         Name
+ *       </DataTable.HeaderSortButton>
+ *     </DataTable.Header>
+ *   ),
+ *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
+ * });
  * ```
  */
 declare function Header({
@@ -134,7 +155,32 @@ declare namespace Head {
 type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
   row: Row<TData>;
 };
+/**
+ * A single data table body row rendered from a TanStack Table row instance.
+ * Does not accept children — cells come from each column's `cell` definition.
+ *
+ * When `onClick` is provided, the row automatically receives `cursor-pointer`.
+ * Pass a different `cursor-*` class via `className` (e.g. `cursor-default`,
+ * `cursor-wait`) to override. For keyboard and screen-reader access, also
+ * render a `<Link>` inside the primary cell — a `<tr>` is not focusable.
+ *
+ * @see https://mantle.ngrok.com/components/data-table#datatablerow
+ *
+ * @example
+ * ```tsx
+ * const navigate = useNavigate();
+ *
+ * {rows.map((row) => (
+ *   <DataTable.Row
+ *     key={row.id}
+ *     row={row}
+ *     onClick={() => navigate(href("/payments/:id", { id: row.original.id }))}
+ *   />
+ * ))}
+ * ```
+ */
 declare function Row$1<TData>({
+  className,
   row,
   ...props
 }: DataTableRowProps<TData>): _$react_jsx_runtime0.JSX.Element;
@@ -150,6 +196,29 @@ declare namespace EmptyRow {
   var displayName: string;
 }
 type DataTableActionCellProps = ComponentProps<typeof Table$1.Cell>;
+/**
+ * A sticky-right `<td>` for per-row action buttons (typically an `IconButton`
+ * that opens a `DropdownMenu`). Pair with `DataTable.ActionHeader`.
+ *
+ * If the row has `onClick`, pass `onClick={(event) => event.stopPropagation()}`
+ * on this cell so clicks on action controls don't bubble and fire the row
+ * handler.
+ *
+ * @see https://mantle.ngrok.com/components/data-table#datatableactioncell
+ *
+ * @example
+ * ```tsx
+ * columnHelper.display({
+ *   id: "actions",
+ *   header: () => <DataTable.ActionHeader />,
+ *   cell: () => (
+ *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>
+ *       <DropdownMenu.Root>...</DropdownMenu.Root>
+ *     </DataTable.ActionCell>
+ *   ),
+ * });
+ * ```
+ */
 declare function ActionCell({
   children,
   className,
@@ -184,8 +253,14 @@ declare namespace ActionHeader {
   var displayName: string;
 }
 /**
- * A data table component that provides sorting and other data table functionality.
- * Built on top of TanStack Table for advanced table features.
+ * A data table for dynamic, application data — sortable, filterable, paginatable,
+ * and selectable. Built on top of TanStack Table; every TanStack utility
+ * (`createColumnHelper`, `getCoreRowModel`, `getSortedRowModel`,
+ * `getPaginationRowModel`, `getFilteredRowModel`, `useReactTable`, …) is
+ * re-exported from `@ngrok/mantle/data-table`.
+ *
+ * Prefer the plain `Table` when content is static and none of those behaviors
+ * apply.
  *
  * @see https://mantle.ngrok.com/components/data-table
  *
@@ -207,12 +282,45 @@ declare namespace ActionHeader {
  *
  * @example
  * ```tsx
- * <DataTable table={table}>
- *   <DataTable.Head />
- *   <DataTable.Body>
- *     <DataTable.Rows />
- *   </DataTable.Body>
- * </DataTable>
+ * import {
+ *   DataTable,
+ *   createColumnHelper,
+ *   getCoreRowModel,
+ *   useReactTable,
+ * } from "@ngrok/mantle/data-table";
+ *
+ * type Row = { id: string; name: string };
+ *
+ * const columnHelper = createColumnHelper<Row>();
+ * const columns = [
+ *   columnHelper.accessor("name", {
+ *     id: "name",
+ *     header: (props) => (
+ *       <DataTable.Header>
+ *         <DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">
+ *           Name
+ *         </DataTable.HeaderSortButton>
+ *       </DataTable.Header>
+ *     ),
+ *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
+ *   }),
+ * ];
+ *
+ * function MyTable({ data }: { data: Row[] }) {
+ *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+ *   const rows = table.getRowModel().rows;
+ *
+ *   return (
+ *     <DataTable.Root table={table}>
+ *       <DataTable.Head />
+ *       <DataTable.Body>
+ *         {rows.length > 0
+ *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+ *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
+ *       </DataTable.Body>
+ *     </DataTable.Root>
+ *   );
+ * }
  * ```
  */
 declare const DataTable: {
@@ -223,32 +331,47 @@ declare const DataTable: {
    *
    * @example
    * ```tsx
+   * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
+   * const rows = table.getRowModel().rows;
+   *
    * <DataTable.Root table={table}>
    *   <DataTable.Head />
    *   <DataTable.Body>
-   *     <DataTable.Rows />
+   *     {rows.length > 0
+   *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+   *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
    *   </DataTable.Body>
    * </DataTable.Root>
    * ```
    */
   readonly Root: typeof Root;
   /**
-   * A sticky action cell positioned at the end of each row for action buttons.
+   * A sticky action cell positioned at the end of each row, typically holding
+   * an `IconButton` that opens a `DropdownMenu`. Pair with `DataTable.ActionHeader`.
+   *
+   * If the row has `onClick`, stop propagation on this cell so clicks on action
+   * controls don't bubble up and fire the row handler.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatableactioncell
    *
    * @example
    * ```tsx
-   * <DataTable.ActionCell>
-   *   <Button size="sm">Edit</Button>
-   *   <Button size="sm">Delete</Button>
-   * </DataTable.ActionCell>
+   * columnHelper.display({
+   *   id: "actions",
+   *   header: () => <DataTable.ActionHeader />,
+   *   cell: () => (
+   *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>
+   *       <DropdownMenu.Root>...</DropdownMenu.Root>
+   *     </DataTable.ActionCell>
+   *   ),
+   * });
    * ```
    */
   readonly ActionCell: typeof ActionCell;
   /**
    * A sticky header cell that pairs with `DataTable.ActionCell`, keeping the
    * action column aligned across the header and body when scrolling horizontally.
+   * Use as the `header` for a `columnHelper.display` action column.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatableactionheader
    *
@@ -257,100 +380,151 @@ declare const DataTable: {
    * columnHelper.display({
    *   id: "actions",
    *   header: () => <DataTable.ActionHeader />,
-   *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,
-   * })
+   *   cell: () => (
+   *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>
+   *       <DropdownMenu.Root>...</DropdownMenu.Root>
+   *     </DataTable.ActionCell>
+   *   ),
+   * });
    * ```
    */
   readonly ActionHeader: typeof ActionHeader;
   /**
-   * A table cell component for rendering individual data cells.
+   * A `<td>` for rendering an individual data cell. Re-exported from
+   * `Table.Cell`. Every cell rendered by a column's `cell` function should
+   * be wrapped in this — a raw `<td>` skips mantle typography and padding.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatablecell
    *
    * @example
    * ```tsx
-   * <DataTable.Cell>
-   *   Cell content
-   * </DataTable.Cell>
+   * columnHelper.accessor("name", {
+   *   id: "name",
+   *   header: (props) => <DataTable.Header>Name</DataTable.Header>,
+   *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
+   * });
    * ```
    */
   readonly Cell: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref"> & _$react.RefAttributes<HTMLTableDataCellElement>>;
   /**
-   * The table body container for rows of data.
+   * The `<tbody>` container for rows of data. Typically wraps a map of
+   * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is
+   * no data.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatablebody
    *
    * @example
    * ```tsx
    * <DataTable.Body>
-   *   <DataTable.Rows />
+   *   {rows.length > 0
+   *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+   *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
    * </DataTable.Body>
    * ```
    */
-  readonly Body: _$react.ForwardRefExoticComponent<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
+  readonly Body: _$react.ForwardRefExoticComponent<Omit<Omit<_$react.DetailedHTMLProps<_$react.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>, "ref"> & _$react.RefAttributes<HTMLTableSectionElement>>;
   /**
-   * An empty state row that spans all columns when there's no data to display.
+   * An empty-state row that spans every column. Render this as the `else`
+   * branch when `rows.length === 0` to keep the table's frame intact instead
+   * of collapsing to an empty `<tbody>`.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
    *
    * @example
    * ```tsx
-   * <DataTable.EmptyRow>
-   *   No data available
-   * </DataTable.EmptyRow>
+   * <DataTable.Body>
+   *   {rows.length > 0
+   *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)
+   *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}
+   * </DataTable.Body>
    * ```
    */
   readonly EmptyRow: typeof EmptyRow;
   /**
-   * The table header container that renders column headers automatically.
+   * The `<thead>` container that renders column headers automatically from
+   * `table.getHeaderGroups()`. Does not accept children — headers come from
+   * each column's `header` definition.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatablehead
    *
    * @example
    * ```tsx
-   * <DataTable.Head />
+   * <DataTable.Root table={table}>
+   *   <DataTable.Head />
+   *   <DataTable.Body>...</DataTable.Body>
+   * </DataTable.Root>
    * ```
    */
   readonly Head: typeof Head;
   /**
-   * A header cell component optimized for data table header actions.
+   * A `<th>` optimized for header actions. Wrap each column's header content
+   * in this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatableheader
    *
    * @example
    * ```tsx
-   * <DataTable.Header>
-   *   <DataTable.HeaderSortButton column={column} sortingMode="alphanumeric">
-   *     Column Title
-   *   </DataTable.HeaderSortButton>
-   * </DataTable.Header>
+   * columnHelper.accessor("name", {
+   *   id: "name",
+   *   header: (props) => (
+   *     <DataTable.Header>
+   *       <DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">
+   *         Name
+   *       </DataTable.HeaderSortButton>
+   *     </DataTable.Header>
+   *   ),
+   *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
+   * });
    * ```
    */
   readonly Header: typeof Header;
   /**
-   * A sortable button toggle for column headers with sorting functionality.
+   * A sortable button toggle for a column header. Clicks cycle through
+   * sort directions: for `"alphanumeric"`, `unsorted → asc → desc → unsorted`;
+   * for `"time"`, `unsorted → desc (newest-first) → asc → unsorted`.
+   *
+   * Pass `className="justify-end"` and `iconPlacement="start"` for
+   * right-aligned numeric columns so the sort icon stays paired with the label.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton
    *
    * @example
    * ```tsx
-   * <DataTable.HeaderSortButton
-   *   column={column}
-   *   sortingMode="alphanumeric"
-   * >
-   *   Column Title
-   * </DataTable.HeaderSortButton>
+   * columnHelper.accessor("email", {
+   *   id: "email",
+   *   header: (props) => (
+   *     <DataTable.Header>
+   *       <DataTable.HeaderSortButton column={props.column} sortingMode="alphanumeric">
+   *         Email
+   *       </DataTable.HeaderSortButton>
+   *     </DataTable.Header>
+   *   ),
+   *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,
+   * });
    * ```
    */
   readonly HeaderSortButton: typeof HeaderSortButton;
   /**
-   * A single data table row component for rendering custom row layouts.
+   * A single data table body row rendered from a TanStack Table row instance.
+   * Does not accept children — cells come from each column's `cell` definition.
+   *
+   * When `onClick` is provided, the row automatically receives `cursor-pointer`.
+   * Pass a different `cursor-*` class via `className` to override. For keyboard
+   * and screen-reader access, also render a `<Link>` inside the primary cell.
    *
    * @see https://mantle.ngrok.com/components/data-table#datatablerow
    *
    * @example
    * ```tsx
-   * <DataTable.Row row={row} />
+   * const navigate = useNavigate();
+   *
+   * {rows.map((row) => (
+   *   <DataTable.Row
+   *     key={row.id}
+   *     row={row}
+   *     onClick={() => navigate(href("/payments/:id", { id: row.original.id }))}
+   *   />
+   * ))}
    * ```
    */
   readonly Row: typeof Row$1;

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./button-BKykcpgJ.js";import{i as n}from"./direction-ClCocWIf.js";import{t as r}from"./sort-C_Jbs1dH.js";import{t as i}from"./table-BMGcRJlk.js";import{Fragment as a,createContext as o,useContext as s,useMemo as c}from"react";import l from"tiny-invariant";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{flexRender as f}from"@tanstack/react-table";export*from"@tanstack/react-table";const p=[`unsorted`,`asc`,`desc`],m=[`unsorted`,`desc`,`asc`];function h(e,t){return g(t===`alphanumeric`?p:m,e)??`unsorted`}function g(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 _=o(null);function v(){let e=s(_);return l(e,`useDataTableContext should only be used within a DataTable child component`),e}function y({children:e,table:t,...n}){let r=c(()=>({table:t}),[t]);return u(_.Provider,{value:r,children:u(i.Root,{...n,children:u(i.Element,{children:e})})})}function b({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:f,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??u(A,{mode:c,direction:g});return d(t,{appearance:`ghost`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{f?.(e),!e.defaultPrevented&&(!h||o||c===void 0||j(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&d(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function x({children:t,className:n,...r}){return u(i.Header,{className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const S=i.Body;function C(e){let{table:t}=v();return u(i.Head,{...e,children:t.getHeaderGroups().map(e=>u(i.Row,{children:e.headers.map(e=>u(a,{children:e.isPlaceholder?u(i.Header,{},e.id):f(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function w({row:e,...t}){return u(i.Row,{...t,children:e.getVisibleCells().map(e=>u(a,{children:f(e.column.columnDef.cell,e.getContext())},e.id))})}function T({children:e,...t}){let{table:n}=v(),r=n.getAllColumns().length;return u(i.Row,{...t,children:u(i.Cell,{colSpan:r,children:e})})}function E(){return u(`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 D({children:t,className:n,...r}){return d(i.Cell,{"data-mantle-table-sticky-right":!0,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[u(E,{}),t]})}function O({children:t,className:n,...r}){let{table:a}=v(),o=a.getRowModel().rows.length>0;return d(i.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&u(E,{}),t]})}y.displayName=`DataTable`,D.displayName=`DataTableActionCell`,O.displayName=`DataTableActionHeader`,S.displayName=`DataTableBody`,T.displayName=`DataTableEmptyRow`,C.displayName=`DataTableHead`,x.displayName=`DataTableHeader`,b.displayName=`DataTableHeaderSortButton`,w.displayName=`DataTableRow`;const k={Root:y,ActionCell:D,ActionHeader:O,Cell:i.Cell,Body:S,EmptyRow:T,Head:C,Header:x,HeaderSortButton:b,Row:w};function A({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?u(`svg`,{"aria-hidden":!0,...n}):u(r,{mode:t,direction:e,...n})}function j(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(h(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};
+import{t as e}from"./cx-D1HYnpvA.js";import{t}from"./button-GokecthL.js";import{i as n}from"./direction-DsB-pD9V.js";import{t as r}from"./sort-DzCsa6Qj.js";import{t as i}from"./table-Cl4nlRMR.js";import{Fragment as a,createContext as o,forwardRef as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{flexRender as p}from"@tanstack/react-table";export*from"@tanstack/react-table";const m=[`unsorted`,`asc`,`desc`],h=[`unsorted`,`desc`,`asc`];function g(e,t){return _(t===`alphanumeric`?m:h,e)??`unsorted`}function _(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 v=o(null);function y(){let e=c(v);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function b({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return d(v.Provider,{value:r,children:d(i.Root,{"data-slot":`data-table`,...n,children:d(i.Element,{children:e})})})}function x({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??d(j,{mode:c,direction:g});return f(t,{appearance:`ghost`,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{u?.(e),!e.defaultPrevented&&(!h||o||c===void 0||M(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&f(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function S({children:t,className:n,...r}){return d(i.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const C=s((e,t)=>d(i.Body,{ref:t,"data-slot":`data-table-body`,...e}));C.displayName=`DataTableBody`;function w(e){let{table:t}=y();return d(i.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>d(i.Row,{children:e.headers.map(e=>d(a,{children:e.isPlaceholder?d(i.Header,{},e.id):p(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function T({className:t,row:n,...r}){return d(i.Row,{"data-slot":`data-table-row`,className:e(r.onClick&&`cursor-pointer`,t),...r,children:n.getVisibleCells().map(e=>d(a,{children:p(e.column.columnDef.cell,e.getContext())},e.id))})}function E({children:e,...t}){let{table:n}=y(),r=n.getAllColumns().length;return d(i.Row,{"data-slot":`data-table-empty-row`,...t,children:d(i.Cell,{colSpan:r,children:e})})}function D(){return d(`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 O({children:t,className:n,...r}){return f(i.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),...r,children:[d(D,{}),t]})}function k({children:t,className:n,...r}){let{table:a}=y(),o=a.getRowModel().rows.length>0;return f(i.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:[o&&d(D,{}),t]})}b.displayName=`DataTable`,O.displayName=`DataTableActionCell`,k.displayName=`DataTableActionHeader`,C.displayName=`DataTableBody`,E.displayName=`DataTableEmptyRow`,w.displayName=`DataTableHead`,S.displayName=`DataTableHeader`,x.displayName=`DataTableHeaderSortButton`,T.displayName=`DataTableRow`;const A={Root:b,ActionCell:O,ActionHeader:k,Cell:i.Cell,Body:C,EmptyRow:E,Head:w,Header:S,HeaderSortButton:x,Row:T};function j({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?d(`svg`,{"aria-hidden":!0,...n}):d(r,{mode:t,direction:e,...n})}function M(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(g(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{A as DataTable};
 //# sourceMappingURL=data-table.js.map