@ngrok/mantle 0.73.5 → 0.75.0

package/dist/command.d.ts

@@ -1,4 +1,4 @@
-import { t as Root } from "./primitive-D_-h74Kt.js";
+import { t as Root } from "./primitive-FoWela9a.js";
 import { ComponentProps, ComponentPropsWithoutRef, ReactNode } from "react";
 import { Command as Command$1, useCommandState } from "cmdk";
 
@@ -135,7 +135,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     label?: string;
     shouldFilter?: boolean;
     filter?: (value: string, search: string, keywords?: string[]) => number;
@@ -204,7 +204,7 @@ declare const Command: {
       shouldFilter,
       showCloseButton,
       title
-    }: CommandDialogContentProps): import("react/jsx-runtime").JSX.Element;
+    }: CommandDialogContentProps): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -243,7 +243,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
+  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
@@ -285,7 +285,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     label?: string;
   } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
@@ -326,7 +326,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   /**
    * The group component for the Command component.
    *
@@ -365,7 +365,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "heading" | "value"> & {
+  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -408,7 +408,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;
@@ -484,7 +484,7 @@ declare const Command: {
     ref?: React.Ref<HTMLDivElement>;
   } & {
     asChild?: boolean;
-  }, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "asChild"> & {
+  }, "key" | "asChild" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     alwaysRender?: boolean;
   } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
@@ -500,7 +500,7 @@ type Props = Omit<ComponentProps<"kbd">, "children">;
 declare function MetaKey({
   className,
   ...props
-}: Props): import("react/jsx-runtime").JSX.Element;
+}: Props): import("react").JSX.Element;
 //#endregion
 export { Command, MetaKey, useCommandState };
 //# sourceMappingURL=command.d.ts.map

package/dist/data-table.d.ts

@@ -65,7 +65,7 @@ declare function Root<TData>({
   children,
   table,
   ...props
-}: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+}: DataTableProps<TData>): import("react").JSX.Element;
 declare namespace Root {
   var displayName: string;
 }
@@ -136,7 +136,7 @@ declare function HeaderSortButton<TData, TValue>({
   sortIcon: propSortIcon,
   onClick,
   ...props
-}: DataTableHeaderSortButtonProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+}: DataTableHeaderSortButtonProps<TData, TValue>): import("react").JSX.Element;
 declare namespace HeaderSortButton {
   var displayName: string;
 }
@@ -167,7 +167,7 @@ declare function Header({
   children,
   className,
   ...props
-}: DataTableHeaderProps): import("react/jsx-runtime").JSX.Element;
+}: DataTableHeaderProps): import("react").JSX.Element;
 declare namespace Header {
   var displayName: string;
 }
@@ -194,7 +194,7 @@ type DataTableHeadProps = Omit<ComponentProps<typeof Table$1.Head>, "children">;
  * </DataTable.Root>
  * ```
  */
-declare function Head<TData>(props: DataTableHeadProps): import("react/jsx-runtime").JSX.Element;
+declare function Head<TData>(props: DataTableHeadProps): import("react").JSX.Element;
 declare namespace Head {
   var displayName: string;
 }
@@ -229,7 +229,7 @@ declare function Row$1<TData>({
   className,
   row,
   ...props
-}: DataTableRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+}: DataTableRowProps<TData>): import("react").JSX.Element;
 declare namespace Row$1 {
   var displayName: string;
 }
@@ -260,7 +260,7 @@ type DataTableEmptyRowProps = ComponentProps<typeof Table$1.Row>;
 declare function EmptyRow<TData>({
   children,
   ...props
-}: DataTableEmptyRowProps): import("react/jsx-runtime").JSX.Element;
+}: DataTableEmptyRowProps): import("react").JSX.Element;
 declare namespace EmptyRow {
   var displayName: string;
 }
@@ -292,7 +292,7 @@ declare function ActionCell({
   children,
   className,
   ...props
-}: DataTableActionCellProps): import("react/jsx-runtime").JSX.Element;
+}: DataTableActionCellProps): import("react").JSX.Element;
 declare namespace ActionCell {
   var displayName: string;
 }
@@ -317,7 +317,7 @@ declare function ActionHeader({
   children,
   className,
   ...props
-}: DataTableActionHeaderProps): import("react/jsx-runtime").JSX.Element;
+}: DataTableActionHeaderProps): import("react").JSX.Element;
 declare namespace ActionHeader {
   var displayName: string;
 }

package/dist/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","names":["Table","Row"],"sources":["../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any -- React context cannot preserve this generic across provider boundaries.\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * The root container for a data table. Wraps all other `DataTable`\n * sub-components and provides the table context to its descendants.\n *\n * REQUIRED: Construct a TanStack Table instance via `useReactTable` (from\n * `@tanstack/react-table`, also re-exported from `@ngrok/mantle/data-table`)\n * and pass it through the `table` prop. The instance owns columns, data, and\n * any sorting / filtering / pagination state — the wrapper components read\n * from it.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n *\n * type Row = { id: string; name: string };\n * const columnHelper = createColumnHelper<Row>();\n * const columns = [\n *   columnHelper.accessor(\"name\", {\n *     id: \"name\",\n *     header: () => <DataTable.Header>Name</DataTable.Header>,\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n * ];\n *\n * function MyTable({ data }: { data: Row[] }) {\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.length > 0\n *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root data-slot=\"data-table\" {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table. Renders a sort\n * icon that reflects the current direction, handles ARIA announcements, and\n * cycles through sort states on click.\n *\n * Each click cycles through:\n * - For `\"alphanumeric\"` sorting: `unsorted → ascending → descending → unsorted`\n * - For `\"time\"` sorting: `unsorted → newest-first → oldest-first → unsorted`\n *\n * For right-aligned numeric columns, pass `className=\"justify-end\"` and\n * `iconPlacement=\"start\"` so the sort icon stays paired with the label.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * columnHelper.accessor(\"email\", {\n *   id: \"email\",\n *   header: (props) => (\n *     <DataTable.Header>\n *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *         Email\n *       </DataTable.HeaderSortButton>\n *     </DataTable.Header>\n *   ),\n *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n * });\n * ```\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst rawSortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof rawSortDirection === \"string\" ? rawSortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tdata-slot=\"data-table-header-sort-button\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A `<th>` optimized for header actions. Wrap each column's header content in\n * this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.\n * Non-sortable columns can render plain text.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * columnHelper.accessor(\"name\", {\n *   id: \"name\",\n *   header: (props) => (\n *     <DataTable.Header>\n *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *         Name\n *       </DataTable.HeaderSortButton>\n *     </DataTable.Header>\n *   ),\n *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n * });\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header\n\t\t\tdata-slot=\"data-table-header\"\n\t\t\tclassName={cx(\"has-data-table-header-action:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n/**\n * The `<tbody>` container for rows of data. Typically wraps a map of\n * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is no data.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablebody\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<typeof Table.Body>,\n\tComponentPropsWithoutRef<typeof Table.Body>\n>((props, ref) => <Table.Body ref={ref} data-slot=\"data-table-body\" {...props} />);\nBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\n/**\n * The `<thead>` container that renders column headers automatically from\n * `table.getHeaderGroups()`. Does not accept children — headers come from each\n * column's `header` definition on the TanStack Table column config.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablehead\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head data-slot=\"data-table-head\" {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\n/**\n * A single data table body row rendered from a TanStack Table row instance.\n * Does not accept children — cells come from each column's `cell` definition.\n *\n * When `onClick` is provided, the row automatically receives `cursor-pointer`.\n * Pass a different `cursor-*` class via `className` (e.g. `cursor-default`,\n * `cursor-wait`) to override. For keyboard and screen-reader access, also\n * render a `<Link>` inside the primary cell — a `<tr>` is not focusable.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablerow\n *\n * @example\n * ```tsx\n * const navigate = useNavigate();\n *\n * {rows.map((row) => (\n *   <DataTable.Row\n *     key={row.id}\n *     row={row}\n *     onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n *   />\n * ))}\n * ```\n */\nfunction Row<TData>({ className, row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row\n\t\t\tdata-slot=\"data-table-row\"\n\t\t\tclassName={cx(props.onClick && \"cursor-pointer\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\n/**\n * An empty-state row that spans every column. Render this as the `else` branch\n * when `rows.length === 0` to keep the table's frame intact instead of\n * collapsing to an empty `<tbody>`. The cell `colSpan` is computed from the\n * TanStack Table instance via context, so no manual column count is needed.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row data-slot=\"data-table-empty-row\" {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\n/**\n * Internal: renders the visual indicator on the left edge of the sticky action\n * column — a 1px divider plus a soft shadow gradient that reads as content\n * sliding under the pinned column. Positioned as a 6px strip sitting\n * immediately to the left of its sticky parent cell; `-inset-y-px` lets\n * adjacent rows' strips overlap at row dividers so the effect reads as one\n * continuous column instead of per-row blobs.\n *\n * Rendered as a child `<span>` because box-shadow on `<td>`/`<th>` is\n * unreliable across table layout modes.\n */\nfunction StickyColIndicator() {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t\"pointer-events-none absolute -inset-y-px -left-1.5 w-1.5\",\n\t\t\t\t\"opacity-0 transition-opacity group-data-sticky-active/table:opacity-100\",\n\t\t\t\t// 1px divider painted at the strip's right edge (= the pinned\n\t\t\t\t// cell's left edge).\n\t\t\t\t\"shadow-[1px_0_0_0_var(--border-color-card-muted)]\",\n\t\t\t\t// Soft shadow gradient fading leftward. Uses mantle's shadow\n\t\t\t\t// tokens so the alpha adapts to light/dark themes.\n\t\t\t\t\"bg-linear-to-l to-transparent\",\n\t\t\t\t\"from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]\",\n\t\t\t)}\n\t\t/>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\n/**\n * A sticky-right `<td>` for per-row action buttons (typically an `IconButton`\n * that opens a `DropdownMenu`). Pair with `DataTable.ActionHeader`.\n *\n * If the row has `onClick`, pass `onClick={(event) => event.stopPropagation()}`\n * on this cell so clicks on action controls don't bubble and fire the row\n * handler.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => (\n *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n *       <DropdownMenu.Root>...</DropdownMenu.Root>\n *     </DataTable.ActionCell>\n *   ),\n * });\n * ```\n */\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\t// Marks this cell as a sticky right-edge column so Table.Root can suppress\n\t\t\t// its container-level right-side scroll fade (keeping this cell opaque).\n\t\t\tdata-mantle-table-sticky-right\n\t\t\tdata-slot=\"data-table-action-cell\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky cell opaque with the row's current bg\n\t\t\t\t// (including hover state) so scrolling cells don't show through.\n\t\t\t\t// Avoid `display: flex` here — it overrides `display: table-cell`,\n\t\t\t\t// preventing the cell from stretching to the full row height in\n\t\t\t\t// `border-separate` mode.\n\t\t\t\t\"sticky z-10 right-0 text-end align-middle bg-inherit p-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<StickyColIndicator />\n\t\t\t{children}\n\t\t</Table.Cell>\n\t);\n}\n\ntype DataTableActionHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A sticky header cell that pairs with `DataTable.ActionCell`. Use this as the\n * header for the action column so the pinned column visually aligns across the\n * header and every body row when the table scrolls horizontally.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n * })\n * ```\n */\nfunction ActionHeader({ children, className, ...props }: DataTableActionHeaderProps) {\n\tconst { table } = useDataTableContext();\n\tconst hasRows = table.getRowModel().rows.length > 0;\n\n\treturn (\n\t\t<Table.Header\n\t\t\t// Only mark as sticky-right when body rows exist so the empty state\n\t\t\t// doesn't suppress the container's right-side scroll fade.\n\t\t\t{...(hasRows ? { \"data-mantle-table-sticky-right\": true } : {})}\n\t\t\tdata-slot=\"data-table-action-header\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky header opaque with the thead's current bg.\n\t\t\t\thasRows && \"sticky z-10 right-0 bg-inherit\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{hasRows && <StickyColIndicator />}\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nActionHeader.displayName = \"DataTableActionHeader\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * Use `DataTable` for INTERACTIVE tabular data — sorting, filtering, pagination,\n * row selection, and server-side or client-side data. Built on TanStack Table;\n * the consumer MUST construct a `useReactTable` instance from\n * `@tanstack/react-table` and pass it to `DataTable.Root` via the `table` prop.\n * Every TanStack utility (`createColumnHelper`, `getCoreRowModel`,\n * `getSortedRowModel`, `getPaginationRowModel`, `getFilteredRowModel`,\n * `useReactTable`, …) is re-exported from `@ngrok/mantle/data-table` so a single\n * import covers both the wrapper components and the TanStack helpers.\n *\n * For STATIC, layout-driven tables (read-only data dumps, simple key/value\n * displays, plain markup tables with no interactivity), use `Table` instead.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * Composition:\n * ```\n * DataTable.Root\n * ├── DataTable.Head\n * │   └── DataTable.Row\n * │       ├── DataTable.Header\n * │       │   └── DataTable.HeaderSortButton\n * │       └── DataTable.ActionHeader\n * └── DataTable.Body\n *     ├── DataTable.Row\n *     │   ├── DataTable.Cell\n *     │   └── DataTable.ActionCell\n *     └── DataTable.EmptyRow\n * ```\n *\n * @example\n * Minimal — read-only table with a single sortable column:\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n *\n * type Row = { id: string; name: string };\n *\n * const columnHelper = createColumnHelper<Row>();\n * const columns = [\n *   columnHelper.accessor(\"name\", {\n *     id: \"name\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Name\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n * ];\n *\n * function MyTable({ data }: { data: Row[] }) {\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.length > 0\n *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n * ```\n *\n * @example\n * Sortable + filterable + paginated — with a global text filter and page controls:\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   getFilteredRowModel,\n *   getPaginationRowModel,\n *   getSortedRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n * import { Button } from \"@ngrok/mantle/button\";\n * import { Input } from \"@ngrok/mantle/input\";\n * import { useState } from \"react\";\n *\n * type Payment = { id: string; amount: number; status: \"pending\" | \"succeeded\" | \"failed\"; email: string };\n *\n * const columnHelper = createColumnHelper<Payment>();\n * const columns = [\n *   columnHelper.accessor(\"status\", {\n *     id: \"status\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Status\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n *   columnHelper.accessor(\"email\", {\n *     id: \"email\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Email\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n *   columnHelper.accessor(\"amount\", {\n *     id: \"amount\",\n *     header: (props) => (\n *       <DataTable.Header className=\"text-right\">\n *         <DataTable.HeaderSortButton\n *           column={props.column}\n *           sortingMode=\"alphanumeric\"\n *           className=\"justify-end\"\n *           iconPlacement=\"start\"\n *         >\n *           Amount\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => (\n *       <DataTable.Cell className=\"text-right tabular-nums\">\n *         {new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" }).format(props.getValue())}\n *       </DataTable.Cell>\n *     ),\n *   }),\n * ];\n *\n * function PaymentsTable({ data }: { data: Payment[] }) {\n *   const [globalFilter, setGlobalFilter] = useState(\"\");\n *\n *   const table = useReactTable({\n *     data,\n *     columns,\n *     state: { globalFilter },\n *     onGlobalFilterChange: setGlobalFilter,\n *     getCoreRowModel: getCoreRowModel(),\n *     getSortedRowModel: getSortedRowModel(),\n *     getFilteredRowModel: getFilteredRowModel(),\n *     getPaginationRowModel: getPaginationRowModel(),\n *   });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <div className=\"space-y-4\">\n *       <Input\n *         placeholder=\"Filter payments…\"\n *         value={globalFilter}\n *         onChange={(event) => setGlobalFilter(event.target.value)}\n *       />\n *       <DataTable.Root table={table}>\n *         <DataTable.Head />\n *         <DataTable.Body>\n *           {rows.length > 0\n *             ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *             : <DataTable.EmptyRow>No payments match.</DataTable.EmptyRow>}\n *         </DataTable.Body>\n *       </DataTable.Root>\n *       <div className=\"flex items-center justify-between gap-2\">\n *         <span className=\"text-sm text-muted\">\n *           Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n *         </span>\n *         <div className=\"flex gap-2\">\n *           <Button\n *             type=\"button\"\n *             priority=\"neutral\"\n *             onClick={() => table.previousPage()}\n *             disabled={!table.getCanPreviousPage()}\n *           >\n *             Previous\n *           </Button>\n *           <Button\n *             type=\"button\"\n *             priority=\"neutral\"\n *             onClick={() => table.nextPage()}\n *             disabled={!table.getCanNextPage()}\n *           >\n *             Next\n *           </Button>\n *         </div>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * Row action column — a sticky right-edge cell with a dropdown menu of actions.\n * If the row also has `onClick`, stop propagation on the action cell so clicks\n * don't bubble up and fire the row handler:\n * ```tsx\n * import { DataTable, createColumnHelper } from \"@ngrok/mantle/data-table\";\n * import { DropdownMenu } from \"@ngrok/mantle/dropdown-menu\";\n * import { IconButton } from \"@ngrok/mantle/icon-button\";\n * import { DotsThreeVerticalIcon } from \"@phosphor-icons/react/DotsThreeVertical\";\n *\n * const columnHelper = createColumnHelper<Payment>();\n *\n * const columns = [\n *   // …other columns…\n *   columnHelper.display({\n *     id: \"actions\",\n *     header: () => <DataTable.ActionHeader />,\n *     cell: (props) => (\n *       <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n *         <DropdownMenu.Root>\n *           <DropdownMenu.Trigger asChild>\n *             <IconButton type=\"button\" label=\"Actions\" icon={<DotsThreeVerticalIcon />} />\n *           </DropdownMenu.Trigger>\n *           <DropdownMenu.Content align=\"end\">\n *             <DropdownMenu.Item onSelect={() => copy(props.row.original.id)}>\n *               Copy ID\n *             </DropdownMenu.Item>\n *             <DropdownMenu.Item onSelect={() => refund(props.row.original.id)}>\n *               Refund\n *             </DropdownMenu.Item>\n *           </DropdownMenu.Content>\n *         </DropdownMenu.Root>\n *       </DataTable.ActionCell>\n *     ),\n *   }),\n * ];\n * ```\n *\n * @example\n * Clickable row navigating to a detail page — also render a `<Link>` inside the\n * primary cell so the row is reachable by keyboard and screen readers (a `<tr>`\n * is not focusable):\n * ```tsx\n * import { DataTable } from \"@ngrok/mantle/data-table\";\n * import { Link, href, useNavigate } from \"react-router\";\n *\n * function PaymentsTable({ data }: { data: Payment[] }) {\n *   const navigate = useNavigate();\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.map((row) => (\n *           <DataTable.Row\n *             key={row.id}\n *             row={row}\n *             onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n *           />\n *         ))}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n *\n * // The primary column's cell renders a <Link> for keyboard / a11y reachability.\n * columnHelper.accessor(\"email\", {\n *   id: \"email\",\n *   header: (props) => <DataTable.Header>Email</DataTable.Header>,\n *   cell: (props) => (\n *     <DataTable.Cell>\n *       <Link to={href(\"/payments/:id\", { id: props.row.original.id })}>\n *         {props.getValue()}\n *       </Link>\n *     </DataTable.Cell>\n *   ),\n * });\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component. REQUIRED: pass a\n\t * `useReactTable` instance (from `@tanstack/react-table`, also re-exported\n\t * from `@ngrok/mantle/data-table`) via the `table` prop — every other\n\t * `DataTable.*` part reads from it through context.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n\t * const rows = table.getRowModel().rows;\n\t *\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     {rows.length > 0\n\t *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row, typically holding\n\t * an `IconButton` that opens a `DropdownMenu`. Pair with `DataTable.ActionHeader`.\n\t *\n\t * If the row has `onClick`, stop propagation on this cell so clicks on action\n\t * controls don't bubble up and fire the row handler.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => (\n\t *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n\t *       <DropdownMenu.Root>...</DropdownMenu.Root>\n\t *     </DataTable.ActionCell>\n\t *   ),\n\t * });\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A sticky header cell that pairs with `DataTable.ActionCell`, keeping the\n\t * action column aligned across the header and body when scrolling horizontally.\n\t * Use as the `header` for a `columnHelper.display` action column.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => (\n\t *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n\t *       <DropdownMenu.Root>...</DropdownMenu.Root>\n\t *     </DataTable.ActionCell>\n\t *   ),\n\t * });\n\t * ```\n\t */\n\tActionHeader,\n\t/**\n\t * A `<td>` for rendering an individual data cell. Re-exported from\n\t * `Table.Cell`. Every cell rendered by a column's `cell` function should\n\t * be wrapped in this — a raw `<td>` skips mantle typography and padding.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"name\", {\n\t *   id: \"name\",\n\t *   header: (props) => <DataTable.Header>Name</DataTable.Header>,\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The `<tbody>` container for rows of data. Typically wraps a map of\n\t * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is\n\t * no data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   {rows.length > 0\n\t *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty-state row that spans every column. Render this as the `else`\n\t * branch when `rows.length === 0` to keep the table's frame intact instead\n\t * of collapsing to an empty `<tbody>`.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   {rows.length > 0\n\t *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The `<thead>` container that renders column headers automatically from\n\t * `table.getHeaderGroups()`. Does not accept children — headers come from\n\t * each column's `header` definition.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>...</DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A `<th>` optimized for header actions. Wrap each column's header content\n\t * in this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"name\", {\n\t *   id: \"name\",\n\t *   header: (props) => (\n\t *     <DataTable.Header>\n\t *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n\t *         Name\n\t *       </DataTable.HeaderSortButton>\n\t *     </DataTable.Header>\n\t *   ),\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for a column header. Clicks cycle through\n\t * sort directions: for `\"alphanumeric\"`, `unsorted → asc → desc → unsorted`;\n\t * for `\"time\"`, `unsorted → desc (newest-first) → asc → unsorted`.\n\t *\n\t * Pass `className=\"justify-end\"` and `iconPlacement=\"start\"` for\n\t * right-aligned numeric columns so the sort icon stays paired with the label.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"email\", {\n\t *   id: \"email\",\n\t *   header: (props) => (\n\t *     <DataTable.Header>\n\t *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n\t *         Email\n\t *       </DataTable.HeaderSortButton>\n\t *     </DataTable.Header>\n\t *   ),\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table body row rendered from a TanStack Table row instance.\n\t * Does not accept children — cells come from each column's `cell` definition.\n\t *\n\t * When `onClick` is provided, the row automatically receives `cursor-pointer`.\n\t * Pass a different `cursor-*` class via `className` to override. For keyboard\n\t * and screen-reader access, also render a `<Link>` inside the primary cell.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * const navigate = useNavigate();\n\t *\n\t * {rows.map((row) => (\n\t *   <DataTable.Row\n\t *     key={row.id}\n\t *     row={row}\n\t *     onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n\t *   />\n\t * ))}\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"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"}
+{"version":3,"file":"data-table.js","names":["Table","Row"],"sources":["../src/components/data-table/helpers.ts","../src/components/data-table/data-table.tsx"],"sourcesContent":["import type { SortingMode } from \"../../utils/sorting/direction.js\";\nimport type { SortDirection } from \"./types.js\";\n\nconst alphanumericSortingOrder = [\"unsorted\", \"asc\", \"desc\"] as const satisfies SortDirection[];\n\nconst timeSortingOrder = [\"unsorted\", \"desc\", \"asc\"] as const satisfies SortDirection[];\n\n/**\n * Get the next sort direction based on the current sort direction and sorting mode.\n */\nfunction getNextSortDirection(currentSortDirection: SortDirection, sortingMode: SortingMode) {\n\tconst sortOrder = sortingMode === \"alphanumeric\" ? alphanumericSortingOrder : timeSortingOrder;\n\n\treturn getNextInCircularList(sortOrder, currentSortDirection) ?? \"unsorted\";\n}\n\n/**\n * Get the next item in a circular list.\n * If the current item is not found in the list (or it's empty), return the fallback value.\n */\nfunction getNextInCircularList<T>(list: T[], currentItem: T, fallback?: T | undefined) {\n\tif (list.length === 0) {\n\t\treturn fallback;\n\t}\n\n\tconst currentItemIndex = list.findIndex((item) => item === currentItem);\n\tif (currentItemIndex === -1) {\n\t\treturn fallback;\n\t}\n\n\tconst nextIndex = (currentItemIndex + 1) % list.length;\n\treturn list.at(nextIndex) ?? fallback;\n}\n\nexport {\n\t//,\n\tgetNextSortDirection,\n\tgetNextInCircularList,\n};\n","import {\n\ttype Column,\n\ttype HeaderContext,\n\ttype Table as TableInstance,\n\ttype Row as TableRow,\n\tflexRender,\n} from \"@tanstack/react-table\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentPropsWithoutRef,\n\ttype ComponentRef,\n\tFragment,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseMemo,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { $timeSortingDirection, type SortingMode } from \"../../utils/sorting/direction.js\";\nimport { Button } from \"../button/button.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { SortIcon } from \"../icons/sort.js\";\nimport { Table } from \"../table/table.js\";\nimport { getNextSortDirection } from \"./helpers.js\";\nimport type { SortDirection } from \"./types.js\";\n\ntype DataTableContextShape<TData = unknown> = {\n\ttable: TableInstance<TData>;\n};\n\n// oxlint-disable-next-line @typescript-eslint/no-explicit-any -- React context cannot preserve this generic across provider boundaries.\nconst DataTableContext = createContext<DataTableContextShape<any> | null>(null);\n\n/**\n * @private\n */\nfunction useDataTableContext<TData>() {\n\tconst context = useContext(DataTableContext);\n\n\tinvariant(context, \"useDataTableContext should only be used within a DataTable child component\");\n\n\treturn context as DataTableContextShape<TData>;\n}\n\ntype DataTableProps<TData> = ComponentProps<typeof Table.Root> & {\n\ttable: TableInstance<TData>;\n};\n\n/**\n * The root container for a data table. Wraps all other `DataTable`\n * sub-components and provides the table context to its descendants.\n *\n * REQUIRED: Construct a TanStack Table instance via `useReactTable` (from\n * `@tanstack/react-table`, also re-exported from `@ngrok/mantle/data-table`)\n * and pass it through the `table` prop. The instance owns columns, data, and\n * any sorting / filtering / pagination state — the wrapper components read\n * from it.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableroot\n *\n * @example\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n *\n * type Row = { id: string; name: string };\n * const columnHelper = createColumnHelper<Row>();\n * const columns = [\n *   columnHelper.accessor(\"name\", {\n *     id: \"name\",\n *     header: () => <DataTable.Header>Name</DataTable.Header>,\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n * ];\n *\n * function MyTable({ data }: { data: Row[] }) {\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.length > 0\n *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n * ```\n */\nfunction Root<TData>({ children, table, ...props }: DataTableProps<TData>) {\n\tconst context: DataTableContextShape<TData> = useMemo(() => ({ table }), [table]);\n\n\treturn (\n\t\t<DataTableContext.Provider value={context}>\n\t\t\t<Table.Root data-slot=\"data-table\" {...props}>\n\t\t\t\t<Table.Element>{children}</Table.Element>\n\t\t\t</Table.Root>\n\t\t</DataTableContext.Provider>\n\t);\n}\n\ntype DataTableHeaderSortButtonProps<TData, TValue> = Omit<ComponentProps<typeof Button>, \"icon\"> &\n\tPick<HeaderContext<TData, TValue>, \"column\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Disable sorting for this column.\n\t\t\t\t * It will prevent the sorting direction from being toggled and any icon\n\t\t\t\t * from being shown.\n\t\t\t\t */\n\t\t\t\tdisableSorting: true;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: undefined;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode?: undefined;\n\t\t  }\n\t\t| {\n\t\t\t\tdisableSorting?: false;\n\t\t\t\t/**\n\t\t\t\t * Use this to render a custom sort icon for the column if it is sortable\n\t\t\t\t * and you want to override the default sort icon\n\t\t\t\t */\n\t\t\t\tsortIcon?: (sortDirection: SortDirection) => ReactNode;\n\t\t\t\t/**\n\t\t\t\t * The sorting mode of the column, whether it is alphanumeric or time based.\n\t\t\t\t */\n\t\t\t\tsortingMode: SortingMode;\n\t\t  }\n\t);\n\n/**\n * A sortable button toggle for a column header in a data table. Renders a sort\n * icon that reflects the current direction, handles ARIA announcements, and\n * cycles through sort states on click.\n *\n * Each click cycles through:\n * - For `\"alphanumeric\"` sorting: `unsorted → ascending → descending → unsorted`\n * - For `\"time\"` sorting: `unsorted → newest-first → oldest-first → unsorted`\n *\n * For right-aligned numeric columns, pass `className=\"justify-end\"` and\n * `iconPlacement=\"start\"` so the sort icon stays paired with the label.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n *\n * @example\n * ```tsx\n * columnHelper.accessor(\"email\", {\n *   id: \"email\",\n *   header: (props) => (\n *     <DataTable.Header>\n *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *         Email\n *       </DataTable.HeaderSortButton>\n *     </DataTable.Header>\n *   ),\n *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n * });\n * ```\n */\nfunction HeaderSortButton<TData, TValue>({\n\tchildren,\n\tclassName,\n\tcolumn,\n\tdisableSorting = false,\n\ticonPlacement = \"end\",\n\tsortingMode,\n\tsortIcon: propSortIcon,\n\tonClick,\n\t...props\n}: DataTableHeaderSortButtonProps<TData, TValue>) {\n\tconst rawSortDirection = column.getIsSorted();\n\tconst canSort = !disableSorting && column.getCanSort();\n\n\tconst sortDirection: SortDirection =\n\t\tcanSort && typeof rawSortDirection === \"string\" ? rawSortDirection : \"unsorted\";\n\n\tconst sortIcon = propSortIcon?.(sortDirection) ?? (\n\t\t<DefaultSortIcon mode={sortingMode} direction={sortDirection} />\n\t);\n\n\treturn (\n\t\t<Button\n\t\t\tappearance=\"ghost\"\n\t\t\tdata-slot=\"data-table-header-sort-button\"\n\t\t\tclassName={cx(\n\t\t\t\t\"flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tdata-sort-direction={sortDirection}\n\t\t\tdata-table-header-action\n\t\t\ticon={sortIcon}\n\t\t\ticonPlacement={iconPlacement}\n\t\t\tonClick={(event) => {\n\t\t\t\tonClick?.(event);\n\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif (!canSort || disableSorting || typeof sortingMode === \"undefined\") {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\ttoggleNextSortingDirection(column, sortingMode);\n\t\t\t}}\n\t\t\tpriority=\"neutral\"\n\t\t\ttype=\"button\"\n\t\t\t{...props}\n\t\t>\n\t\t\t{canSort && sortDirection !== \"unsorted\" && (\n\t\t\t\t<span className=\"sr-only\">\n\t\t\t\t\tColumn sorted in{\" \"}\n\t\t\t\t\t{sortingMode === \"alphanumeric\"\n\t\t\t\t\t\t? sortDirection === \"asc\"\n\t\t\t\t\t\t\t? \"ascending\"\n\t\t\t\t\t\t\t: \"descending\"\n\t\t\t\t\t\t: $timeSortingDirection(sortDirection)}{\" \"}\n\t\t\t\t\torder\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t{children}\n\t\t</Button>\n\t);\n}\n\ntype DataTableHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A `<th>` optimized for header actions. Wrap each column's header content in\n * this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.\n * Non-sortable columns can render plain text.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableheader\n *\n * @example\n * ```tsx\n * columnHelper.accessor(\"name\", {\n *   id: \"name\",\n *   header: (props) => (\n *     <DataTable.Header>\n *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *         Name\n *       </DataTable.HeaderSortButton>\n *     </DataTable.Header>\n *   ),\n *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n * });\n * ```\n */\nfunction Header({ children, className, ...props }: DataTableHeaderProps) {\n\treturn (\n\t\t<Table.Header\n\t\t\tdata-slot=\"data-table-header\"\n\t\t\tclassName={cx(\"has-data-table-header-action:px-0\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n/**\n * The `<tbody>` container for rows of data. Typically wraps a map of\n * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is no data.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablebody\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<typeof Table.Body>,\n\tComponentPropsWithoutRef<typeof Table.Body>\n>((props, ref) => <Table.Body ref={ref} data-slot=\"data-table-body\" {...props} />);\nBody.displayName = \"DataTableBody\";\n\ntype DataTableHeadProps = Omit<ComponentProps<typeof Table.Head>, \"children\">;\n\n/**\n * The `<thead>` container that renders column headers automatically from\n * `table.getHeaderGroups()`. Does not accept children — headers come from each\n * column's `header` definition on the TanStack Table column config.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablehead\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nfunction Head<TData>(props: DataTableHeadProps) {\n\tconst { table } = useDataTableContext<TData>();\n\n\treturn (\n\t\t<Table.Head data-slot=\"data-table-head\" {...props}>\n\t\t\t{table.getHeaderGroups().map((headerGroup) => (\n\t\t\t\t<Table.Row key={headerGroup.id}>\n\t\t\t\t\t{headerGroup.headers.map((header) => (\n\t\t\t\t\t\t<Fragment key={header.id}>\n\t\t\t\t\t\t\t{header.isPlaceholder ? (\n\t\t\t\t\t\t\t\t<Table.Header key={header.id} />\n\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\tflexRender(header.column.columnDef.header, header.getContext())\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</Fragment>\n\t\t\t\t\t))}\n\t\t\t\t</Table.Row>\n\t\t\t))}\n\t\t</Table.Head>\n\t);\n}\n\ntype DataTableRowProps<TData> = Omit<ComponentProps<typeof Table.Row>, \"children\"> & {\n\trow: TableRow<TData>;\n};\n\n/**\n * A single data table body row rendered from a TanStack Table row instance.\n * Does not accept children — cells come from each column's `cell` definition.\n *\n * When `onClick` is provided, the row automatically receives `cursor-pointer`.\n * Pass a different `cursor-*` class via `className` (e.g. `cursor-default`,\n * `cursor-wait`) to override. For keyboard and screen-reader access, also\n * render a `<Link>` inside the primary cell — a `<tr>` is not focusable.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatablerow\n *\n * @example\n * ```tsx\n * const navigate = useNavigate();\n *\n * {rows.map((row) => (\n *   <DataTable.Row\n *     key={row.id}\n *     row={row}\n *     onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n *   />\n * ))}\n * ```\n */\nfunction Row<TData>({ className, row, ...props }: DataTableRowProps<TData>) {\n\treturn (\n\t\t<Table.Row\n\t\t\tdata-slot=\"data-table-row\"\n\t\t\tclassName={cx(props.onClick && \"cursor-pointer\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{row.getVisibleCells().map((cell) => (\n\t\t\t\t<Fragment key={cell.id}>\n\t\t\t\t\t{flexRender(cell.column.columnDef.cell, cell.getContext())}\n\t\t\t\t</Fragment>\n\t\t\t))}\n\t\t</Table.Row>\n\t);\n}\n\ntype DataTableEmptyRowProps = ComponentProps<typeof Table.Row>;\n\n/**\n * An empty-state row that spans every column. Render this as the `else` branch\n * when `rows.length === 0` to keep the table's frame intact instead of\n * collapsing to an empty `<tbody>`. The cell `colSpan` is computed from the\n * TanStack Table instance via context, so no manual column count is needed.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n *\n * @example\n * ```tsx\n * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n * const rows = table.getRowModel().rows;\n *\n * <DataTable.Root table={table}>\n *   <DataTable.Head />\n *   <DataTable.Body>\n *     {rows.length > 0\n *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *   </DataTable.Body>\n * </DataTable.Root>\n * ```\n */\nfunction EmptyRow<TData>({ children, ...props }: DataTableEmptyRowProps) {\n\tconst { table } = useDataTableContext<TData>();\n\tconst numberOfColumns = table.getAllColumns().length;\n\n\treturn (\n\t\t<Table.Row data-slot=\"data-table-empty-row\" {...props}>\n\t\t\t<Table.Cell colSpan={numberOfColumns}>{children}</Table.Cell>\n\t\t</Table.Row>\n\t);\n}\n\n/**\n * Internal: renders the visual indicator on the left edge of the sticky action\n * column — a 1px divider plus a soft shadow gradient that reads as content\n * sliding under the pinned column. Positioned as a 6px strip sitting\n * immediately to the left of its sticky parent cell; `-inset-y-px` lets\n * adjacent rows' strips overlap at row dividers so the effect reads as one\n * continuous column instead of per-row blobs.\n *\n * Rendered as a child `<span>` because box-shadow on `<td>`/`<th>` is\n * unreliable across table layout modes.\n */\nfunction StickyColIndicator() {\n\treturn (\n\t\t<span\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t\"pointer-events-none absolute -inset-y-px -left-1.5 w-1.5\",\n\t\t\t\t\"opacity-0 transition-opacity group-data-sticky-active/table:opacity-100\",\n\t\t\t\t// 1px divider painted at the strip's right edge (= the pinned\n\t\t\t\t// cell's left edge).\n\t\t\t\t\"shadow-[1px_0_0_0_var(--border-color-card-muted)]\",\n\t\t\t\t// Soft shadow gradient fading leftward. Uses mantle's shadow\n\t\t\t\t// tokens so the alpha adapts to light/dark themes.\n\t\t\t\t\"bg-linear-to-l to-transparent\",\n\t\t\t\t\"from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]\",\n\t\t\t)}\n\t\t/>\n\t);\n}\n\ntype DataTableActionCellProps = ComponentProps<typeof Table.Cell>;\n\n/**\n * A sticky-right `<td>` for per-row action buttons (typically an `IconButton`\n * that opens a `DropdownMenu`). Pair with `DataTable.ActionHeader`.\n *\n * If the row has `onClick`, pass `onClick={(event) => event.stopPropagation()}`\n * on this cell so clicks on action controls don't bubble and fire the row\n * handler.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => (\n *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n *       <DropdownMenu.Root>...</DropdownMenu.Root>\n *     </DataTable.ActionCell>\n *   ),\n * });\n * ```\n */\nfunction ActionCell({ children, className, ...props }: DataTableActionCellProps) {\n\treturn (\n\t\t<Table.Cell\n\t\t\t// Marks this cell as a sticky right-edge column so Table.Root can suppress\n\t\t\t// its container-level right-side scroll fade (keeping this cell opaque).\n\t\t\tdata-mantle-table-sticky-right\n\t\t\tdata-slot=\"data-table-action-cell\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky cell opaque with the row's current bg\n\t\t\t\t// (including hover state) so scrolling cells don't show through.\n\t\t\t\t// Avoid `display: flex` here — it overrides `display: table-cell`,\n\t\t\t\t// preventing the cell from stretching to the full row height in\n\t\t\t\t// `border-separate` mode.\n\t\t\t\t\"sticky z-10 right-0 text-end align-middle bg-inherit p-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<StickyColIndicator />\n\t\t\t{children}\n\t\t</Table.Cell>\n\t);\n}\n\ntype DataTableActionHeaderProps = ComponentProps<typeof Table.Header>;\n\n/**\n * A sticky header cell that pairs with `DataTable.ActionCell`. Use this as the\n * header for the action column so the pinned column visually aligns across the\n * header and every body row when the table scrolls horizontally.\n *\n * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n *\n * @example\n * ```tsx\n * columnHelper.display({\n *   id: \"actions\",\n *   header: () => <DataTable.ActionHeader />,\n *   cell: () => <DataTable.ActionCell>{...}</DataTable.ActionCell>,\n * })\n * ```\n */\nfunction ActionHeader({ children, className, ...props }: DataTableActionHeaderProps) {\n\tconst { table } = useDataTableContext();\n\tconst hasRows = table.getRowModel().rows.length > 0;\n\n\treturn (\n\t\t<Table.Header\n\t\t\t// Only mark as sticky-right when body rows exist so the empty state\n\t\t\t// doesn't suppress the container's right-side scroll fade.\n\t\t\t{...(hasRows ? { \"data-mantle-table-sticky-right\": true } : {})}\n\t\t\tdata-slot=\"data-table-action-header\"\n\t\t\tclassName={cx(\n\t\t\t\t// `bg-inherit` keeps the sticky header opaque with the thead's current bg.\n\t\t\t\thasRows && \"sticky z-10 right-0 bg-inherit\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{hasRows && <StickyColIndicator />}\n\t\t\t{children}\n\t\t</Table.Header>\n\t);\n}\n\n// Set display names to preserve original component names for debugging\nRoot.displayName = \"DataTable\";\nActionCell.displayName = \"DataTableActionCell\";\nActionHeader.displayName = \"DataTableActionHeader\";\nBody.displayName = \"DataTableBody\";\nEmptyRow.displayName = \"DataTableEmptyRow\";\nHead.displayName = \"DataTableHead\";\nHeader.displayName = \"DataTableHeader\";\nHeaderSortButton.displayName = \"DataTableHeaderSortButton\";\nRow.displayName = \"DataTableRow\";\n\n/**\n * Use `DataTable` for INTERACTIVE tabular data — sorting, filtering, pagination,\n * row selection, and server-side or client-side data. Built on TanStack Table;\n * the consumer MUST construct a `useReactTable` instance from\n * `@tanstack/react-table` and pass it to `DataTable.Root` via the `table` prop.\n * Every TanStack utility (`createColumnHelper`, `getCoreRowModel`,\n * `getSortedRowModel`, `getPaginationRowModel`, `getFilteredRowModel`,\n * `useReactTable`, …) is re-exported from `@ngrok/mantle/data-table` so a single\n * import covers both the wrapper components and the TanStack helpers.\n *\n * For STATIC, layout-driven tables (read-only data dumps, simple key/value\n * displays, plain markup tables with no interactivity), use `Table` instead.\n *\n * @see https://mantle.ngrok.com/components/data-table\n *\n * @example\n * Composition:\n * ```\n * DataTable.Root\n * ├── DataTable.Head\n * │   └── DataTable.Row\n * │       ├── DataTable.Header\n * │       │   └── DataTable.HeaderSortButton\n * │       └── DataTable.ActionHeader\n * └── DataTable.Body\n *     ├── DataTable.Row\n *     │   ├── DataTable.Cell\n *     │   └── DataTable.ActionCell\n *     └── DataTable.EmptyRow\n * ```\n *\n * @example\n * Minimal — read-only table with a single sortable column:\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n *\n * type Row = { id: string; name: string };\n *\n * const columnHelper = createColumnHelper<Row>();\n * const columns = [\n *   columnHelper.accessor(\"name\", {\n *     id: \"name\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Name\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n * ];\n *\n * function MyTable({ data }: { data: Row[] }) {\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.length > 0\n *           ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *           : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n * ```\n *\n * @example\n * Sortable + filterable + paginated — with a global text filter and page controls:\n * ```tsx\n * import {\n *   DataTable,\n *   createColumnHelper,\n *   getCoreRowModel,\n *   getFilteredRowModel,\n *   getPaginationRowModel,\n *   getSortedRowModel,\n *   useReactTable,\n * } from \"@ngrok/mantle/data-table\";\n * import { Button } from \"@ngrok/mantle/button\";\n * import { Input } from \"@ngrok/mantle/input\";\n * import { useState } from \"react\";\n *\n * type Payment = { id: string; amount: number; status: \"pending\" | \"succeeded\" | \"failed\"; email: string };\n *\n * const columnHelper = createColumnHelper<Payment>();\n * const columns = [\n *   columnHelper.accessor(\"status\", {\n *     id: \"status\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Status\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n *   columnHelper.accessor(\"email\", {\n *     id: \"email\",\n *     header: (props) => (\n *       <DataTable.Header>\n *         <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n *           Email\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n *   }),\n *   columnHelper.accessor(\"amount\", {\n *     id: \"amount\",\n *     header: (props) => (\n *       <DataTable.Header className=\"text-right\">\n *         <DataTable.HeaderSortButton\n *           column={props.column}\n *           sortingMode=\"alphanumeric\"\n *           className=\"justify-end\"\n *           iconPlacement=\"start\"\n *         >\n *           Amount\n *         </DataTable.HeaderSortButton>\n *       </DataTable.Header>\n *     ),\n *     cell: (props) => (\n *       <DataTable.Cell className=\"text-right tabular-nums\">\n *         {new Intl.NumberFormat(\"en-US\", { style: \"currency\", currency: \"USD\" }).format(props.getValue())}\n *       </DataTable.Cell>\n *     ),\n *   }),\n * ];\n *\n * function PaymentsTable({ data }: { data: Payment[] }) {\n *   const [globalFilter, setGlobalFilter] = useState(\"\");\n *\n *   const table = useReactTable({\n *     data,\n *     columns,\n *     state: { globalFilter },\n *     onGlobalFilterChange: setGlobalFilter,\n *     getCoreRowModel: getCoreRowModel(),\n *     getSortedRowModel: getSortedRowModel(),\n *     getFilteredRowModel: getFilteredRowModel(),\n *     getPaginationRowModel: getPaginationRowModel(),\n *   });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <div className=\"space-y-4\">\n *       <Input\n *         placeholder=\"Filter payments…\"\n *         value={globalFilter}\n *         onChange={(event) => setGlobalFilter(event.target.value)}\n *       />\n *       <DataTable.Root table={table}>\n *         <DataTable.Head />\n *         <DataTable.Body>\n *           {rows.length > 0\n *             ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n *             : <DataTable.EmptyRow>No payments match.</DataTable.EmptyRow>}\n *         </DataTable.Body>\n *       </DataTable.Root>\n *       <div className=\"flex items-center justify-between gap-2\">\n *         <span className=\"text-sm text-muted\">\n *           Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}\n *         </span>\n *         <div className=\"flex gap-2\">\n *           <Button\n *             type=\"button\"\n *             priority=\"neutral\"\n *             onClick={() => table.previousPage()}\n *             disabled={!table.getCanPreviousPage()}\n *           >\n *             Previous\n *           </Button>\n *           <Button\n *             type=\"button\"\n *             priority=\"neutral\"\n *             onClick={() => table.nextPage()}\n *             disabled={!table.getCanNextPage()}\n *           >\n *             Next\n *           </Button>\n *         </div>\n *       </div>\n *     </div>\n *   );\n * }\n * ```\n *\n * @example\n * Row action column — a sticky right-edge cell with a dropdown menu of actions.\n * If the row also has `onClick`, stop propagation on the action cell so clicks\n * don't bubble up and fire the row handler:\n * ```tsx\n * import { DataTable, createColumnHelper } from \"@ngrok/mantle/data-table\";\n * import { DropdownMenu } from \"@ngrok/mantle/dropdown-menu\";\n * import { IconButton } from \"@ngrok/mantle/icon-button\";\n * import { DotsThreeVerticalIcon } from \"@phosphor-icons/react/DotsThreeVertical\";\n *\n * const columnHelper = createColumnHelper<Payment>();\n *\n * const columns = [\n *   // …other columns…\n *   columnHelper.display({\n *     id: \"actions\",\n *     header: () => <DataTable.ActionHeader />,\n *     cell: (props) => (\n *       <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n *         <DropdownMenu.Root>\n *           <DropdownMenu.Trigger asChild>\n *             <IconButton type=\"button\" label=\"Actions\" icon={<DotsThreeVerticalIcon />} />\n *           </DropdownMenu.Trigger>\n *           <DropdownMenu.Content align=\"end\">\n *             <DropdownMenu.Item onSelect={() => copy(props.row.original.id)}>\n *               Copy ID\n *             </DropdownMenu.Item>\n *             <DropdownMenu.Item onSelect={() => refund(props.row.original.id)}>\n *               Refund\n *             </DropdownMenu.Item>\n *           </DropdownMenu.Content>\n *         </DropdownMenu.Root>\n *       </DataTable.ActionCell>\n *     ),\n *   }),\n * ];\n * ```\n *\n * @example\n * Clickable row navigating to a detail page — also render a `<Link>` inside the\n * primary cell so the row is reachable by keyboard and screen readers (a `<tr>`\n * is not focusable):\n * ```tsx\n * import { DataTable } from \"@ngrok/mantle/data-table\";\n * import { Link, href, useNavigate } from \"react-router\";\n *\n * function PaymentsTable({ data }: { data: Payment[] }) {\n *   const navigate = useNavigate();\n *   const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n *   const rows = table.getRowModel().rows;\n *\n *   return (\n *     <DataTable.Root table={table}>\n *       <DataTable.Head />\n *       <DataTable.Body>\n *         {rows.map((row) => (\n *           <DataTable.Row\n *             key={row.id}\n *             row={row}\n *             onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n *           />\n *         ))}\n *       </DataTable.Body>\n *     </DataTable.Root>\n *   );\n * }\n *\n * // The primary column's cell renders a <Link> for keyboard / a11y reachability.\n * columnHelper.accessor(\"email\", {\n *   id: \"email\",\n *   header: (props) => <DataTable.Header>Email</DataTable.Header>,\n *   cell: (props) => (\n *     <DataTable.Cell>\n *       <Link to={href(\"/payments/:id\", { id: props.row.original.id })}>\n *         {props.getValue()}\n *       </Link>\n *     </DataTable.Cell>\n *   ),\n * });\n * ```\n */\nconst DataTable = {\n\t/**\n\t * The root container of the data table component. REQUIRED: pass a\n\t * `useReactTable` instance (from `@tanstack/react-table`, also re-exported\n\t * from `@ngrok/mantle/data-table`) via the `table` prop — every other\n\t * `DataTable.*` part reads from it through context.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableroot\n\t *\n\t * @example\n\t * ```tsx\n\t * const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });\n\t * const rows = table.getRowModel().rows;\n\t *\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>\n\t *     {rows.length > 0\n\t *       ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *       : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t *   </DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * A sticky action cell positioned at the end of each row, typically holding\n\t * an `IconButton` that opens a `DropdownMenu`. Pair with `DataTable.ActionHeader`.\n\t *\n\t * If the row has `onClick`, stop propagation on this cell so clicks on action\n\t * controls don't bubble up and fire the row handler.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactioncell\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => (\n\t *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n\t *       <DropdownMenu.Root>...</DropdownMenu.Root>\n\t *     </DataTable.ActionCell>\n\t *   ),\n\t * });\n\t * ```\n\t */\n\tActionCell,\n\t/**\n\t * A sticky header cell that pairs with `DataTable.ActionCell`, keeping the\n\t * action column aligned across the header and body when scrolling horizontally.\n\t * Use as the `header` for a `columnHelper.display` action column.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableactionheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.display({\n\t *   id: \"actions\",\n\t *   header: () => <DataTable.ActionHeader />,\n\t *   cell: () => (\n\t *     <DataTable.ActionCell onClick={(event) => event.stopPropagation()}>\n\t *       <DropdownMenu.Root>...</DropdownMenu.Root>\n\t *     </DataTable.ActionCell>\n\t *   ),\n\t * });\n\t * ```\n\t */\n\tActionHeader,\n\t/**\n\t * A `<td>` for rendering an individual data cell. Re-exported from\n\t * `Table.Cell`. Every cell rendered by a column's `cell` function should\n\t * be wrapped in this — a raw `<td>` skips mantle typography and padding.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablecell\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"name\", {\n\t *   id: \"name\",\n\t *   header: (props) => <DataTable.Header>Name</DataTable.Header>,\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tCell: Table.Cell,\n\t/**\n\t * The `<tbody>` container for rows of data. Typically wraps a map of\n\t * `DataTable.Row`, with a `DataTable.EmptyRow` fallback when there is\n\t * no data.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablebody\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   {rows.length > 0\n\t *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An empty-state row that spans every column. Render this as the `else`\n\t * branch when `rows.length === 0` to keep the table's frame intact instead\n\t * of collapsing to an empty `<tbody>`.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableemptyrow\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Body>\n\t *   {rows.length > 0\n\t *     ? rows.map((row) => <DataTable.Row key={row.id} row={row} />)\n\t *     : <DataTable.EmptyRow>No results.</DataTable.EmptyRow>}\n\t * </DataTable.Body>\n\t * ```\n\t */\n\tEmptyRow,\n\t/**\n\t * The `<thead>` container that renders column headers automatically from\n\t * `table.getHeaderGroups()`. Does not accept children — headers come from\n\t * each column's `header` definition.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablehead\n\t *\n\t * @example\n\t * ```tsx\n\t * <DataTable.Root table={table}>\n\t *   <DataTable.Head />\n\t *   <DataTable.Body>...</DataTable.Body>\n\t * </DataTable.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A `<th>` optimized for header actions. Wrap each column's header content\n\t * in this; for sortable columns, nest a `DataTable.HeaderSortButton` inside.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheader\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"name\", {\n\t *   id: \"name\",\n\t *   header: (props) => (\n\t *     <DataTable.Header>\n\t *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n\t *         Name\n\t *       </DataTable.HeaderSortButton>\n\t *     </DataTable.Header>\n\t *   ),\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A sortable button toggle for a column header. Clicks cycle through\n\t * sort directions: for `\"alphanumeric\"`, `unsorted → asc → desc → unsorted`;\n\t * for `\"time\"`, `unsorted → desc (newest-first) → asc → unsorted`.\n\t *\n\t * Pass `className=\"justify-end\"` and `iconPlacement=\"start\"` for\n\t * right-aligned numeric columns so the sort icon stays paired with the label.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatableheadersortbutton\n\t *\n\t * @example\n\t * ```tsx\n\t * columnHelper.accessor(\"email\", {\n\t *   id: \"email\",\n\t *   header: (props) => (\n\t *     <DataTable.Header>\n\t *       <DataTable.HeaderSortButton column={props.column} sortingMode=\"alphanumeric\">\n\t *         Email\n\t *       </DataTable.HeaderSortButton>\n\t *     </DataTable.Header>\n\t *   ),\n\t *   cell: (props) => <DataTable.Cell>{props.getValue()}</DataTable.Cell>,\n\t * });\n\t * ```\n\t */\n\tHeaderSortButton,\n\t/**\n\t * A single data table body row rendered from a TanStack Table row instance.\n\t * Does not accept children — cells come from each column's `cell` definition.\n\t *\n\t * When `onClick` is provided, the row automatically receives `cursor-pointer`.\n\t * Pass a different `cursor-*` class via `className` to override. For keyboard\n\t * and screen-reader access, also render a `<Link>` inside the primary cell.\n\t *\n\t * @see https://mantle.ngrok.com/components/data-table#datatablerow\n\t *\n\t * @example\n\t * ```tsx\n\t * const navigate = useNavigate();\n\t *\n\t * {rows.map((row) => (\n\t *   <DataTable.Row\n\t *     key={row.id}\n\t *     row={row}\n\t *     onClick={() => navigate(href(\"/payments/:id\", { id: row.original.id }))}\n\t *   />\n\t * ))}\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tDataTable,\n};\n\ntype DefaultSortIconProps = SvgAttributes & {\n\tdirection: SortDirection | undefined;\n\tmode: SortingMode | undefined;\n};\n\nfunction DefaultSortIcon({ direction, mode, ...props }: DefaultSortIconProps) {\n\tif (direction === \"unsorted\" || !mode || !direction) {\n\t\treturn <svg aria-hidden {...props} />;\n\t}\n\n\treturn <SortIcon mode={mode} direction={direction} {...props} />;\n}\n\n/**\n * Toggle the sorting direction of a column.\n * This ordering is typically toggled by clicking the column header.\n *\n * @example\n * ```md\n * Each click cycles through...\n *\n * For alphanumeric sorting:\n *   unsorted ➡️ ascending ➡️ descending ➡️ unsorted ➡️ ...\n *\n * For time sorting:\n *   unsorted ➡️ newest-to-oldest ➡️ oldest-to-newest ➡️ unsorted ➡️ ...\n *\n *   this is equivalent to the inverse of alphanumeric sorting, or\n *   unsorted ➡️ descending ➡️ ascending ➡️ unsorted ➡️ ...\n * ```\n */\nfunction toggleNextSortingDirection<TData, TValue>(\n\tcolumn: Column<TData, TValue>,\n\tsortingMode: SortingMode,\n) {\n\tif (!column.getCanSort()) {\n\t\treturn;\n\t}\n\n\tconst sortDirection = column.getIsSorted();\n\tconst currentSortDirection: SortDirection =\n\t\ttypeof sortDirection === \"string\" ? sortDirection : \"unsorted\";\n\n\tconst nextSortDirection = getNextSortDirection(currentSortDirection, sortingMode);\n\n\tswitch (nextSortDirection) {\n\t\tcase \"unsorted\":\n\t\t\tcolumn.clearSorting();\n\t\t\treturn;\n\t\tcase \"asc\":\n\t\t\tcolumn.toggleSorting(false);\n\t\t\treturn;\n\t\tcase \"desc\":\n\t\t\tcolumn.toggleSorting(true);\n\t\t\treturn;\n\t\tdefault:\n\t\t\treturn;\n\t}\n}\n"],"mappings":"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"}

package/dist/dialog.d.ts

@@ -1,5 +1,5 @@
-import { n as isDialogOverlayTarget, t as Root } from "./primitive-D_-h74Kt.js";
-import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
+import { n as isDialogOverlayTarget, t as Root } from "./primitive-FoWela9a.js";
+import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
 import { ComponentProps } from "react";
 
 //#region src/components/dialog/dialog.d.ts
@@ -121,7 +121,7 @@ declare const Dialog: {
     ({
       className,
       ...props
-    }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"div">): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -192,7 +192,7 @@ declare const Dialog: {
       label,
       appearance,
       ...props
-    }: CloseIconButtonProps): import("react/jsx-runtime").JSX.Element;
+    }: CloseIconButtonProps): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -302,7 +302,7 @@ declare const Dialog: {
     ({
       className,
       ...props
-    }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"div">): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -340,7 +340,7 @@ declare const Dialog: {
       className,
       children,
       ...props
-    }: ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"div">): import("react").JSX.Element;
     displayName: string;
   };
   /**

package/dist/{dropdown-menu-BgYk4L8o.d.ts → dropdown-menu-BqdyTFLu.d.ts}

@@ -250,7 +250,7 @@ declare const DropdownMenu: {
     ({
       className,
       ...props
-    }: ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"span">): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -344,4 +344,4 @@ declare const DropdownMenu: {
 };
 //#endregion
 export { DropdownMenu as t };
-//# sourceMappingURL=dropdown-menu-BgYk4L8o.d.ts.map
+//# sourceMappingURL=dropdown-menu-BqdyTFLu.d.ts.map

package/dist/dropdown-menu.d.ts

@@ -1,2 +1,2 @@
-import { t as DropdownMenu } from "./dropdown-menu-BgYk4L8o.js";
+import { t as DropdownMenu } from "./dropdown-menu-BqdyTFLu.js";
 export { DropdownMenu };

package/dist/empty.d.ts

@@ -64,7 +64,7 @@ declare const Empty: {
       children,
       className,
       ...props
-    }: ComponentProps<"div"> & WithAsChild): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -90,7 +90,7 @@ declare const Empty: {
       className,
       svg,
       ...props
-    }: EmptyIconProps): import("react/jsx-runtime").JSX.Element;
+    }: EmptyIconProps): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -121,7 +121,7 @@ declare const Empty: {
       children,
       className,
       ...props
-    }: HTMLAttributes<HTMLHeadingElement> & WithAsChild): import("react/jsx-runtime").JSX.Element;
+    }: HTMLAttributes<HTMLHeadingElement> & WithAsChild): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -149,7 +149,7 @@ declare const Empty: {
       children,
       className,
       ...props
-    }: ComponentProps<"div"> & WithAsChild): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
     displayName: string;
   };
   /**
@@ -175,7 +175,7 @@ declare const Empty: {
       children,
       className,
       ...props
-    }: ComponentProps<"div"> & WithAsChild): import("react/jsx-runtime").JSX.Element;
+    }: ComponentProps<"div"> & WithAsChild): import("react").JSX.Element;
     displayName: string;
   };
 };

package/dist/field.d.ts

@@ -1,5 +1,5 @@
 import { t as WithAsChild } from "./as-child-uN_018tj.js";
-import { n as IconButtonProps } from "./icon-button-ntupABbM.js";
+import { n as IconButtonProps } from "./icon-button-Ct3A7aoj.js";
 import { a as ValidationState, c as parseValidation, i as ValidationProp, l as resolveValidation, n as ParsedValidation, o as WithValidation, r as Validation, s as isAriaInvalid, t as AriaInvalid } from "./validation-xyX_6kph.js";
 import { t as Slot } from "./index-BL5WVva_.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";