prime-ui-kit 0.9.0 → 0.9.2

package/src/components/segmented-control/COMPONENT.md

@@ -1,20 +1,21 @@
 # SegmentedControl
 
 **Category:** selection
+**Kind:** control
 
 > A switch between 2–5 mutually exclusive options or modes that takes effect immediately.
 
 ## When to use
-- Choosing one value or view mode with an instant effect: report period, list/board/calendar view, theme.
+- Choosing one value or view mode with an instant effect: report period, list / board / calendar view, theme.
 - A compact one-of-many choice inside a toolbar, next to inputs and buttons of the same size.
 - A status picker where each option has its own palette hue (`color` on the item).
 - A status overview where each option carries a metric (two-line segments with `Count` and `Description`).
 
 ## When not to use
-- Switching between panels of content (navigation) → use [Tabs](../tabs/COMPONENT.md) instead.
-- One choice with descriptions in a form, or more than 5 options → use [Radio](../radio/COMPONENT.md) or [Select](../select/COMPONENT.md) instead.
-- A single on/off setting → use [Switch](../switch/COMPONENT.md) instead.
-- Several actions in a row (not a selection) → use [ButtonGroup](../button-group/COMPONENT.md) instead.
+- Switching between panels of content (navigation) → use [Tabs](../tabs/COMPONENT.md).
+- One choice with descriptions in a form, or more than 5 options → use [Radio](../radio/COMPONENT.md) or [Select](../select/COMPONENT.md).
+- A single on/off setting → use [Switch](../switch/COMPONENT.md).
+- Several actions in a row (not a selection) → use [ButtonGroup](../button-group/COMPONENT.md).
 
 ## Import
 ```tsx
@@ -23,102 +24,95 @@ import { SegmentedControl } from "prime-ui-kit";
 
 ## Anatomy
 ```
-SegmentedControl.Root                 role="radiogroup"; track + sliding thumb, keyboard handling
+SegmentedControl.Root                 role="radiogroup"; track + sliding thumb, scrolling row, keyboard
 └─ SegmentedControl.Item              role="radio" button, one option
    ├─ SegmentedControl.Icon           icon slot (optional; icon-only → square segment)
-   ├─ SegmentedControl.Label          title, truncates (optional; plain text is wrapped automatically)
-   ├─ SegmentedControl.Count          counter badge after the label (optional)
+   ├─ SegmentedControl.Label          title, one line (optional; plain text is wrapped automatically)
+   ├─ SegmentedControl.Count          counter Badge after the label (optional)
    └─ SegmentedControl.Description    second line; makes the segment two-line (optional)
 ```
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### SegmentedControl.Root
+`ref` → `HTMLDivElement`. `<div role="radiogroup">`: the track with the sliding thumb, keyboard handling and a horizontally scrolling `ScrollContainer` row.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` | `string` | — | Controlled selected value; use with `onValueChange`. |
-| `defaultValue` | `string` | `""` | Initial value in uncontrolled mode; `""` = nothing selected. |
-| `onValueChange` | `(value: string) => void` | — | Called when the selection changes (click or keyboard). |
+| `value` | `string` | — | Selected value (controlled). |
+| `defaultValue` | `string` | `""` | Initial value (uncontrolled); `""` — nothing selected. |
+| `onValueChange` | `(value: string) => void` | — | Called with the new value on click or arrow keys. |
 | `disabled` | `boolean` | `false` | Disables the whole group. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Size tier; outer height equals the control height of the tier. |
-| `fullWidth` | `boolean` | `false` | Stretch to the container; single-line segments share the width equally and truncate. |
-| `aria-label` | `string` | — | Accessible name of the radiogroup. |
-| `aria-labelledby` | `string` | — | Id of the element that names the group. |
-| `children` | `ReactNode` | — (required) | `SegmentedControl.Item` elements (may be wrapped, e.g. in `Tooltip.Trigger`). |
-| `className` | `string` | — | Class on the root `div`. |
-
-No other native props, no ref forwarding.
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Control tier; the outer height equals the control height 28 · 32 · 36 · 40 · 48. Without it the tier of its host (a toolbar, a panel with a size), else `m`. |
+| `fullWidth` | `boolean` | `false` | Fills the container; single-line segments tend to equal widths but never get narrower than their label — when they do not fit, the row scrolls. |
+| `children` | `ReactNode` | — | `SegmentedControl.Item`s (may be wrapped, e.g. in `Tooltip.Trigger`). |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" \| "onChange">` | — | `aria-label` / `aria-labelledby` (name the group), `className` and the other div attributes. |
 
 ### SegmentedControl.Item
+`ref` → `HTMLButtonElement`. One option, a `<button role="radio">` with roving `tabIndex`; plain text is wrapped in a `SegmentedControl.Label`.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `value` | `string` | — (required) | Option value compared with the root value. |
-| `disabled` | `boolean` | `false` | Disables this option; skipped by arrow keys. |
-| `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | — | Palette hue: a dot before the content; when selected the thumb takes a soft fill of the hue with a ring of it. |
-| `children` | `ReactNode` | — (required) | Text, `Icon`, `Label`, `Count`, `Description`. |
-| `className` | `string` | — | Class on the `<button>`. |
-
-+ native `<button>` props except `value`, `children`, `type`, `role` (`aria-label`, `onClick`, …; `onClick` runs first and can `preventDefault()` the selection).
-Ref: `forwardRef` → `HTMLButtonElement`.
+| `disabled` | `boolean` | `false` | Disables this option; arrow keys skip it. |
+| `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | — | Palette hue: a dot before the content; while selected the thumb takes a soft fill of the hue with a ring of it. |
+| `children` | `ReactNode` | — (required) | Text, `Icon`, `Label`, `Count`, `Description`. Only an icon → square segment; give it `aria-label`. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value" \| "type" \| "role">` | — | `aria-label`, `onClick` (runs first and can `preventDefault()` the selection), `className` and the other button attributes. |
 
 ### SegmentedControl.Icon
+`ref` → `HTMLSpanElement`. Decorative icon (`aria-hidden`) sized to the tier.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | The icon; sized to the tier icon size, `aria-hidden`. |
-| `className` | `string` | — | Class on the `<span>`. |
-
-+ native `<span>` props except `children`.
+| `children` | `ReactNode` | — (required) | The icon, e.g. `<Icon name="theme.light" />`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### SegmentedControl.Label
+`ref` → `HTMLSpanElement`. Segment title on one line; never truncated. Plain text is wrapped automatically.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | Segment title; truncates with an ellipsis. |
-| `className` | `string` | — | Class on the `<span>`. |
-
-+ native `<span>` props except `children`.
+| `children` | `ReactNode` | — (required) | Title text. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### SegmentedControl.Count
+`ref` → `HTMLSpanElement`. Counter `Badge` after the label, one tier below the control, tabular numbers.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"gray"` | Badge hue. |
-| `children` | `ReactNode` | — (required) | The number (tabular nums). |
-| `className` | `string` | — | Class on the badge. |
-
-Renders a soft `Badge` one tier below the control (`m` → `s`). No other props.
+| `children` | `ReactNode` | — (required) | The number. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ### SegmentedControl.Description
+`ref` → `HTMLSpanElement`. Muted second line; makes the segment two-line and becomes its `aria-describedby`.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | Muted second line; wrap the key value in `<strong>` to emphasize it. |
-| `className` | `string` | — | Class on the `<span>`. |
-
-+ native `<span>` props except `children`.
+| `children` | `ReactNode` | — (required) | Second-line text; wrap a key value in `<strong>`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other span attributes. |
 
 ## Variants
-No `variant`/`tone`. Axes: `size` (Root), `fullWidth` (Root), `color` (Item, Count), structural content (icon-only, two-line).
+No `variant` / `tone`. Axes: `size` and `fullWidth` (Root), `color` (Item, Count), structural content (icon-only, two-line).
 
 ### size
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `xs` | 28px track, 4px padding, track radius 8, 12/16 text | dense table toolbars next to `xs` controls | |
+| `xs` | 28px track, radius 8, 12/16 text | dense table toolbars next to `xs` controls | |
 | `s` | 32px track, radius 10, 13/20 text | compact toolbars and filters | |
 | `m` | 36px track, radius 12, 14/20 text | default toolbars and page headers | yes |
 | `l` | 40px track, radius 12, 16/24 text | spacious headers next to `l` controls | |
 | `xl` | 48px track, radius 16, 16/24 text | touch-first screens, hero filters | |
 
-Track is `fill-muted` with a faint 1px ring; the selected segment is a floating thumb (`control-selected`, faint ring, `shadow-raised`); segment radius = track radius − 4px.
-
-### fullWidth
-| Value | Looks like | Use when | Default |
-|---|---|---|---|
-| `false` | group as wide as its segments; in a narrow container it scrolls horizontally with edge fades | toolbars, inline filters | yes |
-| `true` | group fills the container; single-line segments are equal and truncate, two-line segments grow from their content | modals, mobile panels, overview strips | |
+Track is `fill-muted` with a faint 1px ring; the selected segment is a floating thumb (`control-selected`, faint ring, `shadow-raised`); segment radius = track radius − padding. A single-line group is as tall as Button, Input, Select and Datepicker trigger of the same size.
 
 ### color (Item)
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | none | no dot; selected thumb is neutral | ordinary modes and periods | yes |
-| `gray` · `blue` · `green` · `orange` · `red` · `yellow` · `purple` · `sky` · `pink` · `teal` | dot of the hue before the content; selected thumb gets the hue's soft fill and a ring of the hue text | statuses where each value has a meaning (ok/attention/broken) | |
+| `gray` · `blue` · `green` · `orange` · `red` · `yellow` · `purple` · `sky` · `pink` · `teal` | dot of the hue before the content; selected thumb gets the hue's soft fill and a ring of the hue text | statuses where each value has a meaning | |
 
 ### color (Count)
 | Value | Looks like | Use when | Default |
@@ -126,76 +120,67 @@ Track is `fill-muted` with a faint 1px ring; the selected segment is a floating
 | `gray` | neutral soft badge (text wash so it reads on track and thumb) | plain counters | yes |
 | other palette hues | soft badge of the hue | the count has a status meaning | |
 
-### Structural content
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| text / icon + text | single-line segment, tier height minus padding | most cases | yes |
-| icon only | square segment (`data-icon-only`) | toolbar view toggles; add `aria-label` and a Tooltip | |
-| two-line (`Description`) | label (+count) on line 1, muted description on line 2; track grows to content (`data-two-line`) | overview strips with metrics | |
-
-**Combinations**
-- Item `color` + Count `color` of the same hue → redundant; use one.
-- Item `color` mixing coloured and plain items in one group → avoid; colour all or none.
-- Icon-only without `aria-label` → forbidden (no accessible name).
-- `fullWidth` with many long single-line labels → labels truncate; prefer content width or two-line segments.
-
-**Sizes** — single-line group height = `--prime-control-<tier>-height` (28 · 32 · 36 · 40 · 48), so it lines up with Button, Input, Select and Datepicker trigger of the same size in one row.
+| `fullWidth` | fills the container; single-line segments tend to equal widths, a long label keeps its own width and the row scrolls when they do not fit; two-line segments grow from their content | modals, mobile panels, overview strips | off |
+| `disabled` | every segment disabled, thumb `fill-muted-hover` without shadow | the choice is temporarily unavailable | off |
+| icon-only (only `SegmentedControl.Icon`) | square segment (`data-icon-only`) | toolbar view toggles; needs `aria-label` | — |
 
-**Hierarchy** — one segmented control per decision; in a toolbar keep all controls at one size (see [toolbar.tsx](examples/toolbar.tsx)).
+Colour all items or none; do not give an item and its Count the same hue; prefer content width or two-line segments over `fullWidth` with many long labels.
 
 ## States
-| State | Driven by | DOM | Looks like |
-|---|---|---|---|
-| selected | root `value` = item `value` | `aria-checked="true"`, `data-state="checked"` | thumb under the segment, text `text-primary` |
-| unselected | — | `aria-checked="false"`, `data-state="unchecked"` | text `text-secondary`; hover → `text-primary` (no fill) |
-| no selection | `value` / `defaultValue` = `""` | thumb hidden | first enabled segment takes Tab focus |
-| item disabled | item `disabled` | `data-disabled="true"`, native `disabled` | text `text-disabled`, skipped by arrows |
-| group disabled | root `disabled` | root `data-disabled="true"`, `aria-disabled` | all segments disabled, thumb `fill-muted-hover` without shadow |
-| focus-visible | keyboard | — | focus ring on the segment |
+| State | Driven by | DOM |
+|---|---|---|
+| selected | root `value` = item `value` | `aria-checked="true"`, `data-state="checked"`; thumb under the segment, `text-primary` |
+| unselected | — | `aria-checked="false"`, `data-state="unchecked"`; `text-secondary`, hover → `text-primary` (no fill) |
+| no selection | `value` / `defaultValue` = `""` | thumb hidden; the first enabled segment takes Tab focus |
+| item disabled | item `disabled` | `data-disabled="true"`, native `disabled`, `text-disabled`, skipped by arrows |
+| group disabled | root `disabled` | root `data-disabled="true"`, `aria-disabled`; every segment disabled |
+| focus-visible | keyboard | focus ring inside the segment |
+| overflow | row wider than the container | root `data-overflow-start` / `data-overflow-end`: edge fades in the track color |
 
-Root DOM: `data-size`, `data-disabled`, `data-full-width`; scroller `data-overflow-start` / `data-overflow-end` (edge fades). Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `data-value`, `data-color`. The thumb slides only after a user change (`data-animate`), and not under `prefers-reduced-motion`.
-Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue`.
+Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `data-value`, `data-color`. The thumb glides (`emphasized` + `base`, `data-animate`) only into a user's choice (click, arrows); a value set from outside and layout changes snap it; it stays still under `prefers-reduced-motion`. It sits inside the segment track, which clips it, so moving the selection never changes the row's scroll area. When the row scrolls, the selected segment is kept in view on mount and on every value change: only the row scrolls, never the page, and the scroll glides only after a user's choice.
 
 ## Layout & spacing
 - Width is content-based by default; segments never wrap. In a narrow container the row scrolls horizontally with fading edges.
-- In a toolbar: gap `--prime-space-3` between controls; wrap the toolbar (`flex-wrap`) on narrow screens.
+- In a toolbar: gap `--prime-space-3` between controls; keep every control at one size.
 - Caption under a group: gap `--prime-space-2`.
-- `fullWidth` inside modals and mobile sheets.
+- `fullWidth` inside modals and mobile sheets. Single-line segments are `flex: 1 1 0` with `min-width: max-content`: short labels share the spare width equally, a long label keeps its own width, nothing truncates; when the labels do not fit, the row scrolls.
 
 ## Accessibility
-- Root `role="radiogroup"` (always name it with `aria-label` / `aria-labelledby`), `aria-disabled` when disabled.
-- Items are `<button role="radio" aria-checked>` with roving `tabIndex`: Tab focuses the selected item (or the first enabled one).
-- Keyboard: ←/↑ previous, →/↓ next (wraps, skips disabled), Home / End first / last; moving focus also selects and scrolls the item into view.
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `ArrowRight` · `ArrowDown` | Next option, wrapping and skipping disabled ones; focus and selection move together. |
+| `ArrowLeft` · `ArrowUp` | Previous option. |
+| `Home` · `End` | First and last enabled option. |
+| `Tab` | Enters the group on the selected option (or the first enabled one) and leaves it. |
+
+### ARIA
+- Root `role="radiogroup"` — always name it with `aria-label` / `aria-labelledby`; `aria-disabled` when disabled.
+- Items are `<button role="radio" aria-checked>` with roving `tabIndex`.
 - Two-line items: `aria-labelledby` = label (+ count), `aria-describedby` = description.
-- Icons are `aria-hidden`; icon-only items need `aria-label`.
-- No `labels` keys.
+- Icons are `aria-hidden`; icon-only items need `aria-label` (and a Tooltip for sighted users).
 
-## Examples
-| File | Scenario | When to use this pattern |
-|---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | All tiers in a row with Input and Button | Aligning with other controls |
-| [item-content.tsx](examples/item-content.tsx) | Icon + text, icon-only with Tooltip, Count | Choosing segment content |
-| [two-line.tsx](examples/two-line.tsx) | `fullWidth` two-line segments with Label, Count (colours), Description | Status overview with metrics |
-| [full-width.tsx](examples/full-width.tsx) | Content width vs `fullWidth` vs scrolling in a narrow container | Deciding how the group fills its container |
-| [surfaces.tsx](examples/surfaces.tsx) | Canvas, card, nested card, modal | Checking contrast on any host |
-| [colors.tsx](examples/colors.tsx) | Item `color` with tinted thumb | Status picker |
-| [states.tsx](examples/states.tsx) | Selected, no selection, disabled item, disabled group | Reference for every state |
-| [controlled.tsx](examples/controlled.tsx) | `value` + `onValueChange` | Selection drives other content |
-| [toolbar.tsx](examples/toolbar.tsx) | Search, view and period switches, export button at size `m` | Toolbars |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-```tsx
-import { SegmentedControl } from "prime-ui-kit";
+No `labels`.
 
-export function PeriodSwitch() {
-  return (
-    <SegmentedControl.Root defaultValue="week" aria-label="Период">
-      <SegmentedControl.Item value="day">День</SegmentedControl.Item>
-      <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-      <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
-    </SegmentedControl.Root>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | One value out of a few, with a sliding thumb on the chosen segment — `defaultValue`, `aria-label`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier; the outer height equals the control height of the same tier — `size`. |
+| [states.tsx](examples/states.tsx) | No selection yet, a disabled segment and a disabled group next to the default — `disabled`. |
+| [with-icon.tsx](examples/with-icon.tsx) | An icon before the label and square icon-only segments named for screen readers — `SegmentedControl.Icon`, `aria-label`. |
+| [colors.tsx](examples/colors.tsx) | A status per option: a dot of its hue before the label and a tinted thumb when chosen — `color`. |
+| [full-width.tsx](examples/full-width.tsx) | The group fills its column; segments tend to equal widths and a long label keeps its own — `fullWidth`. |
+| [scroll.tsx](examples/scroll.tsx) | Segments never wrap: in a column narrower than the row it scrolls with edge fades and brings the chosen segment into view. |
+| [two-line.tsx](examples/two-line.tsx) | A label and a counter on the first line, a metric on the second — `SegmentedControl.Label`, `SegmentedControl.Count`, `SegmentedControl.Description`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the choice and updates other content from it — `value`, `onValueChange`. |
 
 ## Mistakes
 - Using it as tabs that show different panels → use `Tabs`.
@@ -206,4 +191,5 @@ export function PeriodSwitch() {
 - Expecting segments to wrap on narrow screens → they scroll; use `fullWidth` or fewer options.
 
 ## Related
-[Tabs](../tabs/COMPONENT.md) · [Radio](../radio/COMPONENT.md) · [Switch](../switch/COMPONENT.md) · [Badge](../badge/COMPONENT.md) · [Tooltip](../tooltip/COMPONENT.md)
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Badge](../badge/COMPONENT.md)
+- **See also:** [Tabs](../tabs/COMPONENT.md), [Radio](../radio/COMPONENT.md), [Switch](../switch/COMPONENT.md), [ButtonGroup](../button-group/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md)

package/src/components/segmented-control/examples/colors.tsx

@@ -1,22 +1,17 @@
-/** Items with a palette color: a dot before the label and a tinted thumb when selected. Use it for picking a status where each value has its own hue. */
+/** A status per option: a dot of its hue before the label and a tinted thumb when chosen — `color`. */
 import { SegmentedControl } from "prime-ui-kit";
-import * as React from "react";
 
 export default function SegmentedControlColorsExample() {
-  const [status, setStatus] = React.useState("ok");
   return (
-    <SegmentedControl.Root value={status} onValueChange={setStatus} aria-label="Техсостояние">
-      <SegmentedControl.Item value="ok" color="green">
-        Исправен
+    <SegmentedControl.Root defaultValue="paid" aria-label="Статус счёта">
+      <SegmentedControl.Item value="paid" color="green">
+        Оплачен
       </SegmentedControl.Item>
-      <SegmentedControl.Item value="service" color="orange">
-        Нужно ТО
+      <SegmentedControl.Item value="pending" color="orange">
+        Ожидает
       </SegmentedControl.Item>
-      <SegmentedControl.Item value="repair" color="red">
-        Нужен ремонт
-      </SegmentedControl.Item>
-      <SegmentedControl.Item value="in-repair" color="red">
-        В ремонте
+      <SegmentedControl.Item value="overdue" color="red">
+        Просрочен
       </SegmentedControl.Item>
     </SegmentedControl.Root>
   );

package/src/components/segmented-control/examples/controlled.tsx

@@ -1,24 +1,28 @@
-/** A controlled group with value and onValueChange driving a caption. Use it when the selection changes other content on the page. */
+/** The parent owns the choice and updates other content from it — `value`, `onValueChange`. */
 import { SegmentedControl, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const LABELS: Record<string, string> = { day: "за день", week: "за неделю", month: "за месяц" };
+const REVENUE: Record<string, string> = {
+  day: "Выручка за день: 48 200 ₽",
+  week: "Выручка за неделю: 312 700 ₽",
+  month: "Выручка за месяц: 1 284 000 ₽",
+};
 
 export default function SegmentedControlControlledExample() {
   const [period, setPeriod] = React.useState("week");
 
   return (
-    <div className={styles.cell}>
+    <div className={styles.stack}>
       <SegmentedControl.Root value={period} onValueChange={setPeriod} aria-label="Период отчёта">
         <SegmentedControl.Item value="day">День</SegmentedControl.Item>
         <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
         <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
       </SegmentedControl.Root>
-      <Typography.Root variant="caption" tone="muted">
-        Показываем выручку {LABELS[period]}
-      </Typography.Root>
+      <Typography variant="body-m" tone="secondary">
+        {REVENUE[period]}
+      </Typography>
     </div>
   );
 }

package/src/components/segmented-control/examples/examples.module.css

@@ -1,95 +1,9 @@
-/* Example layout: semantic tokens only. */
-
-.cell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
+/* Layout of the SegmentedControl scenarios: semantic tokens only. */
 
+/* controlled.tsx: the group and the content it drives, start-aligned in one column. */
 .stack {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-5);
-}
-
-.alignRows {
-  display: grid;
-  gap: var(--prime-space-4);
-}
-
-.alignRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-.alignField {
-  width: calc(var(--prime-space-16) * 3);
-}
-
-.sizeTag {
-  width: var(--prime-space-6);
-}
-
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-3);
-  width: 100%;
-  max-width: var(--prime-modal-width-l);
-}
-
-.toolbarSearch {
-  flex: 1 1 var(--prime-panel-min-width);
-  min-width: 0;
-}
-
-.stackStart {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-6);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-  min-width: 0;
-}
-
-.labeled {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* A container narrower than the group: the group scrolls inside it. */
-.tight {
-  width: min(100%, calc(var(--prime-space-16) * 4));
-  min-width: 0;
-}
-
-/* Hosts: canvas, card, card in card, modal. */
-.hosts {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(calc(var(--prime-space-16) * 4), 1fr));
-  gap: var(--prime-space-6);
-  width: 100%;
-}
-
-.host {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-.fleet {
-  display: flex;
-  flex-direction: column;
   gap: var(--prime-space-3);
-  width: 100%;
-  min-width: 0;
 }

package/src/components/segmented-control/examples/full-width.tsx

@@ -1,49 +1,12 @@
-/** Content-width group, fullWidth group with equal truncating segments, and a group scrolling in a narrow container. Use it to decide how the group fills its container. */
-import { SegmentedControl, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** The group fills its column; segments tend to equal widths and a long label keeps its own — `fullWidth`. */
+import { SegmentedControl } from "prime-ui-kit";
 
 export default function SegmentedControlFullWidthExample() {
   return (
-    <div className={styles.stackStart}>
-      <div className={styles.labeled}>
-        <Typography.Root variant="caption" tone="muted">
-          По содержимому
-        </Typography.Root>
-        <SegmentedControl.Root defaultValue="card" aria-label="Способ оплаты">
-          <SegmentedControl.Item value="card">Картой</SegmentedControl.Item>
-          <SegmentedControl.Item value="sbp">СБП</SegmentedControl.Item>
-          <SegmentedControl.Item value="cash">Наличными курьеру</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <div className={styles.labeled}>
-        <Typography.Root variant="caption" tone="muted">
-          fullWidth
-        </Typography.Root>
-        <SegmentedControl.Root
-          fullWidth
-          defaultValue="card"
-          aria-label="Способ оплаты, на всю ширину"
-        >
-          <SegmentedControl.Item value="card">Картой</SegmentedControl.Item>
-          <SegmentedControl.Item value="sbp">СБП</SegmentedControl.Item>
-          <SegmentedControl.Item value="cash">Наличными курьеру</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-      <div className={styles.labeled}>
-        <Typography.Root variant="caption" tone="muted">
-          Узкий контейнер: прокрутка
-        </Typography.Root>
-        <div className={styles.tight}>
-          <SegmentedControl.Root defaultValue="1m" aria-label="Диапазон графика">
-            <SegmentedControl.Item value="1d">1 день</SegmentedControl.Item>
-            <SegmentedControl.Item value="1w">Неделя</SegmentedControl.Item>
-            <SegmentedControl.Item value="1m">Месяц</SegmentedControl.Item>
-            <SegmentedControl.Item value="1y">Год</SegmentedControl.Item>
-            <SegmentedControl.Item value="all">Всё время</SegmentedControl.Item>
-          </SegmentedControl.Root>
-        </div>
-      </div>
-    </div>
+    <SegmentedControl.Root fullWidth defaultValue="card" aria-label="Способ оплаты">
+      <SegmentedControl.Item value="card">Картой</SegmentedControl.Item>
+      <SegmentedControl.Item value="sbp">СБП</SegmentedControl.Item>
+      <SegmentedControl.Item value="invoice">По счёту для юрлиц</SegmentedControl.Item>
+    </SegmentedControl.Root>
   );
 }

package/src/components/segmented-control/examples/overview.tsx

@@ -0,0 +1,12 @@
+/** One value out of a few, with a sliding thumb on the chosen segment — `defaultValue`, `aria-label`. */
+import { SegmentedControl } from "prime-ui-kit";
+
+export default function SegmentedControlOverviewExample() {
+  return (
+    <SegmentedControl.Root defaultValue="week" aria-label="Период отчёта">
+      <SegmentedControl.Item value="day">День</SegmentedControl.Item>
+      <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+      <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+    </SegmentedControl.Root>
+  );
+}

package/src/components/segmented-control/examples/scroll.tsx

@@ -0,0 +1,16 @@
+/** Segments never wrap: in a column narrower than the row it scrolls with edge fades and brings the chosen segment into view. */
+import { SegmentedControl } from "prime-ui-kit";
+
+export default function SegmentedControlScrollExample() {
+  return (
+    <SegmentedControl.Root defaultValue="month" aria-label="Диапазон графика">
+      <SegmentedControl.Item value="day">День</SegmentedControl.Item>
+      <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
+      <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
+      <SegmentedControl.Item value="quarter">Квартал</SegmentedControl.Item>
+      <SegmentedControl.Item value="halfYear">Полгода</SegmentedControl.Item>
+      <SegmentedControl.Item value="year">Год</SegmentedControl.Item>
+      <SegmentedControl.Item value="all">Всё время</SegmentedControl.Item>
+    </SegmentedControl.Root>
+  );
+}

package/src/components/segmented-control/examples/sizes.tsx

@@ -1,32 +1,20 @@
-/** Size tiers xs–xl in a toolbar row next to Input and Button of the same size, all of one height. Use it to line a segmented control up with other controls. */
-import { Button, IconSearch, Input, SegmentedControl, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Every size tier; the outer height equals the control height of the same tier — `size`. */
+import { SegmentedControl, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function SegmentedControlSizesExample() {
   return (
-    <div className={styles.alignRows}>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.alignRow}>
-          <Typography.Root as="span" variant="caption" tone="muted" className={styles.sizeTag}>
-            {size}
-          </Typography.Root>
-          <Input.Root size={size} className={styles.alignField}>
-            <Input.Wrapper>
-              <Input.Icon side="start">
-                <IconSearch />
-              </Input.Icon>
-              <Input.Field placeholder="Поиск" aria-label={`Поиск, ${size}`} />
-            </Input.Wrapper>
-          </Input.Root>
-          <SegmentedControl.Root size={size} defaultValue="week" aria-label={`Период, ${size}`}>
+        <div key={size}>
+          <SegmentedControl.Root size={size} defaultValue="week" aria-label="Период">
             <SegmentedControl.Item value="day">День</SegmentedControl.Item>
             <SegmentedControl.Item value="week">Неделя</SegmentedControl.Item>
-            <SegmentedControl.Item value="month">Месяц</SegmentedControl.Item>
           </SegmentedControl.Root>
-          <Button.Root size={size}>Создать</Button.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
     </div>