@acronis-platform/ui-react 0.57.0 → 0.58.0

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

@@ -0,0 +1,44 @@
+import { ChartTooltip, ChartConfig } from '../chart';
+import * as React from 'react';
+interface TreemapCellProps {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+    name?: string;
+    showLabels?: boolean;
+}
+export declare function TreemapCell({ x, y, width, height, name, showLabels, }: TreemapCellProps): import("react/jsx-runtime").JSX.Element;
+export interface TreemapProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** Row-per-leaf data. Each object holds the leaf's `nameKey` label + its `dataKey` numeric size. */
+    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.
+     */
+    config: ChartConfig;
+    /** Numeric field that sizes each leaf's rectangle. */
+    dataKey: string;
+    /**
+     * Label field that names each leaf (drives the on-cell label, tooltip, and
+     * `--color-<name>` lookup). Values should be unique and CSS-safe (they become
+     * part of a custom-property name).
+     */
+    nameKey: string;
+    /** Width-to-height ratio the tiling targets. */
+    aspectRatio?: number;
+    /** Render each leaf's name inside its cell (when it fits). */
+    showLabels?: boolean;
+    showTooltip?: boolean;
+    /**
+     * Replace the default tooltip. Pass a configured `ChartTooltipContent`
+     * (imported from this library) — e.g. with a `formatter` / `labelFormatter` —
+     * to customize formatting, per-cell rows, or extra fields without composing
+     * recharts yourself. Ignored when `showTooltip` is false.
+     */
+    tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];
+}
+declare const Treemap: React.ForwardRefExoticComponent<Omit<TreemapProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Treemap };

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

@@ -0,0 +1 @@
+export { TrendIndicator, trendIndicatorVariants, type TrendIndicatorProps, } from './trend-indicator';

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

@@ -0,0 +1,32 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const trendIndicatorVariants: (props?: ({
+    sentiment?: "neutral" | "positive" | "negative" | null | undefined;
+    size?: "small" | "medium" | null | undefined;
+    variant?: "inline" | "badge" | 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.
+     */
+    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. */
+    showIcon?: boolean;
+    /**
+     * Accessible sentence describing the trend (e.g. "Revenue increased 12%
+     * 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).
+     */
+    ariaLabel?: string;
+}
+declare const TrendIndicator: React.ForwardRefExoticComponent<Omit<TrendIndicatorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export { TrendIndicator, trendIndicatorVariants };

package/dist/src/components/ui/widget-placeholder/index.d.ts

@@ -0,0 +1 @@
+export { WidgetPlaceholder, WidgetPlaceholderHeader, WidgetPlaceholderTitle, WidgetPlaceholderIcon, WidgetPlaceholderContent, WidgetPlaceholderImage, WidgetPlaceholderText, WidgetPlaceholderAction, WidgetPlaceholderFooter, type WidgetPlaceholderProps, } from './widget-placeholder';

package/dist/src/components/ui/widget-placeholder/widget-placeholder.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface WidgetPlaceholderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Make the whole widget focusable and clickable (hover/active surface + focus
+     * ring). Wire the behavior via `onClick`.
+     */
+    interactive?: boolean;
+}
+declare const WidgetPlaceholder: React.ForwardRefExoticComponent<WidgetPlaceholderProps & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderIcon: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderImage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderText: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderAction: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const WidgetPlaceholderFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+export { WidgetPlaceholder, WidgetPlaceholderHeader, WidgetPlaceholderTitle, WidgetPlaceholderIcon, WidgetPlaceholderContent, WidgetPlaceholderImage, WidgetPlaceholderText, WidgetPlaceholderAction, WidgetPlaceholderFooter, };

package/dist/src/components/ui/widget-placeholder/widget-placeholder.docs.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+/** Props for `WidgetPlaceholder` — the root widget card. */
+export interface WidgetPlaceholderProps {
+    /**
+     * Make the whole widget focusable (`tabindex=0`) and clickable — adds
+     * hover/active surface tints and a focus ring. Wire the behavior with
+     * `onClick`.
+     */
+    interactive?: boolean;
+    /** Extra classes merged onto the root. */
+    className?: string;
+    /** The composed parts (header / content / footer). */
+    children?: React.ReactNode;
+}

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

@@ -0,0 +1,3 @@
+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';

package/dist/src/hooks/use-intersection-observer.d.ts

@@ -0,0 +1,26 @@
+export interface UseIntersectionObserverOptions extends IntersectionObserverInit {
+    /** Called each time the observed element intersects its root. */
+    onIntersect: () => void;
+    /**
+     * Skip observing — e.g. there's nothing left to load, or a load is already
+     * in flight. Disconnects any existing observer.
+     */
+    disabled?: boolean;
+}
+/**
+ * Wires a single `IntersectionObserver` on the returned ref callback's element
+ * and calls `onIntersect` each time it intersects. Re-creates the observer when
+ * the element, `disabled`, or any `IntersectionObserverInit` option changes;
+ * disconnects on cleanup. `onIntersect` itself doesn't need to be memoized by
+ * the caller — the latest version is always used (via a ref) without
+ * reconnecting the observer.
+ *
+ * Takes a ref *callback* (not a `RefObject`) rather than accepting one from the
+ * caller — attaching to `element.current` inside a `useEffect` keyed on a
+ * `RefObject` misses conditionally-mounted elements: the `ref` object's
+ * identity never changes when its `.current` is populated, so an effect keyed
+ * on it (rather than on the element itself) never re-runs once the element
+ * actually mounts. Routing the DOM node through `useState` instead makes the
+ * mount itself a dependency.
+ */
+export declare function useIntersectionObserver<T extends Element>({ onIntersect, disabled, root, rootMargin, threshold, }: UseIntersectionObserverOptions): (node: T | null) => void;

package/dist/src/hooks/use-sort-state.d.ts

@@ -0,0 +1,46 @@
+export type SortDirection = 'asc' | 'desc' | false;
+export interface SortState {
+    columnId: string;
+    direction: 'asc' | 'desc';
+}
+/**
+ * Compares two rows for a column. Ascending order; the hook negates the result
+ * for descending. Receives the full rows so a custom comparator has access to
+ * every field.
+ */
+export type SortComparator<TData> = (a: TData, b: TData) => number;
+export interface UseSortStateOptions<TData> {
+    /** Rows to sort. */
+    data: TData[];
+    /** Initial sorted column + direction. */
+    initialSort?: SortState | null;
+    /**
+     * Custom per-column comparators keyed by column id. When absent for a column,
+     * the default alphanumeric comparator on `getValue(row, columnId)` is used.
+     */
+    comparators?: Record<string, SortComparator<TData>>;
+    /**
+     * How to read a column's value from a row for the default comparator.
+     * Defaults to `row[columnId]`.
+     */
+    getValue?: (row: TData, columnId: string) => unknown;
+}
+export interface UseSortStateResult<TData> {
+    /** The rows sorted by the current sort state (unsorted `data` when none). */
+    sortedData: TData[];
+    /** The current sort, or `null` when unsorted. */
+    sort: SortState | null;
+    /** Directly set (or clear) the sort. */
+    setSort: (sort: SortState | null) => void;
+    /** Cycle a column's sort: none → asc → desc → none. */
+    toggleSort: (columnId: string) => void;
+    /** Direction for a column, shaped for `TableHead`'s `sortDirection` prop. */
+    getSortDirection: (columnId: string) => SortDirection;
+}
+/**
+ * Headless client-side sort state for the `Table` primitives (no TanStack
+ * dependency). Drives `TableHead`'s `sortable`/`sortDirection`/`onSort` props
+ * and returns the sorted rows. Default comparator is alphanumeric; pass
+ * `comparators` to override per column.
+ */
+export declare function useSortState<TData>({ data, initialSort, comparators, getValue, }: UseSortStateOptions<TData>): UseSortStateResult<TData>;

package/dist/src/hooks/use-table-url-state.d.ts

@@ -0,0 +1,85 @@
+export interface TablePaginationState {
+    /** Zero-based page index. */
+    pageIndex: number;
+    /** Rows per page. */
+    pageSize: number;
+}
+export interface TableSortingState {
+    /** Column id. */
+    id: string;
+    /** `true` for descending. */
+    desc: boolean;
+}
+export interface TableColumnFilterState {
+    /** Column id. */
+    id: string;
+    /** Filter value (string-encoded in the URL). */
+    value: string;
+}
+/**
+ * Controlled table state. The three fields mirror TanStack's `PaginationState`,
+ * `SortingState`, and `ColumnFiltersState` shapes (filter value narrowed to
+ * `string`) so they can wire straight into `onPaginationChange` /
+ * `onSortingChange` / `onColumnFiltersChange`.
+ */
+export interface TableUrlState {
+    pagination: TablePaginationState;
+    sorting: TableSortingState[];
+    columnFilters: TableColumnFilterState[];
+}
+/** Query-string keys. Namespaced (`tbl_*`) to avoid collisions with Storybook's
+ * own `path`/`args`/`globals` params on a shared preview-iframe URL. */
+export interface TableUrlParamKeys {
+    page: string;
+    size: string;
+    sort: string;
+    filter: string;
+}
+export declare const DEFAULT_TABLE_URL_PARAM_KEYS: TableUrlParamKeys;
+export interface UseTableUrlStateOptions {
+    /** Default page size; omitted from the URL when the size matches it. */
+    defaultPageSize?: number;
+    /** Override the namespaced query-string keys. */
+    paramKeys?: Partial<TableUrlParamKeys>;
+}
+export type TableUrlUpdater<T> = T | ((old: T) => T);
+export interface UseTableUrlStateResult {
+    state: TableUrlState;
+    /** Accepts a value or updater — shaped for TanStack's `onPaginationChange`. */
+    setPagination: (updater: TableUrlUpdater<TablePaginationState>) => void;
+    /** Accepts a value or updater — shaped for TanStack's `onSortingChange`. */
+    setSorting: (updater: TableUrlUpdater<TableSortingState[]>) => void;
+    /** Accepts a value or updater — shaped for TanStack's `onColumnFiltersChange`. */
+    setColumnFilters: (updater: TableUrlUpdater<TableColumnFilterState[]>) => void;
+}
+/**
+ * Parses table state out of a query string. Pure — safe to reuse for seeding a
+ * story or an SSR default. `search` may include or omit the leading `?`.
+ *
+ * Encoding: `tbl_page` is 1-based; `tbl_sort` is `id:asc|desc` pairs joined by
+ * `,`; `tbl_filter` is `id:<encoded-value>` pairs joined by `,` (the value is
+ * `encodeURIComponent`-escaped so it may contain `:`/`,`). Column ids must not
+ * contain `:` or `,`.
+ */
+export declare function parseTableUrlState(search: string, { defaultPageSize, paramKeys, }?: {
+    defaultPageSize?: number;
+    paramKeys?: TableUrlParamKeys;
+}): TableUrlState;
+/**
+ * Serializes table state onto a query string, preserving any foreign params
+ * already present in `search` (e.g. Storybook's `path`/`args`/`globals`).
+ * Returns the query string without a leading `?` (empty string when no params).
+ */
+export declare function serializeTableUrlState(state: TableUrlState, search: string, { defaultPageSize, paramKeys, }?: {
+    defaultPageSize?: number;
+    paramKeys?: TableUrlParamKeys;
+}): string;
+/**
+ * Router-agnostic hook that syncs controlled table state (pagination / sorting
+ * / column filters) to and from the URL query string via `history.pushState` +
+ * `popstate`. Depends only on `window.location` / `window.history`, so it works
+ * with any router (or none). Query keys are namespaced (`tbl_*`) so they never
+ * collide with other params on the same URL. Reads initial state from the URL,
+ * so a bookmarked link restores the table's view.
+ */
+export declare function useTableUrlState(options?: UseTableUrlStateOptions): UseTableUrlStateResult;

package/dist/src/index.d.ts

@@ -0,0 +1,94 @@
+export { cn } from './lib/utils';
+export * from './hooks';
+export { PortalContainerProvider, usePortalContainer, type PortalContainerProviderProps, } from './lib/portal-container';
+export * from './components/ui/accordion';
+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';
+export * from './components/ui/button';
+export * from './components/ui/button-menu';
+export * from './components/ui/calendar';
+export * from './components/ui/card';
+export * from './components/ui/card-filter';
+export * from './components/ui/chart';
+export * from './components/ui/chart-state';
+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';
+export * from './components/ui/data-table';
+export * from './components/ui/date-range-picker';
+export * from './components/ui/description-list';
+export { Dialog, DialogClose, type DialogProps, type DialogVariant, } from './components/ui/dialog';
+export * from './components/ui/dialog-footer-default';
+export * from './components/ui/dropdown-menu';
+export * from './components/ui/empty';
+export * from './components/ui/field';
+export * from './components/ui/funnel-chart';
+export * from './components/ui/grid';
+export * from './components/ui/histogram';
+export * from './components/ui/form';
+export * from './components/ui/radar-chart';
+export * from './components/ui/radial-bar-chart';
+export * from './components/ui/radio';
+export * from './components/ui/input';
+export * from './components/ui/input-date-picker';
+export * from './components/ui/input-otp';
+export * from './components/ui/input-password';
+export * from './components/ui/input-search';
+export * from './components/ui/input-select';
+export * from './components/ui/input-text';
+export * from './components/ui/input-text-area';
+export * from './components/ui/label';
+export * from './components/ui/line-chart';
+export * from './components/ui/link';
+export * from './components/ui/loading';
+export * from './components/ui/meter';
+export * from './components/ui/metric';
+export * from './components/ui/number-field';
+export * from './components/ui/page-content';
+export * from './components/ui/page-header';
+export * from './components/ui/pagination';
+export * from './components/ui/pie-chart';
+export * from './components/ui/popover';
+export * from './components/ui/progress';
+export * from './components/ui/progress-circle';
+export * from './components/ui/scatter-chart';
+export * from './components/ui/scroll-area';
+export * from './components/ui/search-global';
+export { InputText as Input, type InputTextProps as InputProps, } from './components/ui/input-text';
+export { InputSearch as Search, type InputSearchProps as SearchProps, } from './components/ui/input-search';
+export { InputTextArea as Textarea, type InputTextAreaProps as TextareaProps, } from './components/ui/input-text-area';
+export * from './components/ui/section';
+export * from './components/ui/select';
+export * from './components/ui/separator';
+export * from './components/ui/sheet';
+export * from './components/ui/skeleton';
+export * from './components/ui/slider';
+export * from './components/ui/stack';
+export * from './components/ui/resizable';
+export * from './components/ui/sidebar-primary';
+export * from './components/ui/sidebar-secondary';
+export * from './components/ui/button-icon';
+export * from './components/ui/button-icon-input';
+export * from './components/ui/filter-search';
+export * from './components/ui/switch';
+export * from './components/ui/table';
+export * from './components/ui/tabs';
+export * from './components/ui/toast';
+export * from './components/ui/toggle-group';
+export * from './components/ui/toolbar';
+export * from './components/ui/tooltip';
+export * from './components/ui/tag';
+export * from './components/ui/timeline';
+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';

package/dist/src/lib/__tests__/breakpoints.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/__tests__/deep-equal.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/__tests__/use-doc-dir.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/lib/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const ROOT_FONT_SIZE_PX = 16;
+export declare const BREAKPOINT_LG: number;
+export declare const BREAKPOINT_XL: number;
+export declare const BREAKPOINT_2XL: number;
+export declare const BREAKPOINT_3XL: number;
+export declare const BREAKPOINT_4XL: number;
+/** SSR-safe `window.innerWidth` read — `undefined` when there is no `window` (e.g. SSR). */
+export declare function getViewportWidth(): number | undefined;

package/dist/src/lib/deep-equal.d.ts

@@ -0,0 +1,2 @@
+/** Recursively compares two values for structural equality (arrays and plain objects). */
+export declare function deepEqual(a: unknown, b: unknown): boolean;

package/dist/src/lib/portal-container.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface PortalContainerProviderProps {
+    /**
+     * The DOM element portaled content should render into (e.g. a `<div>` inside
+     * a shadow root). When set, every ui-react portaling component
+     * (`Popover`, `DropdownMenu`, `Tooltip`, `Dialog`, `Sheet`, `Select`,
+     * `Combobox`, `Toast`) will mount its popup inside this element instead of
+     * `document.body`.
+     */
+    container: HTMLElement | null;
+    children: React.ReactNode;
+}
+/**
+ * Provides a default portal container for all ui-react portaling components.
+ *
+ * Wrap your app (or a subtree) so that popups, dialogs, tooltips, toasts, etc.
+ * render inside the given container instead of `document.body`. This is the
+ * recommended way for shadow-DOM MFEs to keep portaled content inside the
+ * shadow root where adopted stylesheets apply.
+ *
+ * Individual components' `portalContainer` prop overrides this context.
+ *
+ * @example
+ * ```tsx
+ * // Inside a shadow-DOM MFE — all portals go into the shadow root
+ * <PortalContainerProvider container={shadowRootMountDiv}>
+ *   <App />
+ * </PortalContainerProvider>
+ * ```
+ */
+export declare function PortalContainerProvider({ container, children }: PortalContainerProviderProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Returns the portal container set by the nearest `PortalContainerProvider`,
+ * or `undefined` if none exists (letting Base UI default to `document.body`).
+ */
+export declare function usePortalContainer(): HTMLElement | null | undefined;

package/dist/src/lib/use-doc-dir.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Document direction — SSR-safe (defaults to 'ltr', syncs after mount).
+ * Checks both the `dir` attribute and the computed `direction` style so a
+ * page that sets RTL purely via CSS (no `dir` attribute) is still detected.
+ */
+export declare function useDocDir(): 'ltr' | 'rtl';

package/dist/src/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/src/react.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export {}