prime-ui-kit 0.9.0 → 0.9.1

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/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;

package/dist/components/progress-circle/ProgressCircle.d.ts

@@ -1,20 +1,19 @@
 import * as React from "react";
-import type { ControlSize, Tone } from "@/internal/states";
-export type ProgressCircleRootProps = {
-    value: number;
-    max?: number;
+import { type ProgressModeProps, type ProgressSegmentsLabels } from "@/internal/progressSegments";
+import type { ControlSize } from "@/internal/states";
+export type ProgressCircleLabels = ProgressSegmentsLabels;
+export type ProgressCircleProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Default `m`. */
     size?: ControlSize;
-    /** Цвет дуги. По умолчанию `accent`. */
-    tone?: Exclude<Tone, "neutral" | "info">;
-    label?: string;
     /**
-     * Центрированное содержимое (число, процент, иконка). На `xs` / `s` не рендерится — кольцо
-     * слишком мало; строковое / числовое значение остаётся доступным через `aria-valuetext`.
+     * Centered content (number, percent, icon). Not rendered on `xs` / `s`; a string or number
+     * child stays available as `aria-valuetext`.
      */
     children?: React.ReactNode;
-    className?: string;
-};
-export declare const ProgressCircle: {
-    Root: React.ForwardRefExoticComponent<ProgressCircleRootProps & React.RefAttributes<HTMLDivElement>>;
-};
-//# sourceMappingURL=ProgressCircle.d.ts.map
+    ref?: React.Ref<HTMLDivElement>;
+} & ProgressModeProps;
+/**
+ * A progress ring: a single `value` (`role="progressbar"`) or `segments` — parts of a whole
+ * clockwise from the top (`role="group"` described by the distribution).
+ */
+export declare function ProgressCircle(props: ProgressCircleProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio/Radio.d.ts

@@ -1,78 +1,70 @@
 import * as React from "react";
+import { type ChoiceLabelProps } from "@/internal/ChoiceField";
+import { type FieldRootDomProps } from "@/internal/FieldFrame";
 import type { ControlSize } from "@/internal/states";
-export type RadioGroupProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange" | "dir"> & {
+export type RadioGroupLabels = {
+    /** Muted marker after the group label when `optional`. */
+    optional: string;
+};
+export type RadioGroupProps = Omit<FieldRootDomProps, "dir"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     /** Native `name` shared by the radios; generated when omitted. */
     name?: string;
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
     size?: ControlSize;
     disabled?: boolean;
-    /** Invalid state for every radio in the group (`aria-invalid` on the group and inputs). */
-    invalid?: boolean;
-    /** Native `required` on the radios and `aria-required` on the group. */
+    /** Group heading above the options; names the radiogroup (`aria-labelledby`). */
+    label?: React.ReactNode;
+    /** Red `*` after the label, native `required` on the radios, `aria-required` on the group. */
     required?: boolean;
+    /** Muted `labels.optional` marker after the label. */
+    optional?: boolean;
+    /** Help text under the options. Hidden while `error` is shown. */
+    hint?: React.ReactNode;
+    /** Error message under the options; implies `invalid`. */
+    error?: React.ReactNode;
+    /** Invalid state for every radio (`aria-invalid` on the group and the inputs). */
+    invalid?: boolean;
     /** `vertical` stacks the options, `horizontal` lays them out in a wrapping row. */
     orientation?: "vertical" | "horizontal";
-    /** Stretch every option to the container width. */
-    fullWidth?: boolean;
+    /** Id of the `role="radiogroup"` element; generated when omitted. */
+    id?: string;
+    labels?: Partial<RadioGroupLabels>;
+    /** `Radio.Root` options. */
+    children?: React.ReactNode;
 };
-type InputPassthrough = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange" | "name" | "value" | "children">;
-export type RadioRootProps = InputPassthrough & {
+/**
+ * The field: label · radiogroup · hint or error. `className`, `ref` and the rest go to the frame,
+ * `id` and the `aria-label*` / `aria-describedby` names to the radiogroup.
+ */
+declare function RadioGroup({ id, value: valueProp, defaultValue, onValueChange, name: nameProp, size: sizeProp, disabled, label, required, optional, hint, error, invalid, orientation, labels: labelsProp, className, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, children, ...rest }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var displayName: string;
+}
+export type RadioRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange" | "name" | "value"> & {
     /** Value reported to `Radio.Group` when this option is chosen. */
     value: string;
-    /** Invalid state for this option; also set by the group or a mounted `Radio.Error`. */
-    invalid?: boolean;
+    /** Description under the option text. */
+    hint?: React.ReactNode;
+    /** `Radio.Label`; without it only the circle renders (give it an `aria-label`). */
     children?: React.ReactNode;
+    /** The native radio input. */
+    ref?: React.Ref<HTMLInputElement>;
 };
-export type RadioLabelProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLLabelElement>, "htmlFor" | "size">;
-export type RadioHintProps = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "id">;
-declare function RadioHint({ children, className, ...rest }: RadioHintProps): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioHint {
+declare function RadioRoot({ id, value, hint, disabled: disabledProp, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: RadioRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioRoot {
     var displayName: string;
 }
-export type RadioErrorProps = RadioHintProps;
-declare function RadioError({ children, className, ...rest }: RadioErrorProps): import("react/jsx-runtime").JSX.Element;
-declare namespace RadioError {
+export type RadioLabelProps = ChoiceLabelProps;
+declare function RadioLabel(props: RadioLabelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioLabel {
     var displayName: string;
 }
 export declare const Radio: {
-    Group: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "dir" | "onChange"> & {
-        value?: string;
-        defaultValue?: string;
-        onValueChange?: (value: string) => void;
-        /** Native `name` shared by the radios; generated when omitted. */
-        name?: string;
-        size?: ControlSize;
-        disabled?: boolean;
-        /** Invalid state for every radio in the group (`aria-invalid` on the group and inputs). */
-        invalid?: boolean;
-        /** Native `required` on the radios and `aria-required` on the group. */
-        required?: boolean;
-        /** `vertical` stacks the options, `horizontal` lays them out in a wrapping row. */
-        orientation?: "vertical" | "horizontal";
-        /** Stretch every option to the container width. */
-        fullWidth?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Root: React.ForwardRefExoticComponent<InputPassthrough & {
-        /** Value reported to `Radio.Group` when this option is chosen. */
-        value: string;
-        /** Invalid state for this option; also set by the group or a mounted `Radio.Error`. */
-        invalid?: boolean;
-        children?: React.ReactNode;
-    } & React.RefAttributes<HTMLInputElement>>;
-    Label: React.ForwardRefExoticComponent<{
-        children?: React.ReactNode;
-        className?: string;
-    } & Omit<React.HTMLAttributes<HTMLLabelElement>, "size" | "htmlFor"> & React.RefAttributes<HTMLLabelElement>>;
-    Hint: typeof RadioHint;
-    Error: typeof RadioError;
+    Group: typeof RadioGroup;
+    Root: typeof RadioRoot;
+    Label: typeof RadioLabel;
 };
 export {};
-//# sourceMappingURL=Radio.d.ts.map