@acronis-platform/ui-react 1.0.0 → 3.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/accordion-container/accordion-container.d.ts

@@ -0,0 +1,44 @@
+import { Collapsible as CollapsiblePrimitive } from '@base-ui/react/collapsible';
+import * as React from 'react';
+interface AccordionContainerState {
+    open: boolean;
+}
+type AccordionContainerChildren = React.ReactNode | ((state: AccordionContainerState) => React.ReactNode);
+type AccordionContainerBaseProps = Omit<React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>, 'children'>;
+interface AccordionContainerProps extends AccordionContainerBaseProps {
+    /**
+     * Whether the disclosure exists at all. When `false`, `children` render
+     * directly with no trigger and no panel wrapper — the Figma
+     * `isCollapsable=false` state has no disclosure UI.
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Accepts a plain node, or a render-prop function receiving the current
+     * `{ open }` state — for content outside `AccordionContainer.Content` (e.g.
+     * a header) that still needs to know whether the panel is expanded, even
+     * when this component owns the open state itself (uncontrolled).
+     */
+    children?: AccordionContainerChildren;
+}
+interface AccordionContainerContextValue {
+    collapsible: boolean;
+    open: boolean;
+}
+/**
+ * Reads whether the nearest `AccordionContainer` ancestor is `collapsible`
+ * and, if so, its current `open` state — for content outside
+ * `AccordionContainer.Content` (e.g. a header) that needs to react to the
+ * panel's state without a dedicated prop, such as `CardHeader` dropping its
+ * bottom divider while collapsed.
+ */
+declare const useAccordionContainerContext: () => AccordionContainerContextValue;
+type AccordionContainerTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
+declare const AccordionContainerTrigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type AccordionContainerContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Panel>;
+declare const AccordionContainerContent: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const AccordionContainerRoot: React.ForwardRefExoticComponent<AccordionContainerProps & React.RefAttributes<HTMLDivElement>> & {
+    Trigger: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsibleTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+    Content: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').CollapsiblePanelProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+};
+export { AccordionContainerRoot as AccordionContainer, AccordionContainerTrigger, AccordionContainerContent, useAccordionContainerContext, type AccordionContainerProps, type AccordionContainerTriggerProps, type AccordionContainerContentProps, type AccordionContainerState, type AccordionContainerContextValue, };

package/dist/src/components/ui/accordion-container/index.d.ts

@@ -0,0 +1 @@
+export { AccordionContainer, AccordionContainerTrigger, AccordionContainerContent, useAccordionContainerContext, type AccordionContainerProps, type AccordionContainerTriggerProps, type AccordionContainerContentProps, type AccordionContainerState, type AccordionContainerContextValue, } from './accordion-container';

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

@@ -4,19 +4,38 @@ import * as React from 'react';
 declare const avatarVariants: (props?: ({
     color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
-}
-/**
- * A user/entity avatar: a colored circle showing an image or initials. Compose
- * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.
- */
-declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
 /** The avatar image; hidden by Base UI until it loads, revealing the fallback. */
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarImageProps, "ref"> & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
 export type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
 /** Shown when there's no image (or it fails) — typically the user's initials. */
 declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<import('@base-ui/react').AvatarFallbackProps, "ref"> & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, VariantProps<typeof avatarVariants> {
+    /**
+     * Selects the auto-rendered fallback content when no `children` are
+     * composed: initials (`label`) or an `icon`. Ignored once `children` (e.g.
+     * `AvatarImage`/`AvatarFallback`) are composed directly — including an
+     * explicit `null`, which renders an empty circle.
+     */
+    variant?: 'text' | 'icon';
+    /**
+     * Initials shown for the `text` variant when no `children` are composed
+     * (i.e. `children` is `undefined`).
+     */
+    label?: string;
+    /**
+     * Icon shown for the `icon` variant when no `children` are composed
+     * (i.e. `children` is `undefined`).
+     */
+    icon?: React.ReactNode;
+}
+/**
+ * A user/entity avatar: a colored circle showing an image, initials, or an
+ * icon. Compose `AvatarImage`/`AvatarFallback` for the photo-with-fallback
+ * case, or use `variant`/`label`/`icon` for a quick text or icon badge; stack
+ * several in `AvatarGroup`.
+ */
+declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;
 /**
  * Overlapping stack of avatars. Each avatar after the first is pulled left by

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?: "ghost" | "secondary" | "default" | "destructive" | "ai" | null | undefined;
+    variant?: "default" | "ghost" | "secondary" | "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/card/card.d.ts

@@ -1,17 +1,78 @@
 import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {
+declare const cardVariants: (props?: ({
+    hasError?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
     /**
      * Replace the rendered `<div>` with another element or component (Base UI
-     * composition) — e.g. render `CardTitle` as a heading. The component's props
-     * and class names are merged onto it.
+     * composition) — e.g. render `Card` as an `<article>`.
+     */
+    render?: useRender.RenderProp;
+}
+declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The card's title. Renders nothing when omitted. */
+    title?: string;
+    /** Helper text shown under the title; only rendered when `hasDescription`. */
+    description?: string;
+    /** Shows `description` below the title. */
+    hasDescription?: boolean;
+    /** Shows a drag handle at the start of the header, for reorderable lists. */
+    isDraggable?: boolean;
+    /** Accessible label for the drag handle. */
+    dragHandleLabel?: string;
+    /** Shows a toggle switch at the start of the header. */
+    isSwitchable?: boolean;
+    /** Controlled checked state of the header switch. */
+    switchChecked?: boolean;
+    /** Uncontrolled initial checked state of the header switch. */
+    defaultSwitchChecked?: boolean;
+    /** Fires when the header switch is toggled. */
+    onSwitchCheckedChange?: (checked: boolean) => void;
+    /** Disables the header switch. */
+    switchDisabled?: boolean;
+    /** Accessible label for the header switch. */
+    switchLabel?: string;
+    /** Shows an avatar before the title. */
+    hasAvatar?: boolean;
+    /** Initials shown in the default avatar; ignored if `avatar` is provided. */
+    avatarLabel?: string;
+    /** Replaces the default initials avatar with custom content. */
+    avatar?: React.ReactNode;
+    /** Shows a rename button next to the title. */
+    hasRename?: boolean;
+    /** Fires when the rename button is activated. */
+    onRename?: () => void;
+    /** Accessible label for the rename button. */
+    renameLabel?: string;
+    /** Extra content rendered inline next to the title (e.g. a tag or badge). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the header (e.g. a menu button). */
+    actions?: React.ReactNode;
+    /**
+     * Shows a disclosure trigger at the end of the header. Only has an effect
+     * when this header renders inside a collapsible `AccordionContainer` —
+     * see the collapsible composition example.
+     */
+    isCollapsible?: boolean;
+    /** Accessible label for the collapse trigger. */
+    collapseLabel?: string;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardPartProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
      */
     render?: useRender.RenderProp;
 }
-declare const Card: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardHeader: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardTitle: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-declare const CardDescription: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardContent: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
 declare const CardFooter: React.ForwardRefExoticComponent<CardPartProps & React.RefAttributes<HTMLDivElement>>;
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardPartProps, };
+export { Card, CardHeader, CardContent, CardFooter, cardVariants };

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

@@ -1 +1 @@
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardPartProps, } from './card';
+export { Card, CardHeader, CardContent, CardFooter, cardVariants, type CardProps, type CardHeaderProps, type CardPartProps, } from './card';

package/dist/src/components/ui/card-section/card-section.d.ts

@@ -0,0 +1,50 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const cardSectionVariants: (props?: ({
+    variant?: "slot" | "list" | "tag" | "table-actions" | "card-primary" | "card-secondary" | null | undefined;
+    hasBottomBorder?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface CardSectionBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'content'>, VariantProps<typeof cardSectionVariants> {
+    /** Extra content rendered inline next to the section title (e.g. a tag). */
+    extras?: React.ReactNode;
+    /** Actions rendered at the end of the section header row (e.g. a menu button). */
+    actions?: React.ReactNode;
+    /** Body of the `slot` variant — arbitrary passthrough content. */
+    content?: React.ReactNode;
+    /**
+     * Body of the `tag` variant — a wrapping row of tags. Has no built-in
+     * default: like `contentList`, the consumer supplies the tags.
+     */
+    contentTag?: React.ReactNode;
+    /**
+     * Body of the `list` variant — title/description key-value rows. Has no
+     * built-in default: the `ListItem` tokens the design references
+     * (`--ui-card-body-section-item-*`) do not exist in tokens-pd yet.
+     */
+    contentList?: React.ReactNode;
+    /** Body of the `table-actions` variant — a table with row actions. */
+    contentTable?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition) — e.g. render the section as a `<section>`.
+     */
+    render?: useRender.RenderProp;
+}
+/**
+ * A band of content stacked inside a `Card`'s body.
+ *
+ * `hasHeader` and `title` form a discriminated union: turning the section's own
+ * mini-header on requires a title, because the header row always renders one.
+ */
+export type CardSectionProps = CardSectionBaseProps & ({
+    /** Shows the section's own mini-header row (14px, distinct from `CardHeader`). */
+    hasHeader: true;
+    /** The section header's title. Required whenever `hasHeader` is set. */
+    title: string;
+} | {
+    hasHeader?: false;
+    title?: never;
+});
+declare const CardSection: React.ForwardRefExoticComponent<CardSectionProps & React.RefAttributes<HTMLDivElement>>;
+export { CardSection, cardSectionVariants };

package/dist/src/components/ui/card-section/index.d.ts

@@ -0,0 +1 @@
+export { CardSection, cardSectionVariants, type CardSectionProps, type CardSectionBaseProps, } from './card-section';

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/dialog/dialog.d.ts

@@ -2,7 +2,7 @@ import { Dialog as DialogPrimitive } from '@base-ui/react/dialog';
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const dialogContentVariants: (props?: ({
-    size?: "sm" | "large" | null | undefined;
+    size?: "large" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const DialogRoot: typeof DialogPrimitive.Root;
 declare const DialogTrigger: DialogPrimitive.Trigger;

package/dist/src/components/ui/empty-overlay/empty-overlay.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const emptyOverlayIconVariants: (props?: ({
+    color?: "blue" | "gray" | "green" | "orange" | "red" | "teal" | "violet" | "yellow" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface EmptyOverlayProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'color' | 'children'>, VariantProps<typeof emptyOverlayIconVariants> {
+    /** Icon rendered in the colored badge (e.g. an `icons-react` glyph at 24px). */
+    icon?: React.ReactNode;
+    /** The empty-state headline. */
+    title: React.ReactNode;
+    /** Supporting copy shown under the title. */
+    description?: React.ReactNode;
+}
+/**
+ * A full-bleed empty-state overlay: a colored icon badge over a centered
+ * title/description, on a fade-to-solid backdrop. Size it via the parent
+ * (e.g. `absolute inset-0`) — the component fills whatever box it's given.
+ */
+declare const EmptyOverlay: React.ForwardRefExoticComponent<EmptyOverlayProps & React.RefAttributes<HTMLDivElement>>;
+export { EmptyOverlay, emptyOverlayIconVariants };

package/dist/src/components/ui/empty-overlay/index.d.ts

@@ -0,0 +1,2 @@
+export { EmptyOverlay, emptyOverlayIconVariants } from './empty-overlay';
+export type { EmptyOverlayProps } from './empty-overlay';