prime-ui-kit 0.20.1 → 0.21.0

package/dist/color-picker.js

@@ -4,8 +4,8 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-4KONMO7Z.js";
-import "./chunks/chunk-3PY52JP3.js";
+} from "./chunks/chunk-6L7VWEY6.js";
+import "./chunks/chunk-S27VR4ON.js";
 import "./chunks/chunk-QFHE5GKW.js";
 export {
   ColorField,

package/dist/components/badge/Badge.d.ts

@@ -127,11 +127,26 @@ export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 };
+export type BadgeGroupLabels = {
+    /** The visible text of the badge that stands for the badges that did not fit. */
+    more: string;
+    /** What assistive tech reads for that badge: how many values are not shown (its tooltip lists them). */
+    moreCount: string;
+};
+export declare const BADGE_GROUP_LABELS: BadgeGroupLabels;
 export type BadgeGroupProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Tier of every badge in the group; a badge's own `size` wins. Small tiers stand closer.
      */
     size?: ControlSize;
+    /**
+     * `wrap` — the row wraps onto more lines. `count` — one line (a table cell): the badges that fit the container, the rest behind a focusable «+N» badge whose tooltip lists them.
+     */
+    overflow?: "wrap" | "count";
+    /**
+     * Built-in strings of the «+N» badge, see Labels.
+     */
+    labels?: Partial<BadgeGroupLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
 declare function BadgeRoot({ color, tone, variant, size: sizeProp, shape, onRemove, pressed: pressedProp, defaultPressed, onPressedChange, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
@@ -163,9 +178,11 @@ declare namespace BadgeAction {
 /**
  * A row of badges as one value (the tags of a record, the stages a deal went through): the badges
  * wrap onto more lines, a chip gap apart. `size` sets the tier of every badge in it; without it the
- * badges follow the host, as a lone badge does.
+ * badges follow the host, as a lone badge does. `overflow="count"` keeps the row on one line: as
+ * many badges as fit the container, the rest behind a focusable «+N» badge: assistive tech
+ * reads how many, its tooltip (the badge's description) lists them.
  */
-declare function BadgeGroup({ size, className, ...rest }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeGroup({ size, overflow, labels: labelsProp, className, children, ref, ...rest }: BadgeGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeGroup {
     var displayName: string;
 }

package/dist/components/card/Card.d.ts

@@ -30,7 +30,10 @@ declare namespace CardRoot {
     var displayName: string;
 }
 export type CardHeaderProps = DivProps;
-/** The top row: the title first, anything after it (a control, a quiet caption) at the end. */
+/**
+ * The top row: an optional `Card.Icon` first, then the title (and its description), anything after
+ * it (a control, a quiet caption) at the end.
+ */
 declare function CardHeader({ className, ...rest }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardHeader {
     var displayName: string;
@@ -72,8 +75,12 @@ declare namespace CardFooter {
     var displayName: string;
 }
 export type CardIconProps = DivProps;
-/** The accent icon tile of a KPI; holds one icon. */
-declare function CardIcon({ className, ...rest }: CardIconProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The accent icon tile of a KPI (one icon), or the picture of the record a card is about (an
+ * `Avatar.Root` or a `Thumbnail.Root` anywhere inside, internal/mediaSlot): no tile, the tile's 40
+ * box. In `Card.Header` it leads, before the title and its description.
+ */
+declare function CardIcon({ className, children, ...rest }: CardIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardIcon {
     var displayName: string;
 }

package/dist/components/composer/Composer.d.ts

@@ -66,6 +66,8 @@ export type ComposerLabels = TextFormattingLabels & {
     cancelReply: string;
     /** Name of the close button of an edit bar. */
     cancelEdit: string;
+    /** Name of the button that shows and hides the reply keyboard, and of the keyboard itself. */
+    keyboard: string;
 };
 export declare const COMPOSER_LABELS: ComposerLabels;
 /** An attached photo or video: the uploaded queue item and what it shows. */
@@ -193,7 +195,7 @@ export type ComposerContextProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
 /** The bar above the field: «Ответ Анне» with the quoted text, or «Редактирование». */
-declare function ComposerContext({ mode, messageId, onDismiss, id: idProp, className, children, ...rest }: ComposerContextProps): import("react/jsx-runtime").JSX.Element;
+declare function ComposerContext({ mode, messageId, onDismiss, id: idProp, className, children, ref, ...rest }: ComposerContextProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ComposerContext {
     var displayName: string;
 }
@@ -257,6 +259,51 @@ declare function ComposerItemIcon(props: ComposerItemIconProps): import("react/j
 declare namespace ComposerItemIcon {
     var displayName: string;
 }
+/**
+ * A key of the reply keyboard: its text (sent as the message), or the text with an `icon` before
+ * it and a `tone` (Telegram's `primary` is `accent`).
+ */
+export type ComposerKey = string | {
+    label: string;
+    icon?: React.ReactNode;
+    tone?: "accent" | "success" | "danger";
+};
+export type ComposerKeyboardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * Rows of keys, each row one line shared equally. A key is its text, or `{ label, icon?, tone? }` with `tone` `"accent" | "success" | "danger"`.
+     */
+    rows: readonly (readonly ComposerKey[])[];
+    /**
+     * The field's placeholder while the keyboard is shown («Выберите раздел»).
+     */
+    placeholder?: string;
+    /**
+     * Hides the keyboard after a key is used (once its promise resolves) and puts the caret in the field; the toggle shows it again.
+     */
+    oneTime?: boolean;
+    /**
+     * Whether the keys are shown (controlled).
+     */
+    open?: boolean;
+    /**
+     * Shown at first, uncontrolled: a keyboard the bot just sent is open.
+     */
+    defaultOpen?: boolean;
+    /**
+     * The toggle pressed, or a `oneTime` keyboard used.
+     */
+    onOpenChange?: (open: boolean) => void;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * A bot's reply keyboard: rows of keys under the composer's row, in place of a phone's keyboard;
+ * a key sends its text through `onSend`. The toggle before the send button shows and hides it;
+ * `oneTime` hides it after a key is used.
+ */
+declare function ComposerKeyboard({ rows, placeholder, oneTime, open: openProp, defaultOpen, onOpenChange, id: idProp, className, "aria-label": ariaLabel, ref, ...rest }: ComposerKeyboardProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ComposerKeyboard {
+    var displayName: string;
+}
 export declare const Composer: {
     Root: typeof ComposerRoot;
     Context: typeof ComposerContext;
@@ -265,4 +312,5 @@ export declare const Composer: {
     Attach: typeof ComposerAttach;
     Item: typeof ComposerItem;
     ItemIcon: typeof ComposerItemIcon;
+    Keyboard: typeof ComposerKeyboard;
 };

package/dist/components/crossfade/Crossfade.d.ts

@@ -1,7 +1,7 @@
 import type * as React from "react";
 export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
-     * Key of what the region shows: `"loading"`, `"ready"`, `"empty"`, `"error"` or a record id. A new value cross-fades the old content into the new one; the same value updates in place.
+     * Key of what the region shows: `"loading"`, `"ready"`, `"empty"`, `"error"` or a record id. A new value cross-fades; the same one updates in place. A swap into or out of `"loading"` never glides the height.
      */
     state: string | number;
     /**
@@ -11,7 +11,9 @@ export type CrossfadeProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
- * Cross-fades a region between its states (loading → data → empty → error) and glides its height,
- * so the page below does not jump: the kit's region swap (`src/internal/RegionSwap`), public.
+ * Cross-fades a region between its states (loading → data → empty → error): the data replaces the
+ * `"loading"` skeleton in place, settled states glide the height, so the page below does not jump:
+ * the kit's region swap (`src/internal/RegionSwap`), public. The region spans its parent's inline
+ * size, also inside a centring grid.
  */
-export declare function Crossfade(props: CrossfadeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Crossfade({ className, ...props }: CrossfadeProps): import("react/jsx-runtime").JSX.Element;

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

@@ -24,6 +24,10 @@ export type DataTableLabels = {
     expand: string;
     /** `aria-label` of the expand toggle of an expanded row. */
     collapse: string;
+    /** Text of the menu button of the actions on the selected rows (`renderSelectionActions`). */
+    selectionActions: string;
+    /** The first item of the selection actions menu: clears the selection. */
+    clearSelection: string;
     /** Name and tooltip of the column chooser (`columnsMenu`); `{shown}` and `{total}` are counts. */
     columns: string;
     /** The heading of the column chooser's list of columns. */
@@ -282,13 +286,17 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     loadingRows?: number;
     /**
-     * The table's own tools row — search, filter, `DataTableColumnsMenu`, a view, bulk actions; two or more, unwrapped. Laid out as `Page.Tools`: the search takes the free room, the rest keep their width at the end.
+     * The table's own tools row — search, filter, `DataTableColumnsMenu`, a view; two or more, as direct children or a fragment (a wrapper component is one cell). Laid out as `Page.Tools`.
      */
     toolbar?: React.ReactNode;
     /**
      * The applied filters (`SmartFilter.Chips`) on a line under the `toolbar`, gone while empty; `SmartFilter.Root` wraps the DataTable.
      */
     toolbarChips?: React.ReactNode;
+    /**
+     * `Dropdown.Item`s acting on the selected keys: while rows are selected, a menu button with the count enters last in the tool row, after the `toolbar`; its first item clears the selection.
+     */
+    renderSelectionActions?: (selected: React.Key[]) => React.ReactNode;
     /**
      * 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.
      */
@@ -314,4 +322,4 @@ export type DataTableProps<Row> = Omit<React.HTMLAttributes<HTMLDivElement>, "ch
      */
     onCollapsedGroupsChange?: (collapsedGroups: (string | number)[]) => void;
 };
-export declare function DataTable<Row>({ columns: allColumns, hiddenColumns, defaultHiddenColumns, onHiddenColumnsChange, columnOrder, defaultColumnOrder, onColumnOrderChange, columnsMenu, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, stickyLastColumn, 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, reorderHandle, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, toolbarChips, 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, columnOrder, defaultColumnOrder, onColumnOrderChange, columnsMenu, rows, source, rowCount, size: sizeProp, className, showHeader, stickyHeader, stickyFirstColumn, stickyLastColumn, 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, reorderHandle, getRowChildren, renderExpanded, isRowExpandable, expanded, defaultExpanded, onExpandedChange, loadError, loadingRows, toolbar, toolbarChips, renderSelectionActions, getRowGroup, renderGroupHeader, stickyGroupHeaders, collapsedGroups, defaultCollapsedGroups, onCollapsedGroupsChange, ref, ...rest }: DataTableProps<Row>): import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,18 @@ import { type MeasureRow } from "./rows";
 import type { DataTableCellAlign, DataTableColumn, DataTableRowClickEvent } 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;
+/**
+ * The size of a column's cells: its own lengths inline (a fixed `width` is also its floor, which the
+ * frozen widths keep), `data-grow` for the free width (CSS).
+ */
+export declare function columnSizeProps<Row>(column: DataTableColumn<Row>): {
+    style: {
+        width: string | undefined;
+        minWidth: string | undefined;
+        maxWidth: string | undefined;
+    } | undefined;
+    "data-grow": string | undefined;
+};
 /** Everything a row needs that is the same for every row (memoized by the table). */
 export type RowShared<Row> = {
     columns: DataTableColumn<Row>[];

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

@@ -0,0 +1,20 @@
+import type * as React from "react";
+import type { ControlSize } from "../../internal/states";
+type SelectionMenuProps = {
+    /** The selected row keys, in the order they were selected. */
+    selected: React.Key[];
+    /** The consumer's items for the selection (`renderSelectionActions`). */
+    actions: React.ReactNode;
+    onClear: () => void;
+    labels: {
+        selectionActions: string;
+        clearSelection: string;
+    };
+    size: ControlSize;
+};
+/**
+ * The actions on the selected rows: a soft Button with the count of selected rows that opens a
+ * Dropdown — `labels.clearSelection` first, then the consumer's items.
+ */
+export declare function SelectionMenu({ selected, actions, onClear, labels, size }: SelectionMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -25,12 +25,14 @@ export type RowSelectionHandlers = {
  * 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): {
+    selectedKeys: React.Key[];
     selectedSet: Set<React.Key>;
     allSelected: boolean;
     someSelected: boolean;
     announcement: string;
     dragging: boolean;
     toggleAll: () => void;
+    clear: () => void;
     handlers: RowSelectionHandlers;
 };
 export {};

package/dist/components/empty-page/EmptyPage.d.ts

@@ -27,8 +27,11 @@ export type EmptyPageRootProps = React.HTMLAttributes<HTMLDivElement> & {
     labels?: Partial<EmptyPageLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
-/** Parts rise in on first render, except in `compact` (it appears on every keystroke). */
-declare function EmptyPageRoot({ size: sizeProp, layout, tone, labels, className, children, ...rest }: EmptyPageRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/**
+ * Parts rise in when it appears on a shown page (a search or a filter that came to nothing), except
+ * in `compact` (it appears on every keystroke); one that mounts with its page is just there.
+ */
+declare function EmptyPageRoot({ size: sizeProp, layout, tone, labels, className, children, ref, ...rest }: EmptyPageRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace EmptyPageRoot {
     var displayName: string;
 }

package/dist/components/hint/Hint.d.ts

@@ -21,7 +21,7 @@ export type HintRootProps = React.HTMLAttributes<HTMLParagraphElement> & {
     disabled?: boolean;
     ref?: React.Ref<HTMLParagraphElement>;
 };
-declare function HintRoot({ className, size: sizeProp, tone, invalid, disabled: disabledProp, children, ...rest }: HintRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function HintRoot({ className, size: sizeProp, tone, invalid, disabled: disabledProp, children, ref, ...rest }: HintRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace HintRoot {
     var displayName: string;
 }

package/dist/components/index.d.ts

@@ -6,7 +6,7 @@ export type { AccordionContentProps, AccordionHeaderProps, AccordionHeadingLevel
 export { Accordion } from "./accordion/Accordion";
 export type { AvatarFallbackProps, AvatarGroupProps, AvatarImageProps, AvatarOverflowProps, AvatarPresence, AvatarRootProps, AvatarSize, AvatarStatusLabels, AvatarStatusProps, } from "./avatar/Avatar";
 export { Avatar } from "./avatar/Avatar";
-export type { BadgeActionProps, BadgeDotProps, BadgeGroupProps, BadgeIconProps, BadgeLabels, BadgeRootProps, } from "./badge/Badge";
+export type { BadgeActionProps, BadgeDotProps, BadgeGroupLabels, BadgeGroupProps, BadgeIconProps, BadgeLabels, BadgeRootProps, } from "./badge/Badge";
 export { Badge } from "./badge/Badge";
 export type { BannerActionsProps, BannerContentProps, BannerDescriptionProps, BannerIconProps, BannerLabels, BannerRootProps, BannerTitleProps, } from "./banner/Banner";
 export { Banner } from "./banner/Banner";

package/dist/components/input/Input.d.ts

@@ -31,6 +31,10 @@ export type InputLabels = {
     strengthEasy: string;
     strengthMedium: string;
     strengthHard: string;
+    /** The error under a `strength` field below `minStrength` once a submit was refused, and the browser's validation message. */
+    strengthTooWeak: string;
+    /** Spoken when the field is `valid`: the check mark itself is silent. */
+    valid: string;
 };
 export declare const INPUT_LABELS: InputLabels;
 /**
@@ -47,6 +51,10 @@ export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
      * Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it.
      */
     invalid?: boolean;
+    /**
+     * A confirmed value (a matching repeat, a verified code): a success ring and a drawn check at the field's end, `labels.valid` spoken. `invalid` wins. Pass `false` too: the live region exists only with it.
+     */
+    valid?: boolean;
     /**
      * Label above the field, rendered as `<label htmlFor>`. Without it, give `Input.Field` an `aria-label`.
      */
@@ -88,9 +96,13 @@ export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
      */
     strength?: boolean;
     /**
-     * Replaces the kit's estimate of `strength`. Return 0 for empty, 1 weak … 4 hard. A hint for the person typing, not a security check.
+     * Replaces the kit's estimate of `strength`. Return 0 for empty, 1 weak … 4 hard.
      */
     getStrength?: (value: string) => PasswordStrength;
+    /**
+     * The policy of `strength`: below this level the meter turns danger and the form refuses to submit (`setCustomValidity`), then shows `labels.strengthTooWeak` as the error.
+     */
+    minStrength?: Exclude<PasswordStrength, 0>;
     /**
      * Inline save: fires with a changed value on blur and Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`.
      */
@@ -116,7 +128,7 @@ export type InputRootProps = FieldRootDomProps & FieldFocusRingProps & {
      */
     children: React.ReactNode;
 };
-declare function InputRoot({ size: sizeProp, invalid, focusRing, label, required, optional, hint, hintTone, error, counter, reserveSupportRow, id, strength, getStrength, onCommit, suggestions, closeOnEscape, closeOnOutsideClick, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
+declare function InputRoot({ size: sizeProp, invalid, valid, focusRing, label, required, optional, hint, hintTone, error, counter, reserveSupportRow, id, strength, getStrength, minStrength, onCommit, suggestions, closeOnEscape, closeOnOutsideClick, labels: labelsProp, children, className, ...rest }: InputRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputRoot {
     var displayName: string;
 }
@@ -139,7 +151,7 @@ export type InputFieldProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     ref?: React.Ref<HTMLInputElement>;
 };
 /** The `<input>`; its id comes from `Input.Root` so the label, hint and error stay linked. */
-declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, disabled: disabledProp, type, onChange, onValueChange, onFocus, onBlur, onKeyDown, onClick, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
+declare function InputField({ className, "aria-describedby": ariaDescribedBy, required, disabled: disabledProp, type, onChange, onValueChange, onFocus, onBlur, onKeyDown, onClick, onInvalid, ref, ...rest }: InputFieldProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputField {
     var displayName: string;
 }

package/dist/components/message/Message.d.ts

@@ -26,10 +26,13 @@ export type MessageActionsProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 /**
  * A row of a bot's inline keyboard under the message: `Button.Root` children sharing the row
- * equally, at the message's width (the bubble widens to the keyboard when it is wider). Several
- * make several rows, in the order written. A row too narrow for its buttons wraps them.
+ * equally on one line (a label too long ellipsizes), at the message's width (the bubble widens to
+ * the keyboard when it is wider). Several make several rows, in the order written; the last row's
+ * outer corners follow the bubble's radius. A key is `soft` `neutral` unless it sets its own
+ * `variant` / `tone`; a link (`asChild` around an `<a href>`) carries the link mark at its
+ * top-end corner; an `onClick` that returns a promise keeps its key loading until it settles.
  */
-declare function MessageActions({ className, ...rest }: MessageActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function MessageActions({ className, children, ...rest }: MessageActionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace MessageActions {
     var displayName: string;
 }

package/dist/components/segmented-control/SegmentedControl.d.ts

@@ -73,6 +73,10 @@ export type SegmentedControlItemProps = Omit<React.ButtonHTMLAttributes<HTMLButt
      * Palette hue: a dot before the content; while selected the thumb takes a soft fill of the hue with a ring of it.
      */
     color?: PaletteColor;
+    /**
+     * The single child (a router `<Link>`) becomes the segment. A row of links is a navigation: links in the Tab order, the one matching `value` current, no arrow keys.
+     */
+    asChild?: boolean;
     /**
      * Text, `Icon`, `Label`, `Count`, `Description`. Only an icon → square segment; give it `aria-label`.
      */
@@ -83,7 +87,7 @@ export type SegmentedControlItemProps = Omit<React.ButtonHTMLAttributes<HTMLButt
     className?: string;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function SegmentedControlItem({ value, disabled, color, children, className, onClick, ref, ...rest }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
+declare function SegmentedControlItem({ value, disabled, color, asChild, children, className, onClick, ref, ...rest }: SegmentedControlItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SegmentedControlItem {
     var displayName: string;
 }

package/dist/components/smart-filter/SmartFilter.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type DatepickerPanelProps } from "../datepicker/Datepicker";
 import { type ControlSize } from "../../internal/states";
 import { type SmartFilterValue } from "./model";
 export type { SmartFilterFieldValue, SmartFilterMode, SmartFilterRange, SmartFilterSelection, SmartFilterValue, } from "./model";
@@ -40,9 +41,12 @@ export type SmartFilterRangeField = SmartFilterFieldBase & {
     /** Display of a bound in the chip («1 000 ₽»). Default: Russian digit groups. */
     formatValue?: (value: number) => string;
 };
+/** The Datepicker options a `date-range` field passes to its calendar. */
+type SmartFilterCalendar = Pick<DatepickerPanelProps, "months" | "presets" | "prompt" | "footer" | "withTime" | "isDayDisabled" | "disableFuture" | "today" | "locale" | "weekStartsOn" | "labels">;
 /** A period picked in the kit Datepicker (`mode="range"`). */
 export type SmartFilterDateRangeField = SmartFilterFieldBase & {
     kind: "date-range";
+    calendar?: SmartFilterCalendar;
 };
 export type SmartFilterField = SmartFilterOptionsField | SmartFilterRangeField | SmartFilterDateRangeField;
 /** System strings. `{query}`, `{value}`, `{field}`, `{fields}`, `{count}` are substituted. */

package/dist/components/spinner/Spinner.d.ts

@@ -24,6 +24,7 @@ export type SpinnerProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children
  * Indeterminate loading indicator: the kit ring (`internal/ring`) with the share unknown — a quarter
  * arc turning on a faint track, at the line weight. A `role="status"` region with `labels.loading`
  * for screen readers; pass `aria-hidden` when the host already says it is busy. It fades itself in
- * (`enterMotion.enterFade`), so a host that shows it conditionally needs no motion of its own.
+ * (`enterMotion.enterFade`) when it appears on a shown host, so a host that shows it conditionally
+ * needs no motion of its own; one that mounts with its page is just there.
  */
-export declare function Spinner({ size: sizeProp, tone, labels: labelsProp, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Spinner({ size: sizeProp, tone, labels: labelsProp, className, ref, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/tabs/Tabs.d.ts

@@ -151,9 +151,18 @@ export type TabsPanelProps = React.HTMLAttributes<HTMLDivElement> & {
      * Tab value this panel belongs to.
      */
     value: string;
+    /**
+     * Once opened, the panel stays mounted and `hidden` while another tab is active: its data, form draft and scroll survive a switch. A panel never opened is not mounted.
+     */
+    keepMounted?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function TabsPanel({ value, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Mounted while its tab is active. With `keepMounted` a panel stays in the document once its tab
+ * has been opened: hidden (out of the layout, the tab order and the accessibility tree) while
+ * another tab is active, so its state — fetched data, a draft, a scroll position — survives.
+ */
+declare function TabsPanel({ value, keepMounted, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TabsPanel {
     var displayName: string;
 }

package/dist/hooks/useModalLayer.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type FocusStart } from "../internal/overlay/focus";
 import { type DismissReason, type LayerEntry } from "../internal/overlay/layerStack";
 type UseModalLayerOptions = {
     open: boolean;
@@ -8,6 +9,11 @@ type UseModalLayerOptions = {
     closeOnOutsideClick: boolean;
     /** A dismiss the options allow: Escape (`escape`) or a click on the scrim (`scrim`). */
     onDismiss: (reason: DismissReason) => void;
+    /**
+     * Where focus lands on open when nothing inside asks for it (`autoFocus`, `[data-autofocus]`):
+     * the first tab stop (default), or the panel itself.
+     */
+    focusStart?: FocusStart;
 };
 type ModalLayer<T extends HTMLElement> = {
     /** Attach to the panel (`role="dialog"`): the trap container and the inside of the layer. */
@@ -18,13 +24,14 @@ type ModalLayer<T extends HTMLElement> = {
 /**
  * The mechanics of a modal layer — Modal, Drawer, Sheet, ConfirmDialog, CommandMenu, MediaViewer,
  * the off-canvas Sidebar — in one fixed order: the rest of the page becomes inert, focus moves in
- * and Tab is trapped, document scroll locks, and the layer joins the stack with scrim (`click`)
- * dismissal, filtered by `closeOnEscape` / `closeOnOutsideClick` before `onDismiss` hears of it. On close the page is
- * restored first, then focus returns to the opener, captured at the open transition — the control
- * that was pressed (Safari does not focus a clicked button), else the focused element; a layer a
- * pointer opened returns focus without the focus ring. Focus always returns, also after a scrim
- * click: the page behind was inert, so the opener is the only place to continue from (foundation
- * §8).
+ * (the first tab stop, or the panel itself with `focusStart: "container"`; without the focus ring
+ * when a pointer opened the layer) and Tab is trapped, document scroll locks, and the layer joins
+ * the stack with scrim (`click`) dismissal, filtered by `closeOnEscape` / `closeOnOutsideClick`
+ * before `onDismiss` hears of it. On close the page is restored first, then focus returns to the
+ * opener, captured at the open transition — the control that was pressed (Safari does not focus a
+ * clicked button), else the focused element; a layer a pointer opened returns focus without the
+ * focus ring. Focus always returns, also after a scrim click: the page behind was inert, so the
+ * opener is the only place to continue from (foundation §8).
  */
-export declare function useModalLayer<T extends HTMLElement = HTMLElement>({ open, closeOnEscape, closeOnOutsideClick, onDismiss, }: UseModalLayerOptions): ModalLayer<T>;
+export declare function useModalLayer<T extends HTMLElement = HTMLElement>({ open, closeOnEscape, closeOnOutsideClick, onDismiss, focusStart, }: UseModalLayerOptions): ModalLayer<T>;
 export {};