prime-ui-kit 0.7.11 → 0.9.0

package/src/components/textarea/examples/surfaces.tsx

@@ -0,0 +1,11 @@
+/** A field whose fill follows the surface: white on the canvas, gray inside Card, Modal or Popover. Drop it into any surface without overriding the background. */
+import { Textarea } from "prime-ui-kit";
+import styles from "./examples.module.css";
+
+export default function TextareaSurfacesExample() {
+  return (
+    <div className={styles.surfaceField}>
+      <Textarea.Root label="Заметка" placeholder="Текст заметки" hint="Видна всей команде." />
+    </div>
+  );
+}

package/src/components/textarea/examples/with-label.tsx

@@ -0,0 +1,22 @@
+/** Label row: `required` asterisk, `optional` marker with a custom `labels.optional`, and `aria-label` when there is no visible label. Use it to mark fields consistently. */
+import { Textarea } from "prime-ui-kit";
+import styles from "./examples.module.css";
+
+export default function TextareaWithLabelExample() {
+  return (
+    <div className={styles.column}>
+      <Textarea.Root label="Описание задачи" required placeholder="Что нужно сделать" />
+      <Textarea.Root label="Комментарий" optional placeholder="Пожелания к исполнителю" />
+      <Textarea.Root
+        label="Заметка"
+        optional
+        labels={{ optional: "видно только вам" }}
+        placeholder="Личная заметка к задаче"
+      />
+      <Textarea.Root
+        aria-label="Ответ в треде"
+        placeholder="Без видимой подписи — нужен aria-label"
+      />
+    </div>
+  );
+}

package/src/components/timeline/COMPONENT.md

@@ -0,0 +1,291 @@
+# Timeline
+
+**Category:** data-display
+
+> An event feed: dots on a thin line, event title and date, an optional amount on the right, grouped under labels.
+
+## When to use
+- Activity or operation history with dates and amounts (payments, rentals, orders).
+- Maintenance / audit history with intervals between events (`Timeline.Gap`).
+- A selectable list of events where the row opens details (`onClick`, `href`, `asChild`).
+
+## When not to use
+- Steps of a process the user goes through → use [Stepper](../stepper/COMPONENT.md).
+- Records with many attributes to compare or sort → use [DataTable](../data-table/COMPONENT.md).
+- A short list of recent events inside a dashboard card without a line → `Card variant="list"` from [Card](../card/COMPONENT.md).
+- Transient system messages → use [Notification](../notification/COMPONENT.md).
+
+## Import
+```tsx
+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.Item            <li> + row (div | button | a | asChild element) with the dot
+    │   ├── Timeline.Title       first line
+    │   ├── Timeline.Meta        second line (date, relative time)
+    │   │   └── Timeline.MetaPrimary   emphasized part (or <strong>)
+    │   └── Timeline.Value       trailing amount
+    │       └── Timeline.ValueMeta     second line under the amount
+    └── Timeline.Gap             <li>: interval between events (dashed segment, hollow dot)
+```
+
+## API
+
+### Timeline.Root
+`<div>`. Forwards `ref`. Provides `size` to nested controls.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of text, dots and row rhythm. |
+| `highlight` | `"selected" \| "hover"` | `"selected"` | Who gets the highlighted look: the `active` row, or the row under the pointer / with keyboard focus. |
+| `children` | `ReactNode` | — (required) | `Timeline.Group` elements. |
+| `className` | `string` | — | Extra class. |
+
++ native `<div>` props except `children`.
+
+### Timeline.Group
+Renders `<div>` (label) + `<ol>`. Forwards `ref` to the `<ol>`; native props go to the `<ol>`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | — | Group heading; labels the list via `aria-labelledby`. |
+| `children` | `ReactNode` | — (required) | `Timeline.Item` and `Timeline.Gap`. |
+| `className` | `string` | — | Class on the `<ol>`. |
+
++ native `<ol>` props except `children`.
+
+### Timeline.Item
+Renders `<li>` with a row element. Forwards `ref` to the row (`<div>`, `<button>`, `<a>` or the `asChild` element).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `color` | `PaletteColor` (`"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"`) | `"blue"` | Decorative dot hue at reduced emphasis (55%). Ignored when `tone` is set. |
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | — | Status dot color at full emphasis; wins over `color`. |
+| `active` | `boolean` | `false` | Highlighted / selected row: `data-state="active"`, `aria-current="true"`. |
+| `href` | `string` | — | Renders the row as `<a>`. |
+| `asChild` | `boolean` | `false` | Renders the row as the single child element (router link); the dot is prepended to its children. |
+| `onClick` | `React.MouseEventHandler<HTMLElement>` | — | Renders the row as `<button type="button">` (unless `href` / `asChild`). |
+| `target` / `rel` / `download` | anchor attributes | — | Passed to the row (for `href`). |
+| `children` | `ReactNode` | — (required) | `Timeline.Title`, `Timeline.Meta`, `Timeline.Value`. |
+| `className` | `string` | — | Class on the row. |
+
++ native HTML props of the row except `children`, `color`, `onClick`.
+
+### Timeline.Title
+`<span>`. No ref forwarding.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — (required) | Event text; weight 500, wraps when narrow. |
+| `className` | `string` | — | Extra class. |
+
++ native `<span>` props except `children`.
+
+### Timeline.Meta
+`<span>`. No ref forwarding.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — (required) | Date and relative time; muted, `tabular-nums`. `<strong>` inside is emphasized like `MetaPrimary`. |
+| `className` | `string` | — | Extra class. |
+
++ native `<span>` props except `children`.
+
+### Timeline.MetaPrimary
+`<span>`. No ref forwarding.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — (required) | Emphasized part of the meta line: primary text, weight 500. |
+| `className` | `string` | — | Extra class. |
+
++ native `<span>` props except `children`.
+
+### Timeline.Value
+`<span>`. No ref forwarding.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Text color of the amount. |
+| `children` | `ReactNode` | — (required) | Amount, optionally followed by `Timeline.ValueMeta`. |
+| `className` | `string` | — | Extra class. |
+
++ native `<span>` props except `children`.
+
+### Timeline.ValueMeta
+`<span>`. No ref forwarding.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — (required) | Second line under the amount (category, unit): meta size, muted. |
+| `className` | `string` | — | Extra class. |
+
++ native `<span>` props except `children`.
+
+### Timeline.Gap
+Renders `<li>` + `<div>`. Forwards `ref` to the `<div>`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `tone` | `"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"` | `"neutral"` | Caption and hollow dot color. |
+| `trailing` | `ReactNode` | — | Caption on the right («сейчас»). |
+| `children` | `ReactNode` | — (required) | Interval caption («40 дней · 2 200 км без обслуживания»). |
+| `className` | `string` | — | Class on the `<div>`. |
+
++ native `<div>` props except `children`.
+
+## Variants
+
+### size
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `xs` | Rows 40, title 12/16, meta caption, dot 8, label caption | Very dense side panels | |
+| `s` | Rows 52, title 13/20, meta caption, label body-s | Side panels, drawers | |
+| `m` | Rows 64, title 14/20, meta body-s 13/20, dot 10, label title-s | Page content and cards | yes |
+| `l` | Rows 68, title 16/24, meta body-m, dot 12, label title-m | Spacious feeds | |
+| `xl` | Rows 76, title 16/24, larger paddings, dot 12, label title-m | Large detail pages | |
+
+### highlight
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `selected` | The `active` row has a `fill-subtle-active` pill (radius 12), accent title and dot; interactive rows get a faint `fill-subtle` hover | A row selects a detail view and the selection persists | yes |
+| `hover` | The row under the pointer or with keyboard focus gets the pill, accent title and dot, transiently; `active` keeps only `aria-current` | Rows are links that open a page | |
+
+### Item `color`
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `blue` | Blue dot at 55% | Default category | yes |
+| `gray` | Gray dot | Neutral / system events | |
+| `green` | Green dot | Category hue | |
+| `orange` | Orange dot | Category hue | |
+| `red` | Red dot | Category hue (repairs, incidents) | |
+| `yellow` | Yellow dot | Category hue | |
+| `purple` | Purple dot | Category hue | |
+| `sky` | Sky dot | Category hue | |
+| `pink` | Pink dot | Category hue | |
+| `teal` | Teal dot | Category hue | |
+
+### Item `tone`
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | Muted-text dot | A status without meaning (draft) | — (unset: `color` is used) |
+| `accent` | Accent dot | Current / pending action | |
+| `success` | Success dot | Paid, completed | |
+| `warning` | Warning dot | Overdue, needs attention | |
+| `danger` | Danger dot | Refund, failure | |
+| `info` | Info (sky) dot | Informational system events | |
+
+### Value `tone`
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | Primary text, weight 500 | Plain amounts | yes |
+| `accent` | Accent text | Highlighted amount | |
+| `success` | Success text | Income | |
+| `warning` | Warning text | Amount at risk | |
+| `danger` | Danger text | Expense / refund | |
+| `info` | Info text | Informational amount | |
+
+### Gap `tone`
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | Muted caption and hollow dot on a dashed segment | Normal interval | yes |
+| `accent` | Accent caption and dot | Waiting on an action | |
+| `success` | Success caption and dot | Interval within norms | |
+| `warning` | Warning caption and dot | Interval too long | |
+| `danger` | Danger caption and dot | Critical interval | |
+| `info` | Info caption and dot | Informational note | |
+
+### Row element (structural)
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| none of `onClick` / `href` / `asChild` | Static `<div>` row | Read-only feed | yes |
+| `onClick` | `<button>` row, pointer cursor, hover wash, inset focus ring | Selecting a row | |
+| `href` | `<a>` row | Row opens a page | |
+| `asChild` | Your element (router link) | Client-side routing | |
+
+**Combinations**
+- Recommended: `color` for categories in read-only feeds; `tone` on Item + Value together for statuses (`success` income, `danger` refund); `highlight="hover"` with `href` rows; `Gap tone="warning"` for too-long intervals.
+- Allowed but rare: `tone` on Value only (keep the dot categorical).
+- Avoid: `color` and `tone` together on one item (`tone` wins silently); more than one `active` row; `highlight="hover"` with `onClick` selection (selection becomes invisible).
+
+**Sizes**
+Default `m` rows are 64px. Inside a Card use `m`; in a 320–375px drawer `s`.
+
+**Hierarchy**
+One `active` row at most; amounts are the only right-aligned content; use group labels instead of extra headings.
+
+## States
+| State / attribute | Element | Driven by |
+|---|---|---|
+| `data-size`, `data-highlight` | Root | `size`, `highlight` |
+| `data-state="active" \| "inactive"` | `<li>` and row | `active` |
+| `aria-current="true"` | row | `active` |
+| `data-color` | row | `color` (only when no `tone`) |
+| `data-tone` | row / Value / Gap row | `tone` (Value always has it, default `neutral`; Gap default `neutral`) |
+| `data-interactive="true"` | row | `onClick`, `href` or `asChild` |
+| hover / focus-visible | interactive row | `fill-subtle` wash (or the full highlight with `highlight="hover"`), inset focus ring |
+
+Selection is controlled by the parent through `active`; Timeline keeps no state.
+
+## Layout & spacing
+- The root fills its width and is a size container; give it a definite width (`width: min(100%, 30rem)`), a shrink-wrapped parent collapses it.
+- Group label → first row `--prime-space-2` (m); group → group `--prime-space-4`.
+- Row grid: dot column · text · value. Below 20rem of root width the value moves under the meta line.
+- Inside a Card put it in `Card.Body`; the card owns the padding.
+- Rows touch (no gap) so the line is continuous; the line stops at each dot edge.
+
+## Accessibility
+- Each group is an `<ol>` labelled by its heading (`aria-labelledby`); items are `<li>`.
+- The dot is `aria-hidden`; meaning must be in the title or meta text, not only in the dot color.
+- `active` sets `aria-current="true"`.
+- Interactive rows are native `<button>` / `<a>` (one Tab stop per row, Enter / Space); the focus ring is drawn inside the row.
+- No `labels` keys.
+
+## Examples
+| File | Scenario | When to use this pattern |
+|---|---|---|
+| [activity-feed.tsx](examples/activity-feed.tsx) | «Недавно» group with an `active` row | Operation histories with amounts |
+| [service-history.tsx](examples/service-history.tsx) | `Timeline.Gap` intervals, `trailing`, `tone="warning"`, `ValueMeta` | Maintenance and audit histories |
+| [selectable.tsx](examples/selectable.tsx) | `onClick` rows, controlled `active`, `tone` on dot and amount | Selecting a row for details |
+| [hover-highlight.tsx](examples/hover-highlight.tsx) | `highlight="hover"` with `href` rows | Rows that open pages |
+| [in-card.tsx](examples/in-card.tsx) | Two groups in `Card.Body`, dot `color` | Dashboard activity widgets |
+| [colors-and-tones.tsx](examples/colors-and-tones.tsx) | All `color` hues; every `tone` on Item, Value and Gap | Choosing dot and status colors |
+| [sizes.tsx](examples/sizes.tsx) | Tiers xs–xl | Choosing density |
+| [narrow.tsx](examples/narrow.tsx) | 375px and 280px widths | Mobile layouts |
+
+```tsx
+import { Timeline } from "prime-ui-kit";
+
+export function PaymentsFeed() {
+  return (
+    <Timeline.Root>
+      <Timeline.Group label="Недавно">
+        <Timeline.Item tone="success">
+          <Timeline.Title>Оплата получена · Иван К.</Timeline.Title>
+          <Timeline.Meta>
+            <Timeline.MetaPrimary>07.10.26</Timeline.MetaPrimary> · 2 ч. назад
+          </Timeline.Meta>
+          <Timeline.Value tone="success">+6 300 ₽</Timeline.Value>
+        </Timeline.Item>
+      </Timeline.Group>
+    </Timeline.Root>
+  );
+}
+```
+
+## Mistakes
+- `Timeline.Item` outside `Timeline.Group` → items are `<li>`; always wrap them in a group.
+- A process with steps («Шаг 1 из 3») → use Stepper.
+- Status only by dot color → put the status in the title or meta too.
+- `<div onClick>` inside an item for selection → pass `onClick` to `Timeline.Item` (native button, focus ring).
+- `Timeline.Root` inside a shrink-wrapped flex parent → give it a width; the size container collapses otherwise.
+- Custom dashed separators between events → use `Timeline.Gap`.
+
+## Related
+- [Stepper](../stepper/COMPONENT.md) — process steps.
+- [DataTable](../data-table/COMPONENT.md) — tabular records.
+- [Card](../card/COMPONENT.md) — host for feed widgets.

package/src/components/timeline/examples/activity-feed.tsx

@@ -0,0 +1,55 @@
+/** Activity feed: a «Недавно» group, the line joins the first and last dots, the `active` row gets the pill with accent title and dot. Use for operation histories with amounts. */
+
+import { Timeline } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const events = [
+  {
+    id: 1,
+    title: "Аренда закончилась · Иван К.",
+    date: "21.09.26",
+    ago: "15 д. назад",
+    value: "+6 300 ฿",
+  },
+  { id: 2, title: "ТО: замена масла", date: "10.09.26", ago: "26 д. назад", value: "−689 ฿" },
+  {
+    id: 3,
+    title: "Аренда закончилась · Сергей М.",
+    date: "04.09.26",
+    ago: "32 д. назад",
+    value: "+13 500 ฿",
+  },
+  {
+    id: 4,
+    title: "Аренда закончилась · Амир Х.",
+    date: "30.07.26",
+    ago: "68 д. назад",
+    value: "+5 400 ฿",
+  },
+  {
+    id: 5,
+    title: "Аренда закончилась · Марина Л.",
+    date: "17.07.26",
+    ago: "81 д. назад",
+    value: "+9 450 ฿",
+  },
+];
+
+export default function TimelineActivityFeedExample() {
+  return (
+    <Timeline.Root className={styles.feed}>
+      <Timeline.Group label="Недавно">
+        {events.map((event) => (
+          <Timeline.Item key={event.id} active={event.id === 2}>
+            <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.Item>
+        ))}
+      </Timeline.Group>
+    </Timeline.Root>
+  );
+}

package/src/components/timeline/examples/colors-and-tones.tsx

@@ -0,0 +1,61 @@
+/** Dot hues via `color` (decorative, reduced emphasis) and status via `tone` on items, values and gaps (full emphasis). Use `color` for categories, `tone` when the event has a status. */
+
+import { type PaletteColor, Timeline, type Tone } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const colors: PaletteColor[] = [
+  "gray",
+  "blue",
+  "sky",
+  "teal",
+  "green",
+  "yellow",
+  "orange",
+  "red",
+  "pink",
+  "purple",
+];
+
+const tones: { tone: Tone; title: string; value: string }[] = [
+  { tone: "neutral", title: "Черновик сохранён", value: "0 ฿" },
+  { tone: "accent", title: "Счёт выставлен", value: "4 200 ฿" },
+  { tone: "success", title: "Оплата получена", value: "+4 200 ฿" },
+  { tone: "warning", title: "Оплата просрочена", value: "4 200 ฿" },
+  { tone: "danger", title: "Возврат средств", value: "−4 200 ฿" },
+  { tone: "info", title: "Напоминание отправлено", value: "—" },
+];
+
+export default function TimelineColorsAndTonesExample() {
+  return (
+    <div className={styles.stack}>
+      <Timeline.Root>
+        <Timeline.Group label="color">
+          {colors.map((color) => (
+            <Timeline.Item key={color} color={color}>
+              <Timeline.Title>{color}</Timeline.Title>
+              <Timeline.Meta>Категория события</Timeline.Meta>
+            </Timeline.Item>
+          ))}
+        </Timeline.Group>
+      </Timeline.Root>
+      <Timeline.Root>
+        <Timeline.Group label="tone">
+          {tones.map(({ tone, title, value }) => (
+            <Timeline.Item key={tone} tone={tone}>
+              <Timeline.Title>{title}</Timeline.Title>
+              <Timeline.Meta>{tone}</Timeline.Meta>
+              <Timeline.Value tone={tone}>{value}</Timeline.Value>
+            </Timeline.Item>
+          ))}
+          <Timeline.Gap tone="neutral">14 дней без событий</Timeline.Gap>
+          <Timeline.Gap tone="accent">Ожидаем ответ клиента</Timeline.Gap>
+          <Timeline.Gap tone="success">Оплачено в срок</Timeline.Gap>
+          <Timeline.Gap tone="warning">Оплата задерживается 10 дней</Timeline.Gap>
+          <Timeline.Gap tone="danger">Просрочка 30 дней</Timeline.Gap>
+          <Timeline.Gap tone="info">Автоматическое напоминание</Timeline.Gap>
+        </Timeline.Group>
+      </Timeline.Root>
+    </div>
+  );
+}

package/src/components/timeline/examples/examples.module.css

@@ -0,0 +1,40 @@
+/* The root is a size container: give it a definite width, a shrink-wrapped container collapses. */
+
+/* 30rem. */
+.feed {
+  width: min(100%, calc(var(--prime-space-24) * 5));
+}
+
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-10);
+  width: min(100%, calc(var(--prime-space-24) * 5));
+  min-width: 0;
+}
+
+/* Caption above a feed: the gap replaces a bottom margin on the caption. */
+.cell {
+  display: grid;
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
+.card {
+  width: min(100%, calc(var(--prime-space-24) * 5));
+}
+
+/* 375px phone width. */
+.phone {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--prime-space-3);
+  width: min(100%, calc(var(--prime-space-1) * 93.75));
+}
+
+/* 280px: below the 20rem container breakpoint. */
+.narrow {
+  display: grid;
+  gap: var(--prime-space-3);
+  width: min(100%, calc(var(--prime-space-10) * 7));
+}

package/src/components/timeline/examples/hover-highlight.tsx

@@ -0,0 +1,48 @@
+/** `highlight="hover"`: no persistent selection, the row under the pointer or with keyboard focus gets the pill, accent title and dot; rows are links via `href`. Use for feeds where each row opens a page. */
+
+import { Timeline } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const events = [
+  {
+    id: "rent-ivan",
+    title: "Аренда закончилась · Иван К.",
+    date: "21.09.26",
+    ago: "15 д. назад",
+    value: "+6 300 ฿",
+  },
+  { id: "oil", title: "ТО: замена масла", date: "10.09.26", ago: "26 д. назад", value: "−689 ฿" },
+  {
+    id: "rent-sergey",
+    title: "Аренда закончилась · Сергей М.",
+    date: "04.09.26",
+    ago: "32 д. назад",
+    value: "+13 500 ฿",
+  },
+  {
+    id: "wash",
+    title: "Мойка и химчистка салона",
+    date: "01.09.26",
+    ago: "36 д. назад",
+    value: "−450 ฿",
+  },
+];
+
+export default function TimelineHoverHighlightExample() {
+  return (
+    <Timeline.Root highlight="hover" 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> · {event.ago}
+            </Timeline.Meta>
+            <Timeline.Value>{event.value}</Timeline.Value>
+          </Timeline.Item>
+        ))}
+      </Timeline.Group>
+    </Timeline.Root>
+  );
+}

package/src/components/timeline/examples/in-card.tsx

@@ -0,0 +1,48 @@
+/** A feed inside `Card.Body` (the card owns the padding) with two groups and dot hues via `color`. Use for activity widgets on dashboards. */
+
+import { Card, Timeline } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+export default function TimelineInCardExample() {
+  return (
+    <Card.Root className={styles.card}>
+      <Card.Body>
+        <Timeline.Root>
+          <Timeline.Group label="Сегодня">
+            <Timeline.Item color="green">
+              <Timeline.Title>Оплата получена · Иван К.</Timeline.Title>
+              <Timeline.Meta>
+                <Timeline.MetaPrimary>07.10.26</Timeline.MetaPrimary> · 2 ч. назад
+              </Timeline.Meta>
+              <Timeline.Value>+6 300 ฿</Timeline.Value>
+            </Timeline.Item>
+            <Timeline.Item color="orange" active>
+              <Timeline.Title>Штраф за парковку</Timeline.Title>
+              <Timeline.Meta>
+                <Timeline.MetaPrimary>07.10.26</Timeline.MetaPrimary> · 5 ч. назад
+              </Timeline.Meta>
+              <Timeline.Value>−1 000 ฿</Timeline.Value>
+            </Timeline.Item>
+          </Timeline.Group>
+          <Timeline.Group label="Ранее">
+            <Timeline.Item>
+              <Timeline.Title>Аренда закончилась · Сергей М.</Timeline.Title>
+              <Timeline.Meta>
+                <Timeline.MetaPrimary>04.09.26</Timeline.MetaPrimary> · 32 д. назад
+              </Timeline.Meta>
+              <Timeline.Value>+13 500 ฿</Timeline.Value>
+            </Timeline.Item>
+            <Timeline.Item color="purple">
+              <Timeline.Title>Мойка и химчистка салона</Timeline.Title>
+              <Timeline.Meta>
+                <Timeline.MetaPrimary>01.09.26</Timeline.MetaPrimary> · 36 д. назад
+              </Timeline.Meta>
+              <Timeline.Value>−450 ฿</Timeline.Value>
+            </Timeline.Item>
+          </Timeline.Group>
+        </Timeline.Root>
+      </Card.Body>
+    </Card.Root>
+  );
+}

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

@@ -0,0 +1,49 @@
+/** At 375px the title wraps and the amount stays on the right; below 20rem of its own width (container query) the amount moves under the meta line. Use to check mobile layouts. */
+
+import { Timeline, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+function Rows() {
+  return (
+    <Timeline.Group label="Недавно">
+      <Timeline.Item>
+        <Timeline.Title>Аренда закончилась · Марина Л.</Timeline.Title>
+        <Timeline.Meta>
+          <Timeline.MetaPrimary>17.07.26</Timeline.MetaPrimary> · 81 д. назад
+        </Timeline.Meta>
+        <Timeline.Value>+9 450 ฿</Timeline.Value>
+      </Timeline.Item>
+      <Timeline.Item active>
+        <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>
+  );
+}
+
+export default function TimelineNarrowExample() {
+  return (
+    <div className={styles.stack}>
+      <div className={styles.phone}>
+        <Typography.Root variant="caption" tone="muted">
+          375px
+        </Typography.Root>
+        <Timeline.Root>
+          <Rows />
+        </Timeline.Root>
+      </div>
+      <div className={styles.narrow}>
+        <Typography.Root variant="caption" tone="muted">
+          280px
+        </Typography.Root>
+        <Timeline.Root>
+          <Rows />
+        </Timeline.Root>
+      </div>
+    </div>
+  );
+}