prime-ui-kit 0.9.3 → 0.11.0

package/src/components/scroll-container/examples/chat.tsx

@@ -0,0 +1,101 @@
+/** A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. */
+import { Button, Card, Icon, Input, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Message = { id: number; author: string; text: string };
+
+const HISTORY: Message[] = [
+  "Добрый день! Счёт № 4821 пришёл без НДС.",
+  "Здравствуйте, проверю реквизиты и вернусь.",
+  "Спасибо, ждём — нужно провести до пятницы.",
+  "Нашла: в карточке клиента стояла ставка 0 %.",
+  "Исправили ставку, выставляю счёт заново.",
+  "Новый счёт № 4830 отправлен на почту бухгалтерии.",
+  "Получили, всё верно. Оплатим сегодня.",
+  "Отлично! Закрывающие документы пришлём после оплаты.",
+  "Оплата прошла, платёжка во вложении.",
+  "Вижу поступление, спасибо. Акт отправим завтра.",
+  "Подскажите, можно ли подключить ЭДО?",
+  "Да, пришлите идентификатор в Диадоке.",
+].map((text, index) => ({ id: index + 1, author: index % 2 === 0 ? "Клиент" : "Поддержка", text }));
+
+const PAGE = 4;
+
+export default function ScrollContainerChatExample() {
+  // The newest messages first; older pages arrive when the reader scrolls up.
+  const [shown, setShown] = React.useState(PAGE);
+  const [loading, setLoading] = React.useState(false);
+  const [sent, setSent] = React.useState<Message[]>([]);
+  const [draft, setDraft] = React.useState("");
+  const messages = [...HISTORY.slice(-shown), ...sent];
+
+  const loadOlder = () => {
+    if (shown >= HISTORY.length) return;
+    setLoading(true);
+    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
+    return new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        setShown((count) => Math.min(count + PAGE, HISTORY.length));
+        setLoading(false);
+        resolve();
+      }, 800);
+    });
+  };
+
+  const send = (event: React.FormEvent) => {
+    event.preventDefault();
+    const text = draft.trim();
+    if (!text) return;
+    setSent((list) => [
+      ...list,
+      { id: HISTORY.length + list.length + 1, author: "Поддержка", text },
+    ]);
+    setDraft("");
+  };
+
+  return (
+    <Card.Root className={styles.chat}>
+      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
+        ООО «Гранит» · счёт № 4821
+      </Typography>
+      <ScrollContainer
+        anchor="end"
+        onReachStart={loadOlder}
+        tabIndex={0}
+        aria-label="Сообщения"
+        className={styles.messages}
+      >
+        {loading ? <Skeleton lines={2} className={styles.older} /> : null}
+        <ul className={styles.list}>
+          {messages.map((message) => (
+            <li key={message.id}>
+              <Typography as="span" variant="caption" tone="muted">
+                {message.author}
+              </Typography>
+              <Typography variant="body-m">{message.text}</Typography>
+            </li>
+          ))}
+        </ul>
+      </ScrollContainer>
+      <form className={styles.composer} onSubmit={send}>
+        <Input.Root className={styles.composerField}>
+          <Input.Wrapper>
+            <Input.Field
+              aria-label="Сообщение"
+              placeholder="Ответить клиенту"
+              value={draft}
+              onValueChange={setDraft}
+            />
+          </Input.Wrapper>
+        </Input.Root>
+        <Button.Root type="submit" aria-label="Отправить">
+          <Button.Icon>
+            <Icon name="action.send" />
+          </Button.Icon>
+        </Button.Root>
+      </form>
+    </Card.Root>
+  );
+}

package/src/components/scroll-container/examples/edges.tsx

@@ -0,0 +1,43 @@
+/** Hidden edges fade over any background, take a soft shadow on a filled surface, or stay plain — `edges`. */
+import { Card, ScrollContainer, type ScrollContainerEdges, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const EVENTS = [
+  "Заказ № 1040 оплачен",
+  "Счёт № 318 выставлен",
+  "Заказ № 1041 передан в доставку",
+  "Возврат по заказу № 1032 одобрен",
+  "Заказ № 1042 оплачен",
+  "Акт № 77 подписан",
+  "Заказ № 1043 отменён клиентом",
+  "Счёт № 319 оплачен",
+  "Заказ № 1044 собран на складе",
+  "Заказ № 1045 оплачен",
+];
+const EDGES: ScrollContainerEdges[] = ["fade", "shadow", "none"];
+
+export default function ScrollContainerEdgesExample() {
+  return (
+    <div className={styles.layout}>
+      {EDGES.map((edges) => (
+        <Card.Root key={edges} role="region" className={styles.card} aria-label={`Лента: ${edges}`}>
+          <Typography as="h3" variant="title-s" className={styles.cardTitle}>
+            {edges}
+          </Typography>
+          <ScrollContainer edges={edges}>
+            <ul className={styles.list}>
+              {EVENTS.map((event) => (
+                <li key={event}>
+                  <Typography as="span" variant="body-m" tone="secondary">
+                    {event}
+                  </Typography>
+                </li>
+              ))}
+            </ul>
+          </ScrollContainer>
+        </Card.Root>
+      ))}
+    </div>
+  );
+}

package/src/components/scroll-container/examples/examples.module.css

@@ -39,6 +39,35 @@
   border-bottom: 0;
 }
 
+/* chat.tsx: title, the scrolling messages and the composer in a fixed-height card. */
+.chat {
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  width: min(100%, calc(var(--prime-space-24) * 4));
+  height: calc(var(--prime-space-24) * 3.5);
+}
+
+.messages {
+  padding-top: var(--prime-space-2);
+}
+
+/* Older messages loading: lines in the messages' geometry, at the top where they will appear. */
+.older {
+  margin: 0 var(--prime-space-4) var(--prime-space-2);
+}
+
+.composer {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-2);
+  padding: var(--prime-space-3) var(--prime-space-4);
+}
+
+.composerField {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
 .strip {
   display: flex;
   gap: var(--prime-space-2);
@@ -64,3 +93,47 @@
   background: var(--prime-color-fill-subtle);
   font-variant-numeric: tabular-nums;
 }
+
+/* lock.tsx: the title and the review button in one row above the queue. */
+.cardHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--prime-space-3);
+  padding: var(--prime-space-3) var(--prime-space-4);
+}
+
+/* snap.tsx: a row of fixed-width cards; the padding keeps the edge cards' rings unclipped. */
+.tiles {
+  display: flex;
+  gap: var(--prime-space-3);
+  width: max-content;
+  margin: 0;
+  padding: var(--prime-space-1);
+  list-style: none;
+}
+
+.tile {
+  inline-size: calc(var(--prime-space-24) * 2);
+  scroll-snap-align: start;
+}
+
+/* auto-scroll.tsx: draggable task rows. */
+.sortable {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-1);
+  margin: 0;
+  padding: 0 var(--prime-space-3) var(--prime-space-3);
+  list-style: none;
+}
+
+.task {
+  display: flex;
+  align-items: center;
+  min-height: var(--prime-space-10);
+  padding-inline: var(--prime-space-3);
+  border-radius: var(--prime-radius-m);
+  background: var(--prime-color-fill-muted);
+  cursor: grab;
+}

package/src/components/scroll-container/examples/lock.tsx

@@ -0,0 +1,49 @@
+/** While an order is opened for review, the queue behind it holds still: no wheel, touch, key or drag moves it — `lock`. */
+import { Button, Card, ScrollContainer, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ORDERS = [
+  "Заказ № 1040 · ООО «Северный склад»",
+  "Заказ № 1041 · АО «Тепломонтаж»",
+  "Заказ № 1042 · ИП Кравцова",
+  "Заказ № 1043 · ООО «Логистик Плюс»",
+  "Заказ № 1044 · ООО «Альфа Ритейл»",
+  "Заказ № 1045 · АО «ПромСнаб»",
+  "Заказ № 1046 · ООО «Городские аптеки»",
+  "Заказ № 1047 · ООО «Вектор»",
+];
+
+export default function ScrollContainerLockExample() {
+  const [reviewing, setReviewing] = React.useState(false);
+
+  return (
+    <Card.Root role="region" className={styles.card} aria-label="Очередь заказов">
+      <div className={styles.cardHeader}>
+        <Typography as="h3" variant="title-s">
+          Очередь заказов
+        </Typography>
+        <Button.Root
+          variant="soft"
+          tone="neutral"
+          pressed={reviewing}
+          onClick={() => setReviewing((current) => !current)}
+        >
+          {reviewing ? "Закрыть проверку" : "Проверить заказ"}
+        </Button.Root>
+      </div>
+      <ScrollContainer lock={reviewing}>
+        <ul className={styles.list}>
+          {ORDERS.map((order) => (
+            <li key={order}>
+              <Typography as="span" variant="body-m">
+                {order}
+              </Typography>
+            </li>
+          ))}
+        </ul>
+      </ScrollContainer>
+    </Card.Root>
+  );
+}

package/src/components/scroll-container/examples/scrollbar.tsx

@@ -0,0 +1,52 @@
+/** The kit's quiet thin bar on a list and no bar on a strip of chips, where the faded edges show the overflow — `scrollbar`. */
+import { Badge, Card, ScrollContainer, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const CLIENTS = [
+  "ООО «Северный склад»",
+  "АО «Тепломонтаж»",
+  "ИП Кравцова",
+  "ООО «Логистик Плюс»",
+  "ООО «Альфа Ритейл»",
+  "АО «ПромСнаб»",
+  "ООО «Городские аптеки»",
+  "ООО «Вектор»",
+  "ИП Сафонов",
+];
+const TAGS = ["Новые", "В работе", "Ждут оплаты", "Отгружены", "Возвраты", "Архив", "Черновики"];
+
+export default function ScrollContainerScrollbarExample() {
+  return (
+    <div className={styles.layout}>
+      <Card.Root role="region" className={styles.card} aria-label="Клиенты">
+        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
+          thin
+        </Typography>
+        <ScrollContainer>
+          <ul className={styles.list}>
+            {CLIENTS.map((client) => (
+              <li key={client}>
+                <Typography as="span" variant="body-m">
+                  {client}
+                </Typography>
+              </li>
+            ))}
+          </ul>
+        </ScrollContainer>
+      </Card.Root>
+      <Card.Root role="region" className={styles.card} aria-label="Фильтры заказов">
+        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
+          hidden
+        </Typography>
+        <ScrollContainer axis="horizontal" scrollbar="hidden">
+          <div className={styles.strip}>
+            {TAGS.map((tag) => (
+              <Badge.Root key={tag}>{tag}</Badge.Root>
+            ))}
+          </div>
+        </ScrollContainer>
+      </Card.Root>
+    </div>
+  );
+}

package/src/components/scroll-container/examples/snap.tsx

@@ -0,0 +1,36 @@
+/** A strip of warehouse cards that comes to rest on a card's start, scrolled by touch, a trackpad or the mouse wheel — `snap`, `axis`. */
+import { Card, ScrollContainer, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+const WAREHOUSES = [
+  { id: "msk", city: "Москва", stock: "12 480 позиций" },
+  { id: "spb", city: "Санкт-Петербург", stock: "8 215 позиций" },
+  { id: "kzn", city: "Казань", stock: "4 030 позиций" },
+  { id: "ekb", city: "Екатеринбург", stock: "5 772 позиции" },
+  { id: "nsk", city: "Новосибирск", stock: "3 118 позиций" },
+  { id: "krd", city: "Краснодар", stock: "2 904 позиции" },
+];
+
+export default function ScrollContainerSnapExample() {
+  return (
+    <ScrollContainer axis="horizontal" snap scrollbar="hidden" aria-label="Склады">
+      <ul className={styles.tiles}>
+        {WAREHOUSES.map((warehouse) => (
+          <li key={warehouse.id} className={styles.tile}>
+            <Card.Root>
+              <Card.Body>
+                <Typography as="h3" variant="title-s">
+                  {warehouse.city}
+                </Typography>
+                <Typography as="p" variant="caption" tone="muted">
+                  {warehouse.stock}
+                </Typography>
+              </Card.Body>
+            </Card.Root>
+          </li>
+        ))}
+      </ul>
+    </ScrollContainer>
+  );
+}

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

@@ -24,20 +24,22 @@ import { SegmentedControl } from "prime-ui-kit";
 
 ## Anatomy
 ```
-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, 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)
+SegmentedControl.Root                 field frame: label row · track · support row (hint | error)
+└─ (track)                            role="radiogroup"; sliding thumb, scrolling row, keyboard
+   └─ SegmentedControl.Item           role="radio" button, one option
+      ├─ SegmentedControl.Icon        icon slot (optional; icon-only → square segment)
+      ├─ 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)
 ```
+The root is a field root: `className`, `ref` and the native attributes land on the frame, which hugs the track unless `fullWidth`; `id`, `onKeyDown` and the `aria-label*` / `aria-describedby` names land on the radiogroup. Without `label`, `hint` and `error` the frame shows only the track.
 
 ## 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.
+`ref` → `HTMLDivElement` (the field frame). The field: label · `<div role="radiogroup">` track with the sliding thumb, keyboard handling and a horizontally scrolling `ScrollContainer` row · support row. The frame hugs the track unless `fullWidth`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -47,8 +49,17 @@ SegmentedControl.Root                 role="radiogroup"; track + sliding thumb,
 | `disabled` | `boolean` | `false` | Disables the whole group. |
 | `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. |
+| `label` | `ReactNode` | — | Heading above the control; names the `radiogroup` (`aria-labelledby`). Without it give the root an `aria-label`. |
+| `required` | `boolean` | `false` | Red `*` after the label and `aria-required` on the `radiogroup`. |
+| `optional` | `boolean` | `false` | Muted marker after the label (`labels.optional`). |
+| `hint` | `ReactNode` | — | Help text under the control (`aria-describedby`). Hidden while `error` is shown. |
+| `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
+| `invalid` | `boolean` | `false` | Danger inset ring, `aria-invalid` and `data-invalid` on the `radiogroup`; the control shakes once when an error arrives. |
+| `reserveSupportRow` | `boolean` | `false` | Always render the support row, so an appearing error does not shift the layout. |
+| `id` | `string` | — | Id of the `radiogroup` element (generated when omitted); hint id is `<id>-hint`, error id `<id>-error`. |
+| `labels` | `Partial<SegmentedControlLabels>` | — | Built-in strings, see Labels. |
 | `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. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange" \| "dir">` | — | `aria-label` / `aria-labelledby` / `aria-describedby` and `onKeyDown` go to the radiogroup (a prevented key skips the kit's handling); `className`, `data-*` and the other attributes to the field frame `<div>`. |
 
 ### SegmentedControl.Item
 `ref` → `HTMLButtonElement`. One option, a `<button role="radio">` with roving `tabIndex`; plain text is wrapped in a `SegmentedControl.Label`.
@@ -136,13 +147,16 @@ Colour all items or none; do not give an item and its Count the same hue; prefer
 | 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 |
+| group disabled | root `disabled` | track `data-disabled="true"`, `aria-disabled`; every segment disabled; label and hint dimmed |
+| invalid | `invalid` or non-empty `error` | track `data-invalid="true"` + `aria-invalid="true"`, inset danger ring on the track; the error replaces the hint; the track shakes once when an error arrives |
+| required | `required` | red `*` after the label, `aria-required="true"` on the radiogroup |
 | 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 |
 
 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
+- In a form it is a field: label → track `label-gap`, track → support row `hint-gap`, field → field `--prime-space-5` like every field.
 - 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; keep every control at one size.
 - Caption under a group: gap `--prime-space-2`.
@@ -159,7 +173,8 @@ Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `dat
 | `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.
+- The track is `role="radiogroup"`, named by `label` (`aria-labelledby`); without a label give the root `aria-label`. `aria-disabled` when disabled.
+- Hint and error are linked through `aria-describedby`; an error sets `aria-invalid="true"`, `required` sets `aria-required="true"`.
 - 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` (and a Tooltip for sighted users).
@@ -167,7 +182,9 @@ Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `dat
 ### Labels
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-No `labels`.
+| Key | Default | Used for |
+|---|---|---|
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
 
 ## Examples
 | Example | Shows |
@@ -181,15 +198,17 @@ No `labels`.
 | [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`. |
+| [in-form.tsx](examples/in-form.tsx) | An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen — `label`, `hint`, `required`, `error`. |
 
 ## Mistakes
 - Using it as tabs that show different panels → use `Tabs`.
-- No `aria-label` on the root → the radiogroup has no name.
+- No `label` and no `aria-label` → the radiogroup has no name.
+- A `Label` + `Hint` pair wired by hand with `aria-labelledby` in a form → `label`, `hint`, `error` on the root.
 - Icon-only item without `aria-label` → add `aria-label` and wrap in `Tooltip`.
 - `variant="…"` or `tone="…"` on the root → there is none; use `color` on items for hue.
 - Different `size` than neighbouring controls in a toolbar → use the same tier so heights match.
 - Expecting segments to wrap on narrow screens → they scroll; use `fullWidth` or fewer options.
 
 ## Related
-- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Badge](../badge/COMPONENT.md)
+- **Built from:** [ScrollContainer](../scroll-container/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`)
 - **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/examples.module.css

@@ -7,3 +7,14 @@
   align-items: flex-start;
   gap: var(--prime-space-3);
 }
+
+/* in-form.tsx: field → field and fields → action at the form rhythm; controls keep their width. */
+.form {
+  display: grid;
+  justify-items: start;
+  gap: var(--prime-space-5);
+}
+
+.form > :last-child {
+  margin-block-start: var(--prime-space-3);
+}

package/src/components/segmented-control/examples/in-form.tsx

@@ -0,0 +1,42 @@
+/** An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen — `label`, `hint`, `required`, `error`. */
+import { Button, Input, SegmentedControl } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SegmentedControlInFormExample() {
+  const [owner, setOwner] = React.useState("");
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(owner ? undefined : "Выберите, чей это расход");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Input.Root label="Сумма, ₽" required>
+        <Input.Wrapper>
+          <Input.Field name="amount" inputMode="decimal" defaultValue="12 400" />
+          <Input.InlineAffix side="end">₽</Input.InlineAffix>
+        </Input.Wrapper>
+      </Input.Root>
+      <SegmentedControl.Root
+        label="Чей расход"
+        hint="Личные расходы не попадают в отчёт компании"
+        required
+        error={error}
+        value={owner}
+        onValueChange={(next) => {
+          setOwner(next);
+          setError(undefined);
+        }}
+      >
+        <SegmentedControl.Item value="company">Компании</SegmentedControl.Item>
+        <SegmentedControl.Item value="project">Проекта</SegmentedControl.Item>
+        <SegmentedControl.Item value="personal">Личный</SegmentedControl.Item>
+      </SegmentedControl.Root>
+      <Button.Root type="submit">Сохранить расход</Button.Root>
+    </form>
+  );
+}