@acronis-platform/ui-react 2.0.0 → 4.0.0

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

@@ -1,7 +1,76 @@
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare const Section: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-declare const SectionHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const SectionTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-declare const SectionDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
-declare const SectionContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-export { Section, SectionHeader, SectionTitle, SectionDescription, SectionContent, };
+declare const sectionVariants: (props?: ({
+    variant?: "table" | "column1" | "column2-70-30" | "grid3" | null | undefined;
+    hasBottomBorder?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type SectionVariant = NonNullable<VariantProps<typeof sectionVariants>['variant']>;
+interface SectionContextValue {
+    variant: SectionVariant;
+}
+/**
+ * Reads the content layout of the nearest `Section` ancestor. Falls back to
+ * `column1` for a part rendered outside a `Section`.
+ */
+declare const useSectionContext: () => SectionContextValue;
+export interface SectionProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof sectionVariants> {
+    /**
+     * Replace the rendered `<section>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const Section: React.ForwardRefExoticComponent<SectionProps & React.RefAttributes<HTMLElement>>;
+export interface SectionHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The section'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 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;
+    /** 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 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 SectionHeader: React.ForwardRefExoticComponent<SectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface SectionContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The narrow (~30%) second column of the `column2-70-30` layout. Ignored by
+     * every other variant, which has only one content area.
+     */
+    secondaryContent?: React.ReactNode;
+    /**
+     * Replace the rendered `<div>` with another element or component (Base UI
+     * composition).
+     */
+    render?: useRender.RenderProp;
+}
+declare const SectionContent: React.ForwardRefExoticComponent<SectionContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Section, SectionHeader, SectionContent, sectionVariants, useSectionContext, type SectionVariant, };

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

@@ -2,8 +2,8 @@ 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;
+    variant?: "completed" | "current" | "future" | null | undefined;
+    state?: "focus" | "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']>;
@@ -17,9 +17,10 @@ export interface StepperItemProps extends React.ComponentPropsWithoutRef<'div'>
     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.
+     * `completed` — each of `idle`, `hover`, `active`, and `focus` is wired to its
+     * own token, so a brand can style any of them independently. Ignored for
+     * `current`, which always renders in its highlighted look, and for `future`,
+     * which always renders disabled and non-interactive.
      */
     state?: StepperItemState;
     /**

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

@@ -1,7 +1,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const tagVariants: (props?: ({
-    variant?: "info" | "success" | "warning" | "critical" | "danger" | "ai" | "neutral" | null | undefined;
+    variant?: "info" | "success" | "warning" | "critical" | "danger" | "neutral" | "ai" | null | undefined;
     size?: "default" | "sm" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TagProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof tagVariants> {

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

@@ -1,4 +1,4 @@
-import { ChartTooltip, ChartConfig, ChartAnimationProps, TickFormatter } from '../chart';
+import { ChartTooltip, ChartConfig, ChartPalette, ChartAnimationProps, TickFormatter } from '../chart';
 import * as React from 'react';
 /**
  * Where a cell's label block sits inside its rectangle. Named logically, not
@@ -33,6 +33,11 @@ interface TreemapCellProps {
 }
 export declare function TreemapCell({ x, y, width, height, name, primaryLabel, secondaryLabel, showLabels, labelAlign, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
 export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'children'>, ChartAnimationProps {
+    /**
+     * The dataviz palette this chart's series are painted from. Series that
+     * state no `color` of their own take a stop of it. See `ChartPalette`.
+     */
+    palette?: ChartPalette;
     /**
      * Row-per-leaf data. Each object holds the leaf's `nameKey` label + its
      * `dataKey` numeric size.
@@ -45,10 +50,11 @@ export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'childre
      */
     data: ReadonlyArray<Record<string, string | number>>;
     /**
-     * Per-leaf map of `label` / `color`, keyed by the leaf's `nameKey` value
-     * (imported from the shared `Chart` primitives). Turned into `--color-<name>`
-     * custom properties. Colors are caller-supplied — reference an existing
-     * semantic `--ui-*` token; there is no chart palette tier yet.
+     * Per-leaf map of `label` / `icon` / `tone`, keyed by the leaf's `nameKey`
+     * value (imported from the shared `Chart` primitives). Turned into
+     * `--color-<name>` custom properties. Series take their colour from the
+     * container's `palette`; each entry maps a key to a `label` and an optional
+     * `tone`.
      */
     config: ChartConfig;
     /** Numeric field that sizes each leaf's rectangle. */

package/dist/src/components/ui/trend-indicator/trend-indicator.d.ts

@@ -1,20 +1,16 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const trendIndicatorVariants: (props?: ({
-    sentiment?: "positive" | "neutral" | "negative" | null | undefined;
-    size?: "small" | "medium" | null | undefined;
-    variant?: "inline" | "badge" | null | undefined;
+    sentiment?: "neutral" | "positive" | "negative" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface TrendIndicatorProps extends Omit<React.ComponentProps<'span'>, 'children'>, VariantProps<typeof trendIndicatorVariants> {
     /** What changed mathematically — selects the direction glyph. */
     direction: 'up' | 'down' | 'flat';
     /**
      * Already-formatted change to display — e.g. `"12%"`, `"3.5 h"`,
-     * `"Improving"`, `"4.2 h → 2.8 h"`. The kit does not format or compute it.
+     * `"Improving"`. The kit does not format or compute it.
      */
     value?: React.ReactNode;
-    /** Secondary comparison caption — e.g. `"vs previous quarter"`, `"YoY"`. */
-    comparisonLabel?: React.ReactNode;
     /** Contextual hint shown on hover/focus (Base UI Tooltip). */
     tooltip?: React.ReactNode;
     /** Show the leading direction glyph. Defaults to `true` — color alone isn't enough. */
@@ -24,7 +20,7 @@ export interface TrendIndicatorProps extends Omit<React.ComponentProps<'span'>,
      * compared with the previous quarter"). Applied as the element's label via
      * `role="img"`, since the kit can't build a correct, localized sentence from
      * `direction` + `value` alone. Without it, assistive tech reads the visible
-     * `value` / `comparisonLabel` text (the glyph is decorative).
+     * `value` text (the glyph is decorative).
      */
     ariaLabel?: string;
 }

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

@@ -0,0 +1 @@
+export { Wizard, WizardHeader, WizardSubtitle, WizardBody } from './wizard';

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare const Wizard: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WizardSubtitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const WizardBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { Wizard, WizardHeader, WizardSubtitle, WizardBody };

package/dist/src/hooks/index.d.ts

@@ -1,3 +1,4 @@
 export { useSortState, type SortDirection, type SortState, type SortComparator, type UseSortStateOptions, type UseSortStateResult, } from './use-sort-state';
 export { useIntersectionObserver, type UseIntersectionObserverOptions, } from './use-intersection-observer';
 export { useTableUrlState, parseTableUrlState, serializeTableUrlState, DEFAULT_TABLE_URL_PARAM_KEYS, type TableUrlState, type TablePaginationState, type TableSortingState, type TableColumnFilterState, type TableUrlParamKeys, type TableUrlUpdater, type UseTableUrlStateOptions, type UseTableUrlStateResult, } from './use-table-url-state';
+export { useWizard, type WizardStep, type WizardStepAvatarColor, type WizardStepVariant, type WizardStepState, type UseWizardOptions, type UseWizardResult, } from './use-wizard';

package/dist/src/hooks/use-wizard.d.ts

@@ -0,0 +1,80 @@
+export interface WizardStep {
+    /** Stable identifier; `goToStep` and `initialStep` accept it as a string. */
+    id: string;
+    /** Step label, rendered by `StepperItem` and the `Stepper` summary. */
+    label: string;
+}
+export type WizardStepAvatarColor = 'blue' | 'green' | 'gray';
+export type WizardStepVariant = 'completed' | 'current' | 'future';
+/**
+ * A step enriched with everything a `StepperItem` needs. Intersects `TStep`, so
+ * any extra fields the consumer put on their own step objects survive.
+ */
+export type WizardStepState<TStep extends WizardStep = WizardStep> = TStep & {
+    /** Zero-based position in `steps`. */
+    index: number;
+    /** One-based position, for the avatar's displayed number. */
+    stepNumber: number;
+    /** `StepperItem`'s `variant`, derived from the position vs. `currentIndex`. */
+    variant: WizardStepVariant;
+    /** `Avatar`'s `color` for this step's variant. */
+    avatarColor: WizardStepAvatarColor;
+    /** Classes to merge onto this step's `Avatar`. */
+    avatarClassName: string;
+};
+export interface UseWizardOptions<TStep extends WizardStep = WizardStep> {
+    /** The flow's steps, in order. Must not be empty. */
+    steps: TStep[];
+    /**
+     * Where the flow starts — a zero-based index or a step `id`. A numeric
+     * index is truncated toward zero and clamped into range; `NaN` and an id
+     * that matches no step fall back to the first step. A seed, not a
+     * controlled input: later changes are ignored.
+     */
+    initialStep?: number | string;
+}
+export interface UseWizardResult<TStep extends WizardStep = WizardStep> {
+    /** `steps` with per-step `variant`/avatar presentation derived. */
+    steps: WizardStepState<TStep>[];
+    /**
+     * Zero-based index of the active step. Always a valid index into `steps`:
+     * if `steps` shrinks so that the stored index is past the end, the
+     * effective index clamps to `steps.length - 1`.
+     */
+    currentIndex: number;
+    /** One-based number of the active step, for `Stepper`'s `currentStep`. */
+    currentStepNumber: number;
+    /** Total number of steps, for `Stepper`'s `totalSteps`. */
+    stepCount: number;
+    /** The active step's label, for `Stepper`'s `current`. */
+    currentStepLabel: string;
+    /** The following step's label, or `undefined` on the last step. */
+    nextStepLabel: string | undefined;
+    isFirstStep: boolean;
+    isLastStep: boolean;
+    /** Advance one step; no-op on the last step (never wraps). */
+    goToNextStep: () => void;
+    /** Go back one step; no-op on the first step (never wraps). */
+    goToPreviousStep: () => void;
+    /**
+     * Jump to a zero-based index or a step `id`. A numeric index is truncated
+     * toward zero (`1.5` → `1`) and clamped into range; `NaN` is a no-op. An
+     * id that matches no step is a no-op; on duplicate ids the first wins.
+     */
+    goToStep: (target: number | string) => void;
+}
+/**
+ * Headless step state for a `Wizard`'s `Stepper` (the `Wizard` components
+ * themselves stay presentational and own no state). Returns the `Stepper`
+ * summary props plus a per-step `variant` + avatar presentation, and the
+ * navigation callbacks a consumer wires to its Back/Next buttons.
+ *
+ * Opt-in: a consumer that already owns its step state can keep driving
+ * `Stepper`/`StepperItem` by hand.
+ *
+ * `steps` may be a live, per-render value. The active index is stored as
+ * state but re-clamped against the *current* `steps.length` on every read,
+ * so a `steps` array that shrinks past the active index resolves to the last
+ * remaining step instead of reading past the end.
+ */
+export declare function useWizard<TStep extends WizardStep = WizardStep>({ steps, initialStep, }: UseWizardOptions<TStep>): UseWizardResult<TStep>;

package/dist/src/index.d.ts

@@ -3,11 +3,10 @@ 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';
 export * from './components/ui/area-chart';
-export * from './components/ui/auth-layout';
 export * from './components/ui/avatar';
 export * from './components/ui/bar-chart';
 export * from './components/ui/breadcrumb';
@@ -18,12 +17,13 @@ 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';
+export * from './components/ui/chart-widget';
 export * from './components/ui/checkbox';
 export * from './components/ui/chip';
-export * from './components/ui/collapsible';
 export * from './components/ui/combobox';
 export * from './components/ui/composed-chart';
 export * from './components/ui/confidence-cone';
@@ -36,6 +36,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';
@@ -106,3 +107,4 @@ export { Tag as Badge, type TagProps as BadgeProps, } from './components/ui/tag'
 export * from './components/ui/treemap';
 export * from './components/ui/trend-indicator';
 export * from './components/ui/widget-placeholder';
+export * from './components/ui/wizard';