prime-ui-kit 0.14.0 → 0.16.0

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "../../internal/states";
+import { type ControlSize } from "../../internal/states";
 import { DataTableColumnsMenu } from "./ColumnsMenu";
 import type { DataTableColumn, DataTableGroup, DataTableRowClickEvent, DataTableSortState } from "./types";
 export type { DataTableColumnsMenuProps } from "./ColumnsMenu";
@@ -39,149 +39,248 @@ export type DataTableLabels = {
     /** `aria-label` of the toggle of an expanded group; `{group}` is the group key. */
     collapseGroup: string;
 };
+export declare const DATA_TABLE_LABELS: DataTableLabels;
 export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /** The outer card-fill `<div>`. */
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Column definitions, see `DataTableColumn<Row>`.
+     */
     columns: DataTableColumn<Row>[];
     /**
-     * Ids of columns not rendered (head, body, skeleton, state rows), controlled. A column with
-     * `hideable: false` stays. `DataTable.ColumnsMenu` in `toolbar` changes it.
+     * Ids of columns that are not rendered, controlled. A column with `hideable: false` stays. `DataTable.ColumnsMenu` in `toolbar` changes it.
      */
     hiddenColumns?: string[];
-    /** Initially hidden column ids, uncontrolled. */
+    /**
+     * Initially hidden column ids, uncontrolled.
+     */
     defaultHiddenColumns?: string[];
-    /** The hidden column ids changed (`DataTable.ColumnsMenu`); keep them to restore the choice. */
+    /**
+     * The hidden ids changed (`DataTable.ColumnsMenu`). The kit stores nothing: keep the list (local storage, the user's settings) and pass it back to restore the choice.
+     */
     onHiddenColumnsChange?: (hiddenColumns: string[]) => void;
+    /**
+     * Data; sorted in memory when a sort is set. With `source="server"` — the page (or the loaded batches) as the server returned it.
+     */
     rows: Row[];
     /**
-     * Who sorts and pages the rows. `client` — the table sorts `rows` and slices pages itself;
-     * `server` — `rows` is the one page (or the loaded batches) the owner fetched, already sorted:
-     * the table never re-sorts or slices them, `sort` / `page` drive the request and `rowCount`
-     * the Pagination and the range line.
+     * Who sorts and pages the rows. `client`: the table sorts `rows` and slices pages. `server`: `rows` is one page, already sorted; `sort` / `page` changes are the request, `rowCount` drives Pagination.
      */
     source?: "client" | "server";
-    /** Total rows on the server (`source="server"`): Pagination and «Показано … из {total}». */
+    /**
+     * Total rows on the server (`source="server"`): the page count and «Показано {from}–{to} из {total}».
+     */
     rowCount?: number;
+    /**
+     * Density and control tier: rows from 36 · 36 · 44 · 52 · 52 px (`--prime-table-row-height-<size>`); passed to checkboxes, toggles, Pagination and nested controls. Without it the tier of the host.
+     */
     size?: ControlSize;
+    /**
+     * Class on the root `<div>`.
+     */
     className?: string;
+    /**
+     * Render `<thead>`.
+     */
     showHeader?: boolean;
+    /**
+     * The head sticks while the body scrolls (with `scrollHeight`); on screens lower than 480px it scrolls with the rows.
+     */
     stickyHeader?: boolean;
+    /**
+     * The first visible column (with the selection and toggle columns) sticks while scrolling sideways; the start edge shadow falls from its end edge.
+     */
     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.
+     * Stable row id (position by default; sub-rows too, `index` among siblings); selection, expansion and the enter animation of new rows are keyed by it. Pass it whenever sorting, selection 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). */
+    /**
+     * Human row name for the checkbox and toggle names (`{label}` in `labels`).
+     */
     getRowLabel?: (row: Row) => string;
     /**
-     * The row is a link: the key cell (first visible column) holds a real `<a>` and the same link
-     * covers every other cell, so a click, ⌘/Ctrl-click, a middle click and «open in new tab» work
-     * anywhere on the row; Tab stops on the link.
+     * The row is a link: a real `<a>` in the key cell (first visible column), and the same link covers the whole row. Keep controls out of the key cell.
      */
     getRowHref?: (row: Row) => string;
     /**
-     * Opens a row in place: a click on the row (never on a control inside it, never from a portal)
-     * or Enter / Space on the focused row. With `getRowHref` it gets the plain clicks only — call
-     * `event.preventDefault()` there to route in the app instead of loading the page.
+     * Opens a row in place (a drawer, a panel) on a click, Enter or Space; never from a control inside the row. With `getRowHref` it gets plain clicks: `event.preventDefault()` routes in the app.
      */
     onRowClick?: (row: Row, index: number, event: DataTableRowClickEvent) => void;
-    /** Which rows open (`getRowHref` / `onRowClick`); `false` for totals and service rows. */
+    /**
+     * Which rows open (`getRowHref` and `onRowClick` alike); `false` for a total or a service row — no link, no focus, no cursor.
+     */
     isRowClickable?: (row: Row) => boolean;
+    /**
+     * Skeleton rows while there are no rows; with rows on screen (a refetch, another server page) they stay and the table gets `aria-busy`.
+     */
     loading?: boolean;
-    /** Empty-state content (e.g. `EmptyPage`); defaults to `labels.empty`. */
+    /**
+     * Empty-state content: a string goes into a compact EmptyPage, a node (e.g. a full `EmptyPage`) is rendered as is.
+     */
     empty?: React.ReactNode;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<DataTableLabels>;
-    /** Hairlines between rows. */
+    /**
+     * Hairlines between rows.
+     */
     rowDividers?: boolean;
-    /** Hairlines between content columns. */
+    /**
+     * Hairlines between content columns.
+     */
     columnDividers?: boolean;
+    /**
+     * Current sort, controlled: `{ columnId, order: "asc" | "desc" }` or `null`.
+     */
     sort?: DataTableSortState;
+    /**
+     * Initial sort, uncontrolled.
+     */
     defaultSort?: DataTableSortState;
+    /**
+     * A head click cycles asc → desc → none.
+     */
     onSortChange?: (sort: DataTableSortState) => void;
     /**
-     * `pages` — Pagination in the footer; `infinite` — rows are revealed while scrolling;
-     * `none` — every row at once.
+     * `pages` — Pagination in the footer when there is more than one page; `infinite` — rows are revealed while scrolling; `none` — every row at once.
      */
     paging?: "pages" | "infinite" | "none";
+    /**
+     * Current page (1-based), controlled.
+     */
     page?: number;
+    /**
+     * Initial page, uncontrolled.
+     */
     defaultPage?: number;
+    /**
+     * Page change from the pager; a sort change also returns to page 1.
+     */
     onPageChange?: (page: number) => void;
-    /** Rows per page (also the first batch in infinite scroll). */
+    /**
+     * Rows per page; also the first batch with `paging="infinite"` (with `source="server"` every loaded row is shown).
+     */
     pageSize?: number;
+    /**
+     * Rows revealed per scroll step.
+     */
     infiniteBatchSize?: number;
+    /**
+     * More rows can be loaded from the server.
+     */
     hasMore?: boolean;
+    /**
+     * A server batch is loading: footer status, `aria-busy`.
+     */
     loadingMore?: boolean;
     /**
-     * Asks for the next batch. A returned promise shows the loading status until it settles; a
-     * rejected one stops asking until the rows change.
+     * Called at the end when every loaded row is shown and `hasMore` is set. A returned promise shows the loading status until it settles; a rejected one stops asking until the rows change.
      */
     onLoadMore?: () => void | Promise<void>;
     /**
-     * Max height of the scroll viewport (number = px); `"fill"` — the table takes the height of
-     * its flex / grid parent and the rows scroll inside. 360 with `paging="infinite"`.
+     * Max height of the scroll viewport (number = px); `"fill"` — the table takes the height of its flex / grid parent (or a sized block), the rows scroll inside, infinite paging follows it.
      */
     scrollHeight?: number | string;
-    /** The table spans its container; `false` sizes it by its content. */
+    /**
+     * The table spans its container; `false` sizes it by its content.
+     */
     fullWidth?: boolean;
+    /**
+     * Row wash on hover (and a pressed wash on clickable rows).
+     */
     highlightRowOnHover?: boolean;
+    /**
+     * Column wash under the pointer (head and cells).
+     */
     highlightColumnOnHover?: boolean;
+    /**
+     * Every second row one opaque step off the table fill.
+     */
     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.
+     * Leading checkbox column with «select all», Shift range, press-and-drag and Space.
      */
     selectable?: boolean;
+    /**
+     * Selected row ids, controlled.
+     */
     selected?: React.Key[];
+    /**
+     * Initially selected ids, uncontrolled.
+     */
     defaultSelected?: React.Key[];
+    /**
+     * Selection change.
+     */
     onSelectedChange?: (selected: React.Key[]) => void;
     /**
-     * Rows reorder: a leading handle column (drag, a touch hold, Alt + ↑ / ↓). The row `id` now
-     * stands in front of `beforeId` (`getRowKey` values; `null` — last); on a page, a row put last
-     * stands in front of the first row of the next page. Return a promise to save on a server: the
-     * row stays in its new place with a busy handle, a rejection moves it back. Off while the table
-     * is sorted by a column; with `getRowGroup` rows move inside their group. Not combined with
-     * expandable rows (`getRowChildren`, `renderExpanded`).
+     * Rows reorder by a leading handle column. Row `id` goes in front of `beforeId` (`null` = last); apply it with `moveBefore`, return a promise to save. Off while sorted by a column.
      */
     onReorder?: (id: React.Key, beforeId: React.Key | null) => void | Promise<void>;
-    /** Tree sub-rows: rendered under the parent with the same columns, indented by depth. */
+    /**
+     * 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. */
+    /**
+     * Full-width detail 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. */
+    /**
+     * Which rows get an expand toggle; by default rows with sub-rows, or every row with `renderExpanded`.
+     */
     isRowExpandable?: (row: Row) => boolean;
+    /**
+     * Expanded row ids, controlled.
+     */
     expanded?: React.Key[];
+    /**
+     * Initially expanded ids, uncontrolled.
+     */
     defaultExpanded?: React.Key[];
+    /**
+     * Expansion change.
+     */
     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)`. */
+    /**
+     * Load error: replaces the body with the message in `role="alert"`.
+     */
+    loadError?: React.ReactNode;
+    /**
+     * Number of skeleton rows.
+     */
     loadingRows?: number;
-    /** Panel above the table (search, filters, actions). Wraps on narrow widths. */
+    /**
+     * Panel above the table (search, filters, bulk actions); stacks below 30rem of table width.
+     */
     toolbar?: React.ReactNode;
     /**
-     * Group key of a row: rows are drawn under a header row per group. Groups keep the order they
-     * first appear in `rows`; a sort orders the rows inside each group.
+     * Group key of a row: each group gets a header row and its own `<tbody>`. Groups keep the order in which they first appear in `rows`; a sort orders the rows inside each group; a group split by paging repeats its header.
      */
     getRowGroup?: (row: Row) => string | number;
-    /** Content of a group header row (name, totals); defaults to the group key. */
+    /**
+     * Content of a group header; `group.rows` holds every row of the group (all pages) for totals. Children are laid out start / end in the visible width.
+     */
     renderGroupHeader?: (group: DataTableGroup<Row>) => React.ReactNode;
-    /** Group header rows stick under the head while their rows scroll. */
+    /**
+     * Group headers stick under the head (or the top edge) while their rows scroll.
+     */
     stickyGroupHeaders?: boolean;
     /**
-     * Keys of the collapsed groups, controlled. Passing any of `collapsedGroups`,
-     * `defaultCollapsedGroups`, `onCollapsedGroupsChange` makes groups fold: each group header gets
-     * a disclosure toggle and its rows fold away and back.
+     * Collapsed group keys, controlled. Any prop of this triad makes groups fold: a chevron toggle leads each header, rows fold like sub-rows. «Select all» and paging still count collapsed rows.
      */
     collapsedGroups?: (string | number)[];
-    /** Initially collapsed group keys, uncontrolled (`[]` — every group open, but foldable). */
+    /**
+     * Initially collapsed group keys, uncontrolled; `[]` — every group open but foldable.
+     */
     defaultCollapsedGroups?: (string | number)[];
-    /** The collapsed group keys changed (a group header toggle). */
+    /**
+     * The collapsed group keys changed (a group header toggle).
+     */
     onCollapsedGroupsChange?: (collapsedGroups: (string | number)[]) => void;
 };
-export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, 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, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, error, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, getRowKey, getRowHref, onRowClick, isRowClickable, 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, onReorder, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DataTable {
     var ColumnsMenu: typeof DataTableColumnsMenu;
 }

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

@@ -1,6 +1,4 @@
-import type { ControlSize } from "../../internal/states";
 type FooterProps = {
-    size: ControlSize;
     /** Range line («Показано 1–5 из 23»), or nothing. */
     range: string | null;
     pagination: {
@@ -11,6 +9,6 @@ type FooterProps = {
     /** 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;
+/** Range line, Pagination (the table's tier from context) and the infinite-scroll status under the table. */
+export declare function Footer({ range, pagination, status }: FooterProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "../../internal/states";
+import { type ControlSize } from "../../internal/states";
 import type { DataTableLabels } from "./DataTable";
 import { type RowReorderShared } from "./reorder";
 import { type MeasureRow } from "./rows";

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

@@ -10,7 +10,7 @@ type StateRowsProps<Row> = {
     expandEnabled: boolean;
     /** A leading column of row handles (`onReorder`). */
     reorderable?: boolean;
-    error: React.ReactNode;
+    loadError: React.ReactNode;
     empty: React.ReactNode;
     emptyLabel: string;
     skeletonRows: number;
@@ -20,5 +20,5 @@ type StateRowsProps<Row> = {
  * in a sticky box of the visible width, so a wide table centres it in the viewport, not across
  * every column.
  */
-export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, error, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export declare function StateRows<Row>({ state, columns, size, totalColumns, selectable, expandEnabled, reorderable, loadError, empty, emptyLabel, skeletonRows, }: StateRowsProps<Row>): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
 export {};

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

@@ -4,8 +4,6 @@ import type { FlatRow } from "./rows";
 export type RowReorderShared = {
     /** The table is sorted by a column: the manual order is not what is on screen. */
     locked: boolean;
-    /** Rows whose move the owner is still saving. */
-    pending: ReadonlySet<React.Key>;
     /** `aria-label` of a row's handle; `{label}` is `getRowLabel(row)`. */
     handleLabel: string;
     /** Why the handles are off while the table is sorted. */
@@ -21,6 +19,8 @@ export type RowReorderOptions<Row> = {
     expandEnabled: boolean;
     /** Sorted by a column. */
     sorted: boolean;
+    /** The owner's `rows` as given: a move is made against this array. */
+    rows: readonly Row[];
     /** Every row in table order (sorted, grouped), the rows on screen a run of them. */
     orderedRows: readonly Row[];
     /** Where the rows on screen start in `orderedRows`. */
@@ -33,14 +33,15 @@ export type RowReorderOptions<Row> = {
 };
 /**
  * Row reordering of a DataTable on Dnd's sortable list: the move goes to the owner as
- * `onReorder(id, beforeId)` with the row keys; a returned promise keeps the row in its new place
- * with a busy handle until it settles, a rejection glides it back (Dnd rolls the drawn order back).
+ * `onReorder(id, beforeId)` with the row keys; a returned promise keeps the row in its new place,
+ * busy with a busy handle, until it settles, a rejection glides it back (Dnd tracks the promise and
+ * rolls the drawn order back).
  */
 export declare function useRowReorder<Row>(options: RowReorderOptions<Row>): {
     enabled: boolean;
     shared: RowReorderShared | null;
     reorderIn: (entries: readonly Entry<Row>[]) => (id: string, beforeId: string | null) => void | Promise<void>;
-    isOwnMove: (previous: readonly unknown[], next: readonly unknown[]) => boolean;
+    isOwnMove: (previousRows: readonly Row[], previous: readonly unknown[], next: readonly unknown[]) => boolean;
 };
 type ReorderBodyProps<Row> = {
     entries: Entry<Row>[];
@@ -56,7 +57,7 @@ type ReorderBodyProps<Row> = {
 };
 /** A `<tbody>` whose rows reorder: Dnd's sortable list in its table-rows mode, by the handle only. */
 export declare function ReorderBody<Row>({ entries, start, locked, onReorder, getRowLabel, renderRow, header, className, }: ReorderBodyProps<Row>): import("react/jsx-runtime").JSX.Element;
-/** Mounts the drag session the rows need, unless the app already has one above the table. */
+/** The drag session the rows need; it joins one the app already has above the table. */
 export declare function ReorderRoot({ enabled, children, }: {
     enabled: boolean;
     children: React.ReactNode;
@@ -74,15 +75,14 @@ type RowElementProps = Omit<React.ComponentProps<"tr">, "ref"> & {
 export declare function RowElement({ reorder, rowKey, rowRef, id, children, ...rest }: RowElementProps): import("react/jsx-runtime").JSX.Element;
 type HandleCellProps = {
     reorder: RowReorderShared;
-    rowKey: React.Key;
     rowLabel: string | undefined;
     className?: string | undefined;
     /** Wraps the content like the row's other cells (the fold of a collapsible group's row). */
     wrap?: (node: React.ReactNode) => React.ReactNode;
 };
 /**
- * The leading cell of a reorderable row: the grip (Alt + ↑ / ↓ from the keyboard), a spinner while
- * the owner saves this row's move, and, while the table is sorted, a disabled grip that says why.
+ * The leading cell of a reorderable row: the grip (Alt + ↑ / ↓ from the keyboard; busy while the
+ * owner saves this row's move) and, while the table is sorted, a disabled grip that says why.
  */
-export declare function ReorderHandleCell({ reorder, rowKey, rowLabel, className, wrap }: HandleCellProps): import("react/jsx-runtime").JSX.Element;
+export declare function ReorderHandleCell({ reorder, rowLabel, className, wrap }: HandleCellProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -27,6 +27,11 @@ export type DataTableColumn<Row> = {
      * up, with the sort indicator at the end edge.
      */
     headerAlign?: DataTableCellAlign;
+    /**
+     * The header names the column for assistive tech only (an action column): the head cell looks
+     * empty, the `<th>` keeps `header` as its name.
+     */
+    hideHeader?: boolean;
     width?: string;
     minWidth?: string;
     maxWidth?: string;

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

@@ -13,9 +13,9 @@ type UseInfiniteRowsOptions = {
 };
 /**
  * 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. A promise from
- * `onLoadMore` counts as loading until it settles; after a rejection the table stops asking until
- * the rows change, so a failing request is never repeated in a loop.
+ * viewport (`useLoadMore`), then asks for more data (`onLoadMore`) once every loaded row is shown.
+ * A promise from `onLoadMore` counts as loading until it settles; after a rejection the table
+ * stops asking until the rows change, so a failing request is never repeated in a loop.
  */
 export declare function useInfiniteRows({ enabled, pageSize, batchSize, totalRows, hasMore, loadingMore, onLoadMore, scrollRef, }: UseInfiniteRowsOptions): {
     visibleCount: number;

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

@@ -1,5 +1,5 @@
 import { type PositionAlign } from "../../hooks/usePosition";
-import { type FieldFrameProps } from "../../internal/FieldFrame";
+import { type FieldFocusRingProps, type FieldFrameProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
 import { type CalendarOptions, DatepickerPanel, type DatepickerPanelProps } from "./DatepickerPanel";
 import { type DatepickerRange } from "./datepickerModel";
@@ -14,36 +14,85 @@ export declare function formatDatepickerValue(props: CalendarOptions & ({
     mode: "single";
     value: Date | null;
 })): string | null;
-export type DatepickerRootProps = DatepickerPanelProps & FieldFrameProps & {
+/**
+ * A date as a form submits it, in local time: `yyyy-MM-dd`, with `withTime` `yyyy-MM-ddTHH:mm` —
+ * never `toISOString()`, which shifts the day to UTC.
+ */
+export declare function formatDateValue(date: Date, { withTime }?: {
+    withTime?: boolean;
+}): string;
+export type DatepickerRootProps = DatepickerPanelProps & FieldFrameProps & FieldFocusRingProps & {
+    /**
+     * Field tier (height 28 · 32 · 36 · 40 · 48) and panel tier (day cell 24 · 28 · 32 · 36 · 40). Without it the tier of its host, else `m`.
+     */
     size?: ControlSize;
-    /** Field text without a value; `labels.placeholder` by default. */
+    /**
+     * Field text without a value for this field.
+     */
     placeholder?: string;
-    /** Text before the value in the field, e.g. «С». */
+    /**
+     * Text before the value, e.g. «С».
+     */
     valuePrefix?: string;
+    /**
+     * Controlled visibility of the panel.
+     */
     open?: boolean;
+    /**
+     * Initial visibility, uncontrolled.
+     */
     defaultOpen?: boolean;
+    /**
+     * Field click, Escape, an outside press or an applied value.
+     */
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Escape closes the calendar and returns focus to the field.
+     */
+    closeOnEscape?: boolean;
+    /**
+     * A press outside the calendar and the field closes it; focus follows the pointer.
+     */
+    closeOnOutsideClick?: boolean;
+    /**
+     * The field cannot be opened.
+     */
     disabled?: boolean;
-    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    /**
+     * Danger ring and `aria-invalid` without a message.
+     */
     invalid?: boolean;
-    /** Field stretches to the container width; otherwise it fits the text. */
+    /**
+     * The field stretches to its container; otherwise it fits the text.
+     */
     fullWidth?: boolean;
-    /** Popover alignment to the field. */
+    /**
+     * Popover alignment to the field. `auto` lines the panel up with the trigger edge that has more room beyond it; `start`, `center` or `end` fix it.
+     */
     align?: PositionAlign;
-    /** Id of the field button; generated when omitted. */
+    /**
+     * Id of the field button; generated when omitted.
+     */
     id?: string;
     /**
-     * Submits the value with a form through hidden inputs: `yyyy-MM-dd` (`yyyy-MM-ddTHH:mm` with
-     * `withTime`); a range submits two values under the name, `from` then `to` (empty when open).
+     * Submits the value with a form through hidden inputs: `yyyy-MM-dd` (`yyyy-MM-ddTHH:mm` with `withTime`); a range submits two values under the name, `from` then `to` (empty for an open bound).
      */
     name?: string;
-    /** Accessible name when there is no `label`; the current value is appended. */
+    /**
+     * Name without a `label` (the value is appended) and extra description ids.
+     */
     "aria-label"?: string;
+    /**
+     * Name without a `label` (the value is appended) and extra description ids.
+     */
     "aria-labelledby"?: string;
+    /**
+     * Name without a `label` (the value is appended) and extra description ids.
+     */
     "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 function DatepickerRoot(props: DatepickerRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 declare namespace DatepickerRoot {
     var displayName: string;
 }