prime-ui-kit 0.10.0 → 0.11.0

package/dist/color-picker.d.ts

@@ -1,7 +1,9 @@
 /**
- * `prime-ui-kit/color-picker` — the full ColorPicker, the only part of the kit built on
- * `react-aria-components` (an optional peer). Kept out of the main entry so apps without a color
- * picker never load it. `ColorPresets` and `ColorSwatches` stay in the main entry.
+ * `prime-ui-kit/color-picker` — the full ColorPicker and the ColorField built on it, the only part
+ * of the kit on `react-aria-components` (an optional peer). Kept out of the main entry so apps
+ * without a color picker never load it. `ColorPresets` and `ColorSwatches` stay in the main entry.
  */
+export type { ColorFieldLabels, ColorFieldProps } from "./components/color-field/ColorField";
+export { ColorField } from "./components/color-field/ColorField";
 export type { ColorPickerAreaProps, ColorPickerChannelStripProps, ColorPickerColorValue, ColorPickerEyeDropperButtonProps, ColorPickerFormatSelectProps, ColorPickerHexInputProps, ColorPickerLabels, ColorPickerPanelProps, ColorPickerRootProps, ColorPickerSliderMetaProps, ColorPickerSliderProps, ColorPickerSliderTrackProps, ColorPickerSwatchesProps, ColorPickerThumbProps, ColorPickerTriggerSwatchProps, ColorValueFormat, } from "./components/color-picker/ColorPicker";
 export { ColorPicker, parseColor } from "./components/color-picker/ColorPicker";

package/dist/color-picker.js

@@ -1,10 +1,14 @@
+"use client";
+
 import {
+  ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-T7CLQXGB.js";
-import "./chunks/chunk-4TRNUP45.js";
-import "./chunks/chunk-GFKDZFQR.js";
+} from "./chunks/chunk-GKX3QAUC.js";
+import "./chunks/chunk-WDTSHOTD.js";
+import "./chunks/chunk-Q3BFRQHZ.js";
 export {
+  ColorField,
   ColorPicker,
   parseColor
 };

package/dist/components/accordion/Accordion.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 type AccordionBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
     /** Trigger, icon and content spacing tier. Default `m`. */
     size?: ControlSize;

package/dist/components/avatar/Avatar.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { type ImageSlotFallbackProps, type ImageSlotImageProps } from "@/internal/imageSlot";
-import type { ControlSize, PaletteColor } from "@/internal/states";
+import { type ImageSlotFallbackProps, type ImageSlotImageProps } from "../../internal/imageSlot";
+import type { ControlSize, PaletteColor } from "../../internal/states";
 /** `xs` 20 · `s` 24 · `m` 32 · `l` 40 · `xl` 48 · `2xl` 64 (`--prime-avatar-*`). */
 export type AvatarSize = ControlSize | "2xl";
 export type AvatarRootProps = React.HTMLAttributes<HTMLDivElement> & {

package/dist/components/badge/Badge.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor, Variant } from "@/internal/states";
+import type { ControlSize, PaletteColor, Variant } from "../../internal/states";
 export type BadgeLabels = {
     /** Accessible name of the remove button; include the badge text, e.g. «Убрать фильтр «Москва»». */
     remove: string;
+    /** Spoken when the `onRemove` promise rejects and the badge stays. */
+    removeFailed: string;
 };
 export type BadgeRootProps = {
     /** Palette hue. Default `gray`. */
@@ -11,8 +13,18 @@ export type BadgeRootProps = {
     variant?: Exclude<Variant, "ghost">;
     /** Badge tier; without it the badge follows the surrounding control one tier down. */
     size?: ControlSize;
-    /** Shows the remove segment at the end (an applied filter, a selected value). */
-    onRemove?: () => void;
+    /**
+     * Shows the remove segment at the end (an applied filter, a selected value). Return the save's
+     * promise to remove on a server: the badge waits dimmed with a spinner in the segment; resolve —
+     * take it out of your list before resolving, it leaves with its exit; reject — it stays and
+     * `labels.removeFailed` is announced.
+     */
+    onRemove?: () => void | Promise<void>;
+    /**
+     * The badge waits on a request (a value its owner is still creating): dimmed, `aria-busy`, a
+     * spinner in the remove segment, which takes no press. A promise from `onRemove` does this itself.
+     */
+    loading?: boolean;
     /**
      * Makes the body a button covering the whole badge (a toggle chip, a filter value). Receives the
      * click, so Alt / Shift clicks can mean something else.
@@ -48,7 +60,7 @@ export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function BadgeRoot({ color, variant, size: sizeProp, onRemove, onPress, pressed, labels, disabled, children, className, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeRoot({ color, variant, size: sizeProp, onRemove, onPress, pressed, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeRoot {
     var displayName: string;
 }
@@ -69,7 +81,7 @@ declare namespace BadgeDot {
  * and focus. The text slides toward the start and the segment comes in, inside room the badge always
  * reserves, so the badge never changes width and its neighbours never move.
  */
-declare function BadgeAction({ label, onClick, persistent: _persistent, disabled, pressed, children, className, ...rest }: BadgeActionProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeAction({ label, onClick, persistent: _persistent, disabled: disabledProp, pressed, children, className, ...rest }: BadgeActionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeAction {
     var displayName: string;
 }

package/dist/components/badge/tier.d.ts

@@ -1,4 +1,8 @@
-import type { ControlSize } from "@/internal/states";
+import { type ControlSize } from "../../internal/states";
+/**
+ * Badge tiers (`--prime-badge-<tier>-*`): 16 · 20 · 24 · 28 · 32. Shared by Badge and Kbd.
+ * Pairing rule (foundation §6): inside a control of tier T a badge uses the tier one step down.
+ */
 export type ResolvedBadgeTier = {
     /** Nominal size exposed as `data-size`: the explicit prop, else the surrounding control size. */
     size: ControlSize;
@@ -7,6 +11,6 @@ export type ResolvedBadgeTier = {
 };
 /**
  * Explicit `size` wins and is used as is. Without it the chip follows the nearest
- * `ControlSizeProvider` one tier down; with no provider the default is `m`.
+ * `ControlSizeProvider` one tier down (`stepDown`); with no provider the default is `m`.
  */
 export declare function useBadgeTier(sizeProp: ControlSize | undefined): ResolvedBadgeTier;

package/dist/components/banner/Banner.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize, Tone, Variant } from "@/internal/states";
+import type { ControlSize, Tone, Variant } from "../../internal/states";
 export type BannerLabels = {
     /** `aria-label` of the close button. */
     dismiss: string;

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import type { ControlSize } from "../../internal/states";
 export type BreadcrumbLabels = {
     /** `aria-label` of the `nav` landmark. */
     nav: string;

package/dist/components/button/Button.d.ts

@@ -1,12 +1,16 @@
 import * as React from "react";
-import type { ControlSize, Tone, Variant } from "@/internal/states";
+import type { ControlSize, Tone, Variant } from "../../internal/states";
 /**
  * `tone="inherit"` takes the host's text color (a close button on a solid Banner): fills are a
  * `currentColor` wash, so it has no `solid` treatment.
  */
 type ButtonColorProps = {
-    /** Visual treatment. Default `solid`. */
-    variant?: Variant;
+    /**
+     * Visual treatment. Default `solid`. `shade` — the media shade with a blur and its light
+     * glyph, for a button that stands over a picture, a video or a video circle; with
+     * `tone="danger"` it turns the danger disk (a failed transfer).
+     */
+    variant?: Variant | "shade";
     /**
      * Semantic color. Default `accent`; `danger` for destructive actions; `success` for an action
      * that is done («Оплачено»).
@@ -17,27 +21,54 @@ type ButtonColorProps = {
     /** Takes the host's text color; for actions placed on a colored host. */
     tone: "inherit";
 };
+/**
+ * `circle` is a disk with an icon only: its name is the `aria-label` (a visible label has no room).
+ */
+type ButtonShapeProps = {
+    /**
+     * Outline. Default `square` (the tier's radius). `circle` — a disk with only a `Button.Icon`:
+     * as wide as it is tall, full radius, the same tiers, tones and variants; its focus ring,
+     * touch area and press (`press-scale-compact`) follow the circle.
+     */
+    shape?: "square";
+} | {
+    shape: "circle";
+    /** A circle has no visible label: it is named here. */
+    "aria-label": string;
+};
 export type ButtonLabels = {
     /** Description of a hold-to-confirm button for assistive tech. */
     holdHint: string;
 };
-export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size"> & ButtonColorProps & {
+export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-pressed"> & ButtonColorProps & ButtonShapeProps & {
     /** Tier. Default: the tier of the surrounding control (a form, a panel, a field), else `m`. */
     size?: ControlSize;
     fullWidth?: boolean;
     loading?: boolean;
     /**
-     * Progress of a long action started by this button, `0…1`: a fill grows inside the button and
-     * `aria-busy` is set. The label carries the number («Скачивание 42%»). Remove it when done.
+     * A toggle button: `true` on, `false` off (`aria-pressed`); the on state takes the selected look
+     * (accent soft fill). Leave it out for an ordinary action. For a set of toggles use ButtonGroup.
+     */
+    pressed?: boolean;
+    /**
+     * Progress of a long action started by this button, `0…1`; `null` — under way, the share
+     * unknown. The button stays pressable (a cancel) and is `aria-busy`. On a square a fill grows
+     * inside it (`null`: a spinner takes the leading icon's place); on a circle a ring runs along
+     * its inner edge in the glyph's color and always turns. The label or description carries the
+     * number («Скачивание 42%»). Remove it when done: the fill or the ring fades where it is.
      */
-    progress?: number;
+    progress?: number | null;
     /**
      * The action needs a held press: the fill runs for 1.2 s and `onConfirm` fires at its end.
      * Releasing earlier rolls the fill back and does nothing. Space and Enter hold too.
      */
     holdToConfirm?: boolean;
-    /** Fires when a `holdToConfirm` press completes; the action goes here, not in `onClick`. */
-    onConfirm?: () => void;
+    /**
+     * Fires when a `holdToConfirm` press completes; the action goes here, not in `onClick`. Return
+     * the request's promise: the full fill stays and the button is `loading` until it settles;
+     * resolve — the fill fades; reject — the fill rolls back.
+     */
+    onConfirm?: () => void | Promise<void>;
     labels?: Partial<ButtonLabels>;
     /**
      * Merges Button props onto its single child element instead of rendering `<button>`.
@@ -47,7 +78,7 @@ export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
     asChild?: boolean;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function ButtonRoot({ children, className, variant, tone, size: sizeProp, fullWidth, type, loading, progress, holdToConfirm, onConfirm, labels, disabled, asChild, onClick, ref, ...rest }: ButtonRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonRoot({ children, className, variant, tone, shape, size: sizeProp, fullWidth, type, loading: loadingProp, pressed, progress, holdToConfirm, onConfirm, labels, disabled: disabledProp, asChild, onClick, ref, ...rest }: ButtonRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonRoot {
     var displayName: string;
 }
@@ -56,6 +87,7 @@ export type ButtonIconProps = {
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+/** The glyph of a button; a changed glyph (another icon `name`) cross-fades into the new one. */
 declare function ButtonIcon({ children, className, ...rest }: ButtonIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonIcon {
     var displayName: string;

package/dist/components/button-group/ButtonGroup.d.ts

@@ -1,15 +1,32 @@
 import type * as React from "react";
-import type { ControlSize } from "@/internal/states";
+import { type FieldFrameProps, type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
 export type ButtonGroupOrientation = "horizontal" | "vertical";
-export type ButtonGroupRootProps = React.HTMLAttributes<HTMLDivElement> & {
+export type ButtonGroupLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export type ButtonGroupRootProps = Omit<FieldRootDomProps, "dir"> & Omit<FieldFrameProps, "focusRing"> & {
     orientation?: ButtonGroupOrientation;
     /** Tier. Default: the tier of the surrounding control (a toolbar, a panel), else `m`. */
     size?: ControlSize;
     /** Stretch the group to its container; horizontal segments share the width equally. */
     fullWidth?: boolean;
-    ref?: React.Ref<HTMLDivElement>;
+    /** Invalid state: a danger ring on every segment and `aria-invalid` on the group. */
+    invalid?: boolean;
+    /** Always render the support row so an appearing error does not shift the layout. */
+    reserveSupportRow?: boolean;
+    /** Id of the `role="group"` element; generated when omitted. */
+    id?: string;
+    labels?: Partial<ButtonGroupLabels>;
+    /** `ButtonGroup.Item` segments. */
+    children?: React.ReactNode;
 };
-declare function ButtonGroupRoot({ orientation, size: sizeProp, fullWidth, children, className, ref, ...rest }: ButtonGroupRootProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * The field: label · the segments · hint or error. `className`, `ref` and the rest go to the frame;
+ * `id`, `role` and the `aria-label*` / `aria-describedby` names to the `role="group"` element.
+ */
+declare function ButtonGroupRoot({ orientation, size: sizeProp, fullWidth, label, required, optional, hint, error, invalid, reserveSupportRow, id, labels: labelsProp, children, className, role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...rest }: ButtonGroupRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonGroupRoot {
     var displayName: string;
 }
@@ -18,7 +35,7 @@ export type ButtonGroupItemProps = React.ButtonHTMLAttributes<HTMLButtonElement>
     pressed?: boolean;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function ButtonGroupItem({ className, pressed, type, children, ref, ...rest }: ButtonGroupItemProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonGroupItem({ className, pressed, type, disabled: disabledProp, children, ref, ...rest }: ButtonGroupItemProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonGroupItem {
     var displayName: string;
 }

package/dist/components/card/Card.d.ts

@@ -1,5 +1,5 @@
-import type * as React from "react";
-import type { Tone } from "@/internal/states";
+import * as React from "react";
+import type { Tone } from "../../internal/states";
 type DivProps = React.HTMLAttributes<HTMLDivElement> & {
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -12,8 +12,14 @@ export type CardRootProps = DivProps & {
     variant?: CardVariant;
     /** No raised shadow: a flat tile on the page (dense grids where shadows add noise). */
     flat?: boolean;
+    /**
+     * The whole card is one link or button: pass that element as the only child and the card's
+     * parts inside it. It lifts on hover, presses and shows the focus ring. Nothing interactive
+     * may sit inside it.
+     */
+    asChild?: boolean;
 };
-declare function CardRoot({ variant, flat, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ variant, flat, asChild, className, children, ...rest }: CardRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace CardRoot {
     var displayName: string;
 }
@@ -81,6 +87,15 @@ declare function CardDelta({ className, tone, ...rest }: CardDeltaProps): import
 declare namespace CardDelta {
     var displayName: string;
 }
+export type CardMetaProps = SpanProps;
+/**
+ * The reference line of a KPI («Лидов 120 · сделок 18»): caption, muted, tabular; it sits at the
+ * bottom of the tile, so tiles in a row line their meta up.
+ */
+declare function CardMeta({ className, ...rest }: CardMetaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace CardMeta {
+    var displayName: string;
+}
 export type CardListProps = React.HTMLAttributes<HTMLUListElement> & {
     ref?: React.Ref<HTMLUListElement>;
 };
@@ -107,6 +122,7 @@ export declare const Card: {
     Label: typeof CardLabel;
     Value: typeof CardValue;
     Delta: typeof CardDelta;
+    Meta: typeof CardMeta;
     List: typeof CardList;
     ListItem: typeof CardListItem;
 };

package/dist/components/chart-frame/ChartFrame.d.ts

@@ -0,0 +1,229 @@
+import * as React from "react";
+import type { PaletteColor, Tone } from "../../internal/states";
+/** What the chart region shows: the plot, its Skeleton, the empty state or the load error. */
+export type ChartFrameState = "ready" | "loading" | "empty" | "error";
+/** One series of the chart: its legend entry, tooltip row and table column. */
+export type ChartFrameSeries = {
+    /** Stable key: `hiddenSeries`, tooltip items and table values refer to it. */
+    id: string;
+    /** Visible name in the legend, the tooltip and the table header. */
+    label: string;
+    /**
+     * The category's hue (its step of the chart palette, as in a ProgressBar share). Default: the
+     * series' place in `series` — `chartColors.series[index]`, past the eighth `chartColors.other`.
+     */
+    color?: PaletteColor;
+    /** Summary of the series in the legend (a total over the period). */
+    value?: number;
+};
+/** A series as the plot draws it: the resolved color as a CSS value and its visibility. */
+export type ChartFramePlotSeries = {
+    id: string;
+    label: string;
+    /** `var(--prime-color-chart-*)`: a string for SVG `fill` / `stroke` or a library's series color. */
+    color: string;
+    /** Turned off in the legend: keep the mark mounted with `data-hidden="true"` so it fades out. */
+    hidden: boolean;
+};
+/** What `ChartFrame.Plot` hands `renderPlot`: the measured box and every series in order. */
+export type ChartFramePlotArea = {
+    /** Width of the plot area in px. */
+    width: number;
+    /** Height of the plot area in px. */
+    height: number;
+    series: ChartFramePlotSeries[];
+};
+export type ChartFrameLabels = {
+    /** Title of the empty state. */
+    empty: string;
+    /** Title of the error state. */
+    error: string;
+    /** Text of the retry button in the error state. */
+    retry: string;
+    /** Accessible name of the legend. */
+    legend: string;
+    /** Header of the first column of `ChartFrame.Table` (what a row is). */
+    category: string;
+};
+export type ChartFrameRootProps = React.HTMLAttributes<HTMLElement> & {
+    /**
+     * What the chart region shows. `loading` — Skeletons in the geometry of the value, the plot and
+     * the legend values; `empty` — the empty state in the plot's place; `error` — the load error with
+     * a retry button (`onRetry`). Every change cross-fades. Default `ready`.
+     */
+    state?: ChartFrameState;
+    /** The series in drawing order: the legend, tooltip rows, table columns and plot colors. */
+    series?: ChartFrameSeries[];
+    /** Ids of the series turned off in the legend (controlled). */
+    hiddenSeries?: string[];
+    /** Initially hidden series (uncontrolled). Default none. */
+    defaultHiddenSeries?: string[];
+    /** The legend turned a series on or off; the new list of hidden ids. */
+    onHiddenSeriesChange?: (hiddenSeries: string[]) => void;
+    /** Display of a value in the legend, the tooltip and the table. Default: Russian digit groups. */
+    formatValue?: (value: number) => string;
+    /**
+     * Loads the data again from the error state; shows the retry button. May return a Promise: the
+     * button waits for it.
+     */
+    onRetry?: () => void | Promise<void>;
+    labels?: Partial<ChartFrameLabels>;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * A dashboard panel around any chart (Recharts, ECharts, visx, Chart.js or a hand-drawn SVG): a
+ * surface of the depth ladder named by its title, with a headline value, the measured plot area, a
+ * series legend that turns series on and off, a tooltip body and a table for assistive tech. The
+ * state (loading / empty / error / ready) lives on the root; every part shows its own side of it.
+ */
+declare function ChartFrameRoot({ state, series, hiddenSeries: hiddenProp, defaultHiddenSeries, onHiddenSeriesChange, formatValue, onRetry, labels: labelsProp, className, children, ...rest }: ChartFrameRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameRoot {
+    var displayName: string;
+}
+export type ChartFrameHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The top zone: the title and the description first, `ChartFrame.Actions` at the end. */
+declare function ChartFrameHeader({ className, ...rest }: ChartFrameHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameHeader {
+    var displayName: string;
+}
+type ChartFrameTitleAs = "h2" | "h3" | "h4";
+export type ChartFrameTitleProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    /** Heading level that fits the page outline; the look does not change. Default `h3`. */
+    as?: ChartFrameTitleAs;
+    ref?: React.Ref<HTMLHeadingElement>;
+};
+/** The name of the chart: heads the panel and names the figure. */
+declare function ChartFrameTitle({ as: Tag, className, ref, ...rest }: ChartFrameTitleProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameTitle {
+    var displayName: string;
+}
+export type ChartFrameDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    ref?: React.Ref<HTMLParagraphElement>;
+};
+/** What the chart measures and over which period; describes the figure. */
+declare function ChartFrameDescription({ className, ...rest }: ChartFrameDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameDescription {
+    var displayName: string;
+}
+export type ChartFrameActionsProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** Controls of the chart in the header (period switch, export); drops under the title when narrow. */
+declare function ChartFrameActions({ className, ...rest }: ChartFrameActionsProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameActions {
+    var displayName: string;
+}
+export type ChartFrameValueProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The headline number of the chart («8,4 млн ₽»), with an optional `ChartFrame.Delta` inside.
+ * While loading it is a Skeleton of its own geometry; after a load error it is a dash.
+ */
+declare function ChartFrameValue({ className, children, ...rest }: ChartFrameValueProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameValue {
+    var displayName: string;
+}
+export type ChartFrameDeltaProps = React.HTMLAttributes<HTMLSpanElement> & {
+    /** Color of the change: `success` — good, `danger` — bad, `neutral` (default). Independent of the sign. */
+    tone?: Extract<Tone, "neutral" | "success" | "warning" | "danger">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/** The change of the headline value («+12% к сентябрю»); the sign is in the text, not only the color. */
+declare function ChartFrameDelta({ tone, className, ...rest }: ChartFrameDeltaProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameDelta {
+    var displayName: string;
+}
+export type ChartFramePlotProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    /** Height of the plot area in px. Default 240, 160 when the panel is narrower than 30rem. */
+    height?: number;
+    /**
+     * Renders the chart at the measured size — for libraries that need explicit `width` and
+     * `height` (Recharts without `ResponsiveContainer`, Chart.js, visx). Gets every series with its
+     * resolved color and visibility. Called once the area has a size.
+     */
+    renderPlot?: (area: ChartFramePlotArea) => React.ReactNode;
+    /** A chart that sizes itself to its container (an SVG with `width="100%"`, `ResponsiveContainer`). */
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The plot area: a box of a fixed height that measures itself (ResizeObserver) and hands the size
+ * to `renderPlot`. Loading, empty and error cross-fade in its place, so the panel never jumps. SVG
+ * text inside takes the caption type in the muted color; a mark with `data-hidden="true"` fades out.
+ */
+declare function ChartFramePlot({ height, renderPlot, children, className, style, ref, ...rest }: ChartFramePlotProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFramePlot {
+    var displayName: string;
+}
+export type ChartFrameLegendProps = React.HTMLAttributes<HTMLUListElement> & {
+    /** Entries only name the series; they do not turn them on and off. */
+    readOnly?: boolean;
+    ref?: React.Ref<HTMLUListElement>;
+};
+/**
+ * The series of the root as entries: swatch, name and the optional summary value. Each entry is a
+ * toggle button (`aria-pressed` = shown); the arrows move between entries, Enter / Space toggle. A
+ * hidden series keeps its place and color: its swatch turns hollow and its name quiet.
+ */
+declare function ChartFrameLegend({ readOnly, className, ...rest }: ChartFrameLegendProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ChartFrameLegend {
+    var displayName: string;
+}
+export type ChartFrameTooltipItem = {
+    /** Id of a series of the root: its name and color come from there. */
+    id: string;
+    value: number;
+};
+export type ChartFrameTooltipProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** The point the rows belong to («Неделя 41», «8 окт»). */
+    label?: string;
+    /** One row per series at that point; rows of hidden series are left out. */
+    items: ChartFrameTooltipItem[];
+    ref?: React.Ref<HTMLDivElement>;
+};
+/**
+ * The kit's tooltip body for a chart library's custom tooltip hook (Recharts `content`, visx
+ * `TooltipWithBounds`, a hand-drawn overlay): a floating panel with the point's label and rows of
+ * swatch · series name · value. The library positions it; it must render inside `ChartFrame.Root`.
+ */
+declare function ChartFrameTooltip({ label, items, className, ...rest }: ChartFrameTooltipProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ChartFrameTooltip {
+    var displayName: string;
+}
+export type ChartFrameTableRow = {
+    /** The point the row stands for («Неделя 41»): the row header. */
+    label: string;
+    /** Values by series id; a missing value reads as «—». */
+    values: Record<string, number | undefined>;
+};
+export type ChartFrameTableProps = React.TableHTMLAttributes<HTMLTableElement> & {
+    /** The chart's data, one row per point. */
+    rows: ChartFrameTableRow[];
+    ref?: React.Ref<HTMLTableElement>;
+};
+/**
+ * The chart's data as a table for screen readers (visually hidden): a row per point, a column per
+ * shown series, named by the chart title. Present only while the data is ready. A visible table is
+ * a `DataTable`.
+ */
+declare function ChartFrameTable({ rows, className, ...rest }: ChartFrameTableProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ChartFrameTable {
+    var displayName: string;
+}
+export declare const ChartFrame: {
+    Root: typeof ChartFrameRoot;
+    Header: typeof ChartFrameHeader;
+    Title: typeof ChartFrameTitle;
+    Description: typeof ChartFrameDescription;
+    Actions: typeof ChartFrameActions;
+    Value: typeof ChartFrameValue;
+    Delta: typeof ChartFrameDelta;
+    Plot: typeof ChartFramePlot;
+    Legend: typeof ChartFrameLegend;
+    Tooltip: typeof ChartFrameTooltip;
+    Table: typeof ChartFrameTable;
+};
+export {};