@ngrok/mantle 0.77.0 → 0.78.0

package/dist/data-table.d.ts

@@ -1,11 +1,10 @@
-import { t as Button } from "./button-mfYak6Rx.js";
-import { t as IconButton } from "./icon-button-D7hs6bX2.js";
-import { s as SortingMode } from "./direction-CcTY0FmA.js";
-import { t as Table$1 } from "./table-BWD9IlIN.js";
+import { t as Button } from "./button-Bw9MpShl.js";
+import { t as IconButton } from "./icon-button-DuRSCsPh.js";
+import { s as SortingMode } from "./direction-BjU0bPST.js";
+import { t as Table$1 } from "./table-CwFHXC-G.js";
 import { ComponentProps, ReactNode } from "react";
 import { HeaderContext, Row, Table } 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];
@@ -24,7 +23,7 @@ type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
  * any sorting / filtering / pagination state — the wrapper components read
  * from it.
  *
- * @see https://mantle.ngrok.com/components/data-table#datatableroot
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableroot
  *
  * @example
  * ```tsx
@@ -62,14 +61,7 @@ type DataTableProps<TData> = ComponentProps<typeof Table$1.Root> & {
  * }
  * ```
  */
-declare function Root<TData>({
-  children,
-  table,
-  ...props
-}: DataTableProps<TData>): import("react").JSX.Element;
-declare namespace Root {
-  var displayName: string;
-}
+declare function Root<TData>({ children, table, ...props }: DataTableProps<TData>): import("react").JSX.Element;
 type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, "icon"> & Pick<HeaderContext<TData, TValue>, "column"> & ({
   /**
    * Disable sorting for this column.
@@ -110,7 +102,7 @@ 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.
  *
- * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableheadersortbutton
  *
  * @example
  * ```tsx
@@ -127,27 +119,14 @@ type DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof
  * });
  * ```
  */
-declare function HeaderSortButton<TData, TValue>({
-  children,
-  className,
-  column,
-  disableSorting,
-  iconPlacement,
-  sortingMode,
-  sortIcon: propSortIcon,
-  onClick,
-  ...props
-}: DataTableHeaderSortButtonProps<TData, TValue>): import("react").JSX.Element;
-declare namespace HeaderSortButton {
-  var displayName: string;
-}
+declare function HeaderSortButton<TData, TValue>({ children, className, column, disableSorting, iconPlacement, sortingMode, sortIcon: propSortIcon, onClick, ...props }: DataTableHeaderSortButtonProps<TData, TValue>): import("react").JSX.Element;
 type DataTableHeaderProps = ComponentProps<typeof Table$1.Header>;
 /**
  * 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
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableheader
  *
  * @example
  * ```tsx
@@ -164,21 +143,14 @@ type DataTableHeaderProps = ComponentProps<typeof Table$1.Header>;
  * });
  * ```
  */
-declare function Header({
-  children,
-  className,
-  ...props
-}: DataTableHeaderProps): import("react").JSX.Element;
-declare namespace Header {
-  var displayName: string;
-}
+declare function Header({ children, className, ...props }: DataTableHeaderProps): import("react").JSX.Element;
 type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
 /**
  * The `<thead>` container that renders column headers automatically from
  * `table.getHeaderGroups()`. Does not accept children — headers come from each
  * column's `header` definition on the TanStack Table column config.
  *
- * @see https://mantle.ngrok.com/components/data-table#datatablehead
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatablehead
  *
  * @example
  * ```tsx
@@ -196,9 +168,6 @@ type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
  * ```
  */
 declare function Head<TData>(props: DataTableHeadProps): import("react").JSX.Element;
-declare namespace Head {
-  var displayName: string;
-}
 type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
   row: Row<TData>;
   /**
@@ -228,7 +197,7 @@ type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "childr
  * holding the returned content. Pair it with a `DataTable.RowExpandButton` toggle
  * and configure the table for expansion (`getExpandedRowModel`, `getRowCanExpand`).
  *
- * @see https://mantle.ngrok.com/components/data-table#datatablerow
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatablerow
  *
  * @example
  * Clickable row navigating to a detail page:
@@ -265,15 +234,7 @@ type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "childr
  * ))}
  * ```
  */
-declare function Row$1<TData>({
-  className,
-  renderExpanded,
-  row,
-  ...props
-}: DataTableRowProps<TData>): import("react").JSX.Element;
-declare namespace Row$1 {
-  var displayName: string;
-}
+declare function Row$1<TData>({ className, renderExpanded, row, ...props }: DataTableRowProps<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
@@ -284,8 +245,8 @@ type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
  * Host an `Empty` for a real empty state, and branch on whether a filter is
  * active so the user sees the right message (and a way out when filtered):
  *
- * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
- * @see https://mantle.ngrok.com/components/empty
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableemptyrow
+ * @see https://mantle.ngrok.com/components/feedback/empty
  *
  * @example
  * ```tsx
@@ -332,13 +293,7 @@ type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
  * </DataTable.Body>
  * ```
  */
-declare function EmptyRow<TData>({
-  children,
-  ...props
-}: DataTableEmptyRowProps): import("react").JSX.Element;
-declare namespace EmptyRow {
-  var displayName: string;
-}
+declare function EmptyRow<TData>({ 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`
@@ -348,7 +303,7 @@ type DataTableActionCellProps = ComponentProps<typeof Table$1.Cell>;
  * 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
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableactioncell
  *
  * @example
  * ```tsx
@@ -363,21 +318,14 @@ type DataTableActionCellProps = ComponentProps<typeof Table$1.Cell>;
  * });
  * ```
  */
-declare function ActionCell({
-  children,
-  className,
-  ...props
-}: DataTableActionCellProps): import("react").JSX.Element;
-declare namespace ActionCell {
-  var displayName: string;
-}
+declare function ActionCell({ children, className, ...props }: DataTableActionCellProps): import("react").JSX.Element;
 type DataTableActionHeaderProps = ComponentProps<typeof Table$1.Header>;
 /**
  * A sticky header cell that pairs with `DataTable.ActionCell`. Use this as the
  * header for the action column so the pinned column visually aligns across the
  * header and every body row when the table scrolls horizontally.
  *
- * @see https://mantle.ngrok.com/components/data-table#datatableactionheader
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableactionheader
  *
  * @example
  * ```tsx
@@ -388,14 +336,7 @@ type DataTableActionHeaderProps = ComponentProps<typeof Table$1.Header>;
  * })
  * ```
  */
-declare function ActionHeader({
-  children,
-  className,
-  ...props
-}: DataTableActionHeaderProps): import("react").JSX.Element;
-declare namespace ActionHeader {
-  var displayName: string;
-}
+declare function ActionHeader({ children, className, ...props }: DataTableActionHeaderProps): import("react").JSX.Element;
 /**
  * Compute the stable DOM `id` for a row's expanded detail row. Shared by
  * `DataTable.RowExpandButton` (as its `aria-controls` target) and
@@ -432,7 +373,7 @@ type DataTableExpandHeaderProps = Omit<ComponentProps<typeof Table$1.Header>, "c
  * column is announced to assistive tech while staying visually empty; pass
  * `children` to render an "expand all" control instead.
  *
- * @see https://mantle.ngrok.com/components/data-table#datatableexpandheader
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableexpandheader
  *
  * @example
  * ```tsx
@@ -447,14 +388,7 @@ type DataTableExpandHeaderProps = Omit<ComponentProps<typeof Table$1.Header>, "c
  * });
  * ```
  */
-declare function ExpandHeader({
-  children,
-  className,
-  ...props
-}: DataTableExpandHeaderProps): import("react").JSX.Element;
-declare namespace ExpandHeader {
-  var displayName: string;
-}
+declare function ExpandHeader({ children, className, ...props }: DataTableExpandHeaderProps): import("react").JSX.Element;
 type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButton>, "aria-controls" | "aria-expanded" | "icon" | "label"> & {
   /**
    * The TanStack Table row this button toggles. The table must be configured for
@@ -491,7 +425,7 @@ type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButto
  * pass `onClick` to run side effects before the toggle (call
  * `event.preventDefault()` to veto it).
  *
- * @see https://mantle.ngrok.com/components/data-table#datatablerowexpandbutton
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatablerowexpandbutton
  *
  * @example
  * ```tsx
@@ -506,27 +440,16 @@ type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButto
  * });
  * ```
  */
-declare function RowExpandButton<TData>({
-  appearance,
-  className,
-  collapseIcon,
-  expandIcon,
-  label,
-  onClick,
-  row,
-  size,
-  ...props
-}: DataTableRowExpandButtonProps<TData>): import("react").JSX.Element | null;
-declare namespace RowExpandButton {
-  var displayName: string;
-}
+declare function RowExpandButton<TData>({ appearance, className, collapseIcon, expandIcon, label, onClick, row, size, ...props }: DataTableRowExpandButtonProps<TData>): import("react").JSX.Element | null;
 type DataTableExpandedRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
-  /** The row whose detail panel this displays. */row: Row<TData>;
+  /** The row whose detail panel this displays. */
+  row: Row<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).
    */
-  colSpan?: number; /** The detail content rendered inside the full-width panel. */
+  colSpan?: number;
+  /** The detail content rendered inside the full-width panel. */
   children: ReactNode;
 };
 /**
@@ -546,7 +469,7 @@ type DataTableExpandedRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>,
  * the parent data row reacts to hover). Exposes `data-expanded-content` for
  * styling hooks.
  *
- * @see https://mantle.ngrok.com/components/data-table#datatableexpandedrow
+ * @see https://mantle.ngrok.com/components/data-display/data-table#datatableexpandedrow
  *
  * @example
  * Render the row's underlying object as JSON (a common detail-panel use case).
@@ -574,16 +497,7 @@ 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 namespace ExpandedRow {
-  var displayName: string;
-}
+declare function ExpandedRow<TData>({ children, className, colSpan, row, ...props }: DataTableExpandedRowProps<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;
@@ -597,7 +511,7 @@ declare namespace ExpandedRow {
  * For STATIC, layout-driven tables (read-only data dumps, simple key/value
  * displays, plain markup tables with no interactivity), use `Table` instead.
  *
- * @see https://mantle.ngrok.com/components/data-table
+ * @see https://mantle.ngrok.com/components/data-display/data-table
  *
  * @example
  * Composition:
@@ -908,7 +822,7 @@ declare const DataTable: {
    * from `@ngrok/mantle/data-table`) via the `table` prop — every other
    * `DataTable.*` part reads from it through context.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatableroot
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableroot
    *
    * @example
    * ```tsx
@@ -933,7 +847,7 @@ declare const DataTable: {
    * 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
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableactioncell
    *
    * @example
    * ```tsx
@@ -954,7 +868,7 @@ declare const DataTable: {
    * 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
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableactionheader
    *
    * @example
    * ```tsx
@@ -975,7 +889,7 @@ declare const DataTable: {
    * `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
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatablecell
    *
    * @example
    * ```tsx
@@ -992,7 +906,7 @@ declare const DataTable: {
    * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is
    * no data.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatablebody
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatablebody
    *
    * @example
    * ```tsx
@@ -1013,8 +927,8 @@ declare const DataTable: {
    * every column and `Empty.Root` centers itself, so no `<td>` or centering
    * markup is needed.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow
-   * @see https://mantle.ngrok.com/components/empty
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableemptyrow
+   * @see https://mantle.ngrok.com/components/feedback/empty
    *
    * @example
    * ```tsx
@@ -1036,7 +950,7 @@ declare const DataTable: {
    * `table.getHeaderGroups()`. Does not accept children — headers come from
    * each column's `header` definition.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatablehead
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatablehead
    *
    * @example
    * ```tsx
@@ -1051,7 +965,7 @@ declare const DataTable: {
    * 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
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableheader
    *
    * @example
    * ```tsx
@@ -1077,7 +991,7 @@ declare const DataTable: {
    * 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
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableheadersortbutton
    *
    * @example
    * ```tsx
@@ -1107,7 +1021,7 @@ declare const DataTable: {
    * renders a sibling `DataTable.ExpandedRow` (only while expanded) holding the
    * returned content. Pair with `DataTable.RowExpandButton`.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatablerow
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatablerow
    *
    * @example
    * ```tsx
@@ -1135,7 +1049,7 @@ declare const DataTable: {
    * `DataTable.ActionHeader`. Renders a screen-reader-only label by default so
    * the column is announced while staying visually empty.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatableexpandheader
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableexpandheader
    *
    * @example
    * ```tsx
@@ -1159,7 +1073,7 @@ declare const DataTable: {
    * a row-level `onClick`, and renders nothing when `row.getCanExpand()` is
    * false.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatablerowexpandbutton
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatablerowexpandbutton
    *
    * @example
    * ```tsx
@@ -1177,7 +1091,7 @@ declare const DataTable: {
    * and sits on an opaque card surface so it coexists with a sticky action
    * column.
    *
-   * @see https://mantle.ngrok.com/components/data-table#datatableexpandedrow
+   * @see https://mantle.ngrok.com/components/data-display/data-table#datatableexpandedrow
    *
    * @example
    * ```tsx

package/dist/data-table.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-button-DiX9iZ9n.js";import{t as n}from"./button-C9GW9nAr.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./sort-BPX2Fk9t.js";import{t as a}from"./table-CAitdL78.js";import{Fragment as o,createContext as s,forwardRef as c,useContext as l,useMemo as u}from"react";import d from"tiny-invariant";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{flexRender as h}from"@tanstack/react-table";import{MinusIcon as g}from"@phosphor-icons/react/Minus";import{PlusIcon as _}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const v=[`unsorted`,`asc`,`desc`],y=[`unsorted`,`desc`,`asc`];function b(e,t){return x(t===`alphanumeric`?v:y,e)??`unsorted`}function x(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 S=s(null);function C(){let e=l(S);return d(e,`useDataTableContext should only be used within a DataTable child component`),e}function w({children:e,table:t,...n}){let r=u(()=>({table:t}),[t]);return p(S.Provider,{value:r,children:p(a.Root,{"data-slot":`data-table`,...n,children:p(a.Element,{children:e})})})}function T({children:t,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...d}){let f=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof f==`string`?f:`unsorted`,_=l?.(g)??p(V,{mode:c,direction:g});return m(n,{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||H(a,c))},priority:`neutral`,type:`button`,...d,children:[h&&g!==`unsorted`&&m(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:r(g),` `,`order`]}),t]})}function E({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const D=c((e,t)=>p(a.Body,{ref:t,"data-slot":`data-table-body`,...e}));D.displayName=`DataTableBody`;function O(e){let{table:t}=C();return p(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>p(a.Row,{children:e.headers.map(e=>p(o,{children:e.isPlaceholder?p(a.Header,{},e.id):h(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function k({className:t,renderExpanded:n,row:r,...i}){let s=p(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>p(o,{children:h(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:m(f,{children:[s,r.getIsExpanded()&&p(z,{row:r,children:n(r)})]})}function A({children:e,...t}){let{table:n}=C(),r=n.getAllColumns().length;return p(a.Row,{"data-slot":`data-table-empty-row`,...t,children:p(a.Cell,{colSpan:r,children:e})})}function j(){return p(`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 M({children:t,className:n,...r}){return m(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),...r,children:[p(j,{}),t]})}function N({children:t,className:n,...r}){let{table:i}=C(),o=i.getRowModel().rows.length>0;return m(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:[o&&p(j,{}),t]})}function P(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function F({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??p(`span`,{className:`sr-only`,children:`Row details`})})}const I=p(_,{weight:`bold`,className:`size-3.5`}),L=p(g,{weight:`bold`,className:`size-3.5`});function R({appearance:n=`ghost`,className:r,collapseIcon:i=L,expandIcon:a=I,label:o,onClick:s,row:c,size:l=`sm`,...u}){if(!c.getCanExpand())return null;let d=c.getIsExpanded(),f=c.getToggleExpandedHandler();return p(t,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:n,size:l,className:e(`rounded`,r),"aria-expanded":d,"aria-controls":d?P(c):void 0,icon:d?i:a,label:`${d?`Hide`:`Show`} details for ${o}`,onClick:e=>{e.stopPropagation(),s?.(e),!e.defaultPrevented&&f()},...u})}function z({children:t,className:n,colSpan:r,row:i,...o}){return p(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:p(a.Cell,{id:P(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}w.displayName=`DataTable`,M.displayName=`DataTableActionCell`,N.displayName=`DataTableActionHeader`,D.displayName=`DataTableBody`,A.displayName=`DataTableEmptyRow`,F.displayName=`DataTableExpandHeader`,z.displayName=`DataTableExpandedRow`,O.displayName=`DataTableHead`,E.displayName=`DataTableHeader`,T.displayName=`DataTableHeaderSortButton`,k.displayName=`DataTableRow`,R.displayName=`DataTableRowExpandButton`;const B={Root:w,ActionCell:M,ActionHeader:N,Cell:a.Cell,Body:D,EmptyRow:A,Head:O,Header:E,HeaderSortButton:T,Row:k,ExpandHeader:F,RowExpandButton:R,ExpandedRow:z};function V({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?p(`svg`,{"aria-hidden":!0,...n}):p(i,{mode:t,direction:e,...n})}function H(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(b(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{B as DataTable,P as expandedRowId};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-button-CxVsZ2N1.js";import{t as n}from"./button-AS5Ir3DE.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./sort-BPX2Fk9t.js";import{t as a}from"./table-CPH2md2-.js";import{Fragment as o,createContext as s,forwardRef as c,useContext as l,useMemo as u}from"react";import d from"tiny-invariant";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{flexRender as h}from"@tanstack/react-table";import{MinusIcon as g}from"@phosphor-icons/react/Minus";import{PlusIcon as _}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const v=[`unsorted`,`asc`,`desc`],y=[`unsorted`,`desc`,`asc`];function b(e,t){return x(t===`alphanumeric`?v:y,e)??`unsorted`}function x(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 S=s(null);function C(){let e=l(S);return d(e,`useDataTableContext should only be used within a DataTable child component`),e}function w({children:e,table:t,...n}){let r=u(()=>({table:t}),[t]);return p(S.Provider,{value:r,children:p(a.Root,{"data-slot":`data-table`,...n,children:p(a.Element,{children:e})})})}function T({children:t,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...d}){let f=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof f==`string`?f:`unsorted`,_=l?.(g)??p(V,{mode:c,direction:g});return m(n,{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||H(a,c))},priority:`neutral`,type:`button`,...d,children:[h&&g!==`unsorted`&&m(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:r(g),` `,`order`]}),t]})}function E({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const D=c((e,t)=>p(a.Body,{ref:t,"data-slot":`data-table-body`,...e}));D.displayName=`DataTableBody`;function O(e){let{table:t}=C();return p(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>p(a.Row,{children:e.headers.map(e=>p(o,{children:e.isPlaceholder?p(a.Header,{},e.id):h(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function k({className:t,renderExpanded:n,row:r,...i}){let s=p(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>p(o,{children:h(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:m(f,{children:[s,r.getIsExpanded()&&p(z,{row:r,children:n(r)})]})}function A({children:e,...t}){let{table:n}=C(),r=n.getAllColumns().length;return p(a.Row,{"data-slot":`data-table-empty-row`,...t,children:p(a.Cell,{colSpan:r,children:e})})}function j(){return p(`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 M({children:t,className:n,...r}){return m(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),...r,children:[p(j,{}),t]})}function N({children:t,className:n,...r}){let{table:i}=C(),o=i.getRowModel().rows.length>0;return m(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:[o&&p(j,{}),t]})}function P(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function F({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??p(`span`,{className:`sr-only`,children:`Row details`})})}const I=p(_,{weight:`bold`,className:`size-3.5`}),L=p(g,{weight:`bold`,className:`size-3.5`});function R({appearance:n=`ghost`,className:r,collapseIcon:i=L,expandIcon:a=I,label:o,onClick:s,row:c,size:l=`sm`,...u}){if(!c.getCanExpand())return null;let d=c.getIsExpanded(),f=c.getToggleExpandedHandler();return p(t,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:n,size:l,className:e(`rounded`,r),"aria-expanded":d,"aria-controls":d?P(c):void 0,icon:d?i:a,label:`${d?`Hide`:`Show`} details for ${o}`,onClick:e=>{e.stopPropagation(),s?.(e),!e.defaultPrevented&&f()},...u})}function z({children:t,className:n,colSpan:r,row:i,...o}){return p(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:p(a.Cell,{id:P(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}w.displayName=`DataTable`,M.displayName=`DataTableActionCell`,N.displayName=`DataTableActionHeader`,D.displayName=`DataTableBody`,A.displayName=`DataTableEmptyRow`,F.displayName=`DataTableExpandHeader`,z.displayName=`DataTableExpandedRow`,O.displayName=`DataTableHead`,E.displayName=`DataTableHeader`,T.displayName=`DataTableHeaderSortButton`,k.displayName=`DataTableRow`,R.displayName=`DataTableRowExpandButton`;const B={Root:w,ActionCell:M,ActionHeader:N,Cell:a.Cell,Body:D,EmptyRow:A,Head:O,Header:E,HeaderSortButton:T,Row:k,ExpandHeader:F,RowExpandButton:R,ExpandedRow:z};function V({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?p(`svg`,{"aria-hidden":!0,...n}):p(i,{mode:t,direction:e,...n})}function H(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(b(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{B as DataTable,P as expandedRowId};

package/dist/description-list.d.ts

@@ -1,6 +1,6 @@
-import { t as WithAsChild } from "./as-child-uN_018tj.js";
+import { t as WithAsChild } from "./as-child-CYEVu1WY.js";
+import "./index-D47aqlpz.js";
 import { ComponentProps } from "react";
-
 //#region src/components/description-list/description-list.d.ts
 type DescriptionListProps = ComponentProps<"dl"> & WithAsChild;
 type DescriptionListItemProps = ComponentProps<"div"> & WithAsChild;
@@ -15,7 +15,7 @@ type DescriptionListValueProps = ComponentProps<"dd"> & WithAsChild;
  * Compose with `DescriptionList.Item`, `DescriptionList.Label`, and
  * `DescriptionList.Value` as direct children.
  *
- * @see https://mantle.ngrok.com/components/description-list
+ * @see https://mantle.ngrok.com/components/data-display/description-list
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl
  *
  * @example
@@ -47,7 +47,7 @@ declare const DescriptionList: {
   /**
    * The root container for a description list. Renders a `<dl>` element.
    *
-   * @see https://mantle.ngrok.com/components/description-list#descriptionlistroot
+   * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistroot
    *
    * @example
    * ```tsx
@@ -64,7 +64,7 @@ declare const DescriptionList: {
    * A wrapper that groups a label/value pair. Renders a `<div>` with a default
    * subgrid layout.
    *
-   * @see https://mantle.ngrok.com/components/description-list#descriptionlistitem
+   * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistitem
    *
    * @example
    * ```tsx
@@ -78,7 +78,7 @@ declare const DescriptionList: {
   /**
    * The label for a description list item. Renders a `<dt>` element.
    *
-   * @see https://mantle.ngrok.com/components/description-list#descriptionlistlabel
+   * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistlabel
    *
    * @example
    * ```tsx
@@ -89,7 +89,7 @@ declare const DescriptionList: {
   /**
    * The value for a description list item. Renders a `<dd>` element.
    *
-   * @see https://mantle.ngrok.com/components/description-list#descriptionlistvalue
+   * @see https://mantle.ngrok.com/components/data-display/description-list#descriptionlistvalue
    *
    * @example
    * ```tsx

package/dist/description-list.js

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./slot-DT_E5BQx.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dl`,{ref:s,"data-slot":`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`,i),...o,children:a}));i.displayName=`DescriptionList`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`description-list-item`,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...o,children:a}));a.displayName=`DescriptionListItem`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dt`,{ref:s,"data-slot":`description-list-label`,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...o,children:a}));o.displayName=`DescriptionListLabel`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dd`,{ref:s,"data-slot":`description-list-value`,className:e(`text-body font-mono text-mono py-2 px-3`,i),...o,children:a}));s.displayName=`DescriptionListValue`;const c={Root:i,Item:a,Label:o,Value:s};export{c as DescriptionList};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./slot-DmPrjM7N.js";import{forwardRef as n}from"react";import{jsx as r}from"react/jsx-runtime";const i=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dl`,{ref:s,"data-slot":`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`,i),...o,children:a}));i.displayName=`DescriptionList`;const a=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`div`,{ref:s,"data-slot":`description-list-item`,className:e(`rounded-sm col-span-full grid grid-cols-subgrid items-center`,i),...o,children:a}));a.displayName=`DescriptionListItem`;const o=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dt`,{ref:s,"data-slot":`description-list-label`,className:e(`text-muted text-sm font-sans font-medium min-w-36 p-2`,i),...o,children:a}));o.displayName=`DescriptionListLabel`;const s=n(({asChild:n=!1,className:i,children:a,...o},s)=>r(n?t:`dd`,{ref:s,"data-slot":`description-list-value`,className:e(`text-body font-mono text-mono py-2 px-3`,i),...o,children:a}));s.displayName=`DescriptionListValue`;const c={Root:i,Item:a,Label:o,Value:s};export{c as DescriptionList};

package/dist/{dialog-uyJcNks7.js → dialog-DVDFVT_-.js}

@@ -1 +1 @@
-import{t as e}from"./cx-C1UYP5We.js";import{t}from"./icon-button-DiX9iZ9n.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-BuVqb6zf.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=o;m.displayName=`Dialog`;const h=u((e,t)=>d(r,{ref:t,"data-slot":`dialog-trigger`,...e}));h.displayName=`DialogTrigger`;const g=n;g.displayName=`DialogPortal`;const _=u((e,t)=>d(l,{ref:t,"data-slot":`dialog-close`,...e}));_.displayName=`DialogClose`;const v=u(({className:t,...n},r)=>d(i,{ref:r,"data-slot":`dialog-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...n}));v.displayName=`DialogOverlay`;const y=u(({children:t,className:n,preferredWidth:r=`max-w-lg`,...i},o)=>f(g,{children:[d(v,{}),d(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:d(a,{"data-mantle-modal-content":!0,"data-slot":`dialog-content`,className:e(`flex max-h-full w-full flex-1 flex-col`,`outline-hidden focus-within:outline-hidden`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,r,n),ref:o,...i,children:t})})]}));y.displayName=`DialogContent`;const b=({className:t,children:n,...r})=>d(`div`,{"data-slot":`dialog-header`,className:e(`border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4`,`has-[.icon-button]:pr-4`,t),...r,children:n});b.displayName=`DialogHeader`;const x=({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{appearance:i,"data-slot":`dialog-close-icon-button`,icon:d(p,{}),label:r,size:e,type:n,...a})});x.displayName=`DialogCloseIconButton`;const S=({className:t,...n})=>d(`div`,{"data-slot":`dialog-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n});S.displayName=`DialogBody`;const C=({className:t,...n})=>d(`div`,{"data-slot":`dialog-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-4`,t),...n});C.displayName=`DialogFooter`;const w=u(({className:t,...n},r)=>d(c,{ref:r,"data-slot":`dialog-title`,className:e(`text-strong truncate text-lg font-medium`,t),...n}));w.displayName=`DialogTitle`;const T=u(({className:t,...n},r)=>d(s,{ref:r,"data-slot":`dialog-description`,className:e(`text-muted`,t),...n}));T.displayName=`DialogDescription`;const E={Root:m,Body:S,Close:_,CloseIconButton:x,Content:y,Description:T,Footer:C,Header:b,Overlay:v,Portal:g,Title:w,Trigger:h};export{E as t};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./icon-button-CxVsZ2N1.js";import{a as n,c as r,i,n as a,o,r as s,s as c,t as l}from"./primitive-wm7Wk-gy.js";import{forwardRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{XIcon as p}from"@phosphor-icons/react/X";const m=o;m.displayName=`Dialog`;const h=u((e,t)=>d(r,{ref:t,"data-slot":`dialog-trigger`,...e}));h.displayName=`DialogTrigger`;const g=n;g.displayName=`DialogPortal`;const _=u((e,t)=>d(l,{ref:t,"data-slot":`dialog-close`,...e}));_.displayName=`DialogClose`;const v=u(({className:t,...n},r)=>d(i,{ref:r,"data-slot":`dialog-overlay`,className:e(`bg-overlay data-state-closed:animate-out data-state-closed:fade-out-0 data-state-open:animate-in data-state-open:fade-in-0 fixed inset-0 z-50 backdrop-blur-xs`,t),...n}));v.displayName=`DialogOverlay`;const y=u(({children:t,className:n,preferredWidth:r=`max-w-lg`,...i},o)=>f(g,{children:[d(v,{}),d(`div`,{className:`fixed inset-4 z-50 flex items-center justify-center`,children:d(a,{"data-mantle-modal-content":!0,"data-slot":`dialog-content`,className:e(`flex max-h-full w-full flex-1 flex-col`,`outline-hidden focus-within:outline-hidden`,`border-dialog bg-dialog rounded-xl border shadow-lg transition-transform duration-200`,`data-state-closed:animate-out data-state-closed:fade-out-0 data-state-closed:zoom-out-95 data-state-open:animate-in data-state-open:fade-in-0 data-state-open:zoom-in-95`,r,n),ref:o,...i,children:t})})]}));y.displayName=`DialogContent`;const b=({className:t,children:n,...r})=>d(`div`,{"data-slot":`dialog-header`,className:e(`border-dialog-muted text-strong relative flex shrink-0 items-center justify-between gap-2 border-b px-6 py-4`,`has-[.icon-button]:pr-4`,t),...r,children:n});b.displayName=`DialogHeader`;const x=({size:e=`md`,type:n=`button`,label:r=`Close Dialog`,appearance:i=`ghost`,...a})=>d(l,{asChild:!0,children:d(t,{appearance:i,"data-slot":`dialog-close-icon-button`,icon:d(p,{}),label:r,size:e,type:n,...a})});x.displayName=`DialogCloseIconButton`;const S=({className:t,...n})=>d(`div`,{"data-slot":`dialog-body`,className:e(`scrollbar scrollbar-gutter-stable text-body flex-1 overflow-y-auto p-6`,t),...n});S.displayName=`DialogBody`;const C=({className:t,...n})=>d(`div`,{"data-slot":`dialog-footer`,className:e(`border-dialog-muted flex shrink-0 justify-end gap-2 border-t px-6 py-4`,t),...n});C.displayName=`DialogFooter`;const w=u(({className:t,...n},r)=>d(c,{ref:r,"data-slot":`dialog-title`,className:e(`text-strong truncate text-lg font-medium`,t),...n}));w.displayName=`DialogTitle`;const T=u(({className:t,...n},r)=>d(s,{ref:r,"data-slot":`dialog-description`,className:e(`text-muted`,t),...n}));T.displayName=`DialogDescription`;const E={Root:m,Body:S,Close:_,CloseIconButton:x,Content:y,Description:T,Footer:C,Header:b,Overlay:v,Portal:g,Title:w,Trigger:h};export{E as t};