prime-ui-kit 0.14.0 → 0.16.0

package/src/components/thumbnail/examples/fit.tsx

@@ -0,0 +1,24 @@
+/** A supplier's wide banner in a square frame: cropped to fill or shown whole on the fill — `fit`. */
+import { Thumbnail, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const BANNER = "https://picsum.photos/seed/supplier-banner/480/160";
+const FITS = ["cover", "contain"] as const;
+
+export default function ThumbnailFitExample() {
+  return (
+    <div className={styles.row}>
+      {FITS.map((fit) => (
+        <div key={fit} className={styles.cell}>
+          <Thumbnail.Root size="xl" color="gray">
+            <Thumbnail.Image src={BANNER} fit={fit} alt="Ферма поставщика «Северное хозяйство»" />
+          </Thumbnail.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {fit}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/thumbnail/examples/states.tsx

@@ -1,4 +1,4 @@
-/** No image (an icon or a short label on the fill) and an image that fails and falls back by itself. */
+/** No image (an icon or a short label on the fill) and an image that fails and falls back by itself — `Thumbnail.Fallback`, `Thumbnail.Image`. */
 import { Icon, Thumbnail, Typography } from "prime-ui-kit";
 
 export default function ThumbnailStatesExample() {

package/src/components/thumbnail/examples/variants.tsx

@@ -1,7 +1,18 @@
 /** The fallback fill: a soft tint or a solid hue, in a color that means something — `variant`, `color`. */
 import { Icon, Thumbnail, Typography } from "prime-ui-kit";
 
-const COLORS = ["gray", "blue", "green", "orange", "red"] as const;
+const COLORS = [
+  "gray",
+  "blue",
+  "green",
+  "orange",
+  "red",
+  "yellow",
+  "purple",
+  "sky",
+  "pink",
+  "teal",
+] as const;
 const VARIANTS = ["soft", "solid"] as const;
 
 export default function ThumbnailVariantsExample() {

package/src/components/thumbnail/examples/video.tsx

@@ -1,9 +1,12 @@
-/** Videos in the frame: a walkthrough without a poster shows its first frame, a play mark and the duration; a short clip loops muted like a GIF; a video message plays in place with its controls — `Thumbnail.Video`, `autoPlay`, `controls`. */
+/** Videos in the frame: a walkthrough without a poster shows its first frame, a play mark and the duration; a briefing shows its poster and its own duration format; a short clip loops muted like a GIF; a video message plays in place with its controls — `Thumbnail.Video`, `poster`, `formatDuration`, `autoPlay`, `controls`. */
 import { Icon, Thumbnail, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 const CLIP = "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4";
+const POSTER = "https://picsum.photos/seed/safety-briefing/640/360";
+
+const formatSeconds = (seconds: number) => `${Math.round(seconds)} с`;
 
 export default function ThumbnailVideoExample() {
   return (
@@ -19,6 +22,22 @@ export default function ThumbnailVideoExample() {
           Обход склада · без обложки
         </Typography>
       </div>
+      <div className={styles.cardContent}>
+        <Thumbnail.Root fullWidth ratio="16:9">
+          <Thumbnail.Video
+            src={CLIP}
+            poster={POSTER}
+            formatDuration={formatSeconds}
+            aria-label="Инструктаж по технике безопасности"
+          />
+          <Thumbnail.Fallback>
+            <Icon name="action.play" />
+          </Thumbnail.Fallback>
+        </Thumbnail.Root>
+        <Typography variant="caption" tone="muted">
+          Инструктаж · обложка, длительность в секундах
+        </Typography>
+      </div>
       <div className={styles.cardContent}>
         <Thumbnail.Root fullWidth ratio="16:9">
           <Thumbnail.Video src={CLIP} autoPlay aria-label="Как собрать заказ, ролик" />

package/src/components/timeline/COMPONENT.md

@@ -23,16 +23,15 @@ import { Timeline } from "prime-ui-kit";
 
 ## Anatomy
 ```
-Timeline.Root                    size container, sets the tier
-└─ Timeline.Group label          labelled <ol>; the line runs from its first dot to its last
+Timeline.Root                    size container, sets the tier (size, else the host tier)
+└─ Timeline.Group label          labelled <ol role="list">; the line runs from its first dot to its last
    ├─ Timeline.Item              <li> + row (div | button | a | asChild element) with the dot
-   │  ├─ Timeline.Title          first line
-   │  ├─ Timeline.Meta           second line (date)
-   │  │  └─ Timeline.MetaPrimary emphasized part
-   │  └─ Timeline.Value          trailing amount
-   │     └─ Timeline.ValueMeta   second line under the amount
+   │  ├─ Timeline.ItemTitle      first line
+   │  ├─ Timeline.ItemMeta       second line (date); <strong> emphasizes a part
+   │  └─ Timeline.ItemValue      trailing amount
+   │     └─ Timeline.ItemMeta    second line under the amount
    └─ Timeline.Gap               <li>: interval between events (dashed segment, hollow dot)
-      └─ Timeline.GapMeta        caption on the right («сейчас»)
+      └─ Timeline.Description    caption on the right («сейчас»)
 ```
 
 ## API
@@ -44,8 +43,10 @@ Timeline.Root                    size container, sets the tier
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Text, dot and row rhythm: rows 40 · 52 · 64 · 68 · 76 px. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `children` (`Timeline.Group`), `className` and the other div attributes. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Text, dot and row rhythm: rows 40 · 52 · 64 · 68 · 76 px, dot column → text 8 · 12 · 16 · 16 · 20 px. Without it the tier of its host, else `m`. |
+| `children` | `ReactNode` | — (required) | The `Timeline.Group`s. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | The other div attributes. |
 
 ### Timeline.Group
 `ref` → `HTMLOListElement`. A labelled `<ol>` of events; the line runs from its first dot to its last.
@@ -53,10 +54,12 @@ Timeline.Root                    size container, sets the tier
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `label` | `ReactNode` | — | Group heading («Недавно»); names the list via `aria-labelledby`. |
-| `…rest` | `Omit<OlHTMLAttributes<HTMLOListElement>, "children">` | — | `children` (`Timeline.Item`, `Timeline.Gap`), `className` and the other ol attributes. |
+| `children` | `ReactNode` | — (required) | `Timeline.Item` and `Timeline.Gap` rows. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<OlHTMLAttributes<HTMLOListElement>, "children">` | — | The other ol attributes. |
 
 ### Timeline.Item
-`ref` → the row element. An `<li>` with a row: `<div>`, `<button>` (`onClick`), `<a>` (`href`) or your element (`asChild`); the dot is prepended. The row under the pointer or keyboard focus is highlighted (pill, accent title and dot).
+`ref` → the row element. An `<li>` with a row: `<div>`, `<button>` (`onClick`), `<a>` (`href`) or your element (`asChild`); the dot is prepended. The row under the pointer or keyboard focus is highlighted (pill, accent title and dot); an interactive row gives under the press.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -65,22 +68,28 @@ Timeline.Root                    size container, sets the tier
 | `onClick` | `MouseEventHandler<HTMLElement>` | — | Renders the row as a `<button>`. |
 | `href` | `string` | — | Renders the row as a link (with `target`, `rel`, `download`). |
 | `asChild` | `boolean` | `false` | Renders the row as the single child element (a router link). |
-| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "color" \| "onClick">` | — | `children` (Title, Meta, Value), `className` and the other row attributes. |
+| `children` | `ReactNode` | — (required) | `Timeline.ItemTitle`, `Timeline.ItemMeta`, `Timeline.ItemValue`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "children" \| "color" \| "onClick">` | — | The other row attributes (`target`, `rel`, `download` with `href`). |
 
-### Timeline.Title · Timeline.Meta · Timeline.MetaPrimary
-`ref` → `HTMLSpanElement`. `<span>` lines: the event (medium, accent on the highlighted row, wraps), the muted date line with tabular numbers, and its emphasized part.
+### Timeline.ItemTitle · Timeline.ItemMeta
+`ref` → `HTMLSpanElement`. `<span>` lines: the event (medium, accent on the highlighted row, wraps) and the muted secondary line with tabular numbers — under the title the date (emphasize a part with `<strong>`), inside `Timeline.ItemValue` the value's second line.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
+| `children` | `ReactNode` | — (required) | The text of the line. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | The other span attributes. |
 
-### Timeline.Value · Timeline.ValueMeta
-`ref` → `HTMLSpanElement`. `<span>`: the trailing amount (right-aligned, tabular) and a muted second line under it. Moves under the meta below 20rem.
+### Timeline.ItemValue
+`ref` → `HTMLSpanElement`. A `<span>` with the trailing amount (right-aligned, tabular), a `Timeline.ItemMeta` inside under it. Moves under the meta below 20rem.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Value: text color (income `success`, refund `danger`). |
-| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children`, `className` and the other span attributes. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Text color (income `success`, refund `danger`). |
+| `children` | `ReactNode` | — (required) | The amount. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | The other span attributes. |
 
 ### Timeline.Gap
 `ref` → `HTMLDivElement`. An `<li>` interval between events: a shorter row with a hollow dot on a dashed segment and a muted caption.
@@ -88,10 +97,12 @@ Timeline.Root                    size container, sets the tier
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Caption and dot color; `warning` / `danger` flag a long interval. |
-| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `children` (the interval caption and an optional `Timeline.GapMeta`), `className` and the other div attributes. |
+| `children` | `ReactNode` | — (required) | The interval caption and an optional `Timeline.Description`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | The other div attributes. |
 
-### Timeline.GapMeta
-`ref` → `HTMLSpanElement`. A caption on the right of the gap («сейчас»), in the gap tone.
+### Timeline.Description
+`ref` → `HTMLSpanElement`. The secondary caption of a gap, at its end («сейчас»), in the gap tone.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -102,10 +113,10 @@ Timeline.Root                    size container, sets the tier
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | rows 40, title 12/16, dot 8 | very dense side panels | |
-| `s` | rows 52, title 13/20 | side panels, drawers | |
-| `m` | rows 64, title 14/20, dot 10 | page content and cards | yes |
-| `l` · `xl` | rows 68 / 76, title 16/24, dot 12 | spacious feeds, detail pages | |
+| `xs` | rows 40, title 12/16, dot 8, dot column → text 8 | very dense side panels | |
+| `s` | rows 52, title 13/20, dot column → text 12 | side panels, drawers | |
+| `m` | rows 64, title 14/20, dot 10, dot column → text 16 | page content and cards | yes |
+| `l` · `xl` | rows 68 / 76, title 16/24, dot 12, dot column → text 16 / 20 | spacious feeds, detail pages | |
 
 ### color (Item)
 | Value | Looks like | Use when | Default |
@@ -113,10 +124,10 @@ Timeline.Root                    size container, sets the tier
 | `blue` | blue dot at reduced emphasis | default category | yes |
 | `gray` · `green` · `orange` · `red` · `yellow` · `purple` · `sky` · `pink` · `teal` | dot in the hue | categories | |
 
-### tone (Item · Value · Gap)
+### tone (Item · ItemValue · Gap)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `neutral` | muted dot / primary value / muted gap caption | a status without meaning | Value, Gap |
+| `neutral` | muted dot / primary value / muted gap caption | a status without meaning | ItemValue, Gap |
 | `accent` | accent | a pending action | |
 | `success` | success | paid, income | |
 | `warning` | warning | overdue, a too-long interval | |
@@ -131,26 +142,31 @@ On an Item `tone` wins over `color` and shows at full emphasis.
 | tier | `size` | `data-size` on the root |
 | highlighted | pointer over the row, keyboard focus | `:hover`, `:focus-visible`: `fill-subtle-active` pill, accent title and dot (a `tone` keeps its dot) |
 | dot color | `color` / `tone` | `data-color` (without a tone) or `data-tone` |
-| interactive | `onClick`, `href`, `asChild` | `data-interactive`; pointer cursor, inset focus ring |
+| interactive | `onClick`, `href`, `asChild` | `data-interactive`; pointer cursor, inset focus ring, the touch row height (`touchTargetRowClass`) |
+| pressed | pointer or key down on an interactive row | the row gives (`press`: scale over `fast`), back on release |
 
 Timeline keeps no state and has no persistent selection: every row is highlighted only while it is under the pointer or focused.
 
 ## Layout & spacing
 - The root is a size container: give it a definite width (`width: min(100%, 30rem)`).
-- Row grid: dot column · text · value; below 20rem of root width the value moves under the meta line.
+- Row grid: dot column · text · value; the dot column and the text stand 8 · 12 · 16 · 16 · 20 apart by tier (`--tl-gap`); below 20rem of root width the value moves under the meta line.
 - Rows touch so the line is continuous; group → group `--prime-space-4`.
 - Inside a Card put it in `Card.Body`; the card owns the padding.
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Interactive rows are one Tab stop each; the focus ring is drawn inside the row. |
 | `Enter` · `Space` | Activates a button row; Enter opens a link row. |
 
 ### ARIA
-- Each group is an `<ol>` labelled by its heading (`aria-labelledby`); events are `<li>`.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+- Each group is an `<ol role="list">` labelled by its heading (`aria-labelledby`); events are `<li>`. The role keeps the list semantics that WebKit drops under `list-style: none`.
 - The dot is `aria-hidden`: put the status into the title or meta, not only the dot color.
 
 ### Labels
@@ -161,12 +177,12 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.Value`. |
+| [overview.tsx](examples/overview.tsx) | An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.ItemValue`. |
 | [variants.tsx](examples/variants.tsx) | Dot hues for categories at reduced emphasis, and status tones on items, values and gaps at full emphasis — `color`, `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every tier scales text, dot and row rhythm, rows 40 to 76 px — `size`. |
-| [structure.tsx](examples/structure.tsx) | A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.GapMeta`, `Timeline.ValueMeta`. |
-| [links.tsx](examples/links.tsx) | Rows that open an operation page become links, one Tab stop each with a focus ring — `href`. |
-| [narrow.tsx](examples/narrow.tsx) | At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line. |
+| [structure.tsx](examples/structure.tsx) | A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. |
+| [links.tsx](examples/links.tsx) | Rows that open something: an operation page by a link or by your router link through the slot, a receipt in place by a button; one Tab stop each with a focus ring — `href`, `asChild`, `onClick`. |
+| [narrow.tsx](examples/narrow.tsx) | At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line — `Timeline.ItemValue`. |
 
 ## Mistakes
 - `Timeline.Item` outside `Timeline.Group` → items are `<li>`; always wrap them in a group.

package/src/components/timeline/examples/links.tsx

@@ -1,28 +1,69 @@
-/** Rows that open an operation page become links, one Tab stop each with a focus ring — `href`. */
-import { Timeline } from "prime-ui-kit";
+/** Rows that open something: an operation page by a link or by your router link through the slot, a receipt in place by a button; one Tab stop each with a focus ring — `href`, `asChild`, `onClick`. */
+import { Button, Drawer, Timeline } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const EVENTS = [
+const OPERATIONS = [
   { id: "rent-ivan", title: "Аренда закончилась · Иван К.", date: "21.09.26", value: "+6 300 ₽" },
   { id: "oil", title: "ТО: замена масла", date: "10.09.26", value: "−689 ₽" },
-  { id: "wash", title: "Мойка и химчистка салона", date: "01.09.26", value: "−450 ₽" },
 ];
 
+const WASH = { title: "Мойка и химчистка салона", date: "01.09.26", value: "−450 ₽" };
+
 export default function TimelineLinksExample() {
+  const [receiptOpen, setReceiptOpen] = React.useState(false);
+
   return (
-    <Timeline.Root className={styles.feed}>
-      <Timeline.Group label="Операции">
-        {EVENTS.map((event) => (
-          <Timeline.Item key={event.id} href={`#${event.id}`}>
-            <Timeline.Title>{event.title}</Timeline.Title>
-            <Timeline.Meta>
-              <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary>
-            </Timeline.Meta>
-            <Timeline.Value>{event.value}</Timeline.Value>
+    <>
+      <Timeline.Root className={styles.feed}>
+        <Timeline.Group label="Операции">
+          {OPERATIONS.map((operation) => (
+            <Timeline.Item key={operation.id} href={`#${operation.id}`}>
+              <Timeline.ItemTitle>{operation.title}</Timeline.ItemTitle>
+              <Timeline.ItemMeta>
+                <strong>{operation.date}</strong>
+              </Timeline.ItemMeta>
+              <Timeline.ItemValue>{operation.value}</Timeline.ItemValue>
+            </Timeline.Item>
+          ))}
+          {/* The receipt opens in place: the row is a button. */}
+          <Timeline.Item onClick={() => setReceiptOpen(true)}>
+            <Timeline.ItemTitle>{WASH.title}</Timeline.ItemTitle>
+            <Timeline.ItemMeta>
+              <strong>{WASH.date}</strong> · чек
+            </Timeline.ItemMeta>
+            <Timeline.ItemValue>{WASH.value}</Timeline.ItemValue>
           </Timeline.Item>
-        ))}
-      </Timeline.Group>
-    </Timeline.Root>
+          {/* A router link (`<Link to>`) goes in the same way. */}
+          <Timeline.Item asChild>
+            <a href="#operations-archive">
+              <Timeline.ItemTitle>Операции за август</Timeline.ItemTitle>
+              <Timeline.ItemMeta>
+                <strong>14 операций</strong>
+              </Timeline.ItemMeta>
+            </a>
+          </Timeline.Item>
+        </Timeline.Group>
+      </Timeline.Root>
+
+      <Drawer.Root open={receiptOpen} onOpenChange={setReceiptOpen}>
+        <Drawer.Content size="s">
+          <Drawer.Header>
+            <Drawer.Title>{WASH.title}</Drawer.Title>
+            <Drawer.Description>
+              Чек от {WASH.date} · {WASH.value}
+            </Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Footer>
+            <Drawer.Close>
+              <Button.Root variant="outline" tone="neutral">
+                Закрыть
+              </Button.Root>
+            </Drawer.Close>
+          </Drawer.Footer>
+        </Drawer.Content>
+      </Drawer.Root>
+    </>
   );
 }

package/src/components/timeline/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line. */
+/** At 375 px the title wraps and the amount stays right; below 20rem of its own width the amount moves under the meta line — `Timeline.ItemValue`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -26,11 +26,11 @@ export default function TimelineNarrowExample() {
           <Timeline.Group label={width.label}>
             {EVENTS.map((event) => (
               <Timeline.Item key={event.id}>
-                <Timeline.Title>{event.title}</Timeline.Title>
-                <Timeline.Meta>
-                  <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary>
-                </Timeline.Meta>
-                <Timeline.Value>{event.value}</Timeline.Value>
+                <Timeline.ItemTitle>{event.title}</Timeline.ItemTitle>
+                <Timeline.ItemMeta>
+                  <strong>{event.date}</strong>
+                </Timeline.ItemMeta>
+                <Timeline.ItemValue>{event.value}</Timeline.ItemValue>
               </Timeline.Item>
             ))}
           </Timeline.Group>

package/src/components/timeline/examples/overview.tsx

@@ -1,4 +1,4 @@
-/** An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.Value`. */
+/** An operations feed: one labelled group, a line through the dots, the row under the pointer highlighted — `Timeline.Group`, `Timeline.ItemValue`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -34,11 +34,11 @@ export default function TimelineOverviewExample() {
       <Timeline.Group label="Недавно">
         {EVENTS.map((event) => (
           <Timeline.Item key={event.id}>
-            <Timeline.Title>{event.title}</Timeline.Title>
-            <Timeline.Meta>
-              <Timeline.MetaPrimary>{event.date}</Timeline.MetaPrimary> · {event.ago}
-            </Timeline.Meta>
-            <Timeline.Value>{event.value}</Timeline.Value>
+            <Timeline.ItemTitle>{event.title}</Timeline.ItemTitle>
+            <Timeline.ItemMeta>
+              <strong>{event.date}</strong> · {event.ago}
+            </Timeline.ItemMeta>
+            <Timeline.ItemValue>{event.value}</Timeline.ItemValue>
           </Timeline.Item>
         ))}
       </Timeline.Group>

package/src/components/timeline/examples/sizes.tsx

@@ -1,33 +1,38 @@
 /** Every tier scales text, dot and row rhythm, rows 40 to 76 px — `size`. */
-import { Timeline } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { Timeline, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function TimelineSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <Timeline.Root key={size} size={size} className={styles.feed}>
-          <Timeline.Group label={size}>
-            <Timeline.Item>
-              <Timeline.Title>Аренда закончилась · Иван К.</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>21.09.26</Timeline.MetaPrimary> · 15 д. назад
-              </Timeline.Meta>
-              <Timeline.Value>+6 300 ₽</Timeline.Value>
-            </Timeline.Item>
-            <Timeline.Item>
-              <Timeline.Title>ТО: замена масла</Timeline.Title>
-              <Timeline.Meta>
-                <Timeline.MetaPrimary>10.09.26</Timeline.MetaPrimary> · 26 д. назад
-              </Timeline.Meta>
-              <Timeline.Value>−689 ₽</Timeline.Value>
-            </Timeline.Item>
-          </Timeline.Group>
-        </Timeline.Root>
+        <div key={size}>
+          <div>
+            <Timeline.Root size={size}>
+              <Timeline.Group label="Недавно">
+                <Timeline.Item>
+                  <Timeline.ItemTitle>Аренда закончилась · Иван К.</Timeline.ItemTitle>
+                  <Timeline.ItemMeta>
+                    <strong>21.09.26</strong> · 15 д. назад
+                  </Timeline.ItemMeta>
+                  <Timeline.ItemValue>+6 300 ₽</Timeline.ItemValue>
+                </Timeline.Item>
+                <Timeline.Item>
+                  <Timeline.ItemTitle>ТО: замена масла</Timeline.ItemTitle>
+                  <Timeline.ItemMeta>
+                    <strong>10.09.26</strong> · 26 д. назад
+                  </Timeline.ItemMeta>
+                  <Timeline.ItemValue>−689 ₽</Timeline.ItemValue>
+                </Timeline.Item>
+              </Timeline.Group>
+            </Timeline.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

package/src/components/timeline/examples/structure.tsx

@@ -1,4 +1,4 @@
-/** A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.GapMeta`, `Timeline.ValueMeta`. */
+/** A service history with intervals between events, a caption on the right of a gap and a second value line — `Timeline.Gap`, `Timeline.Description`, `Timeline.ItemMeta`. */
 import { Timeline } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -9,46 +9,46 @@ export default function TimelineStructureExample() {
       <Timeline.Group label="История работ">
         <Timeline.Gap>
           Без обслуживания 26 дней · 300 км
-          <Timeline.GapMeta>сейчас</Timeline.GapMeta>
+          <Timeline.Description>сейчас</Timeline.Description>
         </Timeline.Gap>
         <Timeline.Item color="blue">
-          <Timeline.Title>ТО: замена масла</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>10.09.26</Timeline.MetaPrimary> · 16 500 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            900 ₽<Timeline.ValueMeta>ТО</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>ТО: замена масла</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>10.09.26</strong> · 16 500 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            900 ₽<Timeline.ItemMeta>ТО</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
         <Timeline.Gap>40 дней · 2 200 км без обслуживания</Timeline.Gap>
         <Timeline.Item color="blue">
-          <Timeline.Title>ТО: масло + колодки</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>01.08.26</Timeline.MetaPrimary> · 14 300 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            1 500 ₽<Timeline.ValueMeta>ТО</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>ТО: масло + колодки</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>01.08.26</strong> · 14 300 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            1 500 ₽<Timeline.ItemMeta>ТО</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
         <Timeline.Gap>55 дней · 2 200 км без обслуживания</Timeline.Gap>
         <Timeline.Item color="red">
-          <Timeline.Title>Ремонт: замена ремня</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>07.06.26</Timeline.MetaPrimary> · 12 100 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            2 800 ₽<Timeline.ValueMeta>Ремонт</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>Ремонт: замена ремня</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>07.06.26</strong> · 12 100 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            2 800 ₽<Timeline.ItemMeta>Ремонт</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
         <Timeline.Gap tone="warning">100 дней · 4 400 км без обслуживания</Timeline.Gap>
         <Timeline.Item color="blue">
-          <Timeline.Title>Резина зад + работа</Timeline.Title>
-          <Timeline.Meta>
-            <Timeline.MetaPrimary>27.02.26</Timeline.MetaPrimary> · 7 700 км
-          </Timeline.Meta>
-          <Timeline.Value>
-            1 516 ₽<Timeline.ValueMeta>ТО</Timeline.ValueMeta>
-          </Timeline.Value>
+          <Timeline.ItemTitle>Резина зад + работа</Timeline.ItemTitle>
+          <Timeline.ItemMeta>
+            <strong>27.02.26</strong> · 7 700 км
+          </Timeline.ItemMeta>
+          <Timeline.ItemValue>
+            1 516 ₽<Timeline.ItemMeta>ТО</Timeline.ItemMeta>
+          </Timeline.ItemValue>
         </Timeline.Item>
       </Timeline.Group>
     </Timeline.Root>