prime-ui-kit 0.7.13 → 0.9.1

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

@@ -1,79 +1,57 @@
 import * as React from "react";
-import type { ButtonSize } from "@/internal/states";
+import type { ControlSize } from "@/internal/states";
+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;
+};
 export type ModalRootProps = {
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /** Escape closes the dialog. Default `true`. */
     closeOnEscape?: boolean;
-    closeOnOverlayClick?: boolean;
-    /**
-     * Если `true`, Enter вызывает `click()` по кнопке из `Modal.Footer` **`primary`** (или **`onEnterConfirm`**).
-     */
+    /** A click on the scrim closes the dialog. Default `true`; turn it off for destructive confirms. */
+    closeOnOutsideClick?: boolean;
+    /** Enter clicks the action wrapped in `Modal.Confirm`. Default `true`. */
     confirmOnEnter?: boolean;
-    /**
-     * Заменяет стандартное подтверждение по Enter: вызывается вместо программного `click()` по **`primary`**.
-     * При необходимости подавить нативное поведение элемента под фокусом вызовите `event.preventDefault()`.
-     */
+    /** Replaces the default Enter confirm (the `Modal.Confirm` click). */
     onEnterConfirm?: (event: KeyboardEvent) => void;
+    labels?: Partial<ModalLabels>;
     children?: React.ReactNode;
 };
-declare function ModalRoot({ open, defaultOpen, onOpenChange, closeOnEscape, closeOnOverlayClick, confirmOnEnter, onEnterConfirm, children, }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
-export type ModalTriggerProps = {
-    children: React.ReactElement<{
-        onClick?: React.MouseEventHandler;
-    }>;
-};
-declare function ModalTrigger({ children }: ModalTriggerProps): React.ReactElement<{
-    onClick?: React.MouseEventHandler;
-}, string | React.JSXElementConstructor<any>>;
-export type ModalCloseProps = {
-    children: React.ReactElement<{
-        onClick?: React.MouseEventHandler;
-        className?: string;
-        size?: ButtonSize;
-        ref?: React.Ref<HTMLElement>;
-    }>;
-};
-export type ModalFooterProps = Omit<React.HTMLAttributes<HTMLElement>, "children"> & {
-    /** Основное действие (Enter при `confirmOnEnter`); один элемент, например `Button.Root`. */
-    primary?: React.ReactElement<{
-        ref?: React.Ref<HTMLElement>;
-        onClick?: React.MouseEventHandler;
-        className?: string;
-        size?: ButtonSize;
-    }>;
-    /** Обычно отмена / закрытие (`Modal.Close` + кнопка). */
-    secondary?: React.ReactNode;
-    /** Дополнительные кнопки между `secondary` и `primary` (несколько кнопок — фрагмент). */
-    extra?: React.ReactNode;
-};
-declare function ModalFooter({ primary, secondary, extra, className, ...rest }: ModalFooterProps): import("react/jsx-runtime").JSX.Element;
-export type ModalPanelProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & {
-    /** Узел для `createPortal` (по умолчанию `document.body`). */
+declare function ModalRoot({ confirmOnEnter, labels, children, ...options }: ModalRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ModalRoot {
+    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.
+     */
+    size?: Exclude<ControlSize, "xs">;
+    /** Portal target. Default `document.body`. */
     container?: HTMLElement | null;
-    /** Класс на полноэкранной подложке. */
+    /** Class on the full-screen scrim. */
     overlayClassName?: string;
-    /** Заголовок; если задан, рендерится шапка с `h2` и опционально телом с разделителем. */
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
-    showClose?: boolean;
-    closeAriaLabel?: string;
-    /** При `title` оборачивается в зону тела; без `title` — рендерится сразу в панели (например headless-диалог). */
-    children?: React.ReactNode;
-    /** Предпочтительно `Modal.Footer` со слотами `secondary` / `extra` / `primary` для явного действия по Enter. */
-    footer?: React.ReactNode;
-    footerClassName?: string;
-    bodyClassName?: string;
-    bodyStyle?: React.CSSProperties;
+    /** The `role="dialog"` panel. */
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function ModalPanel({ container, overlayClassName, className, style, title, description, icon, showClose, closeAriaLabel, children, footer, footerClassName, bodyClassName, bodyStyle, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ModalPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function ModalContent({ container, ...props }: ModalContentProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ModalContent {
+    var displayName: string;
+}
 export declare const Modal: {
     Root: typeof ModalRoot;
-    Trigger: typeof ModalTrigger;
-    Close: React.ForwardRefExoticComponent<ModalCloseProps & React.RefAttributes<HTMLElement>>;
-    Footer: typeof ModalFooter;
-    Panel: typeof ModalPanel;
+    Trigger: typeof DialogTrigger;
+    Content: typeof ModalContent;
+    Header: typeof DialogHeader;
+    Icon: typeof DialogIcon;
+    Title: typeof DialogTitle;
+    Description: typeof DialogDescription;
+    Body: typeof DialogBody;
+    Footer: typeof DialogFooter;
+    Close: typeof DialogClose;
+    Confirm: typeof DialogConfirm;
 };
-export {};
-//# 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,42 +1,84 @@
 import * as React from "react";
-export declare function useCountdown(item: NotificationRecord, paused: boolean, onExpire: (id: string) => void): number;
-export type NotificationType = "success" | "error" | "warning" | "info";
-export type NotificationSize = "s" | "m" | "l";
+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, one per position. */
+    regionTopLeft: string;
+    regionTopCenter: string;
+    regionTopRight: string;
+    regionBottomLeft: string;
+    regionBottomCenter: string;
+    regionBottomRight: string;
+};
+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 = {
-    type: NotificationType;
+/** 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?: NotificationTone;
     title: string;
     description?: string;
-    size?: NotificationSize;
+    /** 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: NotificationTone;
     position: NotificationPosition;
-    size: NotificationSize;
+    size: ControlSize;
     duration: number;
     persistent: boolean;
     closable: boolean;
     createdAt: number;
 };
-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;
+/**
+ * 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 {};
-//# sourceMappingURL=Notification.d.ts.map

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

@@ -1,9 +1,13 @@
 import * as React from "react";
-import { type NotificationOptions, type NotificationPosition, type NotificationRecord } from "./Notification";
+import { type NotificationLabels, type NotificationOptions, type NotificationPosition, type NotificationRecord } from "./Notification";
 export type NotificationProviderProps = {
     children: React.ReactNode;
+    /** Default position for `notify()` calls without one. Default `top-right`. */
     position?: NotificationPosition;
+    /** Max visible toasts per stack (position × tone). Default 5. */
     max?: number;
+    /** Built-in strings: the close button and the region names per position. */
+    labels?: Partial<NotificationLabels>;
 };
 type StoreValue = {
     items: NotificationRecord[];
@@ -11,8 +15,7 @@ type StoreValue = {
     dismiss: (id: string) => void;
     dismissAll: () => void;
 };
-export declare function NotificationProvider({ children, position, max, }: NotificationProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useNotifications(): Pick<StoreValue, "notify" | "dismiss" | "dismissAll">;
-export declare function useNotificationStore(): StoreValue;
+export declare function NotificationProvider({ children, position, max, labels: labelsProp, }: NotificationProviderProps): import("react/jsx-runtime").JSX.Element;
+/** `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,64 +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>;
+    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, ...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;
-    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>>;
+    Actions: typeof PageContentActions;
+    Title: typeof PageContentTitle;
+    Description: typeof PageContentDescription;
     Body: typeof PageContentBody;
 };
 export {};
-//# sourceMappingURL=PageContent.d.ts.map

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

@@ -1,19 +1,31 @@
-import type { PaginationSize } from "@/internal/states";
-export type { PaginationSize };
-export type PaginationRootProps = {
-    page: number;
+import type * as React from "react";
+import type { ControlSize } from "@/internal/states";
+/** System strings; `{page}` is replaced. */
+export type PaginationLabels = {
+    /** `aria-label` of the `<nav>`. */
+    nav: string;
+    previous: string;
+    next: string;
+    /** `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 PaginationProps = Omit<React.HTMLAttributes<HTMLElement>, "defaultValue" | "onChange"> & {
+    ref?: React.Ref<HTMLElement>;
+    /** Current page (1-based), controlled. */
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (page: number) => void;
     totalPages: number;
-    onPageChange: (page: number) => void;
+    /** Pages on each side of the current one before an ellipsis. */
     siblingCount?: number;
-    /** Размер кнопок страниц и стрелок; многоточие — тот же ярус `--prime-sys-size-control-*`. */
-    size?: PaginationSize;
-    className?: string;
-};
-declare function PaginationRoot({ page, totalPages, onPageChange, siblingCount, size, className, }: PaginationRootProps): import("react/jsx-runtime").JSX.Element | null;
-declare namespace PaginationRoot {
-    var displayName: string;
-}
-export declare const Pagination: {
-    Root: typeof PaginationRoot;
+    size?: ControlSize;
+    /**
+     * 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>;
 };
-//# 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

@@ -1,53 +1,117 @@
 import * as React from "react";
 import type { PositionAlign, PositionSide } from "@/hooks/usePosition";
-import type { DropdownSize } from "@/internal/states";
-export type PopoverSize = DropdownSize;
+import type { ControlSize } from "@/internal/states";
 export type PopoverRootProps = {
     open?: boolean;
     defaultOpen?: boolean;
     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, 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;
-    asChild?: boolean;
-};
-declare function PopoverTrigger({ children, asChild: _asChild }: 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;
-    size?: PopoverSize;
+    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> & {
+    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> & {
+    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> & {
+    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> & {
+    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;
+}
 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,14 +1,21 @@
 import * as React from "react";
-import type { ProgressBarSize } from "@/internal/states";
-export type { ProgressBarSize };
-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;
-    size?: ProgressBarSize;
-    className?: string;
-};
-export declare const ProgressBar: {
-    Root: React.ForwardRefExoticComponent<ProgressBarRootProps & React.RefAttributes<HTMLProgressElement>>;
-};
-//# sourceMappingURL=ProgressBar.d.ts.map
+    /** Default `m`. */
+    size?: ControlSize;
+    /** Shows the rounded filled percentage at the end of the label row. */
+    showValue?: boolean;
+    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;