@acronis-platform/ui-react 1.0.0 → 3.0.0

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const gridVariants: (props?: ({
-    cols?: 1 | 2 | 6 | 3 | 4 | 12 | null | undefined;
+    cols?: 1 | 2 | 3 | 6 | 4 | 12 | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {

package/dist/src/components/ui/sheet/sheet.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 sheetVariants: (props?: ({
-    side?: "top" | "bottom" | "left" | "right" | null | undefined;
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const Sheet: typeof DialogPrimitive.Root;
 declare const SheetTrigger: DialogPrimitive.Trigger;

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

@@ -3,7 +3,7 @@ import * as React from 'react';
 declare const stackVariants: (props?: ({
     direction?: "horizontal" | "vertical" | null | undefined;
     gap?: "none" | "sm" | "md" | "lg" | "xl" | "xs" | null | undefined;
-    align?: "center" | "end" | "start" | "stretch" | null | undefined;
+    align?: "center" | "end" | "stretch" | "start" | null | undefined;
     justify?: "center" | "end" | "start" | "between" | null | undefined;
     wrap?: boolean | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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

@@ -0,0 +1 @@
+export { Stepper, type StepperProps } from './stepper';

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The `StepperItem` elements making up the sequence. Rendered in the wide
+     * (>= 1024px) layout only — the compact layout is a text summary and shows no
+     * items at all.
+     */
+    children?: React.ReactNode;
+    /** 1-based index of the step the user is on, e.g. `3`. Compact layout only. */
+    currentStep: React.ReactNode;
+    /** How many steps there are in total, e.g. `5`. Compact layout only. */
+    totalSteps: React.ReactNode;
+    /** The current step's name. Compact layout only. */
+    current: React.ReactNode;
+    /**
+     * The next step's name. Omit it — on the last step, say — and the whole
+     * "Next: …" line is left out rather than rendered empty. Compact layout only.
+     */
+    next?: React.ReactNode;
+    /**
+     * The word introducing the step counter. A prop, not an inlined literal, so
+     * the string can be translated (see `context/conventions.md` §"Localization —
+     * no hardcoded labels"): this component generates the text itself, unlike the
+     * step names, which the caller supplies.
+     */
+    stepLabel?: string;
+    /** The word joining the current step number to the total. Translatable — see `stepLabel`. */
+    ofLabel?: string;
+    /** The label introducing the next step's name. Translatable — see `stepLabel`. */
+    nextLabel?: string;
+    /**
+     * The punctuation joining the step counter to the current step's name. A prop
+     * for the same reason as `stepLabel`: the component generates it, and not every
+     * locale writes it as `": "` (French, say, spaces before the colon; CJK uses a
+     * full-width one).
+     */
+    separatorLabel?: string;
+}
+declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export { Stepper };

package/dist/src/components/ui/stepper-item/index.d.ts

@@ -0,0 +1 @@
+export { StepperItem, stepperItemVariants, type StepperItemProps, type StepperItemVariant, type StepperItemState, } from './stepper-item';

package/dist/src/components/ui/stepper-item/stepper-item.d.ts

@@ -0,0 +1,41 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const stepperItemVariants: (props?: ({
+    variant?: "current" | "completed" | "future" | null | undefined;
+    state?: "active" | "hover" | "idle" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Kept in lockstep with the `cva` axes above. */
+export type StepperItemVariant = NonNullable<VariantProps<typeof stepperItemVariants>['variant']>;
+export type StepperItemState = NonNullable<VariantProps<typeof stepperItemVariants>['state']>;
+export interface StepperItemProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * The step's structural role in the sequence. Drives the container background
+     * and the label color. Defaults to `current` for prop ergonomics — in a real
+     * sequence every step declares its own.
+     */
+    variant?: StepperItemVariant;
+    /**
+     * Interaction state. Only produces a different look when `variant` is
+     * `completed` (`idle` has no background, `hover` and `active` paint one).
+     * Ignored for `current`, which always renders in its highlighted look, and for
+     * `future`, which always renders disabled and non-interactive.
+     */
+    state?: StepperItemState;
+    /**
+     * The step's marker — required, and entirely the caller's to compose. Pass any
+     * `Avatar` composition (color scheme, initials / icon / image, size overrides);
+     * this component renders it verbatim and never styles it.
+     */
+    avatar: React.ReactElement;
+    /** The step name. */
+    label?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition) — e.g. a `<button>`, since a completed step is usually a way
+     * back to an earlier step.
+     */
+    render?: useRender.RenderProp;
+}
+declare const StepperItem: React.ForwardRefExoticComponent<StepperItemProps & React.RefAttributes<HTMLDivElement>>;
+export { StepperItem, stepperItemVariants };

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

@@ -1,3 +1,3 @@
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, type TableRowProps, type TableHeadProps, type TableCellProps, } from './table';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableSelectCell, TableActionsCell, TableSettingsCell, TableCaption, type TableRowProps, type TableHeadProps, type TableCellProps, type TableSelectCellProps, type TableActionsCellProps, } from './table';
 export { TablePagination, type TablePaginationProps, } from './table-pagination';
 export { TableViewOptions, type TableViewOptionsProps, type TableColumnVisibility, } from './table-view-options';

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

@@ -16,6 +16,27 @@ export interface TablePaginationProps extends Omit<React.HTMLAttributes<HTMLDivE
     onPageIndexChange: (pageIndex: number) => void;
     /** Invoked with the next page size. */
     onPageSizeChange: (pageSize: number) => void;
+    /** 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. Receives the 1-based page number and the total
+     * page count; `pageCount === 0` means there are no pages.
+     */
+    pageLabel?: (page: number, pageCount: number) => string;
+    /**
+     * Builds the leading row summary. Receives the selected-row count (or
+     * `undefined` when selection isn't tracked) and the total row count. Return
+     * `null` for no summary.
+     */
+    summaryLabel?: (selectedRows: number | undefined, totalRows: number) => string | null;
 }
 declare const TablePagination: React.ForwardRefExoticComponent<TablePaginationProps & React.RefAttributes<HTMLDivElement>>;
 export { TablePagination };

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

@@ -12,10 +12,17 @@ export interface TableViewOptionsProps {
     columns: TableColumnVisibility[];
     /** Invoked with the column id whose visibility was toggled. */
     onToggle: (id: string) => void;
-    /** Trigger label. Defaults to `View`. */
+    /** Trigger label. Defaults to `View`. Ignored when `iconOnly`. */
     triggerLabel?: React.ReactNode;
+    /**
+     * Render the trigger as a cog-only icon button instead of a labelled
+     * `Button` — the shape that fits the 48px `TableSettingsCell` column.
+     */
+    iconOnly?: boolean;
+    /** Accessible name of the `iconOnly` trigger. Override to localize. */
+    triggerAriaLabel?: string;
 }
-declare function TableViewOptions({ columns, onToggle, triggerLabel, }: TableViewOptionsProps): import("react/jsx-runtime").JSX.Element;
+declare function TableViewOptions({ columns, onToggle, triggerLabel, iconOnly, triggerAriaLabel, }: TableViewOptionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TableViewOptions {
     var displayName: string;
 }

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

@@ -31,5 +31,44 @@ export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElem
     wrap?: boolean;
 }
 declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableSelectCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Render the select-all cell of the header row (`<th>`) instead of a row's
+     * selection cell (`<td>`).
+     */
+    header?: boolean;
+}
+/**
+ * The row-selection cell (design part `TableCheckbox`) — a fixed 32px column
+ * holding a label-less `Checkbox`. Only the leading padding is applied, matching
+ * the design (16px padding + a 16px box), so the checkbox sits flush against the
+ * first data cell.
+ */
+declare const TableSelectCell: React.ForwardRefExoticComponent<TableSelectCellProps & React.RefAttributes<HTMLTableCellElement>>;
+export interface TableActionsCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Suppress this row's actions because a selection is in play — the cell
+     * still reserves its 48px column (so the grid doesn't reflow) but renders no
+     * children and no hover/press tint. Per the design, that means any row is
+     * selected, including exactly one. Pass `isBulkSelectionActive(table)` (from
+     * the data-table part) rather than re-deriving the threshold.
+     */
+    bulkSelectionActive?: boolean;
+}
+/**
+ * The trailing row-actions cell (design part `TableActions`) — a fixed 48px
+ * column, end-aligned, holding the consumer's overflow trigger (e.g. a
+ * `ButtonIcon` with `EllipsisIcon` opening a `DropdownMenu`). The cell itself
+ * carries the hover/press tint and the focus ring, per the design.
+ */
+declare const TableActionsCell: React.ForwardRefExoticComponent<TableActionsCellProps & React.RefAttributes<HTMLTableCellElement>>;
+/**
+ * The trailing header cell holding the column-settings trigger (design part
+ * `TableSettings`) — a fixed 48px column, end-aligned, holding the consumer's
+ * gear trigger (e.g. a `ButtonIcon` with `CogIcon`). Visual states only; what
+ * the trigger opens (a column-visibility menu) is the consumer's choice —
+ * `TableViewOptions` is the ready-made one.
+ */
+declare const TableSettingsCell: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
 declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableSelectCell, TableActionsCell, TableSettingsCell, TableCaption, };

package/dist/src/index.d.ts

@@ -3,6 +3,7 @@ export * from './hooks';
 export * from './lib/breakpoints';
 export { PortalContainerProvider, usePortalContainer, type PortalContainerProviderProps, } from './lib/portal-container';
 export * from './components/ui/accordion';
+export * from './components/ui/accordion-container';
 export * from './components/ui/alert';
 export * from './components/ui/app-shell';
 export * from './components/ui/app-shell-chat';
@@ -18,6 +19,7 @@ export * from './components/ui/calendar';
 export * from './components/ui/calendar-panel';
 export * from './components/ui/card';
 export * from './components/ui/card-filter';
+export * from './components/ui/card-section';
 export * from './components/ui/category-bar';
 export * from './components/ui/chart';
 export * from './components/ui/chart-state';
@@ -36,6 +38,7 @@ export * from './components/ui/dialog-footer-default';
 export * from './components/ui/dialog-welcome';
 export * from './components/ui/dropdown-menu';
 export * from './components/ui/empty';
+export * from './components/ui/empty-overlay';
 export * from './components/ui/field';
 export * from './components/ui/fitted-actions';
 export * from './components/ui/filter-cards';
@@ -82,6 +85,8 @@ export * from './components/ui/sheet';
 export * from './components/ui/skeleton';
 export * from './components/ui/slider';
 export * from './components/ui/stack';
+export * from './components/ui/stepper';
+export * from './components/ui/stepper-item';
 export * from './components/ui/resizable';
 export * from './components/ui/sidebar-primary';
 export * from './components/ui/sidebar-secondary';