prime-ui-kit 0.15.0 → 0.17.0

package/dist/components/chat/chatContext.d.ts

@@ -37,8 +37,8 @@ export type ChatContextValue = {
     /** The current match, counted from the newest (`0` — the newest). */
     matchIndex: number;
     setMatchIndex: (index: number) => void;
-    /** The message the list brings into view: the current match while searching, else `current`. */
-    current: string | null;
+    /** The message the list jumps to: the current match while searching, else `jumpTo`. */
+    jumpTo: string | null;
     /** The other side types. */
     typing: boolean;
     /** Brings a message into view and blinks it (a pinned message's press). */
@@ -53,4 +53,4 @@ export type ChatContextValue = {
     setHasTitle: (has: boolean) => void;
     labels: ChatLabels;
 };
-export declare const ChatProvider: React.Provider<ChatContextValue | null>, useChat: () => ChatContextValue;
+export declare const ChatProvider: React.Provider<ChatContextValue | null>, useChat: (part?: string) => ChatContextValue;

package/dist/components/chat/messageFlow.d.ts

@@ -1,5 +1,5 @@
 import type { MessageDirection } from "../message/types";
-import type { ScrollRegion } from "../scroll-container/useScrollEdges";
+import type { ScrollRegion } from "../../hooks/useScrollRegion";
 /** A message of the conversation in data order: its value and side. */
 export type FlowEntry = {
     value: string;

package/dist/components/chat-list/ChatList.d.ts

@@ -48,11 +48,12 @@ export type ChatListLabels = {
     file: string;
     location: string;
     contact: string;
-    /** `aria-label` of the point the row menu opens from. */
-    menu: string;
 };
+export declare const CHAT_LIST_LABELS: ChatListLabels;
 export type ChatListItemIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
-    /** Before the name: an `Avatar.Root` (sized by the row). After it: a small `Icon`. */
+    /**
+     * An `Avatar.Root` (with `Avatar.Status`), or after the name an `Icon` with a `label`.
+     */
     children: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -73,11 +74,17 @@ declare namespace ChatListItemText {
     var displayName: string;
 }
 export type ChatListItemDescriptionProps = React.HTMLAttributes<HTMLSpanElement> & {
-    /** Who wrote the last message: «Вы», a member of a group. Shown as «{author}: » before it. */
+    /**
+     * Who wrote it: «Вы» for the reader, a member's name in a group.
+     */
     author?: string;
-    /** The last message is not text: its word («Фото», «Голосовое сообщение») leads the preview. */
+    /**
+     * The message is not text: its word («Фото», «Голосовое сообщение») leads the preview in the accent.
+     */
     kind?: ChatListMediaKind;
-    /** Length of a voice or video message, seconds: «Голосовое сообщение 0:42». */
+    /**
+     * Length of a voice or video message in seconds: «Голосовое сообщение 0:42».
+     */
     duration?: number;
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -100,28 +107,40 @@ declare namespace ChatListItemMenu {
     var displayName: string;
 }
 type ChatListItemOwnProps = {
-    /** When the last message was sent: a `Date` (shown with the root's `formatTime`) or the text to show. */
+    /**
+     * When the last message was sent: a `Date` shown with the root's `formatTime`, or the text to show.
+     */
     time?: Date | string;
-    /** Delivery of the reader's own last message: ✓ sent, ✓✓ read, the clock, or failed. */
+    /**
+     * Delivery of the reader's own last message: the clock, ✓, ✓✓ in the accent, or the failure mark — cross-fading.
+     */
     status?: MessageStatus;
-    /** Unread messages: the count at the end of the row. Default 0. */
+    /**
+     * Unread messages: a solid count under the time (gray while `muted`); the number rolls.
+     */
     unread?: number;
-    /** The reader is mentioned among the unread: an «@» beside the count. */
+    /**
+     * The reader is mentioned among the unread: an «@» beside the count.
+     */
     mention?: boolean;
-    /** Notifications are off: a muted glyph beside the name and a gray count. */
+    /**
+     * Notifications are off: a muted glyph beside the name and a gray count.
+     */
     muted?: boolean;
-    /** Pinned by the reader: a pin at the end of the row while nothing is unread. */
+    /**
+     * Pinned: a pin under the time while nothing is unread. Put pinned dialogs first in `items`.
+     */
     pinned?: boolean;
     /**
-     * The other side types: the preview turns into «печатает…» in the accent, and back. A name
-     * («Анна») for a group: «Анна печатает…».
+     * The other side types: the preview cross-fades into «печатает…» in the accent; a name for a group («Анна печатает…»).
      */
     typing?: boolean | string;
-    /** The reader's unsent text: the preview shows «Черновик:» and the text. */
+    /**
+     * The reader's unsent text: the preview shows «Черновик:» in danger and the text.
+     */
     draft?: string;
     /**
-     * `ChatList.ItemIcon` (the avatar; after the name — a glyph), `ChatList.ItemText`,
-     * `ChatList.ItemDescription`, `ChatList.ItemMenu`.
+     * `ChatList.ItemIcon`, `ChatList.ItemText`, `ChatList.ItemDescription`, `ChatList.ItemMenu`.
      */
     children?: React.ReactNode;
 };
@@ -136,38 +155,73 @@ declare namespace ChatListItem {
     var displayName: string;
 }
 export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "children"> & {
-    /** Dialogs as application data, in the order to show (pinned first, then by the last message). */
+    /**
+     * Dialogs in the order to show: pinned first, then by the last message. Rows glide when it changes.
+     */
     items: readonly T[];
-    /** A stable key of a dialog: the `value` of its row. */
+    /**
+     * A stable key of a dialog: the `value` of its row.
+     */
     getKey: (item: T) => string;
-    /** Renders a dialog: a `ChatList.Item` with its parts. */
+    /**
+     * Renders a dialog as a `ChatList.Item` with its parts.
+     */
     renderItem: (item: T) => React.ReactElement;
-    /** The open dialog (controlled); `null` — none. */
+    /**
+     * The open dialog (controlled): the current fill and `aria-current`; `null` — none.
+     */
     value?: string | null;
-    /** The dialog open at first (uncontrolled). Default `null`. */
+    /**
+     * The dialog open at first (uncontrolled).
+     */
     defaultValue?: string | null;
-    /** The reader opened a dialog: a click, a tap, Enter or Space on its row. */
+    /**
+     * The reader opened a dialog: a click, a tap, Enter or Space on its row.
+     */
     onValueChange?: (value: string) => void;
-    /** The search query (controlled). Any of the triad shows the search field. */
+    /**
+     * The search query (controlled). Any of the triad shows the search field.
+     */
     search?: string;
-    /** The initial query (uncontrolled). */
+    /**
+     * The initial query (uncontrolled).
+     */
     defaultSearch?: string;
-    /** The query changed: filter `items` by it (the list marks the matches). */
+    /**
+     * The query changed: filter `items` by it; the rows mark the match in the name and the preview.
+     */
     onSearchChange?: (search: string) => void;
-    /** The first load: placeholder rows in the rows' geometry, then a cross-fade into the dialogs. */
+    /**
+     * The first load: placeholder rows in the rows' geometry (`aria-busy`), then a cross-fade into the dialogs.
+     */
     loading?: boolean;
-    /** More dialogs exist: a placeholder row ends the list and `onLoadMore` runs near the end. */
+    /**
+     * More dialogs exist: a placeholder row ends the list and `onLoadMore` runs near the end.
+     */
     hasMore?: boolean;
-    /** The reader scrolled near the end while `hasMore`: load the next dialogs and append them. */
+    /**
+     * The reader came near the end while `hasMore`: append the next dialogs. A promise is awaited before the next call.
+     */
     onLoadMore?: () => void | Promise<void>;
-    /** The empty state without a search. Default: «Нет диалогов». */
+    /**
+     * The empty state without a search (an `EmptyPage` with an action). Default: «Нет диалогов».
+     */
     empty?: React.ReactNode;
-    /** Row tier: height, text, avatar, the search field. Default `m`. */
+    /**
+     * Row tier: height, text, avatar, glyphs and the search field. Without it the tier of the host.
+     */
     size?: ControlSize;
-    /** «Now» for the times. Default: the moment of the render. */
+    /**
+     * «Now» for the times of the rows. Default: the moment of the render.
+     */
     now?: Date;
-    /** Display of a `Date` time. Default `formatChatTime`: «14:32», «пн», «12 мар». */
+    /**
+     * Display of a row's `Date` time: «14:32» today, «пн» this week, «12 мар», «12.03.2025».
+     */
     formatTime?: (date: Date, now: Date) => string;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<ChatListLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -177,7 +231,7 @@ export type ChatListRootProps<T = unknown> = Omit<React.HTMLAttributes<HTMLDivEl
  * new places when the order changes, a long list rendered only around the view, placeholder rows
  * while loading and more dialogs loaded near the end. Draws no surface: put it in a pane.
  */
-declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function ChatListRoot<T>({ items, getKey, renderItem, value: valueProp, defaultValue, onValueChange, search: searchProp, defaultSearch, onSearchChange, loading, hasMore, onLoadMore, empty, size: sizeProp, now: nowProp, formatTime, labels: labelsProp, className, ref, ...rest }: ChatListRootProps<T>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace ChatListRoot {
     var displayName: string;
 }

package/dist/components/checkbox/Checkbox.d.ts

@@ -2,28 +2,64 @@ import * as React from "react";
 import { type ChoiceLabelProps } from "../../internal/ChoiceField";
 import type { ControlSize } from "../../internal/states";
 export type CheckboxShape = "square" | "circle";
+export type CheckboxLabels = {
+    /** Muted marker after the label text when `optional`. */
+    optional: string;
+};
+export declare const CHECKBOX_LABELS: CheckboxLabels;
 export type CheckboxRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange"> & {
+    /**
+     * Controlled checked state.
+     */
     checked?: boolean;
+    /**
+     * Initial state when uncontrolled.
+     */
     defaultChecked?: boolean;
+    /**
+     * Called with the new state on every toggle (not while `readOnly`).
+     */
     onCheckedChange?: (checked: boolean) => void;
-    /** Mixed state (e.g. «select all» with a partial selection); wins over `checked` visually. */
+    /**
+     * Mixed state (a partial «select all»): a bar instead of the check; wins over `checked` visually and sets the native `indeterminate`.
+     */
     indeterminate?: boolean;
-    /** Invalid state; a non-empty `error` implies it. */
+    /**
+     * Danger ring on the unchecked box and `aria-invalid`. A non-empty `error` implies it.
+     */
     invalid?: boolean;
-    /** Help text under the label text. Hidden while `error` is shown. */
+    /**
+     * Help text under the label text. Hidden while `error` is shown.
+     */
     hint?: React.ReactNode;
-    /** Error message in the hint slot; implies `invalid`. */
+    /**
+     * Error message in the hint slot; implies `invalid`.
+     */
     error?: React.ReactNode;
-    /** Tier. Default: the tier of the surrounding control (a form, a panel, a table), else `m`. */
+    /**
+     * Tier of the box, the text and the gap. Without it the tier of its host (a form, a panel, a table), else `m`.
+     */
     size?: ControlSize;
-    /** Outline of the box: rounded square or full circle (a selection mark, like in messengers). */
+    /**
+     * Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). Size, the check draw-in, the indeterminate bar and states are the same.
+     */
     shape?: CheckboxShape;
-    /** `Checkbox.Label`; without it the bare box renders (give it an `aria-label`). */
+    /**
+     * Muted `labels.optional` after the label text; the field may stay off.
+     */
+    optional?: boolean;
+    /**
+     * Built-in strings, see Labels.
+     */
+    labels?: Partial<CheckboxLabels>;
+    /**
+     * `Checkbox.Label`. Without it only the box renders — give the root an `aria-label`.
+     */
     children?: React.ReactNode;
     /** The native checkbox input. */
     ref?: React.Ref<HTMLInputElement>;
 };
-declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CheckboxRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, indeterminate, invalid, hint, error, size: sizeProp, shape, optional, labels: labelsProp, disabled: disabledProp, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: CheckboxRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CheckboxRoot {
     var displayName: string;
 }
@@ -33,19 +69,32 @@ declare namespace CheckboxLabel {
     var displayName: string;
 }
 export type CheckboxIndicatorProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /**
+     * Shows the check.
+     */
     checked?: boolean;
-    /** Mixed state; wins over `checked` visually. */
+    /**
+     * Shows the bar; wins over `checked`.
+     */
     indeterminate?: boolean;
+    /**
+     * Disabled fill.
+     */
     disabled?: boolean;
-    /** Outline of the box: rounded square or full circle. */
+    /**
+     * Outline of the box: `square` is the rounded square; `circle` is a full circle (a selection mark in lists and chats). The rest is the same.
+     */
     shape?: CheckboxShape;
-    /** Box tier; without it the nearest control size (e.g. the Select or menu it sits in), else `m`. */
+    /**
+     * Box tier; without it the nearest control size (the Select or menu it sits in), else `m`.
+     */
     size?: ControlSize;
     ref?: React.Ref<HTMLSpanElement>;
 };
 /**
  * The checkbox box alone, without an input: a decorative mark for rows whose own element carries
- * the state (`role="option"` with `aria-selected`, `role="menuitemcheckbox"` with `aria-checked`).
+ * the state (`role="option"` with `aria-selected`, `role="menuitemcheckbox"` with `aria-checked`,
+ * a toggle `<button>` with `aria-pressed`).
  * Used outside `Checkbox.Root`; it is `aria-hidden` and takes no focus or clicks.
  */
 declare function CheckboxIndicator({ checked, indeterminate, disabled, size: sizeProp, shape, className, ...rest }: CheckboxIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/code-block/CodeBlock.d.ts

@@ -3,14 +3,20 @@ import type { Variant } from "../../internal/states";
 export type CodeBlockColorScheme = "light" | "dark";
 /** `soft` — filled panel with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host. */
 export type CodeBlockVariant = Extract<Variant, "soft" | "ghost">;
-export type CodeBlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children" | "dangerouslySetInnerHTML"> & {
-    /** TS/TSX source; highlighted with `highlightTsxHtml`. */
+export type CodeBlockProps = Omit<React.HTMLAttributes<HTMLPreElement>, "children"> & {
+    /**
+     * TS / TSX source; trailing whitespace is trimmed, then highlighted.
+     */
     code: string;
-    /** Forces a theme for the block. Omit to follow the surrounding theme. */
+    /**
+     * Fixes the theme for this block only (`data-theme`). Omit to follow the page theme.
+     */
     colorScheme?: CodeBlockColorScheme;
-    /** Default `soft`. */
+    /**
+     * `soft` — a filled panel (one ladder step off its host) with padding and the `code` text role; `ghost` — bare `pre` that inherits type and background from its host.
+     */
     variant?: CodeBlockVariant;
     ref?: React.Ref<HTMLPreElement>;
 };
 /** A static, highlighted TS/TSX snippet in `<pre><code>`. */
-export declare function CodeBlock({ code, colorScheme, variant, className, tabIndex, ...rest }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeBlock({ code, colorScheme, variant, className, tabIndex, ref, ...rest }: CodeBlockProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/color-field/ColorField.d.ts

@@ -1,36 +1,75 @@
+import * as React from "react";
 import { type ColorPickerLabels } from "../color-picker/ColorPicker";
-import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import { type FieldFocusRingProps, type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
-import { type ColorPreset } from "../../internal/swatch";
-export type ColorFieldLabels = ColorPickerLabels & {
+import type { ColorPreset } from "../../internal/swatch";
+/** The picker strings the field's panel shows: the sliders and the channel strip. */
+type PanelLabelKey = "eyeDropper" | "hex" | "hue" | "saturation" | "lightness" | "alpha" | "red" | "green" | "blue";
+export type ColorFieldLabels = Pick<ColorPickerLabels, PanelLabelKey> & {
     /** Muted marker after the label when `optional`. */
     optional: string;
+    /** Read after the field name of a `required` field (its trigger is a button). */
+    required: string;
     /** Accessible name of the preset swatches in the panel (`presets`). */
     presets: string;
 };
-export type ColorFieldProps = FieldRootDomProps & FieldFrameProps & {
-    /** Controlled color: a CSS color string (hex, `rgb()`, `hsl()`). */
+export declare const COLOR_FIELD_LABELS: ColorFieldLabels;
+export type ColorFieldProps = FieldRootDomProps & FieldFrameProps & FieldFocusRingProps & {
+    /**
+     * Controlled color: a CSS color string (hex, `rgb()`, `hsl()`).
+     */
     value?: string;
+    /**
+     * Initial color when uncontrolled.
+     */
     defaultValue?: string;
-    /** Called with the new color as hex: `#RRGGBB`, or `#RRGGBBAA` when `alpha` lowers the opacity. */
+    /**
+     * Called with the new color as hex: `#RRGGBB`, or `#RRGGBBAA` when `alpha` lowers the opacity. A controlled field that does not take the value keeps its color.
+     */
     onValueChange?: (value: string) => void;
-    /** Ready colors under the channels: `{ value, label }`, picked in one click. */
+    /**
+     * Ready colors under the channels (`{ value, label }`), picked in one click; none by default.
+     */
     presets?: readonly ColorPreset[];
-    /** Adds the opacity slider; the value then carries alpha. */
+    /**
+     * Adds the opacity slider; the value then carries alpha.
+     */
     alpha?: boolean;
-    /** Field tier; the panel uses the same tier. */
+    /**
+     * Field tier (height 28 · 32 · 36 · 40 · 48); the panel uses the same tier. Without it the tier of its host, else `m`.
+     */
     size?: ControlSize;
+    /**
+     * Disables the field: it shows the color and does not open.
+     */
     disabled?: boolean;
-    /** Danger ring and `aria-invalid`; a non-empty `error` implies it. */
+    /**
+     * Danger ring and `aria-invalid` without a message. A non-empty `error` implies it.
+     */
     invalid?: boolean;
-    /** Form field name: a hidden input submits the hex value. */
+    /**
+     * Form field name: a hidden input submits the hex value.
+     */
     name?: string;
-    /** Id of the field button; generated when omitted. */
+    /**
+     * Id of the field button; hint id is `<id>-hint`, error id is `<id>-error`.
+     */
     id?: string;
-    /** Accessible name when there is no `label`; the current value is appended. */
+    /**
+     * Accessible name without a visible `label`; the current hex is appended.
+     */
     "aria-label"?: string;
+    /**
+     * Names the field button by an outside element.
+     */
     "aria-labelledby"?: string;
+    /**
+     * Merged before the hint/error ids.
+     */
     "aria-describedby"?: string;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<ColorFieldLabels>;
 };
 /**
@@ -38,7 +77,8 @@ export type ColorFieldProps = FieldRootDomProps & FieldFrameProps & {
  * the ColorPicker panel (area, hue, optional opacity, channels with the eyedropper, presets) in a
  * Popover.
  */
-export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): import("react/jsx-runtime").JSX.Element;
+export declare function ColorField({ value: valueProp, defaultValue, onValueChange, presets, alpha, size: sizeProp, disabled: disabledProp, invalid: invalidProp, focusRing, name, id, label, required, optional, hint, error, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: ColorFieldProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export declare namespace ColorField {
     var displayName: string;
 }
+export {};

package/dist/components/color-picker/ColorPicker.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { type ColorAreaProps as AriaColorAreaProps, type ColorSliderProps as AriaColorSliderProps, type ColorThumbProps as AriaColorThumbProps, type SliderTrackProps as AriaSliderTrackProps, type Color, parseColor } from "react-aria-components";
 import { Button } from "../button/Button";
-import { type ColorSwatchesProps } from "../color-swatches/ColorSwatches";
-import type { FieldRootDomProps } from "../../internal/FieldFrame";
+import { type ColorSwatchesColorProps } from "../color-swatches/ColorSwatches";
+import { type FieldActionButtonProps } from "../../internal/FieldAction";
+import type { FieldFocusRingProps, FieldRootDomProps } from "../../internal/FieldFrame";
 import type { ControlSize } from "../../internal/states";
 export type { Color as ColorPickerColorValue } from "react-aria-components";
 export type ColorValueFormat = "hsl" | "rgb" | "hex";
@@ -23,6 +24,8 @@ export type ColorPickerLabels = {
     eyeDropper: string;
     /** Hex field of `ChannelStrip` and the default `HexInput` label. */
     hex: string;
+    /** `ColorPicker.SwatchButton`: its name and tooltip. */
+    palette: string;
     hue: string;
     saturation: string;
     lightness: string;
@@ -33,49 +36,77 @@ export type ColorPickerLabels = {
 };
 export declare const COLOR_PICKER_LABELS: ColorPickerLabels;
 export type ColorPickerRootProps = {
-    /** Controlled color: a CSS color string or a `Color` from `parseColor`. */
+    /**
+     * Controlled color: a CSS color string or a `Color` from `parseColor`.
+     */
     value?: string | Color;
+    /**
+     * Initial color when uncontrolled.
+     */
     defaultValue?: string | Color;
+    /**
+     * Called with the new `Color` (`color.toString("hex")` for a string).
+     */
     onValueChange?: (color: Color) => void;
-    /** Initial value format of `FormatSelect` and `ChannelStrip`. */
+    /**
+     * Controlled value format of `FormatSelect` and `ChannelStrip`.
+     */
+    format?: ColorValueFormat;
+    /**
+     * Initial value format, uncontrolled.
+     */
     defaultFormat?: ColorValueFormat;
+    /**
+     * Called with the format picked in `FormatSelect`.
+     */
+    onFormatChange?: (format: ColorValueFormat) => void;
+    /**
+     * Tier of the fields inside (`HexInput`, `FormatSelect`); without it the tier of its host (a panel, a popover), else `m`.
+     */
+    size?: ControlSize;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<ColorPickerLabels>;
+    /**
+     * The parts.
+     */
     children: React.ReactNode;
 };
-export type ColorPickerHexInputProps = FieldRootDomProps & {
-    /** Tier. Default: the tier of the surrounding control (a panel, a popover), else `m`. */
-    size?: ControlSize;
+export type ColorPickerHexInputProps = FieldRootDomProps & FieldFocusRingProps & {
+    /**
+     * Field label; defaults to `labels.hex`.
+     */
     label?: React.ReactNode;
+    /**
+     * Help text under the field. Hidden while `error` is shown.
+     */
     hint?: React.ReactNode;
-    /** Error message in the hint slot; implies `invalid`. */
+    /**
+     * Error message in the hint slot; marks the field invalid.
+     */
     error?: React.ReactNode;
     /**
-     * Draws the focus ring on the focused field (default). `false` sets `data-focus-ring="false"` and
-     * hides only the visual ring — focus, keyboard and ARIA are unchanged, the error ring still shows.
-     * Turn it off only where focus is otherwise obvious; WCAG 2.4.7.
+     * End segments of the field box after the value: `ColorPicker.SwatchButton` (in a `Popover.Trigger`), so the hex and its swatch read as one field.
      */
-    focusRing?: boolean;
+    children?: React.ReactNode;
 };
 export { parseColor };
+/** Hex text of a color: `#rrggbb`, or `#rrggbbaa` when it is not opaque. */
+export declare function toHexText(color: Color): string;
+/** The color of a CSS color text (hex, `rgb()`, `hsl()`), or `null` for text it cannot read. */
+export declare function parseHex(text: string): Color | null;
 type DivProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     ref?: React.Ref<HTMLDivElement>;
 };
 export type ColorPickerFormatSelectProps = DivProps;
 declare function FormatSelect({ className, ...rest }: ColorPickerFormatSelectProps): import("react/jsx-runtime").JSX.Element;
-export type ColorPickerChannelStripProps = DivProps & {
-    /**
-     * Draws the focus ring on the focused field (default). `false` sets `data-focus-ring="false"` and
-     * hides only the visual ring — focus, keyboard and ARIA are unchanged, the error ring still shows.
-     * Turn it off only where focus is otherwise obvious; WCAG 2.4.7.
-     */
-    focusRing?: boolean;
-};
+export type ColorPickerChannelStripProps = DivProps & FieldFocusRingProps;
 /** Channel row: eyedropper on the left, then the cells of the current format. */
 declare function ChannelStrip({ className, focusRing, ...rest }: ColorPickerChannelStripProps): import("react/jsx-runtime").JSX.Element;
 export type ColorPickerPanelProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
-     * `none` (default) — layout only, for use inside Popover / Card that already provide a surface.
-     * `raised` — standalone floating panel: raised background, panel radius/padding, overlay shadow.
+     * `none` — layout only (inside a Popover or Card). `raised` — a standalone floating panel: raised background, panel radius and padding, overlay shadow.
      */
     surface?: "none" | "raised";
     ref?: React.Ref<HTMLDivElement>;
@@ -85,16 +116,22 @@ declare function Panel({ surface, className, children, ...rest }: ColorPickerPan
 declare namespace Panel {
     var displayName: string;
 }
-declare function ColorPickerRoot({ value, defaultValue, onValueChange, defaultFormat, labels: labelsProp, children, }: ColorPickerRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ColorPickerRoot({ value, defaultValue, onValueChange, format: formatProp, defaultFormat, onFormatChange, size: sizeProp, labels: labelsProp, children, }: ColorPickerRootProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare namespace ColorPickerRoot {
     var displayName: string;
 }
 export type ColorPickerSliderProps = Omit<AriaColorSliderProps, "isDisabled"> & {
+    /**
+     * Shows the color but takes no input (grayscale).
+     */
     disabled?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
 declare function Slider({ className, disabled, ...props }: ColorPickerSliderProps): import("react/jsx-runtime").JSX.Element;
 export type ColorPickerAreaProps = Omit<AriaColorAreaProps, "isDisabled"> & {
+    /**
+     * Shows the color but takes no input (grayscale).
+     */
     disabled?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -106,9 +143,9 @@ export type ColorPickerThumbProps = AriaColorThumbProps & {
 };
 declare function Area({ className, disabled, ...props }: ColorPickerAreaProps): import("react/jsx-runtime").JSX.Element;
 declare function SliderTrack({ className, style, ...props }: ColorPickerSliderTrackProps): import("react/jsx-runtime").JSX.Element;
+/** The draggable thumb of `ColorPicker.Area` and of a `ColorPicker.SliderTrack`. */
 declare function Thumb({ className, ...props }: ColorPickerThumbProps): import("react/jsx-runtime").JSX.Element;
-declare function AreaThumb({ className, ...props }: ColorPickerThumbProps): import("react/jsx-runtime").JSX.Element;
-export type ColorPickerSwatchesProps = Omit<ColorSwatchesProps, "value" | "defaultValue" | "onValueChange" | "allowEmpty" | "name">;
+export type ColorPickerSwatchesProps = Omit<ColorSwatchesColorProps, "mode" | "palette" | "value" | "defaultValue" | "onValueChange" | "allowEmpty" | "name">;
 /**
  * Preset swatches bound to the picker color: picking one sets the color, editing the color
  * elsewhere moves the selection. The kit `ColorSwatches`, so presets carry names.
@@ -118,16 +155,21 @@ declare namespace Swatches {
     var displayName: string;
 }
 export type ColorPickerSliderMetaProps = DivProps & {
-    /** The channel name. */
+    /**
+     * Visible label of the slider.
+     */
     label: React.ReactNode;
 };
-/** Slider heading: the label and the current channel value. */
+/**
+ * Slider heading: the label and the current channel value. The value is an `<output>` of its own:
+ * React Aria's `SliderOutput` inside a color slider points `for` at an id no input carries.
+ */
 declare function SliderMeta({ label, className, ...rest }: ColorPickerSliderMetaProps): import("react/jsx-runtime").JSX.Element;
-declare function HexInput({ label, hint, error, focusRing, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
+declare function HexInput({ label, hint, error, focusRing, children, ...rest }: ColorPickerHexInputProps): import("react/jsx-runtime").JSX.Element;
 declare namespace HexInput {
     var displayName: string;
 }
-export type ColorPickerEyeDropperButtonProps = Omit<React.ComponentPropsWithoutRef<typeof Button.Root>, "variant" | "tone" | "size" | "aria-label"> & {
+export type ColorPickerEyeDropperButtonProps = Omit<React.ComponentPropsWithoutRef<typeof Button.Root>, "variant" | "tone" | "size" | "aria-label" | "shape" | "asChild"> & {
     ref?: React.Ref<HTMLButtonElement>;
 };
 /**
@@ -146,15 +188,24 @@ declare function TriggerSwatch(props: ColorPickerTriggerSwatchProps): import("re
 declare namespace TriggerSwatch {
     var displayName: string;
 }
+export type ColorPickerSwatchButtonProps = Omit<FieldActionButtonProps, "label" | "children" | "asChild">;
+/**
+ * The current color as a button segment at the end of `HexInput` (named `labels.palette`, with a
+ * tooltip): the hex and its swatch read as one field. Wrap it in `Popover.Trigger` to open a panel.
+ */
+declare function SwatchButton({ className, ...rest }: ColorPickerSwatchButtonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SwatchButton {
+    var displayName: string;
+}
 export declare const ColorPicker: {
     Root: typeof ColorPickerRoot;
     Panel: typeof Panel;
     TriggerSwatch: typeof TriggerSwatch;
+    SwatchButton: typeof SwatchButton;
     FormatSelect: typeof FormatSelect;
     ChannelStrip: typeof ChannelStrip;
     HexInput: typeof HexInput;
     Area: typeof Area;
-    AreaThumb: typeof AreaThumb;
     Slider: typeof Slider;
     SliderMeta: typeof SliderMeta;
     SliderTrack: typeof SliderTrack;