@acronis-platform/ui-react 0.62.0 → 2.0.0

package/dist/react.js.map

@@ -1 +1 @@
-{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"react.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/components/ui/alert/alert.d.ts

@@ -1,14 +1,45 @@
 import { VariantProps } from 'class-variance-authority';
+import { ButtonIconProps } from '../button-icon';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
-    variant?: "info" | "success" | "warning" | "critical" | "destructive" | "ai" | "neutral" | null | undefined;
+    variant?: "info" | "success" | "warning" | "critical" | "danger" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type AlertVariant = NonNullable<VariantProps<typeof alertVariants>['variant']>;
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants> {
 }
+/**
+ * A status banner: neutral surface, a status-colored border, and a status line
+ * down the leading edge. Compose it from `AlertIcon`, `AlertContent`
+ * (`AlertText` + `AlertTitle` / `AlertDescription`, optionally `AlertActions`)
+ * and `AlertClose`.
+ */
 declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The leading status icon. Renders the variant's own icon when given no
+ * `children`; pass children to substitute a different glyph.
+ */
 declare const AlertIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * The title + description block. Its own vertical padding is what keeps the
+ * text aligned with the icon, so keep the title and description inside it
+ * rather than directly under `AlertContent`.
+ */
+declare const AlertText: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Action buttons under the text. Place inside `AlertContent` (after
+ * `AlertText`), as the Figma does — the row wraps when it runs out of width.
+ */
 declare const AlertActions: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Alert, AlertIcon, AlertContent, AlertTitle, AlertDescription, AlertActions, };
+export interface AlertCloseProps extends Omit<ButtonIconProps, 'children' | 'variant' | 'render' | 'aria-label'> {
+    /** Accessible name for the dismiss control. */
+    ariaLabel?: string;
+}
+/**
+ * The trailing dismiss control. Rendering it is what makes an alert
+ * dismissable — wire `onClick` to remove the alert. Name it with `ariaLabel`.
+ */
+declare const AlertClose: React.ForwardRefExoticComponent<AlertCloseProps & React.RefAttributes<HTMLButtonElement>>;
+export { Alert, AlertIcon, AlertContent, AlertText, AlertTitle, AlertDescription, AlertActions, AlertClose, alertVariants, };

package/dist/src/components/ui/alert/index.d.ts

@@ -1,2 +1,2 @@
-export { Alert, AlertIcon, AlertContent, AlertTitle, AlertDescription, AlertActions, } from './alert';
-export type { AlertProps } from './alert';
+export { Alert, AlertIcon, AlertContent, AlertText, AlertTitle, AlertDescription, AlertActions, AlertClose, alertVariants, } from './alert';
+export type { AlertProps, AlertCloseProps, AlertVariant } from './alert';

package/dist/src/components/ui/button/button.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "destructive" | "ai" | "secondary" | "default" | "ghost" | null | undefined;
+    variant?: "ghost" | "secondary" | "default" | "destructive" | "ai" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
     /**

package/dist/src/components/ui/button-group/button-group.d.ts

@@ -0,0 +1,38 @@
+import { ToolbarButtonProps, ToolbarRootProps } from '@base-ui/react/toolbar';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const buttonGroupVariants: (props?: ({
+    variant?: "outlined" | "inlined" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const buttonGroupItemVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+export interface ButtonGroupProps extends Omit<ToolbarRootProps, 'className' | 'orientation'>, VariantProps<typeof buttonGroupVariants> {
+    className?: string;
+}
+/**
+ * A cluster of related icon-only actions sharing a single bordered box.
+ *
+ * Renders a `role="toolbar"` container: the group is one Tab stop and the
+ * arrow keys move between items. Give it an accessible name (`aria-label` or
+ * `aria-labelledby`) describing what the actions have in common.
+ */
+declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** Mirrors the Figma `ButtonGroupItem` `order` variant. */
+export type ButtonGroupItemOrder = 'first' | 'middle' | 'last';
+export interface ButtonGroupItemProps extends Omit<ToolbarButtonProps, 'className'> {
+    className?: string;
+    /**
+     * Position within the group, mirroring the Figma `order` variant. Controls
+     * one thing: whether the trailing separator is drawn (`last` omits it).
+     *
+     * Leave it unset — position is derived from the DOM. Only pass it when each
+     * item is wrapped in another element, which defeats that derivation.
+     */
+    order?: ButtonGroupItemOrder;
+}
+/**
+ * A single action inside a `ButtonGroup`. The icon is passed as `children`;
+ * provide an `aria-label` (or `aria-labelledby`) so the control has an
+ * accessible name.
+ */
+declare const ButtonGroupItem: React.ForwardRefExoticComponent<Omit<ButtonGroupItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export { ButtonGroup, ButtonGroupItem, buttonGroupVariants, buttonGroupItemVariants, };

package/dist/src/components/ui/button-group/index.d.ts

@@ -0,0 +1 @@
+export { ButtonGroup, ButtonGroupItem, buttonGroupVariants, buttonGroupItemVariants, type ButtonGroupProps, type ButtonGroupItemProps, type ButtonGroupItemOrder, } from './button-group';

package/dist/src/components/ui/button-icon/button-icon.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonIconVariants: (props?: ({
-    variant?: "secondary" | "ghost" | null | undefined;
+    variant?: "ghost" | "secondary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonIconProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonIconVariants> {
     /**

package/dist/src/components/ui/button-icon-menu/button-icon-menu.d.ts

@@ -0,0 +1,28 @@
+import { useRender } from '@base-ui/react/use-render';
+import * as React from 'react';
+export interface ButtonIconMenuProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /**
+     * Whether the associated menu is open. Applies the open (`*-active`)
+     * treatment and reflects `aria-expanded`. Control this in sync with the menu
+     * you trigger.
+     */
+    open?: boolean;
+    /**
+     * Accessible name for the trigger. The button is icon-only, so it has no text
+     * to name it — pass a localized string here.
+     */
+    ariaLabel?: string;
+    /**
+     * Replace the rendered `<button>` with another element or component
+     * (Base UI composition). Accepts a React element or a render function —
+     * the component's props and class names are merged onto it.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * Icon-only button that opens a menu of actions — the kebab / "more options"
+ * trigger. The glyph is fixed (Ellipsis); for any other icon use `ButtonIcon`.
+ * Pair it with the menu it controls and keep the `open` prop in sync.
+ */
+declare const ButtonIconMenu: React.ForwardRefExoticComponent<ButtonIconMenuProps & React.RefAttributes<HTMLButtonElement>>;
+export { ButtonIconMenu };

package/dist/src/components/ui/button-icon-menu/index.d.ts

@@ -0,0 +1 @@
+export { ButtonIconMenu, type ButtonIconMenuProps } from './button-icon-menu';

package/dist/src/components/ui/button-menu/button-menu.d.ts

@@ -2,7 +2,7 @@ import { useRender } from '@base-ui/react/use-render';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonMenuVariants: (props?: ({
-    variant?: "primary" | "secondary" | null | undefined;
+    variant?: "secondary" | "primary" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonMenuProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'>, VariantProps<typeof buttonMenuVariants> {
     /**

package/dist/src/components/ui/calendar-panel/calendar-panel.d.ts

@@ -36,9 +36,9 @@ interface CalendarPanelSharedProps extends Omit<React.HTMLAttributes<HTMLDivElem
     onMonthChange?: (month: Date) => void;
     /** Days that cannot be selected. */
     disabled?: Matcher | Matcher[];
-    /** Minimum number of selectable days (`multiple` / `range`; ignored for `single`). */
+    /** Minimum count (`multiple` / `range`; ignored for `single`): for `multiple`, the number of selected dates; for `range`, the number of nights between start and end. */
     min?: number;
-    /** Maximum number of selectable days (`multiple` / `range`; ignored for `single`). */
+    /** Maximum count (`multiple` / `range`; ignored for `single`): for `multiple`, the number of selected dates; for `range`, the number of nights between start and end. */
     max?: number;
     /** Render the leading/trailing days of the adjacent months. */
     showOutsideDays?: boolean;

package/dist/src/components/ui/chip/chip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const chipVariants: (props?: ({
-    variant?: "removable" | "selectable" | null | undefined;
+    variant?: "removable" | "selectable" | "operational" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof chipVariants> {
     /** Optional leading icon, rendered at 16px before the label. */

package/dist/src/components/ui/data-table/data-table-bulk-actions-bar.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { Table } from '@tanstack/react-table';
+interface DataTableBulkActionsBarProps<TData> {
+    table: Table<TData>;
+    /**
+     * Bulk actions offered for the current selection — rendered leading, ahead
+     * of the trailing summary/Deselect control. Wrapped in a native `<fieldset
+     * disabled>` while nothing is selected, so every nested control (a `Button`
+     * renders a plain `<button>`) picks up the disabled state and styling for
+     * free — no per-action wiring needed. Each action reads the selection off
+     * the same `table` instance (`table.getSelectedRowModel().rows`).
+     */
+    children?: ReactNode;
+    /** Builds the trailing selection summary from the selected-row count. */
+    selectedLabel?: (count: number) => string;
+    /** Label of the trailing control that clears the selection. */
+    clearLabel?: string;
+    /**
+     * Trailing summary shown in place of the selection summary while nothing is
+     * selected — e.g. `"25 of 1250 items loaded"`. Omit to render nothing in
+     * that state.
+     */
+    loadedLabel?: ReactNode;
+}
+export declare function DataTableBulkActionsBar<TData>({ table, children, selectedLabel, clearLabel, loadedLabel, }: DataTableBulkActionsBarProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/components/ui/data-table/data-table-column-header.d.ts

@@ -3,6 +3,11 @@ import * as React from 'react';
 interface DataTableColumnHeaderProps<TData, TValue> extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     column: Column<TData, TValue>;
     title: string;
+    /**
+     * Builds the accessible label of the sort toggle from the column title.
+     * Override to localize.
+     */
+    sortLabel?: (title: string) => string;
 }
-export declare function DataTableColumnHeader<TData, TValue>({ column, title, className, ...props }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableColumnHeader<TData, TValue>({ column, title, sortLabel, className, ...props }: DataTableColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/ui/data-table/data-table-expand-trigger.d.ts

@@ -3,6 +3,10 @@ import * as React from 'react';
 interface DataTableExpandTriggerProps<TData> extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     /** The row this trigger toggles. */
     row: Row<TData>;
+    /** Accessible name while the row is expanded. Override to localize. */
+    collapseLabel?: string;
+    /** Accessible name while the row is collapsed. Override to localize. */
+    expandLabel?: string;
 }
 export declare const DataTableExpandTrigger: <TData>(props: DataTableExpandTriggerProps<TData> & {
     ref?: React.Ref<HTMLButtonElement>;

package/dist/src/components/ui/data-table/data-table-pagination.d.ts

@@ -3,6 +3,20 @@ interface DataTablePaginationProps<TData> {
     table: Table<TData>;
     /** Page-size options offered in the rows-per-page select. */
     pageSizeOptions?: number[];
+    /** Label of the rows-per-page select (also its accessible name). */
+    rowsPerPageLabel?: string;
+    /** Accessible name of the first-page control. */
+    firstPageLabel?: string;
+    /** Accessible name of the previous-page control. */
+    previousPageLabel?: string;
+    /** Accessible name of the next-page control. */
+    nextPageLabel?: string;
+    /** Accessible name of the last-page control. */
+    lastPageLabel?: string;
+    /** Builds the page indicator from the 1-based page number and page count. */
+    pageLabel?: (page: number, pageCount: number) => string;
+    /** Builds the leading selection summary from the selected and total counts. */
+    summaryLabel?: (selectedRows: number, totalRows: number) => string;
 }
-export declare function DataTablePagination<TData>({ table, pageSizeOptions, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTablePagination<TData>({ table, pageSizeOptions, rowsPerPageLabel, firstPageLabel, previousPageLabel, nextPageLabel, lastPageLabel, pageLabel, summaryLabel, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/ui/data-table/data-table-selection.d.ts

@@ -0,0 +1,11 @@
+import { Table } from '@tanstack/react-table';
+/**
+ * Whether any row is currently selected — the single threshold that decides
+ * between per-row actions and bulk actions, per the design (Figma 5916-10470
+ * / 5916-10745 / 5916-11716 / 5916-11286 / 5916-11991): a single selected row
+ * already switches to the bulk scope (its own row actions hide, and
+ * `DataTableBulkActionsBar` enables), same as two or more. `TableActionsCell`
+ * takes this as its `bulkSelectionActive` prop, so the threshold doesn't have
+ * to be re-derived per consumer.
+ */
+export declare function isBulkSelectionActive<TData>(table: Table<TData>): boolean;

package/dist/src/components/ui/data-table/data-table-view-options.d.ts

@@ -1,6 +1,7 @@
 import { Table } from '@tanstack/react-table';
-interface DataTableViewOptionsProps<TData> {
+import { TableViewOptionsProps } from '../table';
+interface DataTableViewOptionsProps<TData> extends Pick<TableViewOptionsProps, 'triggerLabel' | 'iconOnly' | 'triggerAriaLabel'> {
     table: Table<TData>;
 }
-export declare function DataTableViewOptions<TData>({ table, }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTableViewOptions<TData>({ table, ...triggerProps }: DataTableViewOptionsProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/ui/data-table/data-table.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ReactNode } from 'react';
-import { Cell, Column, ColumnDef, ColumnSizingState, OnChangeFn, Row, RowData, SortingState, Table as TanstackTable, VisibilityState } from '@tanstack/react-table';
+import { Cell, Column, ColumnDef, ColumnOrderState, ColumnSizingState, OnChangeFn, Row, RowData, RowSelectionState, SortingState, Table as TanstackTable, VisibilityState } from '@tanstack/react-table';
 declare module '@tanstack/react-table' {
     interface ColumnMeta<TData extends RowData, TValue> {
         /** Pin the column to a table edge (sticky while the grid scrolls horizontally). */
@@ -25,6 +25,27 @@ export declare function getResizeKeyboardStep(key: string, currentSize: number,
     min: number;
     max: number;
 }): number | undefined;
+/**
+ * Moves `from` to `to`'s position in a `columnOrder` array (the drop semantics
+ * of the header drag gesture: the dragged column lands where the drop target
+ * sits, pushing it aside). Returns `order` unchanged when either id is absent,
+ * so a drop on a column that isn't part of the order (e.g. one added while the
+ * gesture was in flight) is a no-op rather than a reshuffle.
+ */
+export declare function reorderColumn(order: string[], from: string, to: string): string[];
+/** One line of the header hover tooltip: a capability and the gesture for it. */
+export interface DataTableHeaderHint {
+    /** The capability, rendered in bold (e.g. `Sort column`). */
+    label: string;
+    /** The gesture that triggers it (e.g. `Click`). */
+    action: string;
+}
+/** Copy of the header hover tooltip, one entry per column capability. */
+export interface DataTableHeaderHints {
+    sort: DataTableHeaderHint;
+    reorder: DataTableHeaderHint;
+    resize: DataTableHeaderHint;
+}
 type DataTableDataSourceProps<TData, TValue> = {
     columns: ColumnDef<TData, TValue>[];
     data: TData[];
@@ -44,7 +65,9 @@ type DataTableDataSourceProps<TData, TValue> = {
      * only used to build DataTable's own instance) and the following props
      * no-ops (configure the equivalent directly on the external instance
      * instead): `columnVisibility`, `onColumnVisibilityChange`,
-     * `onColumnSizingChange`, `enableColumnResizing`, `getRowCanExpand`,
+     * `onColumnSizingChange`, `enableColumnResizing`,
+     * `enableColumnReordering`, `columnOrder`, `onColumnOrderChange`,
+     * `getRowCanExpand`,
      * `manualSorting`, `sorting`, `onSortingChange`, `paginationMode`,
      * `onLoadMore`, `loadMoreRootMargin`, `hasNextPage`, `isLoadingMore`.
      * `meta.pin`-driven column pinning is also skipped — pin/unpin the
@@ -77,6 +100,20 @@ interface DataTableOwnProps<TData> {
     enableColumnResizing?: boolean;
     /** Passthrough for the `columnSizing` state so a consumer can persist widths. */
     onColumnSizingChange?: OnChangeFn<ColumnSizingState>;
+    /**
+     * Opt in to column reordering by dragging a header cell onto another one
+     * (native HTML5 drag-and-drop driving TanStack's `columnOrder`). Pinned
+     * columns are excluded — they're anchored to a table edge by definition.
+     * Pointer-only, matching the design: there is no keyboard equivalent yet.
+     */
+    enableColumnReordering?: boolean;
+    /**
+     * Controlled column-order state — pass this (with `onColumnOrderChange`) to
+     * persist or share the order. Uncontrolled (internal state) when omitted.
+     */
+    columnOrder?: ColumnOrderState;
+    /** Passthrough for the `columnOrder` state; pairs with `columnOrder`. */
+    onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
     /**
      * Controlled column-visibility state — pass this (with
      * `onColumnVisibilityChange`) to share one visibility state with an
@@ -86,6 +123,15 @@ interface DataTableOwnProps<TData> {
     columnVisibility?: VisibilityState;
     /** Passthrough for the `columnVisibility` state; pairs with `columnVisibility`. */
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    /**
+     * Controlled row-selection state — pass this (with `onRowSelectionChange`)
+     * to share one selection state with an external `useReactTable` instance
+     * (e.g. a composed toolbar/bulk-actions bar). Uncontrolled (internal state)
+     * when omitted.
+     */
+    rowSelection?: RowSelectionState;
+    /** Passthrough for the `rowSelection` state; pairs with `rowSelection`. */
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
     /**
      * Opt out of client-side sorting — pass already-sorted `data` and drive
      * sorting via `sorting`/`onSortingChange` (e.g. mapped to a server query by
@@ -154,12 +200,51 @@ interface DataTableOwnProps<TData> {
     loadMoreRootMargin?: string;
     /** Whether more rows are available to load. `paginationMode="infinite"` only. */
     hasNextPage?: boolean;
+    /**
+     * Accessible name of a column's resize handle. Override to localize.
+     * `enableColumnResizing` only.
+     */
+    resizeColumnLabel?: string;
+    /**
+     * Text of the default empty-state row. Ignored when `renderEmptyState` is
+     * given. Override to localize.
+     */
+    emptyLabel?: string;
     /**
      * Whether a load is in flight — suppresses further `onLoadMore` calls and
      * renders a trailing loading row. `paginationMode="infinite"` only.
      */
     isLoadingMore?: boolean;
+    /**
+     * Hide the trailing sticky action column — the column-visibility cog in the
+     * header and each row's overflow-actions ellipsis. Shown by default. A
+     * no-op when an external `table` is passed (build the column into that
+     * instance's own `columns` instead).
+     */
+    hideActionColumn?: boolean;
+    /**
+     * Renders the content of a row's overflow-actions menu (e.g. `Edit`/
+     * `Delete` items), opened from the ellipsis trigger in the trailing action
+     * column. Omit to render that row without a trigger — the 48px column is
+     * still reserved. Suppressed (like the trigger itself) while a bulk
+     * selection is active, per `TableActionsCell`.
+     */
+    renderRowActions?: (row: Row<TData>) => ReactNode;
+    /** Accessible name of a row's overflow-actions trigger. Override to localize. */
+    rowActionsLabel?: string;
+    /**
+     * Accessible name of the action column's column-visibility trigger.
+     * Override to localize.
+     */
+    columnSettingsLabel?: string;
+    /**
+     * Copy of the tooltip shown while a header cell is hovered/focused — one
+     * line per capability that column actually has (sort/reorder/resize).
+     * Override (per capability) to localize; a column with no capability shows
+     * no tooltip at all.
+     */
+    headerHints?: Partial<DataTableHeaderHints>;
 }
 export type DataTableProps<TData, TValue = unknown> = DataTableOwnProps<TData> & DataTableDataSourceProps<TData, TValue>;
-export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, isLoadingMore, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData, TValue = unknown>({ columns, data, table: externalTable, getRowCanExpand, renderExpandedRow, striped, bordered, highlightCurrentRow, skeleton, skeletonRows, enableColumnResizing, onColumnSizingChange, enableColumnReordering, columnOrder: controlledColumnOrder, onColumnOrderChange, columnVisibility: controlledColumnVisibility, onColumnVisibilityChange, rowSelection: controlledRowSelection, onRowSelectionChange, manualSorting, sorting: controlledSorting, onSortingChange, renderRow, renderEmptyState, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, resizeColumnLabel, emptyLabel, isLoadingMore, hideActionColumn, renderRowActions, rowActionsLabel, columnSettingsLabel, headerHints, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/src/components/ui/data-table/data-table.docs.d.ts

@@ -14,7 +14,8 @@ export interface DataTableProps {
      * instance as-is. Makes `columns`/`data` unnecessary and the following props
      * no-ops (configure the equivalent on the external instance instead):
      * `columnVisibility`, `onColumnVisibilityChange`, `onColumnSizingChange`,
-     * `enableColumnResizing`, `getRowCanExpand`, `manualSorting`, `sorting`,
+     * `enableColumnResizing`, `enableColumnReordering`, `columnOrder`,
+     * `onColumnOrderChange`, `getRowCanExpand`, `manualSorting`, `sorting`,
      * `onSortingChange`, `paginationMode`, `onLoadMore`, `loadMoreRootMargin`,
      * `hasNextPage`, `isLoadingMore`. `meta.pin`-driven column pinning is also
      * skipped — pin/unpin the caller's own instance via TanStack's `column.pin()`.
@@ -39,8 +40,26 @@ export interface DataTableProps {
      * trailing edge of each resizable header (TanStack's native `columnResizing`).
      */
     enableColumnResizing?: boolean;
+    /**
+     * Accessible name of a column's resize handle (default `'Resize column'`).
+     * `enableColumnResizing` only. Override to localize.
+     */
+    resizeColumnLabel?: string;
     /** Passthrough for the `columnSizing` state so a consumer can persist widths. */
     onColumnSizingChange?: (updater: unknown) => void;
+    /**
+     * Opt in to column reordering by dragging a header cell onto another one
+     * (native HTML5 drag-and-drop driving TanStack's `columnOrder`). Pinned
+     * columns are excluded. Pointer-only — there is no keyboard equivalent yet.
+     */
+    enableColumnReordering?: boolean;
+    /**
+     * Controlled column-order state — pass this (with `onColumnOrderChange`) to
+     * persist or share the order. Uncontrolled (internal state) when omitted.
+     */
+    columnOrder?: string[];
+    /** Passthrough for the `columnOrder` state; pairs with `columnOrder`. */
+    onColumnOrderChange?: (updater: unknown) => void;
     /**
      * Controlled column-visibility state — pass this (with
      * `onColumnVisibilityChange`) to share one visibility state with an external
@@ -49,6 +68,15 @@ export interface DataTableProps {
     columnVisibility?: unknown;
     /** Passthrough for the `columnVisibility` state; pairs with `columnVisibility`. */
     onColumnVisibilityChange?: (updater: unknown) => void;
+    /**
+     * Controlled row-selection state — pass this (with `onRowSelectionChange`) to
+     * share one selection state with an external `useReactTable` instance (e.g. a
+     * composed toolbar/bulk-actions bar). Uncontrolled (internal state) when
+     * omitted.
+     */
+    rowSelection?: unknown;
+    /** Passthrough for the `rowSelection` state; pairs with `rowSelection`. */
+    onRowSelectionChange?: (updater: unknown) => void;
     /**
      * Opt out of client-side sorting — pass already-sorted `data` and drive
      * sorting via `sorting`/`onSortingChange` (e.g. mapped to a server query by
@@ -79,6 +107,11 @@ export interface DataTableProps {
     renderEmptyState?: (context: {
         hasFilters: boolean;
     }) => ReactNode;
+    /**
+     * Text of the default empty-state row (default `'No results.'`). Ignored when
+     * `renderEmptyState` is given. Override to localize.
+     */
+    emptyLabel?: string;
     /**
      * `'page'` (default) keeps today's client-paginated behavior. `'infinite'`
      * omits the paginated row model — `data` is the full accumulated array the
@@ -103,4 +136,31 @@ export interface DataTableProps {
      * renders a trailing loading row. `paginationMode="infinite"` only.
      */
     isLoadingMore?: boolean;
+    /**
+     * Hide the trailing sticky action column — the column-visibility cog in the
+     * header and each row's overflow-actions ellipsis. Shown by default. A
+     * no-op when `table` is passed.
+     */
+    hideActionColumn?: boolean;
+    /**
+     * Renders the content of a row's overflow-actions menu, opened from the
+     * ellipsis trigger in the trailing action column. Omit to render that row
+     * without a trigger — the 48px column is still reserved.
+     */
+    renderRowActions?: (row: unknown) => ReactNode;
+    /** Accessible name of a row's overflow-actions trigger. */
+    rowActionsLabel?: string;
+    /** Accessible name of the action column's column-visibility trigger. */
+    columnSettingsLabel?: string;
+    /**
+     * Copy of the tooltip shown while a header cell is hovered/focused — one
+     * `{ label, action }` line per capability that column actually has. Merged
+     * over the defaults (`sort`: "Sort column"/"Click", `reorder`: "Reorder
+     * column"/"Drag", `resize`: "Resize column"/"Drag border"), so any subset can
+     * be overridden to localize; a column with no capability shows no tooltip.
+     */
+    headerHints?: Partial<Record<'sort' | 'reorder' | 'resize', {
+        label: string;
+        action: string;
+    }>>;
 }

package/dist/src/components/ui/data-table/index.d.ts

@@ -1,4 +1,6 @@
-export { DataTable, type DataTableProps, getCellStyle, getPinnedStyle, getColumnWidth, } from './data-table';
+export { DataTable, type DataTableHeaderHint, type DataTableHeaderHints, type DataTableProps, getCellStyle, getPinnedStyle, getColumnWidth, reorderColumn, } from './data-table';
+export { DataTableBulkActionsBar } from './data-table-bulk-actions-bar';
+export { isBulkSelectionActive } from './data-table-selection';
 export { DataTableColumnHeader } from './data-table-column-header';
 export { DataTableExpandTrigger } from './data-table-expand-trigger';
 export { DataTablePagination } from './data-table-pagination';

package/dist/src/components/ui/date-range-picker/date-range-picker-utils.d.ts

@@ -1,32 +1,26 @@
+import { DayPickerLocale } from 'react-day-picker';
 /** A start/end date range. Both ends are optional (a partial range while editing). */
 export interface DateRange {
     from?: Date;
     to?: Date;
 }
-/** The date display / parse pattern used by the trigger and the editable fields. */
+/**
+ * The date display pattern used by the trigger. Fixed month-day-year order
+ * regardless of `locale` — only the month/day/era token *names* localize (see
+ * {@link formatDate}); true locale-aware reordering is a separate, bigger
+ * change (tracked, not done here).
+ */
 export declare const DISPLAY_FORMAT = "MMM d, yyyy";
 /**
  * Format a date with {@link DISPLAY_FORMAT}, returning `''` for a missing or
  * invalid `Date`. `date-fns`' `format` throws a `RangeError` on an invalid
  * `Date` (e.g. `new Date('garbage')`), so the `isValid` guard is load-bearing —
  * a truthy-but-invalid `Date` must not reach `format`.
- */
-export declare function formatDate(date: Date | undefined): string;
-/**
- * Parse a {@link DISPLAY_FORMAT} string into a `Date`, or `undefined` when the
- * text is empty, partial (mid-type), or not a real calendar date
- * (e.g. `"Feb 30, 2026"`). The result is normalized to the start of the day so
- * it round-trips with {@link formatDate} — `date-fns`' `parse` fills the unspecified
- * time-of-day from its reference date, which would otherwise leave a "now" time
- * on the value and break equality with the midnight dates the calendar emits.
  *
- * NOTE: the pattern is locale-fixed (US-style `MMM d, yyyy`), matching the
- * `InputDatePicker` trigger. Locale-aware parsing is not yet supported — a
- * known limitation to revisit once the design tier lands.
+ * `locale` only translates the month name via `date-fns`' `format` `options`
+ * — it does not reorder `DISPLAY_FORMAT`'s fixed month-day-year pattern.
  */
-export declare function parseDate(text: string): Date | undefined;
-/** Structural equality of two ranges by their endpoints' timestamps. */
-export declare function rangesEqual(a: DateRange, b: DateRange): boolean;
+export declare function formatDate(date: Date | undefined, locale?: DayPickerLocale): string;
 /**
  * Return a range whose `from` is never after its `to`. When both ends are set
  * and inverted (e.g. the user typed an end date earlier than the start), the two