prime-ui-kit 0.9.3 → 0.11.0

package/dist/components/select/Select.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
-import { type MenuGroupProps } from "@/internal/MenuGroup";
-import type { ControlSize } from "@/internal/states";
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import { type MenuGroupProps } from "../../internal/MenuGroup";
+import type { ControlSize } from "../../internal/states";
 import { SelectItem, SelectItemDescription, SelectItemIcon, SelectItemMeta, SelectItemText } from "./SelectItem";
 import { type SelectLabels } from "./selectContext";
 export type { SelectItemDescriptionProps, SelectItemIconProps, SelectItemMetaProps, SelectItemProps, SelectItemTextProps, } from "./SelectItem";
@@ -19,8 +19,34 @@ type SelectRootBase = FieldRootDomProps & FieldFrameProps & {
     onOpenChange?: (open: boolean) => void;
     /** Clear segment in the trigger (and `Delete` / `Backspace` on it) while a value is selected. */
     clearable?: boolean;
-    /** Spinner instead of the chevron, `aria-busy`, a status row in the list. */
+    /** Form field name: hidden inputs submit the value (one per value with `multiple`). */
+    name?: string;
+    /** The search query (`Select.Content searchable`), controlled; cleared when the list closes. */
+    search?: string;
+    /** The initial query, uncontrolled. Default `""`. */
+    defaultSearch?: string;
+    /** Called with the new query: typing, and `""` when the list closes. */
+    onSearchChange?: (search: string) => void;
+    /**
+     * The list filters its items by the query. `false` when the results come from a server: every
+     * item shows, highlighting of the query stays.
+     */
+    filter?: boolean;
+    /**
+     * Options are loading: a Spinner instead of the chevron, `aria-busy`, skeleton rows in the list
+     * while no item matches (items on screen stay).
+     */
     loading?: boolean;
+    /** More options are loading at the end: skeleton rows after the items. */
+    loadingMore?: boolean;
+    /** More options exist: reaching the end of the list calls `onLoadMore`. */
+    hasMore?: boolean;
+    /** Asked once per round when the end of the list scrolls into view or the highlight reaches it. */
+    onLoadMore?: () => void | Promise<void>;
+    /** The options failed to load: replaces the list with the message in `role="alert"`. */
+    loadError?: React.ReactNode;
+    /** A retry button (`labels.retry`) under `loadError`; Enter in the open list runs it too. */
+    onRetry?: () => void;
     labels?: Partial<SelectLabels>;
     className?: string;
     children: React.ReactNode;
@@ -58,9 +84,10 @@ export type SelectValueItem = {
 };
 export type SelectValueProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /**
-     * Single mode: renders the selected option in the trigger, e.g. with the same `Thumbnail.Root`,
-     * `Select.ItemText` and `Select.ItemDescription` parts as the row. Not called while empty (the
-     * placeholder shows) and not used in `multiple` mode.
+     * Single mode: renders the selected option in the trigger with the same parts as the row —
+     * leading `Avatar.Root` / `Thumbnail.Root`, `Select.ItemText`, `Select.ItemDescription`, and a
+     * trailing `Badge.Root` / `Select.ItemMeta` at the end. Not called while empty (the placeholder
+     * shows) and not used in `multiple` mode.
      */
     renderValue?: (item: SelectValueItem) => React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
@@ -79,7 +106,10 @@ declare namespace SelectTriggerIcon {
     var displayName: string;
 }
 export type SelectContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "hidden" | "onKeyDown" | "onAnimationEnd"> & {
-    /** A search field on top of the list; items filter by label, description and `keywords`. */
+    /**
+     * A search field on top of the list; items filter by label, description and `keywords` (or the
+     * owner loads them: `Select.Root` `search`, `filter={false}`).
+     */
     searchable?: boolean;
     children: React.ReactNode;
     /** The floating panel. */

package/dist/components/select/SelectItem.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type ControlSize } from "@/internal/states";
+import { type ControlSize } from "../../internal/states";
 type SpanProps = React.HTMLAttributes<HTMLSpanElement> & {
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -34,11 +34,11 @@ export declare namespace SelectItemMeta {
     var displayName: string;
 }
 type ItemParts = {
-    /** `Select.ItemIcon` and `Thumbnail.Root`, before the text. */
+    /** `Select.ItemIcon`, `Avatar.Root` and `Thumbnail.Root`, before the text. */
     leading: React.ReactNode[];
     /** Title, description and plain text, in one column. */
     body: React.ReactNode[];
-    /** `Select.ItemMeta`, after the text. */
+    /** `Select.ItemMeta` and `Badge.Root`, after the text. */
     meta: React.ReactNode[];
     /** Two-line layout: a description or a media tile is present. */
     rich: boolean;
@@ -48,7 +48,10 @@ type ItemParts = {
 };
 /** Sorts the direct children of an item (fragments flattened) into the row slots by part type. */
 export declare function splitItemChildren(children: React.ReactNode): ItemParts;
-/** A `Thumbnail.Root` in a row or the trigger: sized to the tier unless it sets `size`. */
+/**
+ * A `Thumbnail.Root` or `Avatar.Root` in a row or the trigger: sized to the tier unless it sets
+ * `size`, decorative (the text names the option).
+ */
 export declare function sizeMedia(leading: React.ReactNode[], size: ControlSize): React.ReactNode[];
 export type SelectItemProps = {
     value: string;

package/dist/components/select/selectContext.d.ts

@@ -1,6 +1,6 @@
 import type * as React from "react";
-import { type Store } from "@/internal/listbox";
-import type { ControlSize } from "@/internal/states";
+import { type Store } from "../../internal/listbox";
+import type { ControlSize } from "../../internal/states";
 export type SelectLabels = {
     /** Placeholder and accessible name of the search field (`Select.Content searchable`). */
     search: string;
@@ -8,8 +8,10 @@ export type SelectLabels = {
     empty: string;
     /** Second line of the empty state while searching; `""` hides it. */
     emptyHint: string;
-    /** Status row while `loading`. */
+    /** Announced while `loading` or `loadingMore`. */
     loading: string;
+    /** The retry button of the load error (`onRetry`). */
+    retry: string;
     /** Tooltip of the clear segment (`clearable`). */
     clear: string;
     /** Muted marker after the label when `optional`. */
@@ -46,6 +48,13 @@ export type SelectContextValue = {
     clear: () => void;
     clearable: boolean;
     loading: boolean;
+    loadingMore: boolean;
+    hasMore: boolean;
+    onLoadMore: (() => void | Promise<void>) | undefined;
+    loadError: React.ReactNode;
+    onRetry: (() => void) | undefined;
+    /** The kit filters the items by the query; `false` for results from a server. */
+    filter: boolean;
     isOpen: boolean;
     setOpen: (open: boolean) => void;
     /** The highlighted option; items subscribe to their own slice of it. */

package/dist/components/sheet/Sheet.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { DialogGuard } from "../modal/DialogGuard";
+import { DialogActions, DialogBody, DialogClose, DialogDescription, type DialogDiscardLabels, DialogFooter, DialogHeader, DialogIcon, DialogMeta, DialogTitle, DialogTrigger } from "../modal/DialogParts";
+export type { DialogGuardProps as SheetGuardProps } from "../modal/DialogGuard";
+export type { DialogActionsProps as SheetActionsProps, DialogBodyProps as SheetBodyProps, DialogCloseProps as SheetCloseProps, DialogDescriptionProps as SheetDescriptionProps, DialogFooterProps as SheetFooterProps, DialogHeaderProps as SheetHeaderProps, DialogIconProps as SheetIconProps, DialogMetaProps as SheetMetaProps, DialogTitleProps as SheetTitleProps, DialogTriggerProps as SheetTriggerProps, } from "../modal/DialogParts";
+export type SheetLabels = DialogDiscardLabels & {
+    /** `aria-label` of the header close button. */
+    close: string;
+};
+export type SheetRootProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Escape closes the sheet. Default `true`. */
+    closeOnEscape?: boolean;
+    /** A click on the scrim or a swipe down closes the sheet. Default `true`. */
+    closeOnOutsideClick?: boolean;
+    labels?: Partial<SheetLabels>;
+    children?: React.ReactNode;
+};
+declare function SheetRoot({ labels, children, ...options }: SheetRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SheetRoot {
+    var displayName: string;
+}
+export type SheetContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** Class on the full-screen scrim. */
+    overlayClassName?: string;
+    /** The `role="dialog"` panel. */
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function SheetContent({ children, ...props }: SheetContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace SheetContent {
+    var displayName: string;
+}
+export declare const Sheet: {
+    Root: typeof SheetRoot;
+    Trigger: typeof DialogTrigger;
+    Content: typeof SheetContent;
+    Header: typeof DialogHeader;
+    Icon: typeof DialogIcon;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Actions: typeof DialogActions;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+    Meta: typeof DialogMeta;
+    Close: typeof DialogClose;
+    Guard: typeof DialogGuard;
+};

package/dist/components/skeleton/Skeleton.d.ts

@@ -1,5 +1,5 @@
 import type * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 /**
  * What the placeholder stands for: `text` — lines of the tier's text; `control` — a field or button
  * of the tier; `circle` — an avatar of the tier; `block` — any box (image, chart, card), sized by

package/dist/components/slider/Slider.d.ts

@@ -1,5 +1,5 @@
-import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
-import type { ControlSize, Tone } from "@/internal/states";
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize, Tone } from "../../internal/states";
 export type SliderLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
@@ -8,6 +8,15 @@ export type SliderProps = FieldRootDomProps & Omit<FieldFrameProps, "focusRing">
     value?: number;
     defaultValue?: number;
     onValueChange?: (value: number) => void;
+    /**
+     * The value the person settled on: fires once when the thumb is released (pointer) or after a
+     * key moved it, and only if the value differs from the last commit. Save here instead of on
+     * every `onValueChange` step. Return the save's promise: the thumb dims (`aria-busy`) until it
+     * settles; reject — the value glides back to the last saved one.
+     */
+    onCommit?: (value: number) => void | Promise<void>;
+    /** Name of the range input, submitted with a form. */
+    name?: string;
     min?: number;
     max?: number;
     step?: number;
@@ -22,6 +31,11 @@ export type SliderProps = FieldRootDomProps & Omit<FieldFrameProps, "focusRing">
     size?: ControlSize;
     /** Color of the filled part of the track. */
     tone?: Tone;
+    /**
+     * `vertical` — the track stands upright, minimum at the bottom, seven thumbs long at its tier
+     * (a level beside a button). Default `horizontal`.
+     */
+    orientation?: "horizontal" | "vertical";
     /** Id of the range input; generated when omitted. */
     id?: string;
     /** Name of the range input when there is no `label`. */
@@ -34,4 +48,4 @@ export type SliderProps = FieldRootDomProps & Omit<FieldFrameProps, "focusRing">
  * with a glass thumb, then hint or error. `className`, `ref` and the rest go to the frame, `id`
  * and `aria-label` to the range input.
  */
-export declare function Slider({ value: valueProp, defaultValue, onValueChange, min, max, step, disabled, invalid, label, required, optional, hint, error, showValue, formatValue, size: sizeProp, tone, id, className, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Slider({ value: valueProp, defaultValue, onValueChange, onCommit, name, min, max, step, disabled: disabledProp, invalid, label, required, optional, hint, error, showValue, formatValue, size: sizeProp, tone, orientation, id, className, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,50 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 import { type SmartFilterValue } from "./model";
-export type { SmartFilterMode, SmartFilterSelection, SmartFilterValue } from "./model";
-export { matchesSmartFilter, resolveSmartFilterValues } from "./model";
+export type { SmartFilterFieldValue, SmartFilterMode, SmartFilterRange, SmartFilterSelection, SmartFilterValue, } from "./model";
+export { isSmartFilterRange, matchesSmartFilter, resolveSmartFilterValues } from "./model";
 export type SmartFilterOption = {
     value: string;
     label: string;
     /** A decorative icon before the label (`<Icon name="…" />`). */
     icon?: React.ReactNode;
+    /**
+     * Group heading inside the field: values of one group stay together under it, groups in the
+     * order they first appear (owner types, then people).
+     */
+    group?: string;
 };
-export type SmartFilterField = {
+type SmartFilterFieldBase = {
     /** Key of the field in the value. */
     key: string;
     label: string;
+};
+/** A field of values to show or hide (default kind). */
+export type SmartFilterOptionsField = SmartFilterFieldBase & {
+    kind?: "options";
     options: SmartFilterOption[];
     /**
      * A fixed set of values (default `true`): hiding every value at once is not allowed. Set `false`
      * for an open set (services, users) that can change under the selection.
      */
     finite?: boolean;
+    /**
+     * Many values at once (default `true`). `false` — one value, no hiding: a press picks only that
+     * value, a press on it clears it (an API that takes one value per field).
+     */
+    multiple?: boolean;
 };
+/** A number range, «от» and «до» (amounts, counts); either bound may stay open. */
+export type SmartFilterRangeField = SmartFilterFieldBase & {
+    kind: "range";
+    /** Display of a bound in the chip («1 000 ₽»). Default: Russian digit groups. */
+    formatValue?: (value: number) => string;
+};
+/** A period picked in the kit Datepicker (`mode="range"`). */
+export type SmartFilterDateRangeField = SmartFilterFieldBase & {
+    kind: "date-range";
+};
+export type SmartFilterField = SmartFilterOptionsField | SmartFilterRangeField | SmartFilterDateRangeField;
 /** System strings. `{query}`, `{value}`, `{field}`, `{fields}`, `{count}` are substituted. */
 export type SmartFilterLabels = {
     /** Text of the filter button. */
@@ -58,11 +83,23 @@ export type SmartFilterLabels = {
     chipExclude: string;
     /** `aria-label` of a tag's remove button. */
     remove: string;
+    /** Placeholder of the lower bound of a number range. */
+    from: string;
+    /** Placeholder of the upper bound of a number range. */
+    to: string;
+    /** Accessible name of the lower bound input. */
+    fromLabel: string;
+    /** Accessible name of the upper bound input. */
+    toLabel: string;
+    /** Chip value of a range with only the lower bound. */
+    rangeFrom: string;
+    /** Chip value of a range with only the upper bound. */
+    rangeTo: string;
 };
 export type SmartFilterRootProps = {
     /** The fields this screen filters by, in display order. Empty: only the search remains. */
     fields: readonly SmartFilterField[];
-    /** Selection per field key. */
+    /** Value per field key: a selection, or the bounds of a range field. */
     value?: SmartFilterValue;
     defaultValue?: SmartFilterValue;
     onValueChange?: (value: SmartFilterValue) => void;
@@ -84,9 +121,14 @@ declare namespace SmartFilterRoot {
     var displayName: string;
 }
 export type SmartFilterToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * The search input (default `true`). `false` — the filter button alone, for a screen whose
+     * text search lives elsewhere or does not exist.
+     */
+    searchable?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function SmartFilterToolbar({ className, ...rest }: SmartFilterToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare function SmartFilterToolbar({ searchable, className, ...rest }: SmartFilterToolbarProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SmartFilterToolbar {
     var displayName: string;
 }

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

@@ -1,6 +1,7 @@
 /**
- * The filter model: every field has two lists, what to show and what to hide. Pure functions with
- * no state; the owner keeps the value (`SmartFilter.Root value / onValueChange`).
+ * The filter model. An options field has two lists, what to show and what to hide; a range field
+ * has its two bounds. Pure functions with no state; the owner keeps the value
+ * (`SmartFilter.Root value / onValueChange`).
  */
 export type SmartFilterSelection = {
     /** Values to show. Empty means "any". */
@@ -8,26 +9,45 @@ export type SmartFilterSelection = {
     /** Values to hide. */
     exclude: string[];
 };
-/** Selection per field key. Fields without a selection are absent. */
-export type SmartFilterValue = Record<string, SmartFilterSelection>;
+/** Bounds of a `range` (numbers) or `date-range` (dates) field, both inclusive; `null` — open. */
+export type SmartFilterRange<T extends number | Date = number | Date> = {
+    from: T | null;
+    to: T | null;
+};
+/** What one field holds: a selection (options field) or bounds (range fields). */
+export type SmartFilterFieldValue = SmartFilterSelection | SmartFilterRange<number> | SmartFilterRange<Date>;
+/** Value per field key. Fields without a filter are absent. */
+export type SmartFilterValue = Record<string, SmartFilterFieldValue>;
 export type SmartFilterMode = "include" | "exclude";
+/** Whether a field's value is a range (`from` / `to`) rather than a selection. */
+export declare function isSmartFilterRange(entry: SmartFilterFieldValue | undefined): entry is SmartFilterRange<number> | SmartFilterRange<Date>;
+/** The selection of an options field (`undefined` for a range or no filter). */
+export declare function selectionOf(entry: SmartFilterFieldValue | undefined): SmartFilterSelection | undefined;
 export declare function selectionModeOf(selection: SmartFilterSelection | undefined, value: string): SmartFilterMode | null;
 /** Sets the mode of a value; asking for the mode it already has clears it. A value is never in both lists. */
 export declare function toggleSelectionMode(selection: SmartFilterSelection | undefined, value: string, mode: SmartFilterMode): SmartFilterSelection;
+/** A field with one value: pressing a value selects only it; pressing it again clears it. */
+export declare function toggleSingleValue(selection: SmartFilterSelection | undefined, value: string): SmartFilterSelection;
 /** Drops a value from both lists. */
 export declare function removeSelectionValue(selection: SmartFilterSelection | undefined, value: string): SmartFilterSelection;
-export declare function selectionSize(selection: SmartFilterSelection | undefined): number;
-/** Sets one field's selection; an empty selection removes the field from the value. */
-export declare function withSelection(value: SmartFilterValue, key: string, selection: SmartFilterSelection): SmartFilterValue;
+/** How many filters a field adds: each selected value, or one for a range with a bound. */
+export declare function entrySize(entry: SmartFilterFieldValue | undefined): number;
+/** Sets one field's value; an empty selection or an open range removes the field from the value. */
+export declare function withFieldValue(value: SmartFilterValue, key: string, entry: SmartFilterFieldValue | undefined): SmartFilterValue;
 /**
  * For a field with a fixed set of values: whether `value` can be hidden without hiding everything.
  * "Everything hidden" is an empty result, so it is not allowed.
  */
 export declare function canExcludeValue(selection: SmartFilterSelection | undefined, value: string, all: readonly string[]): boolean;
-/** Whether a value passes a selection: `include` empty means any, `exclude` rejects. */
-export declare function matchesSmartFilter(selection: SmartFilterSelection | undefined, value: string): boolean;
+/**
+ * Whether an item's value passes a field's filter. A selection: `include` empty means any,
+ * `exclude` rejects. A range: both bounds inclusive; dates compare by whole days (`to` takes its
+ * whole day). An item with no value passes only an empty filter.
+ */
+export declare function matchesSmartFilter(entry: SmartFilterFieldValue | undefined, item: string | number | Date | null | undefined): boolean;
 /**
  * Turns a selection over a fixed set of values into the list to ask a server for: "hide" becomes
- * "all except". An empty array means no filter (also when the selection covers every value).
+ * "all except". An empty array means no filter (also when the selection covers every value, and
+ * for a range field).
  */
-export declare function resolveSmartFilterValues(selection: SmartFilterSelection | undefined, all: readonly string[]): string[];
+export declare function resolveSmartFilterValues(entry: SmartFilterFieldValue | undefined, all: readonly string[]): string[];

package/dist/components/sparkline/Sparkline.d.ts

@@ -8,19 +8,34 @@ export type SparklineLabels = {
     /** Spoken value of the chosen point; `{label}` and `{value}` are replaced. */
     point: string;
 };
+/** `line`: a line with a soft area. `bars`: a bar per point from zero — up when positive, down when negative. */
+export type SparklineVariant = "line" | "bars";
 export type SparklineProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     /** Points in order, oldest first; at least two draw a line. */
     data: SparklinePoint[];
     /** Visible title above the value and the accessible name of the chart. */
     label: string;
+    /** Default `line`. */
+    variant?: SparklineVariant;
+    /**
+     * Index of the point at rest (the current month): the headline shows it when nobody scrubs, and
+     * `bars` draw the other bars quieter. Default: the latest point.
+     */
+    highlight?: number;
+    /**
+     * The series is on its way: Skeletons of the value, the date and the plot, which cross-fade into
+     * the data. The title stays; the root is `aria-busy`.
+     */
+    loading?: boolean;
     /** Display of a value («312 400 ₽»). Default: the number with Russian digit groups. */
     formatValue?: (value: number) => string;
     labels?: Partial<SparklineLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
- * A small line chart with its headline: the latest value, its change against the point before and
- * its date. Scrubbing (pointer, touch, or the arrow keys on the chart) shows any point; the header
- * follows instantly, the trend arrow turns, and leaving glides the cursor back to the latest point.
+ * A small chart with its headline: the value at rest (the latest point or `highlight`), its change
+ * against the point before and its date. Scrubbing (pointer, touch, or the arrow keys on the chart)
+ * shows any point; the header follows instantly, the trend arrow turns, and leaving glides back to
+ * the point at rest. `bars` draw signed values from a zero line.
  */
-export declare function Sparkline({ data, label, formatValue, labels: labelsProp, className, ref, ...rest }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sparkline({ data, label, variant, highlight, loading, formatValue, labels: labelsProp, className, ref, ...rest }: SparklineProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize, TextTone } from "@/internal/states";
+import type { ControlSize, TextTone } from "../../internal/states";
 export type SpinnerLabels = {
     /** Text read by screen readers while the spinner is shown. */
     loading: string;
@@ -16,7 +16,8 @@ export type SpinnerProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children
     ref?: React.Ref<HTMLSpanElement>;
 };
 /**
- * Indeterminate loading indicator: a rotating ring with a gap. A `role="status"` region with
- * `labels.loading` for screen readers; pass `aria-hidden` when the host already says it is busy.
+ * 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.
  */
 export declare function Spinner({ size: sizeProp, tone, labels: labelsProp, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/stepper/Stepper.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 /** Item state: derived from the Root `value` (before → `completed`, equal → `active`, after → `pending`) unless set on the item. */
 export type StepperItemStatus = "pending" | "active" | "completed" | "danger";
 export type StepperRootProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "defaultValue" | "onChange"> & {
@@ -54,7 +54,7 @@ declare function StepperDescription({ className, ...rest }: StepperDescriptionPr
 declare namespace StepperDescription {
     var displayName: string;
 }
-export type StepperArrowProps = Omit<React.SVGAttributes<SVGSVGElement>, "children"> & {
+export type StepperArrowProps = Omit<React.SVGAttributes<SVGSVGElement>, "children" | "color"> & {
     ref?: React.Ref<SVGSVGElement>;
 };
 /** Trailing chevron for vertical items that open a page or panel. */

package/dist/components/switch/Switch.d.ts

@@ -1,10 +1,20 @@
 import type * as React from "react";
-import { type ChoiceLabelProps } from "@/internal/ChoiceField";
-import type { ControlSize } from "@/internal/states";
+import { type ChoiceLabelProps } from "../../internal/ChoiceField";
+import type { ControlSize } from "../../internal/states";
 export type SwitchRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange"> & {
     checked?: boolean;
     defaultChecked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
+    /**
+     * The new state. Return the save's promise to apply it on a server: the thumb waits in the new
+     * position with a spinner (`aria-busy`) and presses do nothing; resolve keeps it, reject glides
+     * it back.
+     */
+    onCheckedChange?: (checked: boolean) => void | Promise<void>;
+    /**
+     * Saving: a spinner in the thumb, `aria-busy`, presses do nothing. For an owner that tracks the
+     * request itself; a promise from `onCheckedChange` does this on its own.
+     */
+    loading?: boolean;
     /** Invalid state; a non-empty `error` implies it. */
     invalid?: boolean;
     /** Help text under the label text. Hidden while `error` is shown. */
@@ -18,7 +28,7 @@ export type SwitchRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     /** The native `role="switch"` input. */
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function SwitchRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, invalid, hint, error, size: sizeProp, disabled, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: SwitchRootProps): import("react/jsx-runtime").JSX.Element;
+declare function SwitchRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, loading, invalid, hint, error, size: sizeProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: SwitchRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace SwitchRoot {
     var displayName: string;
 }

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type ControlSize, type PaletteColor } from "@/internal/states";
+import { type ControlSize, type PaletteColor } from "../../internal/states";
 export type TabsLabels = {
     /** Name of the close button of a removable tab; `{label}` is the tab's title. */
     remove: string;
@@ -42,9 +42,11 @@ export type TabsItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>,
     disabled?: boolean;
     /**
      * Makes the tab closable: a close button, `Delete` / `Backspace` on the focused tab and a middle
-     * click. Closing the active tab first selects its neighbour; remove the item in this callback.
+     * click. Closing the active tab selects its neighbour; remove the item in this callback. Return a
+     * promise to confirm first (unsaved changes): while pending the close button shows loading and
+     * the tab stays selected; resolved — the neighbour takes over; rejected — nothing changes.
      */
-    onRemove?: () => void;
+    onRemove?: () => void | Promise<void>;
     /**
      * Plain text, or parts: `Tabs.Icon`, `Tabs.Label`, `Tabs.Count`, `Tabs.Description`.
      * A `Tabs.Description` makes the item two-line and becomes its accessible description.

package/dist/components/tag-select/TagOptionMenu.d.ts

@@ -1,4 +1,4 @@
-import type { PaletteColor } from "@/internal/states";
+import type { PaletteColor } from "../../internal/states";
 export type TagOptionMenuLabels = {
     edit: string;
     name: string;
@@ -19,11 +19,15 @@ type TagOptionMenuProps = {
     onDelete?: (value: string) => void;
     labels: TagOptionMenuLabels;
     disabled: boolean;
+    /** The deletion is pending: «⋯» shows a spinner in its place and does not open. */
+    pending: boolean;
+    /** A rename or recolor is being saved: «⋯» spins, the menu stays as it is. */
+    saving: boolean;
 };
 /**
  * The «⋯» of a TagSelect row: a Popover to rename, recolor or delete the option. The popover
  * opens above the list (it is inside a dropdown layer) and is its own topmost layer, so presses in
  * it never dismiss the list.
  */
-export declare function TagOptionMenu({ value, label, color, open, onOpenChange, onUpdate, onDelete, labels, disabled, }: TagOptionMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagOptionMenu({ value, label, color, open, onOpenChange, onUpdate, onDelete, labels, disabled, pending, saving, }: TagOptionMenuProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/tag-select/TagSelect.d.ts

@@ -1,5 +1,5 @@
-import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
-import { type ControlSize, type PaletteColor } from "@/internal/states";
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import { type ControlSize, type PaletteColor } from "../../internal/states";
 export type TagSelectOption = {
     value: string;
     label: string;
@@ -21,6 +21,10 @@ export type TagSelectLabels = {
     more: string;
     /** Screen-reader announcement after a tag is removed; `{label}` is the tag text. */
     removed: string;
+    /** Screen-reader announcement when the `onCreate` promise rejects; `{label}` is the tag text. */
+    createFailed: string;
+    /** Screen-reader announcement when the `onOptionUpdate` promise rejects; `{label}` is the tag text. */
+    updateFailed: string;
     /** Accessible name of a row's «⋯» menu; `{label}` is the tag text. */
     edit: string;
     /** Accessible name of the tag name field in the menu. */
@@ -45,15 +49,29 @@ export type TagSelectProps = FieldRootDomProps & FieldFrameProps & {
     onOpenChange?: (open: boolean) => void;
     /** Allow adding a value that is not in `options`. */
     creatable?: boolean;
-    /** A new value was created (Create row or Enter), not picked from `options`. */
-    onCreate?: (value: string) => void;
+    /**
+     * A new value was created (Create row or Enter), not picked from `options`. Return the save's
+     * promise: the new chip waits busy until it settles; reject — it leaves the selection and
+     * `labels.createFailed` is announced.
+     */
+    onCreate?: (value: string) => void | Promise<void>;
     /** Chip color of values without an option color, including created ones. */
     defaultColor?: PaletteColor;
-    /** Enables the «⋯» row menu: tag name and color. `value` never changes. */
-    onOptionUpdate?: (value: string, updates: TagSelectOptionUpdate) => void;
-    /** Enables «Удалить» in the row menu; the value is also removed from the selection. */
-    onOptionDelete?: (value: string) => void;
+    /**
+     * Enables the «⋯» row menu: tag name and color. `value` never changes. Return the save's
+     * promise: the new name or color shows at once and «⋯» spins until it settles; reject — the
+     * option goes back and `labels.updateFailed` is announced.
+     */
+    onOptionUpdate?: (value: string, updates: TagSelectOptionUpdate) => void | Promise<void>;
+    /**
+     * Enables «Удалить» in the row menu; the value is also removed from the selection. A returned
+     * Promise holds the row pending (spinner on «⋯») and changes nothing until it resolves; a
+     * rejection keeps the option and the selection (the owner shows why).
+     */
+    onOptionDelete?: (value: string) => void | Promise<void>;
     disabled?: boolean;
+    /** Form field name: one hidden input per selected value. */
+    name?: string;
     placeholder?: string;
     /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
     invalid?: boolean;
@@ -70,7 +88,7 @@ export type TagSelectProps = FieldRootDomProps & FieldFrameProps & {
  * A multi-value field shown as tag chips: pick from a list, type to filter, create new values.
  * At rest one row (extra chips fold into «+N»); focused or open it shows every chip.
  */
-export declare function TagSelect({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, creatable, onCreate, defaultColor, onOptionUpdate, onOptionDelete, disabled, placeholder, invalid: invalidProp, focusRing, size, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TagSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function TagSelect({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, creatable, onCreate, defaultColor, onOptionUpdate, onOptionDelete, disabled: disabledProp, name, placeholder, invalid: invalidProp, focusRing, size, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TagSelectProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TagSelect {
     var displayName: string;
 }