prime-ui-kit 0.13.1 → 0.14.0

package/dist/color-picker.js

@@ -4,8 +4,8 @@ import {
   ColorField,
   ColorPicker,
   parseColor
-} from "./chunks/chunk-XNOJEX55.js";
-import "./chunks/chunk-PK2GC77E.js";
+} from "./chunks/chunk-P6ZO37JM.js";
+import "./chunks/chunk-WXKRUVSE.js";
 import "./chunks/chunk-Q3BFRQHZ.js";
 export {
   ColorField,

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

@@ -17,12 +17,15 @@ export type BannerRootProps = React.HTMLAttributes<HTMLDivElement> & {
      * page content column.
      */
     placement?: "inset" | "page";
-    /** Renders a close button and calls this on its click. */
+    /**
+     * Renders a close button and calls this on its click. The parent unmounts the banner; it closes
+     * up in place, and the parent moves focus somewhere sensible.
+     */
     onDismiss?: () => void;
     labels?: Partial<BannerLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function BannerRoot({ variant, tone, size, placement, onDismiss, labels, className, children, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BannerRoot({ variant, tone, size, placement, onDismiss, labels, className, children, ref, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerRoot {
     var displayName: string;
 }

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

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { type AnchorPoint } from "../../internal/ChartTooltip";
 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";
@@ -137,8 +138,12 @@ 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;
+    /**
+     * Height of the plot area in px. Default 240, 160 when the panel is narrower than 30rem. `fill` —
+     * the plot takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the
+     * default height at least.
+     */
+    height?: number | "fill";
     /**
      * 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
@@ -182,14 +187,22 @@ export type ChartFrameTooltipProps = React.HTMLAttributes<HTMLDivElement> & {
     label?: string;
     /** One row per series at that point; rows of hidden series are left out. */
     items: ChartFrameTooltipItem[];
+    /**
+     * A point of the plot in the coordinates `renderPlot` draws in (the pointer, or the point the
+     * arrow keys reached): the tooltip floats beside it like every kit layer — right of it, on the
+     * left only where the right has no room; `null` hides it. Without `point` the body renders in
+     * place for a chart library's tooltip hook, which positions it.
+     */
+    point?: AnchorPoint | null;
     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`.
+ * The kit's chart tooltip: the point's label and rows of swatch · series name · value. With
+ * `point` it floats beside that point of the plot (a hand-drawn SVG chart); without it it is the
+ * body for a chart library's custom tooltip hook (Recharts `content`, visx `TooltipWithBounds`).
+ * It must render inside `ChartFrame.Root`.
  */
-declare function ChartFrameTooltip({ label, items, className, ...rest }: ChartFrameTooltipProps): import("react/jsx-runtime").JSX.Element;
+declare function ChartFrameTooltip({ label, items, point, className, ...rest }: ChartFrameTooltipProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ChartFrameTooltip {
     var displayName: string;
 }

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

@@ -26,8 +26,8 @@ export type ChatRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultV
     /** The search opened, changed its query or closed (`null`). */
     onSearchChange?: (search: string | null) => void;
     /**
-     * A message to bring into view and point at (a link, a notification): the others blink around
-     * it. A search's current match takes its place while the search is open.
+     * A message to bring into view and point at (a link, a notification): it
+     * blinks. A search's current match takes its place while the search is open.
      */
     current?: string | null;
     /** The other side is typing: the header's status turns into «печатает…» and the list ends with the typing bubble. */

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

@@ -23,8 +23,8 @@ export type ChatPinnedProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childr
     /** The shown pinned message changed: a press went on to the next older one. */
     onValueChange?: (value: string) => void;
     /**
-     * A press on the bar, after the chat has brought the message into view and blinked the others
-     * around it: load it when it is not in the list yet. The bar then moves on to the next older
+     * A press on the bar, after the chat has brought the message into view and blinked it:
+     * load it when it is not in the list yet. The bar then moves on to the next older
      * pinned message, the oldest wraps to the newest.
      */
     onSelect?: (value: string) => void;

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

@@ -64,7 +64,7 @@ export type MessageListProps = React.HTMLAttributes<HTMLDivElement> & {
     highlight?: string;
     /** The messages whose text holds `highlight`, in list order (oldest first), as they change. */
     onMatchesChange?: (values: readonly string[]) => void;
-    /** Receives the list's jump: bring a message into view and blink the others around it. */
+    /** Receives the list's jump: bring a message into view and blink it. */
     revealRef?: React.Ref<((value: string) => void) | null>;
     labels?: Partial<MessageListLabels>;
     ref?: React.Ref<HTMLDivElement>;

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

@@ -41,7 +41,7 @@ export type ChatContextValue = {
     current: string | null;
     /** The other side types. */
     typing: boolean;
-    /** Brings a message into view and blinks the others around it (a pinned message's press). */
+    /** Brings a message into view and blinks it (a pinned message's press). */
     jump: (value: string) => void;
     /** `Chat.SearchButton`: the focus goes back to it when the search closes from its field. */
     searchButtonRef: React.RefObject<HTMLButtonElement | null>;

package/dist/components/field-list/FieldList.d.ts

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { type FieldRootDomProps } from "../../internal/FieldFrame";
+import type { ControlSize } from "../../internal/states";
+export type FieldListLabels = {
+    /** `aria-label` of a row's remove button; `{row}` is the row's name. */
+    remove: string;
+    /** `aria-label` of a row's drag handle (`reorderable`); `{row}` is the row's name. */
+    reorder: string;
+    /** Name of a row without `getLabel` text; `{index}` counts from 1. */
+    row: string;
+    /** Name of a row with `getLabel` text; `{label}` is that text. */
+    namedRow: string;
+    /** Spoken name of the lock on a `getLocked` row of a list without `reorderable`. */
+    locked: string;
+    /** Text beside the disabled add button once the list holds `max` rows; `{max}` is the limit. */
+    maxReached: string;
+};
+/** Width of a column: the same track in the heading row and in every row. */
+export type FieldListColumnWidth = "fill" | "compact" | "s" | "m";
+export type FieldListColumn = {
+    /** Column heading, shown once above the rows; it names the field of this column in every row. */
+    label: string;
+    /**
+     * `fill` (default) shares the free width; `compact` fits an icon-only control (an icon Select,
+     * a swatch button, a checkbox); `s` a short value (a quantity, a code); `m` an amount or a date.
+     */
+    width?: FieldListColumnWidth;
+    /** A red `*` after the heading (decorative): every field of the column is required. */
+    required?: boolean;
+};
+/** What `renderItem` gets beside the item: its place and the edits of its row. */
+export type FieldListRow<T> = {
+    /** Place of the row, from 0. */
+    index: number;
+    /** Merges `patch` into the item and reports the new list through `onValueChange`. */
+    update: (patch: Partial<T>) => void;
+    /** Takes the row out of the list (the row's remove button does the same). */
+    remove: () => void;
+};
+export type FieldListProps<T extends object> = Omit<FieldRootDomProps, "onChange"> & {
+    /** The rows (controlled). */
+    value?: readonly T[];
+    /** The first rows (uncontrolled). */
+    defaultValue?: readonly T[];
+    /** The new list after an edit, an added, removed or moved row. */
+    onValueChange?: (value: T[]) => void;
+    /** Stable unique id of an item: the row key, the drag id. */
+    getId: (item: T) => string;
+    /** The columns, in the order of the cells `renderItem` returns. */
+    columns: readonly FieldListColumn[];
+    /**
+     * The cells of a row: one element per column, in column order (a fragment of fields). A cell
+     * holds a kit field without a `label`: the column heading names it.
+     */
+    renderItem: (item: T, row: FieldListRow<T>) => React.ReactNode;
+    /** A new empty item; with it the list shows the add button under the rows. */
+    createItem?: () => T;
+    /** Text of the add button: what is added («Добавить позицию»). */
+    addLabel?: string;
+    /** The row's own text for its handle, remove button and drag announcements (its title field). */
+    getLabel?: (item: T) => string;
+    /** Rows that hold their place and cannot be removed: a lock in the lead column. */
+    getLocked?: (item: T) => boolean;
+    /** Rows move by a leading handle (drag, a touch hold, Alt + ↑ / ↓). */
+    reorderable?: boolean;
+    /** The fewest rows: remove buttons turn disabled at this count. Default 0. */
+    min?: number;
+    /** The most rows: the add button turns disabled with `labels.maxReached` beside it. */
+    max?: number;
+    /** Heading of the list (field label); omit it inside a `Fieldset` whose legend names the list. */
+    label?: React.ReactNode;
+    hint?: React.ReactNode;
+    /** A problem of the list as a whole («Добавьте хотя бы одну позицию»); a field's own goes on it. */
+    error?: React.ReactNode;
+    /** Every field, the handles and the buttons are disabled. */
+    disabled?: boolean;
+    /** Tier of the rows, the headings and the kit fields that read the host tier. Default `m`. */
+    size?: ControlSize;
+    labels?: Partial<FieldListLabels>;
+};
+/**
+ * An editable list of records of the same shape: one row per record, the column headings shown
+ * once above the rows, a remove button per row, an add button under them, an optional handle to
+ * reorder and pinned rows. In a narrow container the rows stack into blocks and each field shows
+ * its own label.
+ */
+export declare function FieldList<T extends object>({ value: valueProp, defaultValue, onValueChange, getId, columns, renderItem, createItem, addLabel, getLabel, getLocked, reorderable, min, max, label, hint, error, disabled: disabledProp, size: sizeProp, labels: labelsProp, className, ref, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: FieldListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace FieldList {
+    var displayName: string;
+}

package/dist/components/index.d.ts

@@ -61,6 +61,8 @@ export type { EmptyPageActionsProps, EmptyPageDescriptionProps, EmptyPageIconPro
 export { EmptyPage } from "./empty-page/EmptyPage";
 export type { ExampleFrameLabels, ExampleFramePreviewLayout, ExampleFrameProps, ExampleFrameViewport, } from "./example-frame/ExampleFrame";
 export { ExampleFrame } from "./example-frame/ExampleFrame";
+export type { FieldListColumn, FieldListColumnWidth, FieldListLabels, FieldListProps, FieldListRow, } from "./field-list/FieldList";
+export { FieldList } from "./field-list/FieldList";
 export type { FieldsetProps } from "./fieldset/Fieldset";
 export { Fieldset } from "./fieldset/Fieldset";
 export type { FileUploadBodyProps, FileUploadDescriptionProps, FileUploadFile, FileUploadFormatBadgeProps, FileUploadIconProps, FileUploadItemActionsProps, FileUploadItemDescriptionProps, FileUploadItemNameProps, FileUploadItemPreviewProps, FileUploadItemProgressProps, FileUploadItemProps, FileUploadLabels, FileUploadLayout, FileUploadQueueProps, FileUploadQueueSource, FileUploadRootProps, FileUploadTitleProps, FileUploadTrigger, FileUploadVariant, } from "./file-upload/FileUpload";
@@ -102,7 +104,7 @@ export type { NotificationAction, NotificationCardProps, NotificationLabels, Not
 export { NotificationCard } from "./notification/Notification";
 export type { NotificationProviderProps } from "./notification/NotificationStore";
 export { NotificationProvider, useNotifications, } from "./notification/NotificationStore";
-export type { PageContentActionsProps, PageContentBackButtonProps, PageContentBodyProps, PageContentDescriptionMeasure, PageContentDescriptionProps, PageContentDetailProps, PageContentHeaderProps, PageContentLabels, PageContentListProps, PageContentMaxWidth, PageContentRootProps, PageContentSectionProps, PageContentSplitProps, PageContentTitleProps, } from "./page-content/PageContent";
+export type { PageContentActionsProps, PageContentBackButtonProps, PageContentBodyProps, PageContentCellProps, PageContentCellRows, PageContentCellSpan, PageContentDescriptionMeasure, PageContentDescriptionProps, PageContentDetailProps, PageContentGridProps, PageContentHeaderProps, PageContentLabels, PageContentListProps, PageContentMaxWidth, PageContentPageProps, PageContentRootProps, PageContentSectionLayout, PageContentSectionProps, PageContentSplitProps, PageContentTitleProps, } from "./page-content/PageContent";
 export { PageContent } from "./page-content/PageContent";
 export type { PageToolbarActionsProps, PageToolbarChipsProps, PageToolbarRootProps, PageToolbarSectionsProps, PageToolbarToolsProps, PageToolbarViewProps, } from "./page-toolbar/PageToolbar";
 export { PageToolbar } from "./page-toolbar/PageToolbar";

package/dist/components/input/Input.d.ts

@@ -129,7 +129,7 @@ export type InputClearButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonEl
  * Trailing clear action. Render it only when the field has a value; clicking returns focus
  * to the input after `onClick` runs (clear the value in `onClick`).
  */
-declare function InputClearButton({ className, onClick, ref, ...rest }: InputClearButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function InputClearButton({ onClick, ref, ...rest }: InputClearButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputClearButton {
     var displayName: string;
 }
@@ -159,7 +159,7 @@ export type InputRevealButtonProps = Omit<React.ButtonHTMLAttributes<HTMLButtonE
  * Shows a `type="password"` field as text and back (`aria-pressed`). A pointer press keeps the focus
  * in the field; the caret and selection survive the switch.
  */
-declare function InputRevealButton({ className, onClick, onMouseDown, ref, ...rest }: InputRevealButtonProps): import("react/jsx-runtime").JSX.Element;
+declare function InputRevealButton({ onClick, onMouseDown, ref, ...rest }: InputRevealButtonProps): import("react/jsx-runtime").JSX.Element;
 declare namespace InputRevealButton {
     var displayName: string;
 }

package/dist/components/kanban/Kanban.d.ts

@@ -34,8 +34,8 @@ export type KanbanColumnMove = {
 };
 /** What opened a card: a click on it, or Enter / Space on the focused card. */
 export type KanbanItemClickEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;
-/** How columns stand on the board: filled wells, or bare columns of cards. */
-export type KanbanVariant = "well" | "plain";
+/** How columns stand on the board: bare columns of cards, or filled wells. */
+export type KanbanVariant = "plain" | "line" | "well";
 /** System strings of the board. `{token}` values are substituted. */
 export type KanbanLabels = {
     /** Spoken name of the count badge: `{count}`. */
@@ -113,7 +113,10 @@ export type KanbanRootProps<T> = Omit<React.HTMLAttributes<HTMLDivElement>, "chi
      * shown under the carried card. The column turns `danger` before the release.
      */
     canDrop?: (id: string, columnId: string) => boolean | string;
-    /** `well`: every column is a filled well; `plain`: no wells, the cards and the header carry the column. */
+    /**
+     * `plain`: no wells, the cards stand on the host under a filled header plate; `line`: no wells, a
+     * bare header over a faint line; `well`: every column is a filled well.
+     */
     variant?: KanbanVariant;
     /** Columns show skeleton cards; the cards cross-fade in when it turns off. */
     loading?: boolean;

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

@@ -14,11 +14,12 @@ declare function PageContentRoot({ maxWidth, fill, className, ...rest }: PageCon
 declare namespace PageContentRoot {
     var displayName: string;
 }
-export type PageContentSectionProps = React.HTMLAttributes<HTMLElement> & {
+export type PageContentPageProps = React.HTMLAttributes<HTMLElement> & {
     ref?: React.Ref<HTMLElement>;
 };
-declare function PageContentSection({ className, ...rest }: PageContentSectionProps): import("react/jsx-runtime").JSX.Element;
-declare namespace PageContentSection {
+/** The whole page as a `<section>` (full panel width): `Header` with the one h1, then `Body`. */
+declare function PageContentPage({ className, ...rest }: PageContentPageProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentPage {
     var displayName: string;
 }
 type DivProps = React.HTMLAttributes<HTMLDivElement> & {
@@ -58,6 +59,53 @@ declare function PageContentBody({ className, ...rest }: PageContentBodyProps):
 declare namespace PageContentBody {
     var displayName: string;
 }
+/** Where the heading of a section stands: over its content or in a column beside it. */
+export type PageContentSectionLayout = "stack" | "aside";
+export type PageContentSectionProps = Omit<React.HTMLAttributes<HTMLElement>, "title"> & {
+    /** The visible heading of the section (an `h2`). */
+    label: React.ReactNode;
+    /** One line of context under the heading. */
+    description?: React.ReactNode;
+    /**
+     * `stack` — the heading over the content; `aside` — a heading column beside the content (a
+     * settings page), dropping above it once the content would get narrower than 30rem.
+     */
+    layout?: PageContentSectionLayout;
+    ref?: React.Ref<HTMLElement>;
+};
+/**
+ * A titled section of the page: an `h2` heading (with an optional description and
+ * `PageContent.Actions` at its end) over its content. Sections stand further apart than the plain
+ * blocks of the body, so the air shows where a new topic starts.
+ */
+declare function PageContentSection({ label, description, layout, className, children, ...rest }: PageContentSectionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentSection {
+    var displayName: string;
+}
+export type PageContentGridProps = DivProps;
+/**
+ * The grid of the page's tiles (KPI cards, charts, panels): 12 columns, one gap on both axes.
+ * Columns follow the grid's own width, so tiles fold on a narrow panel by themselves.
+ */
+declare function PageContentGrid({ className, ...rest }: PageContentGridProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentGrid {
+    var displayName: string;
+}
+/** Columns of 12 a cell spans on a wide grid. */
+export type PageContentCellSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+/** Rows a cell spans. */
+export type PageContentCellRows = 1 | 2 | 3 | 4;
+export type PageContentCellProps = DivProps & {
+    /** Columns of 12 on a wide grid; a medium grid rounds to half or full, a narrow one to full. */
+    span?: PageContentCellSpan;
+    /** Rows the cell spans; its child fills the height. */
+    rows?: PageContentCellRows;
+};
+/** One tile place in `PageContent.Grid`; its child (a Card, a ChartFrame) fills it. */
+declare function PageContentCell({ span, rows, className, ...rest }: PageContentCellProps): import("react/jsx-runtime").JSX.Element;
+declare namespace PageContentCell {
+    var displayName: string;
+}
 export type PageContentLabels = {
     /** Name of `PageContent.BackButton` (back from the detail to the list on a narrow split). */
     back: string;
@@ -108,12 +156,15 @@ declare namespace PageContentBackButton {
 }
 export declare const PageContent: {
     Root: typeof PageContentRoot;
-    Section: typeof PageContentSection;
+    Page: typeof PageContentPage;
     Header: typeof PageContentHeader;
     Actions: typeof PageContentActions;
     Title: typeof PageContentTitle;
     Description: typeof PageContentDescription;
     Body: typeof PageContentBody;
+    Section: typeof PageContentSection;
+    Grid: typeof PageContentGrid;
+    Cell: typeof PageContentCell;
     Split: typeof PageContentSplit;
     List: typeof PageContentList;
     Detail: typeof PageContentDetail;

package/dist/components/sparkline/Sparkline.d.ts

@@ -1,37 +1,85 @@
 import * as React from "react";
+import { type SparklineCurve } from "./geometry";
+export type { SparklineCurve };
 export type SparklinePoint = {
     /** Name of the point on the axis: a date, a week, a month («8 окт»). */
     label: string;
-    value: number;
+    /** `null`: no data for this point — the line breaks, the bar is absent. */
+    value: number | null;
 };
 export type SparklineLabels = {
     /** Spoken value of the chosen point; `{label}` and `{value}` are replaced. */
     point: string;
+    /** The period of a `sum` / `average` headline at rest; `{first}` and `{last}` are point labels. */
+    period: string;
+    /** Shown and spoken in place of the value of a point with no data. */
+    empty: string;
+    /** Description of the reference line; `{value}` is replaced. */
+    reference: string;
 };
-/** `line`: a line with a soft area. `bars`: a bar per point from zero — up when positive, down when negative. */
-export type SparklineVariant = "line" | "bars";
+/**
+ * `area`: a line over a gradient that fades to the bottom. `line`: the line alone (many trends side
+ * by side). `bars`: a bar per point from zero — up when positive, down when negative.
+ */
+export type SparklineVariant = "area" | "line" | "bars";
+/**
+ * What the change badge compares the shown point with. `previous`: the point before it.
+ * `first`: the first point of the series (the change over the period). `none`: no badge.
+ */
+export type SparklineChange = "previous" | "first" | "none";
+/**
+ * What the headline shows at rest. `latest`: the latest point (or `highlight`) — a level such as
+ * MRR, a price, a conversion. `sum`: the total of the period — a flow such as revenue or orders
+ * per day. `average`: the mean of the period.
+ */
+export type SparklineSummary = "latest" | "sum" | "average";
 /**
  * `default`: the headline (title · date, value · change) over the plot. `compact`: the plot alone at
  * the height of an `xs` control, for a table cell or a list row.
  */
 export type SparklineLayout = "default" | "compact";
-export type SparklineProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    /** Points in order, oldest first; at least two draw a line. */
+type SparklineRest = {
+    /** Default `latest`. */
+    summary?: "latest";
+    /**
+     * Index of the point at rest (the current month): the headline shows it when nobody scrubs,
+     * and `bars` draw the other bars quieter. Default: the latest point with a value.
+     */
+    highlight?: number;
+} | {
+    summary: "sum" | "average";
+    /** A total or a mean is no point: there is nothing to highlight at rest. */
+    highlight?: never;
+};
+export type SparklineProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & SparklineRest & {
+    /** Points in order, oldest first; two present points in a row draw a line. */
     data: SparklinePoint[];
     /**
      * Visible title above the value and the accessible name of the chart; with `layout="compact"`
      * only the accessible name.
      */
     label: string;
-    /** Default `line`. */
+    /** Default `area`. */
     variant?: SparklineVariant;
+    /** Shape of the line between points (`area`, `line`). Default `smooth`. */
+    curve?: SparklineCurve;
     /** Default `default`. */
     layout?: SparklineLayout;
+    /** What a scrubbed point's change badge compares with. Default `previous`. */
+    change?: SparklineChange;
     /**
-     * Index of the point at rest (the current month): the headline shows it when nobody scrubs, and
-     * `bars` draw the other bars quieter. Default: the latest point.
+     * The same summary for the previous period («прошлые 30 дней»): the change badge at rest compares
+     * the headline with it. Without it a `sum` / `average` headline shows no change at rest.
      */
-    highlight?: number;
+    compareTo?: number;
+    /**
+     * The value axis spans at least `min`…`max`: one scale for several sparklines (a table column)
+     * or a meaningful floor. Data outside widens the scale, never gets cut.
+     */
+    min?: number;
+    max?: number;
+    /** A dashed horizontal line at this value: a plan, a target, an average. */
+    reference?: number;
     /**
      * The series is on its way: Skeletons of the value, the date and the plot, which cross-fade into
      * the data. The title stays; the root is `aria-busy`.
@@ -43,10 +91,11 @@ export type SparklineProps = Omit<React.HTMLAttributes<HTMLDivElement>, "childre
     ref?: React.Ref<HTMLDivElement>;
 };
 /**
- * A small chart with its headline: the value at rest (the latest point or `highlight`), its change
- * against the point before and its date. Scrubbing (pointer, touch, or the arrow keys on the chart)
- * shows any point; the header follows instantly, the trend arrow turns, and leaving glides back to
- * the point at rest. `bars` draw signed values from a zero line. `layout="compact"` is the plot
- * alone (a table cell): the shown point is spoken through the slider's `aria-valuetext`.
+ * A small chart with its headline: the value at rest (the latest point, `highlight`, or the period's
+ * total or mean — `summary`), its change and its date or period. Scrubbing (pointer, touch, or the arrow keys on the chart) shows any point; the
+ * header follows instantly, the trend arrow turns, and leaving glides back to the point at rest.
+ * The line is a monotone curve (`curve`), `null` values break it; `bars` draw signed values from a
+ * zero line; a tooltip beside the scrubbed point shows its value and date. `layout="compact"` is
+ * the plot alone (a table cell).
  */
-export declare function Sparkline({ data, label, variant, layout, highlight, loading, formatValue, labels: labelsProp, className, ref, ...rest }: SparklineProps): import("react/jsx-runtime").JSX.Element;
+export declare function Sparkline({ data, label, variant, curve, layout, change, summary, highlight, compareTo, min, max, reference, loading, formatValue, labels: labelsProp, className, ref, ...rest }: SparklineProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/sparkline/geometry.d.ts

@@ -0,0 +1,26 @@
+/** `smooth`: a monotone cubic through every point. `linear`: straight segments. `step`: a level per point, changing halfway between points. */
+export type SparklineCurve = "smooth" | "linear" | "step";
+export type SparklineScale = {
+    /** Lower and upper end of the value axis. */
+    lo: number;
+    hi: number;
+};
+/**
+ * The value axis: the data, widened to `min` / `max` (a scale shared by several sparklines), the
+ * reference line and — for bars — zero. Data outside `min` / `max` widens the scale instead of
+ * being cut.
+ */
+export declare function scaleOf(values: readonly (number | null)[], extra: readonly (number | undefined)[]): SparklineScale;
+/** Share of the height from the top (0) to the bottom (1); a flat series sits in the middle. */
+export declare function yOf({ lo, hi }: SparklineScale, value: number): number;
+/** Runs of consecutive present points: a `null` value breaks the line. */
+export declare function runsOf(values: readonly (number | null)[]): number[][];
+export type SparklinePaths = {
+    /** The line: one subpath per run of two or more points. */
+    line: string;
+    /** The area under the line, closed down to the bottom edge. */
+    area: string;
+    /** Points standing alone between gaps: drawn as dots, a path would not show them. */
+    lone: number[];
+};
+export declare function pathsOf(values: readonly (number | null)[], x: (i: number) => number, y: (value: number) => number, curve: SparklineCurve): SparklinePaths;

package/dist/components/tooltip/Tooltip.d.ts

@@ -2,8 +2,11 @@ import * as React from "react";
 import { type PositionAlign, type PositionSide } from "../../hooks/usePosition";
 import type { ControlSize } from "../../internal/states";
 export type TooltipSide = PositionSide;
-/** A tooltip lines up with its trigger by choice: `auto` is for panels that grow. */
-export type TooltipAlign = Exclude<PositionAlign, "auto">;
+/**
+ * The anchored-layer vocabulary. A tooltip centres on its trigger by default (foundation §8);
+ * `auto` lines it up with the trigger edge that has more room beyond it, as a growing panel does.
+ */
+export type TooltipAlign = PositionAlign;
 export type TooltipProviderProps = {
     /** Show delay in ms for every Tooltip.Root inside. */
     delayDuration?: number;

package/dist/hooks/usePosition.d.ts

@@ -65,6 +65,17 @@ export type PositionOptions = {
     offsetToken?: string;
     /** Closest the arrow may come to a layer corner, read from the layer; writes `--float-arrow`. */
     arrowInset?: (layer: HTMLElement) => number;
+    /**
+     * A point inside the anchor (px from its top-left corner) to place the layer against instead of
+     * the whole anchor — the pointer over a chart (Floating UI's virtual element). It moves with the
+     * anchor on scroll; every new point re-places the layer before paint. Flipping stays the same:
+     * the layer keeps `side` until it has no room there.
+     */
+    anchorPoint?: AnchorPoint | null;
+};
+export type AnchorPoint = {
+    x: number;
+    y: number;
 };
 export type Position = {
     /** The side the layer opened on (after flipping). */
@@ -76,8 +87,8 @@ export type Position = {
  * Places a floating layer (`position: fixed`) next to its anchor and follows the anchor while
  * `enabled`: before paint, again on the next frame (fonts), and on window resize, scroll of any
  * scrolling ancestor of the anchor, visual-viewport changes and size changes of the layer or the
- * anchor. Shared by every anchored layer (Popover, Dropdown, Select, TagSelect, Tooltip). A
- * portaled layer reaches the DOM one commit after its owner, so the subscription waits for
- * `attachLayer` instead of reading the ref too early.
+ * anchor. Shared by every anchored layer (Popover, Dropdown, Select, TagSelect, Tooltip, and the
+ * chart tooltip at a point — `anchorPoint`). A portaled layer reaches the DOM one commit after its
+ * owner, so the subscription waits for `attachLayer` instead of reading the ref too early.
  */
-export declare function usePosition(enabled: boolean, anchorRef: React.RefObject<HTMLElement | null>, layerRef: React.RefObject<HTMLElement | null>, { side: preferredSide, align, matchAnchorWidth, offsetToken, arrowInset, }?: PositionOptions): Position;
+export declare function usePosition(enabled: boolean, anchorRef: React.RefObject<HTMLElement | null>, layerRef: React.RefObject<HTMLElement | null>, { side: preferredSide, align, matchAnchorWidth, offsetToken, arrowInset, anchorPoint, }?: PositionOptions): Position;