prime-ui-kit 0.9.0 → 0.9.2

package/dist/components/modal/Modal.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import type { ControlSize } from "@/internal/states";
-import { DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogTitle } from "./DialogParts";
-export type { DialogBodyProps as ModalBodyProps, DialogCloseProps as ModalCloseProps, DialogConfirmProps as ModalConfirmProps, DialogDescriptionProps as ModalDescriptionProps, DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogIconProps as ModalIconProps, DialogTitleProps as ModalTitleProps, } from "./DialogParts";
+import { DialogBody, DialogClose, DialogConfirm, DialogDescription, DialogFooter, DialogHeader, DialogIcon, DialogTitle, DialogTrigger } from "./DialogParts";
+export type { DialogBodyProps as ModalBodyProps, DialogCloseProps as ModalCloseProps, DialogConfirmProps as ModalConfirmProps, DialogDescriptionProps as ModalDescriptionProps, DialogFooterProps as ModalFooterProps, DialogHeaderProps as ModalHeaderProps, DialogIconProps as ModalIconProps, DialogTitleProps as ModalTitleProps, DialogTriggerProps as ModalTriggerProps, } from "./DialogParts";
 export type ModalLabels = {
     /** `aria-label` of the header close button. */
     close: string;
@@ -13,8 +13,8 @@ export type ModalRootProps = {
     /** Escape closes the dialog. Default `true`. */
     closeOnEscape?: boolean;
     /**
-     * A click on the scrim (any pointerdown outside the dialog) closes it. Default `true`; turn it
-     * off for destructive confirms.
+     * A click on the scrim (or, on a narrow viewport, a swipe down) closes the dialog. Default
+     * `true`; turn it off for destructive confirms.
      */
     closeOnOutsideClick?: boolean;
     /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
@@ -24,32 +24,22 @@ export type ModalRootProps = {
     labels?: Partial<ModalLabels>;
     children?: React.ReactNode;
 };
-declare function ModalRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOutsideClick, confirmOnEnter, onEnterConfirm, labels, children, }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalRoot({ confirmOnEnter, labels, children, ...options }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ModalRoot {
     var displayName: string;
 }
-export type ModalTriggerProps = {
-    children: React.ReactElement<{
-        onClick?: React.MouseEventHandler;
-    }>;
-};
-/** Opens the dialog on the child's click (unless the child prevents default). */
-declare function ModalTrigger({ children }: ModalTriggerProps): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-}, string | React.JSXElementConstructor<any>>;
-declare namespace ModalTrigger {
-    var displayName: string;
-}
 export type ModalContentProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Dialog width: `s` 440 · `m` 560 · `l` 720 · `xl` 960. Below 640px of viewport the dialog is
-     * always a full-width bottom sheet.
+     * always a full-width bottom sheet with a grab handle.
      */
     size?: Exclude<ControlSize, "xs">;
     /** Portal target. Default `document.body`. */
     container?: HTMLElement | null;
     /** Class on the full-screen scrim. */
     overlayClassName?: string;
+    /** The `role="dialog"` panel. */
+    ref?: React.Ref<HTMLDivElement>;
 };
 declare function ModalContent({ container, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace ModalContent {
@@ -57,7 +47,7 @@ declare namespace ModalContent {
 }
 export declare const Modal: {
     Root: typeof ModalRoot;
-    Trigger: typeof ModalTrigger;
+    Trigger: typeof DialogTrigger;
     Content: typeof ModalContent;
     Header: typeof DialogHeader;
     Icon: typeof DialogIcon;
@@ -68,4 +58,3 @@ export declare const Modal: {
     Close: typeof DialogClose;
     Confirm: typeof DialogConfirm;
 };
-//# sourceMappingURL=Modal.d.ts.map

package/dist/components/native-select/NativeSelect.d.ts

@@ -0,0 +1,28 @@
+import type * as React from "react";
+import { type FieldFrameProps } from "@/internal/FieldFrame";
+import type { ControlSize } from "@/internal/states";
+export type NativeSelectLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export type NativeSelectProps = FieldFrameProps & Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "multiple" | "children"> & {
+    size?: ControlSize;
+    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    invalid?: boolean;
+    /** First, empty option shown while nothing is picked. */
+    placeholder?: string;
+    /** Called with the picked value; native `onChange` still fires. */
+    onValueChange?: (value: string) => void;
+    labels?: Partial<NativeSelectLabels>;
+    /** Native `<option>` and `<optgroup>` elements. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLSelectElement>;
+};
+/**
+ * The system `<select>` in the field look: the OS picker opens on touch devices. Options are
+ * plain `<option>` / `<optgroup>` elements.
+ */
+export declare function NativeSelect({ size, label, required, optional, hint, error, invalid, focusRing, disabled, placeholder, id, value, defaultValue, onChange, onValueChange, labels: labelsProp, className, children, "aria-describedby": ariaDescribedBy, ...rest }: NativeSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace NativeSelect {
+    var displayName: string;
+}

package/dist/components/notification/Notification.d.ts

@@ -1,36 +1,54 @@
 import * as React from "react";
-import type { ControlSize, Tone } from "@/internal/states";
+import { type ControlSize, type Tone } from "@/internal/states";
 export type NotificationPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type NotificationLabels = {
     /** `aria-label` of the close button. */
     close: string;
-    /** Accessible names of the toast regions, per position. */
-    regions: Record<NotificationPosition, string>;
+    /** Accessible names of the toast regions, one per position. */
+    regionTopLeft: string;
+    regionTopCenter: string;
+    regionTopRight: string;
+    regionBottomLeft: string;
+    regionBottomCenter: string;
+    regionBottomRight: string;
 };
-export declare const DEFAULT_NOTIFICATION_LABELS: NotificationLabels;
+export declare const NOTIFICATION_LABELS: NotificationLabels;
+export declare const REGION_LABEL_KEY: Record<NotificationPosition, keyof NotificationLabels>;
 /** Labels provided by `NotificationProvider`; a standalone card uses the defaults. */
 export declare const NotificationLabelsContext: React.Context<NotificationLabels>;
+export type NotificationTone = Extract<Tone, "info" | "success" | "warning" | "danger">;
 export type NotificationAction = {
     label: string;
     onClick: () => void;
 };
-export type NotificationOptions = {
+/** What a toast shows; shared by `notify()` and the static `NotificationCard`. */
+type NotificationContent = {
     /** Semantic color and default icon. Default `info`. `danger` and `warning` are announced assertively. */
-    tone?: Extract<Tone, "info" | "success" | "warning" | "danger">;
+    tone?: NotificationTone;
     title: string;
     description?: string;
+    /** Default `m`. */
     size?: ControlSize;
+    /** Replaces the tone icon (an `Icon`). */
+    icon?: React.ReactNode;
+    /** A small counter next to the title. */
+    badge?: string | number;
+    /** One action button under the text. */
+    action?: NotificationAction;
+};
+export type NotificationOptions = NotificationContent & {
+    /** Default: the provider's `position`. */
     position?: NotificationPosition;
+    /** Auto-close delay in ms. Default `5000`. */
     duration?: number;
+    /** No timer and no countdown line; closes only by the button, swipe or `dismiss`. */
     persistent?: boolean;
-    icon?: React.ReactNode;
-    badge?: string | number;
+    /** Shows the close button. Default `true`. */
     closable?: boolean;
-    action?: NotificationAction;
 };
 export type NotificationRecord = NotificationOptions & {
     id: string;
-    tone: NonNullable<NotificationOptions["tone"]>;
+    tone: NotificationTone;
     position: NotificationPosition;
     size: ControlSize;
     duration: number;
@@ -38,13 +56,29 @@ export type NotificationRecord = NotificationOptions & {
     closable: boolean;
     createdAt: number;
 };
-export type NotificationCardProps = {
+/** Native attributes of the card `<article>`; `title` is the notification title, not the attribute. */
+type CardDomProps = Omit<React.HTMLAttributes<HTMLElement>, "title" | "children" | "role"> & {
+    ref?: React.Ref<HTMLElement>;
+};
+export type NotificationCardProps = NotificationContent & CardDomProps & {
+    /** Shows the close button and is called on its click. */
+    onDismiss?: () => void;
+};
+/**
+ * A toast card without a timer: for an inline confirmation, docs and mockups. In an app toasts
+ * come from `useNotifications().notify()`.
+ */
+export declare function NotificationCard({ onDismiss, ...props }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
+type ToastCardProps = {
     item: NotificationRecord;
-    className?: string;
     paused: boolean;
     onDismiss: (id: string) => void;
-    stackDepth?: number;
-    stackExpanded?: boolean;
+    stackDepth: number;
+    stackExpanded: boolean;
 };
-export declare function NotificationCard({ item, className, paused, onDismiss, stackDepth, stackExpanded, }: NotificationCardProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Notification.d.ts.map
+/**
+ * A live toast in a provider stack: the card with its countdown. The countdown stops while
+ * `paused` (hover, focus, swipe) and while the document is hidden.
+ */
+export declare function ToastCard({ item, paused, onDismiss, stackDepth, stackExpanded }: ToastCardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/notification/NotificationStore.d.ts

@@ -6,11 +6,8 @@ export type NotificationProviderProps = {
     position?: NotificationPosition;
     /** Max visible toasts per stack (position × tone). Default 5. */
     max?: number;
-    /** Built-in strings (close button, region names); `regions` merges per position. */
-    labels?: {
-        close?: string;
-        regions?: Partial<NotificationLabels["regions"]>;
-    };
+    /** Built-in strings: the close button and the region names per position. */
+    labels?: Partial<NotificationLabels>;
 };
 type StoreValue = {
     items: NotificationRecord[];
@@ -22,4 +19,3 @@ export declare function NotificationProvider({ children, position, max, labels:
 /** `notify`, `dismiss`, `dismissAll` and the live `items` list of the nearest `NotificationProvider`. */
 export declare function useNotifications(): StoreValue;
 export {};
-//# sourceMappingURL=NotificationStore.d.ts.map

package/dist/components/page-content/PageContent.d.ts

@@ -1,74 +1,65 @@
 import * as React from "react";
-/** Ограничение ширины текстового блока внутри колонки `main`. */
+/** Cap of the page column inside `main`. */
 export type PageContentMaxWidth = "full" | "readable" | "wide";
-export type PageContentRootProps = {
+export type PageContentRootProps = React.HTMLAttributes<HTMLDivElement> & {
     maxWidth?: PageContentMaxWidth;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type PageContentSectionProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLElement>;
-export type PageContentHeaderProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-export type PageContentActionsProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function PageContentRoot({ maxWidth, className, ...rest }: PageContentRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentRoot {
+    var displayName: string;
+}
+export type PageContentSectionProps = React.HTMLAttributes<HTMLElement> & {
+    ref?: React.Ref<HTMLElement>;
+};
+declare function PageContentSection({ className, ...rest }: PageContentSectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentSection {
+    var displayName: string;
+}
+type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type PageContentActionsProps = DivProps;
 /** Page-level actions (buttons) next to the title; wrap below the heading on narrow columns. */
-declare function PageContentActions({ className, children, ...rest }: PageContentActionsProps): import("react/jsx-runtime").JSX.Element;
+declare function PageContentActions({ className, ...rest }: PageContentActionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageContentActions {
     var displayName: string;
 }
+export type PageContentHeaderProps = DivProps;
+/** Title and description stack on the left; `PageContent.Actions` children go to the end. */
 declare function PageContentHeader({ className, children, ...rest }: PageContentHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageContentHeader {
     var displayName: string;
 }
-export type PageContentTitleProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLHeadingElement>;
+export type PageContentTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    ref?: React.Ref<HTMLHeadingElement>;
+};
+declare function PageContentTitle({ className, ...rest }: PageContentTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentTitle {
+    var displayName: string;
+}
 export type PageContentDescriptionMeasure = "readable" | "full";
-export type PageContentDescriptionProps = {
-    /** `readable` — max ~65ch; `full` — use full width of the parent (e.g. inside an already padded `main`). */
+export type PageContentDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    /** `readable` — max ~65ch; `full` — the full width of the parent (e.g. an already padded `main`). */
     measure?: PageContentDescriptionMeasure;
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLParagraphElement>;
-export type PageContentBodyProps = {
-    className?: string;
-    children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
-declare function PageContentBody({ className, children, ...rest }: PageContentBodyProps): import("react/jsx-runtime").JSX.Element;
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+declare function PageContentDescription({ className, measure, ...rest }: PageContentDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentDescription {
+    var displayName: string;
+}
+export type PageContentBodyProps = DivProps;
+declare function PageContentBody({ className, ...rest }: PageContentBodyProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PageContentBody {
     var displayName: string;
 }
 export declare const PageContent: {
-    Root: React.ForwardRefExoticComponent<{
-        maxWidth?: PageContentMaxWidth;
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Section: React.ForwardRefExoticComponent<{
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
+    Root: typeof PageContentRoot;
+    Section: typeof PageContentSection;
     Header: typeof PageContentHeader;
     Actions: typeof PageContentActions;
-    Title: React.ForwardRefExoticComponent<{
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<{
-        /** `readable` — max ~65ch; `full` — use full width of the parent (e.g. inside an already padded `main`). */
-        measure?: PageContentDescriptionMeasure;
-        className?: string;
-        children?: React.ReactNode;
-    } & React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+    Title: typeof PageContentTitle;
+    Description: typeof PageContentDescription;
     Body: typeof PageContentBody;
 };
 export {};
-//# sourceMappingURL=PageContent.d.ts.map

package/dist/components/page-toolbar/PageToolbar.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+type DivProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+export type PageToolbarRootProps = DivProps;
+/**
+ * The panel at the top of a page: sections, tools, view options and the primary action. It lays
+ * itself out from its own width — one row when wide, exactly two rows when narrow — so the slots
+ * keep fixed places at any width. Parts may be left out; the JSX order is the Tab order.
+ */
+declare function PageToolbarRoot({ className, children, ref, ...rest }: PageToolbarRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarRoot {
+    var displayName: string;
+}
+export type PageToolbarSectionsProps = DivProps;
+/** Sections of the page — a `fullWidth` SegmentedControl; top row, stretches when narrow. */
+declare function PageToolbarSections({ className, ...rest }: PageToolbarSectionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarSections {
+    var displayName: string;
+}
+export type PageToolbarToolsProps = DivProps;
+/** Filter button and search (`SmartFilter.Toolbar`): takes the free space of its row. */
+declare function PageToolbarTools({ className, ...rest }: PageToolbarToolsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarTools {
+    var displayName: string;
+}
+export type PageToolbarViewProps = DivProps;
+/** How the data is shown: period, table / cards, columns. Sized by content; alone in a row, its controls share the row. */
+declare function PageToolbarView({ className, ...rest }: PageToolbarViewProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarView {
+    var displayName: string;
+}
+export type PageToolbarActionsProps = DivProps;
+/** The primary action of the page: the top row's end at every width, never wraps down. */
+declare function PageToolbarActions({ className, ...rest }: PageToolbarActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarActions {
+    var displayName: string;
+}
+export type PageToolbarChipsProps = DivProps;
+/** Active filters (`SmartFilter.Chips`) in their own row under the panel; the row disappears when empty. */
+declare function PageToolbarChips({ className, ...rest }: PageToolbarChipsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageToolbarChips {
+    var displayName: string;
+}
+export declare const PageToolbar: {
+    Root: typeof PageToolbarRoot;
+    Sections: typeof PageToolbarSections;
+    Tools: typeof PageToolbarTools;
+    View: typeof PageToolbarView;
+    Actions: typeof PageToolbarActions;
+    Chips: typeof PageToolbarChips;
+};
+export {};

package/dist/components/pagination/Pagination.d.ts

@@ -1,43 +1,31 @@
 import type * as React from "react";
 import type { ControlSize } from "@/internal/states";
-/** Тексты для ассистивных технологий; по умолчанию на русском. */
+/** System strings; `{page}` is replaced. */
 export type PaginationLabels = {
-    /** `aria-label` навигации. */
+    /** `aria-label` of the `<nav>`. */
     nav: string;
     previous: string;
     next: string;
-    /** `aria-label` кнопки номера страницы. */
-    page: (page: number) => string;
-    /** Скрытый предлог между текущей и общей страницей в компактном виде («3 из 12»). */
+    /** `aria-label` of a page button. */
+    page: string;
+    /** Hidden word between the current and the total page in the compact view («3 из 12»). */
     of: string;
 };
-export type PaginationRootProps = {
+export type PaginationProps = Omit<React.HTMLAttributes<HTMLElement>, "defaultValue" | "onChange"> & {
+    ref?: React.Ref<HTMLElement>;
     /** Current page (1-based), controlled. */
     value?: number;
-    /** Initial page when uncontrolled. Default `1`. */
     defaultValue?: number;
     onValueChange?: (page: number) => void;
     totalPages: number;
-    /** Pages shown on each side of the current one before an ellipsis. Default `1`. */
+    /** Pages on each side of the current one before an ellipsis. */
     siblingCount?: number;
-    /** Ярус контролов: высота кнопок = `--prime-control-<size>-height`. */
     size?: ControlSize;
     /**
-     * Компактный режим: стрелки + «текущая / всего» вместо ряда номеров.
-     * `"auto"` растягивает навигацию на ширину родителя и включает компактный вид на узкой ширине
-     * (container query).
+     * Arrows + «current / total» instead of page numbers. `"auto"` fills the parent and switches to
+     * the compact view when the container is narrow.
      */
     compact?: boolean | "auto";
-    /** Тексты для скринридеров (частично). */
     labels?: Partial<PaginationLabels>;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLElement>, "defaultValue" | "onChange">;
-declare function PaginationRoot({ value, defaultValue, onValueChange, totalPages, siblingCount, size, compact, labels, className, ...rest }: PaginationRootProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace PaginationRoot {
-    var displayName: string;
-}
-export declare const Pagination: {
-    Root: typeof PaginationRoot;
 };
-export {};
-//# sourceMappingURL=Pagination.d.ts.map
+export declare function Pagination({ value, defaultValue, onValueChange, totalPages, siblingCount, size, compact, labels: labelsProp, className, ...rest }: PaginationProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/popover/Popover.d.ts

@@ -7,63 +7,98 @@ export type PopoverRootProps = {
     onOpenChange?: (open: boolean) => void;
     /** A pointerdown outside the panel and its trigger closes it. Default `true`. */
     closeOnOutsideClick?: boolean;
+    /** Escape closes the panel. Default `true`. */
+    closeOnEscape?: boolean;
     children: React.ReactNode;
 };
-declare function PopoverRoot({ open, defaultOpen, onOpenChange, closeOnOutsideClick, children, }: PopoverRootProps): import("react/jsx-runtime").JSX.Element;
+declare function PopoverRoot({ open, defaultOpen, onOpenChange, closeOnOutsideClick, closeOnEscape, children, }: PopoverRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverRoot {
     var displayName: string;
 }
 export type PopoverTriggerProps = {
     /** The element that opens the panel (usually a Button); it receives ref, ARIA and the click handler. */
     children: React.ReactElement;
-};
-declare function PopoverTrigger({ children }: PopoverTriggerProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+    ref?: React.Ref<HTMLElement>;
+} & Omit<React.HTMLAttributes<HTMLElement>, "children">;
+/** Other props (handlers, ARIA, `ref`) are forwarded to the child, e.g. from a wrapping `Tooltip.Trigger`. */
+declare function PopoverTrigger({ children, ...forwarded }: PopoverTriggerProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverTrigger {
     var displayName: string;
 }
-export type PopoverInsetPadding = "none" | "x1" | "x2" | "x3";
-export type PopoverInsetGap = "none" | "pad" | "x2" | "x3" | "x4";
-export type PopoverContentProps = {
-    align?: PositionAlign;
+export type PopoverAnchorProps = {
+    /** The element the panel is positioned against and that does not count as "outside" for dismissal. */
+    children: React.ReactElement;
+};
+/**
+ * An anchor that is not a trigger: positions the panel against an element (a whole toolbar) and keeps
+ * presses on it from closing the panel, but adds no click handler and no ARIA. Open state is driven
+ * by `Popover.Root open`, and focus stays where it is when it opens (a search field in the anchor
+ * keeps typing). Use it instead of `Popover.Trigger`, not with it.
+ */
+declare function PopoverAnchor({ children }: PopoverAnchorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PopoverAnchor {
+    var displayName: string;
+}
+export type PopoverCloseProps = {
+    /** One element (usually a Button inside the panel); a click closes the panel. */
+    children: React.ReactElement;
+};
+/**
+ * Closes the panel on click (focus returns to the trigger), unless the child's own handler calls
+ * `preventDefault()`.
+ */
+declare function PopoverClose({ children }: PopoverCloseProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PopoverClose {
+    var displayName: string;
+}
+export type PopoverContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, "role"> & {
     side?: PositionSide;
-    sameMinWidthAsTrigger?: boolean;
+    align?: PositionAlign;
+    /** Tier of the text, padding and the controls inside. */
     size?: ControlSize;
+    /** The panel is exactly as wide as the trigger (text wraps). */
+    matchTriggerWidth?: boolean;
+    /** Tab cycles inside the panel (forms). Without it Tab past the edges leaves to the trigger and closes. */
     trapFocus?: boolean;
-    /** Дополнение к внутренним полям как у Dropdown (`padding` = `--dd-pad` + inset). */
-    insetPadding?: PopoverInsetPadding;
-    /** Вертикальный зазор между прямыми дочерними блоками; `pad` = как у внутренних полей (`--dd-pad`). */
-    insetGap?: PopoverInsetGap;
     /**
-     * Поднять панель над выпадающим списком того же слоя (dropdown 1200 > popover 1000).
-     * Используйте, если триггер внутри Select/TagSelect listbox или другого dropdown.
+     * No inner padding and no gap: rows reach the panel edges (lists with full-width dividers, filter
+     * panels). The content lays out its own spacing and uses inset focus rings.
      */
-    stackAboveDropdown?: boolean;
-    children: React.ReactNode;
-    className?: string;
+    flush?: boolean;
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function PopoverContent({ align, side, sameMinWidthAsTrigger, size, trapFocus, insetPadding, insetGap, stackAboveDropdown, children, className, }: PopoverContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PopoverContent({ side, align, size, matchTriggerWidth, trapFocus, flush, className, children, ...rest }: PopoverContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverContent {
     var displayName: string;
 }
-export type PopoverHeaderProps = React.HTMLAttributes<HTMLDivElement>;
-/** Заголовок + описание с плотным шагом (4px) внутри панели. */
+export type PopoverHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** Title + description with a tight 4px step. */
 declare function PopoverHeader({ className, ...rest }: PopoverHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverHeader {
     var displayName: string;
 }
-export type PopoverTitleProps = React.HTMLAttributes<HTMLHeadingElement>;
-/** Заголовок панели; становится доступным именем диалога (`aria-labelledby`). */
+export type PopoverTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    ref?: React.Ref<HTMLHeadingElement>;
+};
+/** Heading of the panel; names the dialog (`aria-labelledby`). */
 declare function PopoverTitle({ className, id, ...rest }: PopoverTitleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverTitle {
     var displayName: string;
 }
-export type PopoverDescriptionProps = React.HTMLAttributes<HTMLParagraphElement>;
+export type PopoverDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+/** Secondary text of the panel; describes the dialog (`aria-describedby`). */
 declare function PopoverDescription({ className, id, ...rest }: PopoverDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverDescription {
     var displayName: string;
 }
-export type PopoverActionsProps = React.HTMLAttributes<HTMLDivElement>;
-/** Кнопки внизу панели: справа, `gap: 8`; на узкой панели — в колонку на всю ширину. */
+export type PopoverActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** Buttons at the bottom of the panel: at the end, `gap: 8`; stacked full width on a narrow screen. */
 declare function PopoverActions({ className, ...rest }: PopoverActionsProps): import("react/jsx-runtime").JSX.Element;
 declare namespace PopoverActions {
     var displayName: string;
@@ -71,11 +106,12 @@ declare namespace PopoverActions {
 export declare const Popover: {
     Root: typeof PopoverRoot;
     Trigger: typeof PopoverTrigger;
+    Anchor: typeof PopoverAnchor;
     Content: typeof PopoverContent;
     Header: typeof PopoverHeader;
     Title: typeof PopoverTitle;
     Description: typeof PopoverDescription;
     Actions: typeof PopoverActions;
+    Close: typeof PopoverClose;
 };
 export {};
-//# sourceMappingURL=Popover.d.ts.map

package/dist/components/progress-bar/ProgressBar.d.ts

@@ -1,17 +1,21 @@
 import * as React from "react";
-import type { ControlSize, Tone } from "@/internal/states";
-export type ProgressBarRootProps = {
-    value: number;
-    max?: number;
+import { type ProgressModeProps, type ProgressSegmentsLabels } from "@/internal/progressSegments";
+import type { ControlSize } from "@/internal/states";
+export type ProgressBarLabels = ProgressSegmentsLabels;
+export type ProgressBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /**
+     * Visible label above the bar and its accessible name. A `value` bar needs a name: `label`, or
+     * `aria-label` when the text around it already says what is loading.
+     */
     label?: string;
+    /** Default `m`. */
     size?: ControlSize;
-    /** Цвет заполнения. По умолчанию `accent`. */
-    tone?: Exclude<Tone, "neutral" | "info">;
-    /** Показать значение в процентах справа от подписи. */
+    /** Shows the rounded filled percentage at the end of the label row. */
     showValue?: boolean;
-    className?: string;
-};
-export declare const ProgressBar: {
-    Root: React.ForwardRefExoticComponent<ProgressBarRootProps & React.RefAttributes<HTMLProgressElement>>;
-};
-//# sourceMappingURL=ProgressBar.d.ts.map
+    ref?: React.Ref<HTMLDivElement>;
+} & ProgressModeProps;
+/**
+ * A linear progress line: a single `value` (native `<progress>` for assistive tech) or
+ * `segments` — parts of a whole in one bar (`role="group"` named by the distribution).
+ */
+export declare function ProgressBar(props: ProgressBarProps): import("react/jsx-runtime").JSX.Element;