prime-ui-kit 0.7.13 → 0.9.1

package/dist/components/data-table/DataTable.d.ts

@@ -1,78 +1,104 @@
 import * as React from "react";
-import type { DataTableSize } from "@/internal/states";
-export type { DataTableSize };
-export type DataTableOrder = "asc" | "desc";
-export type DataTableSortState = {
-    columnId: string;
-    order: DataTableOrder;
-} | null;
-export type DataTableCellAlign = "start" | "center" | "end";
-export type DataTableDividerStyle = "standard" | "dashed" | "dotted" | "none";
-export type DataTableColumn<Row> = {
-    id: string;
-    header: React.ReactNode;
-    accessor?: keyof Row | ((row: Row) => unknown);
-    cell?: (row: Row) => React.ReactNode;
-    sortable?: boolean;
-    sortAccessor?: (row: Row) => unknown;
-    sortComparator?: (a: Row, b: Row, order: DataTableOrder) => number;
-    align?: DataTableCellAlign;
-    width?: string;
-    minWidth?: string;
-    /** Ограничение ширины колонки (например `12rem` или `min(100%, 20rem)`). */
-    maxWidth?: string;
-    onHeaderClick?: (event: React.MouseEvent<HTMLTableCellElement>) => void;
-    onCellClick?: (row: Row, event: React.MouseEvent<HTMLTableCellElement> | React.KeyboardEvent<HTMLTableCellElement>) => void;
+import type { ControlSize } from "@/internal/states";
+import type { DataTableColumn, DataTableSortState } from "./types";
+export type { DataTableColumn, DataTableOrder, DataTableSortState } from "./types";
+/** System strings; `{from}`, `{to}`, `{total}`, `{label}`, `{count}` are replaced. */
+export type DataTableLabels = {
+    /** Screen-reader announcement while skeleton rows are shown. */
+    loading: string;
+    /** Default empty-state text (when `empty` is not set). */
+    empty: string;
+    /** Footer range line. */
+    range: string;
+    /** Footer status while `loadingMore`. */
+    loadingMore: string;
+    /** Footer hint when more rows can be revealed or loaded by scrolling. */
+    scrollForMore: string;
+    /** `aria-label` of the header «select all» checkbox. */
+    selectAll: string;
+    /** `aria-label` of a row checkbox; `{label}` is `getRowLabel(row)` (empty without it). */
+    selectRow: string;
+    /** Screen-reader announcement after the selection changes. */
+    selectedCount: string;
+    /** `aria-label` of the expand toggle of a collapsed row. */
+    expand: string;
+    /** `aria-label` of the expand toggle of an expanded row. */
+    collapse: string;
 };
-export type DataTableRootProps<Row> = {
+export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** The outer card-fill `<div>`. */
+    ref?: React.Ref<HTMLDivElement>;
     columns: DataTableColumn<Row>[];
     rows: Row[];
-    size?: DataTableSize;
+    size?: ControlSize;
     className?: string;
     showHeader?: boolean;
     stickyHeader?: boolean;
     stickyFirstColumn?: boolean;
+    /**
+     * Stable row id (also for sub-rows from `getRowChildren`; `index` is the index among siblings).
+     * Selection and expansion are keyed by it. Without it the id is the row's position, which breaks
+     * when sorting — pass it whenever `selectable` or expansion is used.
+     */
     getRowKey?: (row: Row, index: number) => React.Key;
+    /** Human name of a row for the checkbox / expand toggle `aria-label`s (e.g. the person's name). */
+    getRowLabel?: (row: Row) => string;
     onRowClick?: (row: Row, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
     loading?: boolean;
-    loadingText?: React.ReactNode;
-    emptyText?: React.ReactNode;
-    dividerStyle?: DataTableDividerStyle;
+    /** Empty-state content (e.g. `EmptyPage`); defaults to `labels.empty`. */
+    empty?: React.ReactNode;
+    labels?: Partial<DataTableLabels>;
+    /** Hairlines between rows. */
+    rowDividers?: boolean;
+    /** Hairlines between content columns. */
+    columnDividers?: boolean;
     sort?: DataTableSortState;
     defaultSort?: DataTableSortState;
     onSortChange?: (sort: DataTableSortState) => void;
+    /**
+     * `pages` — Pagination in the footer; `infinite` — rows are revealed while scrolling;
+     * `none` — every row at once.
+     */
+    paging?: "pages" | "infinite" | "none";
     page?: number;
     defaultPage?: number;
     onPageChange?: (page: number) => void;
+    /** Rows per page (also the first batch in infinite scroll). */
     pageSize?: number;
-    showPagination?: boolean;
-    siblingCount?: number;
-    paginationSize?: DataTableSize;
-    infiniteScroll?: boolean;
-    initialVisibleRows?: number;
     infiniteBatchSize?: number;
     hasMore?: boolean;
     loadingMore?: boolean;
     onLoadMore?: () => void | Promise<void>;
+    /** Max height of the scroll viewport (number = px). 360 with `paging="infinite"`. */
     scrollHeight?: number | string;
-    /**
-     * Растянуть `<table>` на 100% ширины контейнера. Лишняя ширина распределяется движком таблицы
-     * (`table-layout: auto`) по правилам браузера — с опорой на содержимое и `width` / `minWidth` / `maxWidth` колонок.
-     * При `false` ширина таблицы по содержимому (`width: max-content`).
-     */
-    fillWidth?: boolean;
-    /** Подсветка строки при наведении (полупрозрачная смесь с фоном строки). */
+    /** The table spans its container; `false` sizes it by its content. */
+    fullWidth?: boolean;
     highlightRowOnHover?: boolean;
-    /** Подсветка колонки под курсором (шапка + ячейки). */
     highlightColumnOnHover?: boolean;
-    /** Чередование фона строк (зебра). */
     striped?: boolean;
+    /**
+     * Built-in row selection: a leading checkbox column, header «select all» (indeterminate when
+     * partial), Shift+click range, press-and-drag across checkboxes, Space on a focused checkbox,
+     * `aria-selected` + `accent-soft` rows and a polite «Выбрано: N» announcement.
+     */
+    selectable?: boolean;
+    selected?: React.Key[];
+    defaultSelected?: React.Key[];
+    onSelectedChange?: (selected: React.Key[]) => void;
+    /** Tree sub-rows: rendered under the parent with the same columns, indented by depth. */
+    getRowChildren?: (row: Row) => Row[] | undefined;
+    /** Detail panel rendered in a full-width row under an expanded row. */
+    renderExpanded?: (row: Row) => React.ReactNode;
+    /** Whether a row gets an expand toggle. Default: it has sub-rows, or `renderExpanded` is set. */
+    isRowExpandable?: (row: Row) => boolean;
+    expanded?: React.Key[];
+    defaultExpanded?: React.Key[];
+    onExpandedChange?: (expanded: React.Key[]) => void;
+    /** Load error: replaces the body with a message in `role="alert"`. */
+    error?: React.ReactNode;
+    /** Skeleton rows while `loading` without rows. Default `min(pageSize, 5)`. */
+    loadingRows?: number;
+    /** Panel above the table (search, filters, actions). Wraps on narrow widths. */
+    toolbar?: React.ReactNode;
 };
-declare function DataTableRoot<Row>({ columns, rows, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, onRowClick, loading, loadingText, emptyText, dividerStyle, sort, defaultSort, onSortChange, page, defaultPage, onPageChange, pageSize, showPagination, siblingCount, paginationSize, infiniteScroll, initialVisibleRows, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fillWidth, highlightRowOnHover, highlightColumnOnHover, striped, }: DataTableRootProps<Row>): import("react/jsx-runtime").JSX.Element;
-declare namespace DataTableRoot {
-    var displayName: string;
-}
-export declare const DataTable: {
-    Root: typeof DataTableRoot;
-};
-//# sourceMappingURL=DataTable.d.ts.map
+export declare function DataTable<Row>({ columns, rows, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, onRowClick, loading, empty, labels: labelsProp, rowDividers, columnDividers, sort, defaultSort, onSortChange, paging, page, defaultPage, onPageChange, pageSize, infiniteBatchSize, hasMore, loadingMore, onLoadMore, scrollHeight, fullWidth, highlightRowOnHover, highlightColumnOnHover, striped, getRowLabel, selectable, selected, defaultSelected, onSelectedChange, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, error, loadingRows, toolbar, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/Footer.d.ts

@@ -0,0 +1,16 @@
+import type { ControlSize } from "@/internal/states";
+type FooterProps = {
+    size: ControlSize;
+    /** Range line («Показано 1–5 из 23»), or nothing. */
+    range: string | null;
+    pagination: {
+        page: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+    } | null;
+    /** Infinite-scroll status, or nothing. */
+    status: string | null;
+};
+/** Range line, Pagination and the infinite-scroll status under the table. */
+export declare function Footer({ size, range, pagination, status }: FooterProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/data-table/Head.d.ts

@@ -0,0 +1,21 @@
+import type { ControlSize } from "@/internal/states";
+import type { DataTableColumn, DataTableSortState } from "./types";
+type HeadProps<Row> = {
+    columns: DataTableColumn<Row>[];
+    size: ControlSize;
+    sort: DataTableSortState;
+    onSort: (columnId: string) => void;
+    stickyFirstColumn: boolean;
+    /** Sticky head and first column: the leading head cells stick to both edges. */
+    stickyCorner: boolean;
+    expandEnabled: boolean;
+    selectAll?: {
+        checked: boolean;
+        indeterminate: boolean;
+        disabled: boolean;
+        label: string;
+        onToggle: () => void;
+    };
+};
+export declare function Head<Row>({ columns, size, sort, onSort, stickyFirstColumn, stickyCorner, expandEnabled, selectAll, }: HeadProps<Row>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/Row.d.ts

@@ -0,0 +1,56 @@
+import * as React from "react";
+import type { ControlSize } from "@/internal/states";
+import type { DataTableLabels } from "./DataTable";
+import { type MeasureRow } from "./rows";
+import type { DataTableCellAlign, DataTableColumn } from "./types";
+import type { RowSelectionHandlers } from "./useRowSelection";
+export declare function columnAlign<Row>(column: DataTableColumn<Row>): DataTableCellAlign;
+export declare function columnSizeStyle<Row>(column: DataTableColumn<Row>): React.CSSProperties | undefined;
+/** Everything a row needs that is the same for every row (memoized by the table). */
+export type RowShared<Row> = {
+    columns: DataTableColumn<Row>[];
+    size: ControlSize;
+    labels: DataTableLabels;
+    selectable: boolean;
+    expandEnabled: boolean;
+    stickyFirstColumn: boolean;
+    striped: boolean;
+    totalColumns: number;
+    getRowLabel?: (row: Row) => string;
+    onRowClick?: (row: Row, index: number, event: React.MouseEvent<HTMLTableRowElement>) => void;
+    renderExpanded?: (row: Row) => React.ReactNode;
+    rowDomId: (key: React.Key) => string;
+    detailDomId: (key: React.Key) => string;
+    selection: RowSelectionHandlers;
+    toggleExpanded: (key: React.Key) => void;
+};
+type DataTableRowProps<Row> = {
+    shared: RowShared<Row>;
+    row: Row;
+    rowKey: React.Key;
+    index: number;
+    depth: number;
+    expandable: boolean;
+    expanded: boolean;
+    animate: boolean;
+    /** The detail panel opened by the latest expand: it drops in. */
+    detailAnimate: boolean;
+    selected: boolean;
+    /** Ids of the sub-rows the toggle controls (while expanded). */
+    childControls: string;
+};
+declare function DataTableRowImpl<Row>({ shared, row, rowKey, index, depth, expandable, expanded, animate, detailAnimate, selected, childControls, }: DataTableRowProps<Row>): import("react/jsx-runtime").JSX.Element;
+/** A body row (plus its detail panel); re-renders only when its own props change. */
+export declare const DataTableRow: typeof DataTableRowImpl;
+type MeasureBodyProps<Row> = {
+    rows: MeasureRow<Row>[];
+    columns: DataTableColumn<Row>[];
+    selectable: boolean;
+    expandEnabled: boolean;
+};
+/**
+ * Sub-rows of collapsed rows, laid out invisibly so the columns are already as wide as they will
+ * be once a row opens; never shown or reachable.
+ */
+export declare function MeasureBody<Row>({ rows, columns, selectable, expandEnabled, }: MeasureBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/data-table/StateRows.d.ts

@@ -0,0 +1,18 @@
+import type * as React from "react";
+import type { ControlSize } from "@/internal/states";
+import type { DataTableColumn } from "./types";
+type StateRowsProps<Row> = {
+    state: "error" | "loading" | "empty";
+    columns: DataTableColumn<Row>[];
+    size: ControlSize;
+    totalColumns: number;
+    selectable: boolean;
+    expandEnabled: boolean;
+    error: React.ReactNode;
+    empty: React.ReactNode;
+    emptyLabel: string;
+    skeletonRows: number;
+};
+/** The body of the loading (skeleton rows), empty and error states. */
+export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, error, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export {};

package/dist/components/data-table/rows.d.ts

@@ -0,0 +1,60 @@
+import type * as React from "react";
+import type { DataTableColumn, DataTableOrder, DataTableSortState } from "./types";
+/** The value a column sorts by: `sortAccessor`, else `accessor`. */
+export declare function columnValue<Row>(row: Row, column: DataTableColumn<Row>): unknown;
+/** Stable sort: equal rows keep their order. */
+export declare function sortRows<Row>(list: Row[], column: DataTableColumn<Row>, order: DataTableOrder): Row[];
+/** Header click cycle: asc → desc → none. */
+export declare function nextSort(current: DataTableSortState, columnId: string): DataTableSortState;
+export type FlatRow<Row> = {
+    row: Row;
+    key: React.Key;
+    depth: number;
+    /** Ids of the direct sub-rows (empty when none). */
+    childKeys: React.Key[];
+    expandable: boolean;
+    expanded: boolean;
+    /** Mounted by the latest expand, or newly added to `rows`: plays the enter animation. */
+    animate: boolean;
+};
+export type MeasureRow<Row> = {
+    row: Row;
+    key: React.Key;
+    depth: number;
+};
+export type FlattenOptions<Row> = {
+    /** Top-level rows in `[start, end)` are rendered; the rest only contribute keys. */
+    start: number;
+    end: number;
+    getRowKey?: (row: Row, index: number) => React.Key;
+    getRowChildren?: (row: Row) => Row[] | undefined;
+    sortColumn?: DataTableColumn<Row>;
+    order?: DataTableOrder;
+    expandEnabled: boolean;
+    /** `renderExpanded` is set: every row may open a detail panel. */
+    withDetail: boolean;
+    isRowExpandable?: (row: Row) => boolean;
+    expanded: ReadonlySet<React.Key>;
+    /** Top-level rows newly added to the data. */
+    arrived: ReadonlySet<React.Key>;
+    /** Row whose latest expand mounted new rows: only those animate in. */
+    lastExpandedKey: React.Key | null;
+    /** Collect every key of the data (all pages, all depths) for «select all». */
+    collectKeys: boolean;
+};
+export type Flattened<Row> = {
+    /** Rendered rows in order: the page rows plus the sub-rows of expanded rows. */
+    rows: FlatRow<Row>[];
+    /**
+     * Direct sub-rows of collapsed rows: drawn invisible so the columns are already as wide as they
+     * will be once a row opens.
+     */
+    measure: MeasureRow<Row>[];
+    /** Every row id in the data: the scope of «select all» (empty without `collectKeys`). */
+    keys: React.Key[];
+};
+/**
+ * One walk over the sorted data. Sub-rows are sorted like the top level and keyed the same way in
+ * every pass, so positional ids of the rendered rows and of «select all» always agree.
+ */
+export declare function flatten<Row>(data: Row[], options: FlattenOptions<Row>): Flattened<Row>;

package/dist/components/data-table/types.d.ts

@@ -0,0 +1,35 @@
+import type * as React from "react";
+export type DataTableOrder = "asc" | "desc";
+export type DataTableSortState = {
+    columnId: string;
+    order: DataTableOrder;
+} | null;
+/** Internal to the data-table folder (not exported from the kit). */
+export type DataTableCellAlign = "start" | "center" | "end";
+export type DataTableColumn<Row> = {
+    id: string;
+    header: React.ReactNode;
+    accessor?: keyof Row | ((row: Row) => unknown);
+    cell?: (row: Row) => React.ReactNode;
+    sortable?: boolean;
+    sortAccessor?: (row: Row) => unknown;
+    sortComparator?: (a: Row, b: Row, order: DataTableOrder) => number;
+    align?: DataTableCellAlign;
+    /**
+     * Header alignment, independent of `align`: headers start at the start edge so every header lines
+     * up, with the sort indicator at the end edge.
+     */
+    headerAlign?: DataTableCellAlign;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    /** `tabular-nums`, no wrapping, `end` alignment unless `align` is set. */
+    numeric?: boolean;
+    /** One line with an ellipsis; width from `maxWidth` (or `width`); string values get a `title`. */
+    truncate?: boolean;
+    /**
+     * The column takes the free width of the table and wraps its text (descriptions, comments). With
+     * such a column the table fills its container instead of growing to its content width.
+     */
+    grow?: boolean;
+};

package/dist/components/data-table/useColumnHover.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+/**
+ * Column highlight: one delegated `pointerover` on the table marks the cells of the hovered column
+ * with `data-column-hovered` directly in the DOM. Hovering never re-renders the table.
+ */
+export declare function useColumnHover(enabled: boolean): {
+    onPointerOver(event: React.PointerEvent<HTMLTableElement>): void;
+    onPointerLeave(event: React.PointerEvent<HTMLTableElement>): void;
+} | undefined;

package/dist/components/data-table/useFrozenColumns.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+/**
+ * Stable column widths. The browser sizes columns by the rows on screen, so searching, filtering,
+ * paging or opening a row would make every column jump. Once real rows are laid out, the widths
+ * are frozen into the colgroup (`table-layout: fixed`); later renders keep them. They are measured
+ * again (never narrower than before) when the rendered rows change and content stops fitting, and
+ * from scratch when the column set or the container width changes. `grow` columns
+ * (`col[data-grow]`) keep taking the free width.
+ */
+export declare function useFrozenColumns(tableRef: React.RefObject<HTMLTableElement | null>, rootRef: React.RefObject<HTMLDivElement | null>, 
+/** Changes with the column set: widths start from scratch. */
+columnsKey: string, 
+/** Changes with the rendered rows: widths widen when content no longer fits. */
+rowsKey: unknown, 
+/** Real rows are on screen (not loading, empty or error). */
+ready: boolean): void;

package/dist/components/data-table/useInfiniteRows.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+type UseInfiniteRowsOptions = {
+    enabled: boolean;
+    /** First batch. */
+    pageSize: number;
+    /** Rows revealed per reach of the end. */
+    batchSize: number;
+    totalRows: number;
+    hasMore: boolean;
+    loadingMore: boolean;
+    onLoadMore?: () => void | Promise<void>;
+    scrollRef: React.RefObject<HTMLElement | null>;
+};
+/**
+ * Infinite scroll: reveals loaded rows in batches while a sentinel under the table reaches the
+ * viewport, then asks for more data (`onLoadMore`) once every loaded row is shown.
+ */
+export declare function useInfiniteRows({ enabled, pageSize, batchSize, totalRows, hasMore, loadingMore, onLoadMore, scrollRef, }: UseInfiniteRowsOptions): {
+    visibleCount: number;
+    hasInternalMore: boolean;
+    canRequestMore: boolean;
+    sentinelRef: React.RefObject<HTMLDivElement | null>;
+};
+export {};

package/dist/components/data-table/useRowSelection.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+type UseRowSelectionOptions = {
+    selected?: React.Key[];
+    defaultSelected: React.Key[];
+    onSelectedChange?: (selected: React.Key[]) => void;
+    /** Ids of the rendered rows in order: Shift ranges and drags run over them. */
+    visibleKeys: React.Key[];
+    /** Every id in the data: the scope of «select all». */
+    allKeys: React.Key[];
+    tableRef: React.RefObject<HTMLTableElement | null>;
+    /** Announcement after a change, from the selected count. */
+    announce: (count: number) => string;
+};
+export type RowSelectionHandlers = {
+    /** Press on a checkbox cell: starts a drag across checkboxes (mouse and pen). */
+    onPointerDown: (index: number, event: React.PointerEvent<HTMLElement>) => void;
+    /** Click (pointer or Space) on a checkbox cell: toggles the row; Shift extends from the anchor. */
+    onClick: (index: number, event: React.MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Row selection: controlled / uncontrolled ids, «select all» over every id in the data, Shift+click
+ * ranges from the last toggled row, press-and-drag across checkbox cells and a polite count
+ * announcement. The cell handlers are stable, so memoized rows do not re-render when the
+ * selection of other rows changes.
+ */
+export declare function useRowSelection({ selected, defaultSelected, onSelectedChange, visibleKeys, allKeys, tableRef, announce, }: UseRowSelectionOptions): {
+    selectedSet: Set<React.Key>;
+    allSelected: boolean;
+    someSelected: boolean;
+    announcement: string;
+    dragging: boolean;
+    toggleAll: () => void;
+    handlers: RowSelectionHandlers;
+};
+export {};

package/dist/components/datepicker/Datepicker.d.ts

@@ -1,104 +1,48 @@
-import * as React from "react";
-import { type DateRange, type DayPickerProps } from "react-day-picker";
-import type { TypographyRootProps } from "@/components/typography/Typography";
-import { type ResponsiveMonthsBreakpoints } from "@/hooks/useResponsiveMonths";
-import type { InputSize } from "@/internal/states";
-import "react-day-picker/style.css";
-export type { DateRange };
-export type DatepickerSize = InputSize;
-/** Значение для `<input type="time" />` в локальном времени */
-export declare function formatTimeInputValue(date: Date | undefined): string;
-/** Подставляет часы и минуты из строки `HH:mm` в дату */
-export declare function mergeTimeIntoDate(date: Date, timeHHmm: string): Date;
-export type DatepickerCalendarProps = DayPickerProps & {
-    /**
-     * Подстраивать `numberOfMonths` под ширину контейнера (1 / 2 колонки).
-     * Если `true`, проп `numberOfMonths` игнорируется.
-     */
-    responsiveMonths?: boolean;
-    /** Порог ширины для 2 колонок */
-    responsiveBreakpoints?: ResponsiveMonthsBreakpoints;
-    /** Размер календаря: влияет на кегль, ячейки и кнопки навигации */
-    size?: DatepickerSize;
-};
-declare function Calendar({ responsiveMonths, responsiveBreakpoints, numberOfMonths: numberOfMonthsProp, classNames: userClassNames, components: userComponents, style, weekStartsOn, navLayout, month: monthProp, onMonthChange, size: sizeProp, ...rest }: DatepickerCalendarProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Calendar {
-    var displayName: string;
-}
-export type DatepickerShellProps = {
-    children: React.ReactNode;
-    className?: string;
-    presets?: React.ReactNode;
-    /** Размер всей оболочки датпикера */
-    size?: DatepickerSize;
-};
-declare function Shell({ children, className, presets, size }: DatepickerShellProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Shell {
-    var displayName: string;
-}
-export type DatepickerPresetSingle = {
-    label: string;
-    date: Date | undefined;
-};
-export type DatepickerPresetRange = {
-    label: string;
-    range: DateRange | undefined;
-};
-export type DatepickerPresetsProps = {
-    className?: string;
-    title?: string;
-    size?: DatepickerSize;
-} & ({
-    mode: "single";
-    presets: DatepickerPresetSingle[];
-    onSelect: (date: Date | undefined) => void;
-} | {
+import type { PositionAlign } from "@/hooks/usePosition";
+import { type FieldFrameProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+import { type CalendarOptions, DatepickerPanel, type DatepickerPanelProps } from "./DatepickerPanel";
+import { type DatepickerRange } from "./datepickerModel";
+export type { DatepickerLabels, DatepickerPanelProps } from "./DatepickerPanel";
+export type { DatepickerPreset, DatepickerRange, WeekStart } from "./datepickerModel";
+export { DEFAULT_DATEPICKER_PRESETS, datepickerPresets, YEARLESS_YEAR, } from "./datepickerModel";
+/** Text of a value as the field shows it (preset name, «6 окт — 3 нояб», time when needed). */
+export declare function formatDatepickerValue(props: CalendarOptions & ({
     mode: "range";
-    presets: DatepickerPresetRange[];
-    onSelect: (range: DateRange | undefined) => void;
-});
-declare function Presets(props: DatepickerPresetsProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Presets {
-    var displayName: string;
-}
-export type DatepickerTimeSingleProps = {
-    mode?: "single";
-    size?: DatepickerSize;
-    value: Date | undefined;
-    onChange: (next: Date) => void;
-    labels?: {
-        time?: string;
-    };
-};
-export type DatepickerTimeRangeProps = {
-    mode: "range";
-    size?: DatepickerSize;
-    from: Date | undefined;
-    to: Date | undefined;
-    onFromChange: (next: Date) => void;
-    onToChange: (next: Date) => void;
-    labels?: {
-        from?: string;
-        to?: string;
-    };
-};
-export type DatepickerTimeProps = DatepickerTimeSingleProps | DatepickerTimeRangeProps;
-declare function Time(props: DatepickerTimeProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Time {
-    var displayName: string;
-}
-export type DatepickerValueProps = Omit<TypographyRootProps, "variant"> & {
-    size?: DatepickerSize;
-};
-declare function Value({ className, size: sizeProp, tone, ...rest }: DatepickerValueProps): import("react/jsx-runtime").JSX.Element;
-declare namespace Value {
+    value: DatepickerRange;
+} | {
+    mode: "single";
+    value: Date | null;
+})): string | null;
+export type DatepickerRootProps = DatepickerPanelProps & FieldFrameProps & {
+    size?: ControlSize;
+    /** Field text without a value; `labels.placeholder` by default. */
+    placeholder?: string;
+    /** Text before the value in the field, e.g. «С». */
+    valuePrefix?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    invalid?: boolean;
+    /** Field stretches to the container width; otherwise it fits the text. */
+    fullWidth?: boolean;
+    /** Popover alignment to the field. */
+    align?: PositionAlign;
+    /** Id of the field button; generated when omitted. */
+    id?: string;
+    /** Accessible name when there is no `label`; the current value is appended. */
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+};
+/** A field (field system: fill, tier height, rings) with the value; a click opens the panel in a popover. */
+declare function DatepickerRoot(props: DatepickerRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DatepickerRoot {
     var displayName: string;
 }
 export declare const Datepicker: {
-    Calendar: typeof Calendar;
-    Shell: typeof Shell;
-    Presets: typeof Presets;
-    Time: typeof Time;
-    Value: typeof Value;
+    Root: typeof DatepickerRoot;
+    Panel: typeof DatepickerPanel;
 };
-//# sourceMappingURL=Datepicker.d.ts.map