prime-ui-kit 0.15.0 → 0.17.0

package/dist/skill/reference/components/chart-frame/COMPONENT.md

@@ -23,7 +23,7 @@ import { ChartFrame, type ChartFrameSeries, chartColors } from "prime-ui-kit";
 
 ## Anatomy
 ```
-ChartFrame.Root              <figure>; surface of the depth ladder; state, series, hidden series
+ChartFrame.Root              <figure>; surface of the depth ladder; state, series, hidden series, rows
 ├─ ChartFrame.Header         <div>; title column · actions
 │  ├─ ChartFrame.Title       <h3>; names the figure and the table
 │  ├─ ChartFrame.Description <p>; describes the figure
@@ -32,8 +32,8 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 │  └─ ChartFrame.Delta       <span>; change with a tone
 ├─ ChartFrame.Plot           <div>; fixed height, measured; Crossfade of plot / Skeleton / empty / error
 ├─ ChartFrame.Legend         <ul>; a toggle button per series: swatch · name · value
-├─ ChartFrame.Table          <table>; visually hidden data, ready state only
-└─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
+├─ ChartFrame.Tooltip        <div>; with `point` portaled beside that point of the plot, else in place for a library's tooltip hook
+└─ (data table)             <table> drawn by the root from `rows`; visually hidden, ready state only
 ```
 
 ## API
@@ -41,16 +41,17 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### ChartFrame.Root
-`ref` → `HTMLElement` (`<figure>`). The panel: a surface of the depth ladder, a figure named by `ChartFrame.Title` and described by `ChartFrame.Description`, `aria-busy` while loading. Owns the state, the series and which of them are hidden; every part reads them.
+`ref` → `HTMLElement` (`<figure>`). The panel: a surface of the depth ladder, a figure named by `ChartFrame.Title` and described by `ChartFrame.Description`, `aria-busy` while loading. Owns the state, the series, the hidden ones and the data (`rows`); every part reads them.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `state` | `"ready" \| "loading" \| "empty" \| "error"` | `"ready"` | What the chart region shows: the plot, Skeletons while `loading`, the empty state, or the load error with a retry (`onRetry`). Changes cross-fade at the same height. |
 | `series` | `ChartFrameSeries[]` | `[]` | The series in drawing order, `{ id, label, color?, value? }`: legend entries, tooltip rows, table columns and `renderPlot` colors. `color` is a palette hue; `value` is the legend summary. |
+| `rows` | `ChartFrameRow[]` | — (required) | The chart's data, `{ label, values }` per point (`values` by series id, a missing one reads as «—»): a visually hidden table for screen readers in the `ready` state. |
 | `hiddenSeries` | `string[]` | — | Ids of the series turned off in the legend (controlled). |
 | `defaultHiddenSeries` | `string[]` | `[]` | Initially hidden series (uncontrolled). |
 | `onHiddenSeriesChange` | `(hiddenSeries: string[]) => void` | — | The legend turned a series on or off; gets the new list of hidden ids. |
-| `formatValue` | `(value: number) => string` | `Russian digit groups` | Display of a value in the legend, the tooltip and the table («8,4 млн ₽»). |
+| `formatValue` | `(value: number) => string` | Russian digit groups | Display of a value in the legend, the tooltip and the table («8,4 млн ₽»). |
 | `onRetry` | `() => void \| Promise<void>` | — | Loads the data again from the `error` state and shows the retry button; a returned Promise keeps the button loading until it settles. |
 | `labels` | `Partial<ChartFrameLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other figure attributes. |
@@ -104,7 +105,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `height` | `number \| "fill"` | `240, 160 under 30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `PageContent.Cell` with `rows`), the default height at least. |
+| `height` | `number \| "fill"` | `240`, `160` under `30rem` | Height of the plot area in px. `fill` takes the free height of a stretched panel (a `Page.Cell` with `rows`), the default height at least. |
 | `renderPlot` | `(area: ChartFramePlotArea) => ReactNode` | — | Renders the chart at the measured `{ width, height }` with every series `{ id, label, color, hidden }` — for libraries that need explicit sizes (Chart.js, visx). |
 | `children` | `ReactNode` | — | A chart that sizes itself to its container (an SVG with a `viewBox`, `ResponsiveContainer`); it fills the area. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
@@ -127,14 +128,6 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `point` | `{ x: number; y: number } \| null` | — | A point in `renderPlot` coordinates (the pointer, or the point the arrows reached): the tooltip floats right of it, left only without room; `null` hides it. Floating, it is `aria-hidden`. |
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
-### ChartFrame.Table
-`ref` → `HTMLTableElement`. The chart's data as a visually hidden table for screen readers, named by the title: a row per point, a column per shown series. Present only in the `ready` state. A visible table is a `DataTable`.
-
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `rows` | `ChartFrameTableRow[]` | — (required) | `{ label, values }` per point; `values` by series id, a missing one reads as «—». |
-| `…rest` | `HTMLAttributes<HTMLTableElement>` | — | `className` and the other table attributes. |
-
 ## Variants
 
 ### Delta tone
@@ -165,26 +158,28 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 ## States
 | State | Driven by | DOM |
 |---|---|---|
-| ready | `state="ready"` | `data-state="ready"` on the root; the plot; the legend values; `ChartFrame.Table` present |
+| ready | `state="ready"` | `data-state="ready"` on the root; the plot; the legend values; the data table present |
 | loading | `state="loading"` | `data-state="loading"` and `aria-busy` on the root; Skeletons of the value, the plot and the legend values; the title, actions and legend names stay |
 | empty | `state="empty"` | `data-state="empty"` on the root; EmptyPage `compact` (`role="status"`, `labels.empty`) in the plot's place |
 | error | `state="error"` | `data-state="error"` on the root; the value is a muted dash; EmptyPage `compact` `tone="danger"` (`role="alert"`, `labels.error`) with the retry button when `onRetry` is set; it waits for a returned Promise |
 | swap | `state` changes | the plot region cross-fades (Crossfade, the height stays); the value and legend values fade in from their Skeletons |
-| series hidden | a legend toggle, `hiddenSeries` | `aria-pressed="false"`, `data-hidden` on the entry: it keeps its place and color, the swatch becomes a ring, the name quiet; `renderPlot` gets `hidden: true` — a mark with `data-hidden="true"` fades out, the axes keep their scale |
+| series hidden | a legend toggle, `hiddenSeries` | `aria-pressed="false"` on the entry (the style hangs on it): it keeps its place and color, the swatch becomes a ring, the name quiet; `renderPlot` gets `hidden: true` — a mark with `data-hidden="true"` fades out, the axes keep their scale |
 | hover / press | pointer on a legend entry | hover fill (hover-capable pointers only), press scale |
 
 ## Layout & spacing
 - The root takes its container's width, card padding and radius, zones 16 px apart; on the page it carries the raised whisper, nested in a surface it is a flat tile one step deeper.
 - The header puts the title and the description in the first column and the actions at the end; under 24rem of panel width the actions drop under the description.
 - The plot is 240 px high (160 px under 30rem of panel width) unless `height` is set; it never changes height between states.
-- Legend entries wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
+- Legend entries are chips one `xs` control high and wrap onto more lines; each has a 44 px touch hit area on coarse pointers.
 - `ChartFrame.Tooltip` is the floating layer of the ladder with the point's label over rows of swatch · series name · value. With `point` the kit places it like every anchored layer (`usePosition`): right of the point at its height, on the left only where the right has no room in the viewport, inside the viewport, following the plot on scroll. Without `point` the chart library positions it (Recharts `content`).
-- SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted`; a class of your own still wins.
-- Works from 320 px; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
+- SVG `<text>` in the plot takes the caption type in `--prime-color-text-muted` (the plot area carries the caption role); a class of your own still wins.
+- Works in a 320 px column; the container queries are on the panel's own width, so it adapts in a grid cell as on a phone.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | The header actions, then the legend as one stop (the entry focused last), then the chart's own focusable marks. |
@@ -193,12 +188,14 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `Enter` · `Space` | Shows or hides the entry's series. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The root is a `<figure>` named by `ChartFrame.Title` and described by `ChartFrame.Description`; `aria-busy` while loading.
 - A legend entry is a button with `aria-pressed` — pressed while its series is shown; the legend list is named by `labels.legend`. A hidden series differs by the swatch's shape (a ring) and a quiet name, never by color alone.
-- `ChartFrame.Table` is a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
+- The root renders `rows` as a visually hidden table with the chart's data, named by the title: a row header per point, a column per shown series, values through `formatValue`.
 - A `ChartFrame.Tooltip` with `point` is `aria-hidden` and passive (no focus, no presses; `Escape` hides it until the point moves): it repeats what the plot speaks — give a focusable plot an `aria-valuetext`, like the slider in the tooltip example.
 - The empty state is `role="status"`, the error `role="alert"` with the retry button.
-- The drawing is the library's: hide a decorative SVG (`aria-hidden`) when `ChartFrame.Table` carries the data; marks you make focusable need their own `aria-label`.
+- The drawing is the library's: hide a decorative SVG (`aria-hidden`), the data table carries the data; marks you make focusable need their own `aria-label`.
 
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
@@ -209,7 +206,7 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | `error` | `"Не удалось загрузить график"` | Title of the error state. |
 | `retry` | `"Повторить"` | Text of the retry button in the error state. |
 | `legend` | `"Ряды графика"` | Accessible name of the legend. |
-| `category` | `"Период"` | Header of the first column of `ChartFrame.Table` (what a row is). |
+| `category` | `"Период"` | Header of the first column of the data table (what a row is). |
 
 ## Examples
 | Example | Shows |
@@ -217,14 +214,14 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
 | [overview.tsx](examples/overview.tsx) | Revenue by month as a hand-drawn SVG line chart in a dashboard panel: the headline with its change, a period switch, a legend that turns series off and a table for screen readers — `series`, `formatValue`, `renderPlot`. |
 | [tooltip.tsx](examples/tooltip.tsx) | Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. |
 | [fill-height.tsx](examples/fill-height.tsx) | Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. |
-| [states.tsx](examples/states.tsx) | Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
+| [states.tsx](examples/states.tsx) | Loading, data, empty and error in the plot's place at one panel size; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. |
 | [controlled.tsx](examples/controlled.tsx) | Lead sources with totals in the legend; the hidden series live in the page state and one button shows them all again — `hiddenSeries`, `onHiddenSeriesChange`. |
-| [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `children`, `height`. |
+| [narrow.tsx](examples/narrow.tsx) | A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `height`, `rows`. |
 
 ### With a chart library
 ```tsx
 // Recharts: explicit sizes from renderPlot, the kit tooltip body in `content`.
-<ChartFrame.Root series={SERIES} formatValue={formatRubles}>
+<ChartFrame.Root series={SERIES} rows={tableRows} formatValue={formatRubles}>
   <ChartFrame.Header>
     <ChartFrame.Title>Выручка</ChartFrame.Title>
   </ChartFrame.Header>
@@ -249,7 +246,6 @@ ChartFrame.Root              <figure>; surface of the depth ladder; state, serie
     )}
   />
   <ChartFrame.Legend />
-  <ChartFrame.Table rows={tableRows} />
 </ChartFrame.Root>
 ```
 ECharts and Chart.js take the same `width`, `height` and `series[i].color`; their HTML tooltips are strings, so use their own tooltip there or `ChartFrame.Tooltip` with `point` from their hover event.
@@ -261,9 +257,9 @@ ECharts and Chart.js take the same `width`, `height` and `series[i].color`; thei
 - An empty chart with axes and no data → `state="empty"`.
 - A legend for a single series → the title already names it; leave `ChartFrame.Legend` out.
 - Two y-axes of different measures in one frame → two ChartFrames side by side.
-- The data only in the drawing → add `ChartFrame.Table`; screen readers cannot read a plot.
+- `rows` that leave points out of the drawing → pass every point the plot draws; screen readers read the table, not the plot.
 - A hand-drawn chart with its tooltip placed by hand (a `foreignObject`, clamped coordinates) → `ChartFrame.Tooltip` with `point`: it flips only when out of room and never jumps at the middle.
 
 ## Related
-- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline)
+- **Built from:** [Crossfade](../crossfade/COMPONENT.md) (state swap), [Skeleton](../skeleton/COMPONENT.md) (loading), [EmptyPage](../empty-page/COMPONENT.md) (empty, error, retry), `Icon`, `chartColors`, `ChartTooltip` (the chart tooltip shared with Sparkline; its floating panel scrolls in a [ScrollContainer](../scroll-container/COMPONENT.md)), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Sparkline](../sparkline/COMPONENT.md), [Card](../card/COMPONENT.md), [ProgressBar](../progress-bar/COMPONENT.md), [DataTable](../data-table/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/dist/skill/reference/components/chart-frame/examples/controlled.tsx

@@ -23,7 +23,15 @@ export default function ChartFrameControlledExample() {
   const [hidden, setHidden] = React.useState<string[]>(["ads"]);
 
   return (
-    <ChartFrame.Root series={SERIES} hiddenSeries={hidden} onHiddenSeriesChange={setHidden}>
+    <ChartFrame.Root
+      series={SERIES}
+      hiddenSeries={hidden}
+      onHiddenSeriesChange={setHidden}
+      rows={MONTHS.map((month, i) => ({
+        label: month,
+        values: { site: LEADS.site[i], partners: LEADS.partners[i], ads: LEADS.ads[i] },
+      }))}
+    >
       <ChartFrame.Header>
         <ChartFrame.Title>Лиды по источникам</ChartFrame.Title>
         <ChartFrame.Description>Май — октябрь</ChartFrame.Description>
@@ -81,12 +89,6 @@ export default function ChartFrameControlledExample() {
         }}
       />
       <ChartFrame.Legend />
-      <ChartFrame.Table
-        rows={MONTHS.map((month, i) => ({
-          label: month,
-          values: { site: LEADS.site[i], partners: LEADS.partners[i], ads: LEADS.ads[i] },
-        }))}
-      />
     </ChartFrame.Root>
   );
 }

package/dist/skill/reference/components/chart-frame/examples/fill-height.tsx

@@ -1,5 +1,5 @@
 /** Revenue against the plan beside two KPI tiles: the plot takes the height of the stretched grid cell, and the plan line starts hidden until the legend turns it on — `height`, `defaultHiddenSeries`. */
-import { Card, ChartFrame, type ChartFrameSeries, chartColors, PageContent } from "prime-ui-kit";
+import { Card, ChartFrame, type ChartFrameSeries, chartColors, Page } from "prime-ui-kit";
 
 const SERIES: ChartFrameSeries[] = [
   { id: "fact", label: "Факт" },
@@ -22,13 +22,17 @@ const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} мл
 
 export default function ChartFrameFillHeightExample() {
   return (
-    <PageContent.Grid>
+    <Page.Grid>
       {/* The cell spans two rows beside the tiles; `height="fill"` takes all of it. */}
-      <PageContent.Cell span={8} rows={2}>
+      <Page.Cell span={8} rows={2}>
         <ChartFrame.Root
           series={SERIES}
           defaultHiddenSeries={["plan"]}
           formatValue={formatMillions}
+          rows={MONTHS.map((row) => ({
+            label: row.month,
+            values: { fact: row.fact, plan: row.plan },
+          }))}
         >
           <ChartFrame.Header>
             <ChartFrame.Title as="h2">Выручка и план</ChartFrame.Title>
@@ -90,30 +94,24 @@ export default function ChartFrameFillHeightExample() {
             }}
           />
           <ChartFrame.Legend />
-          <ChartFrame.Table
-            rows={MONTHS.map((row) => ({
-              label: row.month,
-              values: { fact: row.fact, plan: row.plan },
-            }))}
-          />
         </ChartFrame.Root>
-      </PageContent.Cell>
+      </Page.Cell>
 
-      <PageContent.Cell span={4}>
+      <Page.Cell span={4}>
         <Card.Root variant="stat-trend">
           <Card.Label>Выполнение плана</Card.Label>
           <Card.Value>96%</Card.Value>
           <Card.Delta tone="warning">−4 п. п. за октябрь</Card.Delta>
         </Card.Root>
-      </PageContent.Cell>
+      </Page.Cell>
 
-      <PageContent.Cell span={4}>
+      <Page.Cell span={4}>
         <Card.Root variant="stat-trend">
           <Card.Label>Прогноз на год</Card.Label>
           <Card.Value>84 млн ₽</Card.Value>
           <Card.Delta>План — 86 млн ₽</Card.Delta>
         </Card.Root>
-      </PageContent.Cell>
-    </PageContent.Grid>
+      </Page.Cell>
+    </Page.Grid>
   );
 }

package/dist/skill/reference/components/chart-frame/examples/narrow.tsx

@@ -1,18 +1,37 @@
-/** A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `children`, `height`. */
-import { Button, ChartFrame, chartColors, Icon } from "prime-ui-kit";
+/** A 320px column: the actions drop under the title, the plot gets lower and a self-sizing SVG stretches to it — `height`, `rows`. */
+import { Button, ChartFrame, type ChartFrameSeries, chartColors, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-const MRR = [6.1, 6.3, 6.2, 6.6, 6.9, 7.0, 7.4, 7.3, 7.8, 8.1, 8.0, 8.4];
+const SERIES: ChartFrameSeries[] = [{ id: "mrr", label: "Выручка" }];
+
+const MRR = [
+  { month: "ноя", value: 6.1 },
+  { month: "дек", value: 6.3 },
+  { month: "янв", value: 6.2 },
+  { month: "фев", value: 6.6 },
+  { month: "мар", value: 6.9 },
+  { month: "апр", value: 7.0 },
+  { month: "май", value: 7.4 },
+  { month: "июн", value: 7.3 },
+  { month: "июл", value: 7.8 },
+  { month: "авг", value: 8.1 },
+  { month: "сен", value: 8.0 },
+  { month: "окт", value: 8.4 },
+];
+
+const ROWS = MRR.map(({ month, value }) => ({ label: month, values: { mrr: value } }));
 
 const LINE = MRR.map(
-  (v, i) => `${i ? "L" : "M"}${(i / (MRR.length - 1)) * 100},${(9 - v) * 25}`,
+  ({ value }, i) => `${i ? "L" : "M"}${(i / (MRR.length - 1)) * 100},${(9 - value) * 25}`,
 ).join("");
 
+const formatMillions = (value: number) => `${value.toLocaleString("ru-RU")} млн ₽`;
+
 export default function ChartFrameNarrowExample() {
   return (
     <div className={styles.narrow}>
-      <ChartFrame.Root>
+      <ChartFrame.Root series={SERIES} rows={ROWS} formatValue={formatMillions}>
         <ChartFrame.Header>
           <ChartFrame.Title>Регулярная выручка</ChartFrame.Title>
           <ChartFrame.Description>За 12 месяцев</ChartFrame.Description>

package/dist/skill/reference/components/chart-frame/examples/overview.tsx

@@ -43,7 +43,11 @@ export default function ChartFrameOverviewExample() {
   const total = last.values.new + last.values.renewals;
 
   return (
-    <ChartFrame.Root series={SERIES} formatValue={formatMillions}>
+    <ChartFrame.Root
+      series={SERIES}
+      formatValue={formatMillions}
+      rows={points.map((p) => ({ label: p.month, values: p.values }))}
+    >
       <ChartFrame.Header>
         <ChartFrame.Title>Выручка</ChartFrame.Title>
         <ChartFrame.Description>По месяцам, в млн ₽</ChartFrame.Description>
@@ -121,7 +125,6 @@ export default function ChartFrameOverviewExample() {
         }}
       />
       <ChartFrame.Legend />
-      <ChartFrame.Table rows={points.map((p) => ({ label: p.month, values: p.values }))} />
     </ChartFrame.Root>
   );
 }

package/dist/skill/reference/components/chart-frame/examples/states.tsx

@@ -1,80 +1,88 @@
-/** Loading, empty, error and data swap in the plot's place without moving the panel; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. */
+/** Loading, data, empty and error in the plot's place at one panel size; the error retries, and the legend of the one series only names it — `state`, `onRetry`, `readOnly`. */
 import {
   ChartFrame,
   type ChartFrameSeries,
   type ChartFrameState,
   chartColors,
-  SegmentedControl,
+  Typography,
 } from "prime-ui-kit";
-import * as React from "react";
 
 const SERIES: ChartFrameSeries[] = [{ id: "orders", label: "Заказы" }];
 
-const DAYS = [132, 158, 141, 176, 190, 164, 203, 188, 214, 197];
+const STATES: ChartFrameState[] = ["loading", "ready", "empty", "error"];
+
+const DAYS = [
+  { day: "1 окт", orders: 132 },
+  { day: "2 окт", orders: 158 },
+  { day: "3 окт", orders: 141 },
+  { day: "4 окт", orders: 176 },
+  { day: "5 окт", orders: 190 },
+  { day: "6 окт", orders: 164 },
+  { day: "7 окт", orders: 203 },
+  { day: "8 окт", orders: 188 },
+  { day: "9 окт", orders: 214 },
+  { day: "10 окт", orders: 197 },
+];
+
+const ROWS = DAYS.map(({ day, orders }) => ({ label: day, values: { orders } }));
 
 const formatOrders = (value: number) => value.toLocaleString("ru-RU");
 
-export default function ChartFrameStatesExample() {
-  const [state, setState] = React.useState<ChartFrameState>("loading");
+/** The request again: the retry button waits for it. */
+const reload = () => new Promise<void>((resolve) => window.setTimeout(resolve, 900));
 
+export default function ChartFrameStatesExample() {
   return (
-    <>
-      <SegmentedControl.Root
-        aria-label="Состояние"
-        value={state}
-        onValueChange={(next) => setState(next as ChartFrameState)}
-      >
-        <SegmentedControl.Item value="loading">Загрузка</SegmentedControl.Item>
-        <SegmentedControl.Item value="ready">Данные</SegmentedControl.Item>
-        <SegmentedControl.Item value="empty">Пусто</SegmentedControl.Item>
-        <SegmentedControl.Item value="error">Ошибка</SegmentedControl.Item>
-      </SegmentedControl.Root>
-      <ChartFrame.Root
-        state={state}
-        series={SERIES}
-        formatValue={formatOrders}
-        onRetry={() =>
-          new Promise<void>((resolve) => {
-            window.setTimeout(() => {
-              setState("ready");
-              resolve();
-            }, 900);
-          })
-        }
-      >
-        <ChartFrame.Header>
-          <ChartFrame.Title>Заказы за 10 дней</ChartFrame.Title>
-        </ChartFrame.Header>
-        <ChartFrame.Value>
-          1 284
-          <ChartFrame.Delta tone="success">+14%</ChartFrame.Delta>
-        </ChartFrame.Value>
-        <ChartFrame.Plot
-          renderPlot={({ width, height, series }) => {
-            const band = width / DAYS.length;
-            const max = Math.max(...DAYS);
-            return (
-              <svg width={width} height={height} aria-hidden="true">
-                <line x1={0} x2={width} y1={height} y2={height} stroke={chartColors.axis} />
-                {DAYS.map((value, i) => (
-                  <rect
-                    // biome-ignore lint/suspicious/noArrayIndexKey: one bar per day, in order
-                    key={i}
-                    x={band * i + 4}
-                    y={height - (height * value) / max}
-                    width={band - 8}
-                    height={(height * value) / max}
-                    rx={2}
-                    fill={series[0].color}
-                  />
-                ))}
-              </svg>
-            );
-          }}
-        />
-        {/* One series: the legend only names it, there is nothing to turn off. */}
-        <ChartFrame.Legend readOnly />
-      </ChartFrame.Root>
-    </>
+    <div>
+      {STATES.map((state) => (
+        <div key={state}>
+          <div>
+            <ChartFrame.Root
+              state={state}
+              series={SERIES}
+              rows={ROWS}
+              formatValue={formatOrders}
+              onRetry={reload}
+            >
+              <ChartFrame.Header>
+                <ChartFrame.Title>Заказы за 10 дней</ChartFrame.Title>
+              </ChartFrame.Header>
+              <ChartFrame.Value>
+                1 284
+                <ChartFrame.Delta tone="success">+14%</ChartFrame.Delta>
+              </ChartFrame.Value>
+              <ChartFrame.Plot
+                height={160}
+                renderPlot={({ width, height, series }) => {
+                  const band = width / DAYS.length;
+                  const max = Math.max(...DAYS.map((d) => d.orders));
+                  return (
+                    <svg width={width} height={height} aria-hidden="true">
+                      <line x1={0} x2={width} y1={height} y2={height} stroke={chartColors.axis} />
+                      {DAYS.map(({ day, orders }, i) => (
+                        <rect
+                          key={day}
+                          x={band * i + 4}
+                          y={height - (height * orders) / max}
+                          width={band - 8}
+                          height={(height * orders) / max}
+                          rx={2}
+                          fill={series[0].color}
+                        />
+                      ))}
+                    </svg>
+                  );
+                }}
+              />
+              {/* One series: the legend only names it, there is nothing to turn off. */}
+              <ChartFrame.Legend readOnly />
+            </ChartFrame.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {state}
+            </Typography>
+          </div>
+        </div>
+      ))}
+    </div>
   );
 }

package/dist/skill/reference/components/chart-frame/examples/tooltip.tsx

@@ -1,5 +1,5 @@
 /** Invoices by week as grouped bars: the kit tooltip follows the pointer with a row per series, the arrows step through the weeks — `ChartFrame.Tooltip`, `items`, `point`. */
-import { ChartFrame, type ChartFrameSeries, chartColors } from "prime-ui-kit";
+import { ChartFrame, type ChartFrameSeries, chartColors, VisuallyHidden } from "prime-ui-kit";
 import * as React from "react";
 
 const SERIES: ChartFrameSeries[] = [
@@ -27,7 +27,14 @@ export default function ChartFrameTooltipExample() {
   const [pointer, setPointer] = React.useState<{ x: number; y: number } | null>(null);
 
   return (
-    <ChartFrame.Root series={SERIES} formatValue={formatCount}>
+    <ChartFrame.Root
+      series={SERIES}
+      formatValue={formatCount}
+      rows={WEEKS.map((week) => ({
+        label: week.label,
+        values: { paid: week.paid, pending: week.pending },
+      }))}
+    >
       <ChartFrame.Header>
         <ChartFrame.Title>Счета по неделям</ChartFrame.Title>
         <ChartFrame.Description>Выставлено за последние 6 недель</ChartFrame.Description>
@@ -47,13 +54,6 @@ export default function ChartFrameTooltipExample() {
               : (pointer ?? { x: MARGIN.left + band * active + band / 2, y: height / 2 });
           return (
             <div
-              role="slider"
-              tabIndex={0}
-              aria-label="Неделя"
-              aria-valuemin={0}
-              aria-valuemax={WEEKS.length - 1}
-              aria-valuenow={active ?? 0}
-              aria-valuetext={`${(point ?? WEEKS[0]).label}: оплачены ${(point ?? WEEKS[0]).paid}, ждут оплаты ${(point ?? WEEKS[0]).pending}`}
               onPointerMove={(event) => {
                 const rect = event.currentTarget.getBoundingClientRect();
                 const index = Math.floor((event.clientX - rect.left - MARGIN.left) / band);
@@ -61,18 +61,25 @@ export default function ChartFrameTooltipExample() {
                 setActive(index >= 0 && index < WEEKS.length ? index : null);
               }}
               onPointerLeave={() => setActive(null)}
-              onFocus={() => setActive((current) => current ?? 0)}
-              onBlur={() => setActive(null)}
-              onKeyDown={(event) => {
-                const step = event.key === "ArrowRight" ? 1 : event.key === "ArrowLeft" ? -1 : 0;
-                if (!step) return;
-                event.preventDefault();
-                setPointer(null);
-                setActive((current) =>
-                  Math.min(Math.max((current ?? 0) + step, 0), WEEKS.length - 1),
-                );
-              }}
             >
+              {/* The keyboard path: a native range steps through the weeks with the arrows; the
+                  highlighted week and the tooltip show where it is. */}
+              <VisuallyHidden>
+                <input
+                  type="range"
+                  aria-label="Неделя"
+                  min={0}
+                  max={WEEKS.length - 1}
+                  value={active ?? 0}
+                  aria-valuetext={`${(point ?? WEEKS[0]).label}: оплачены ${(point ?? WEEKS[0]).paid}, ждут оплаты ${(point ?? WEEKS[0]).pending}`}
+                  onChange={(event) => {
+                    setPointer(null);
+                    setActive(Number(event.target.value));
+                  }}
+                  onFocus={() => setActive((current) => current ?? 0)}
+                  onBlur={() => setActive(null)}
+                />
+              </VisuallyHidden>
               <svg width={width} height={height} aria-hidden="true">
                 {TICKS.map((tick) => (
                   <g key={tick}>
@@ -143,12 +150,6 @@ export default function ChartFrameTooltipExample() {
         }}
       />
       <ChartFrame.Legend />
-      <ChartFrame.Table
-        rows={WEEKS.map((week) => ({
-          label: week.label,
-          values: { paid: week.paid, pending: week.pending },
-        }))}
-      />
     </ChartFrame.Root>
   );
 }