prime-ui-kit 0.9.0 → 0.9.2

package/src/components/input/COMPONENT.md

@@ -1,8 +1,9 @@
 # Input
 
 **Category:** inputs
+**Kind:** field
 
-> Single-line text field with label, hint, error and slots for icons, affixes, a badge, a clear button and a counter.
+> Single-line text field with label, hint, error and slots for icons, affixes, a clear button and a counter.
 
 ## When to use
 - Any single-line value: name, e-mail, phone, search query, amount, URL, code.
@@ -31,94 +32,96 @@ Input.Root            label row, field body, support row; provides size / invali
    ├─ Input.Icon           decorative icon (start | end)
    ├─ Input.InlineAffix    muted text next to the value (start | end)
    ├─ Input.Field          native <input>
-   ├─ Input.Badge          soft palette badge at the trailing edge
-   └─ Input.ClearButton    trailing clear action
+   └─ Input.ClearButton    trailing clear action: a full-height segment at the end edge
 Input.Counter         goes into Input.Root `counter` (support row, right side)
 ```
-The trailing side has a fixed CSS `order`, independent of JSX order: value · end inline affix · badge · end icon · clear button · end affix. All `side="start"` slots share one order before the value, so among them the JSX order decides — write them as affix, icon, inline affix.
+The trailing side has a fixed CSS `order`, independent of JSX order: value · end inline affix · end icon · clear button · end affix. All `side="start"` slots share one order before the value, so among them the JSX order decides — write them as affix, icon, inline affix.
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Input.Root
-No ref (renders a `<div>`). Does not forward native props.
+`ref` → `HTMLDivElement` (the field frame). Size, label, support row and the context for `Wrapper` and `Field`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier for height, padding, radius, text, label and hint. Also provided to nested controls via the control-size context. |
-| `invalid` | `boolean` | `false` | Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it. |
-| `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on `Input.Wrapper` (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier for height, padding, radius, text, label and hint. Without it the field takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. Also provided to nested controls via the control-size context. |
 | `label` | `ReactNode` | — | Label above the field, rendered as `<label htmlFor>`. Without it, give `Input.Field` an `aria-label`. |
 | `required` | `boolean` | `false` | Red `*` after the label (`aria-hidden`) and native `required` on `Input.Field`. |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
+| `invalid` | `boolean` | `false` | Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it. |
+| `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on `Input.Wrapper` (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
 | `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter />`. |
 | `reserveSupportRow` | `boolean` | `false` | Always render the support row (min height = hint line height), so an appearing error does not shift the layout. |
-| `id` | `string` | auto (`useId`) | Id of the `<input>`; hint id is `${id}-hint`, error id is `${id}-error`. |
-| `labels` | `Partial<InputLabels>` | see Accessibility | Built-in strings. |
+| `id` | `string` | — | Id of the `<input>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
+| `labels` | `Partial<InputLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — (required) | Usually `Input.Wrapper`. |
-| `className` | `string` | — | Class on the root `<div>`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "id" \| "children" \| "defaultValue" \| "defaultChecked" \| "onChange">` | — | `className`, `data-*` and the other attributes of the field frame `<div>` (field-root rule: `className`, `ref` and the rest → frame, `id` → control). |
 
 ### Input.Wrapper
+`ref` → `HTMLDivElement`. The visible field: fill, hover, focus ring, invalid ring; `data-size` and `data-invalid` come from the root.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | Field and slots. |
-| `className` | `string` | — | Class on the field `<div>`. |
+| `children` | `ReactNode` | — (required) | `Field` and the slots: `Icon`, `Affix`, `InlineAffix`, `ClearButton`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the `<div>`. |
 
 ### Input.Field
-`forwardRef` to `HTMLInputElement`. + native `<input>` props except `size` (`value`, `defaultValue`, `onChange`, `type`, `disabled`, `readOnly`, `maxLength`, `placeholder`, …).
+`ref` → `HTMLInputElement`. The native `<input>`; `id`, `aria-invalid` and `aria-describedby` come from the root.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `onValueChange` | `(value: string) => void` | — | Called with the new string; native `onChange` still fires first. |
 | `aria-describedby` | `string` | — | Merged with the hint/error ids from the root. |
-| `required` | `boolean` | from `Input.Root` | Explicit value overrides the root's `required`. |
-
-`id`, `aria-invalid` and `aria-describedby` are set from the root context.
+| `required` | `boolean` | — | Overrides the root's `required` for the native input. |
+| `…rest` | `Omit<InputHTMLAttributes<HTMLInputElement>, "size" \| "id">` | — | `value`, `defaultValue`, `onChange`, `type`, `disabled`, `readOnly`, `maxLength`, `placeholder`… |
 
 ### Input.Icon
+`ref` → `HTMLSpanElement`. Decorative icon (`aria-hidden`), centered between the edge and the text.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `side` | `"start" \| "end"` | — (required) | Side of the value. |
 | `children` | `ReactNode` | — (required) | An icon; kit icons without an explicit `size` take the field tier. |
-| `className` | `string` | — | Class on the `<span>` (`aria-hidden`). |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the `<span>`. |
 
 ### Input.Affix
+`ref` → `HTMLDivElement`. Tinted section flush with the edge (`aria-hidden`); the wrapper drops its padding there.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `side` | `"start" \| "end"` | — (required) | Section sits flush with that edge; the wrapper drops its padding there. |
+| `side` | `"start" \| "end"` | — (required) | Edge the section sits on. |
 | `children` | `ReactNode` | — (required) | Static text: protocol, domain, country code. |
-| `className` | `string` | — | Class on the `<div>` (`aria-hidden`). |
+| `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the `<div>`. |
 
 ### Input.InlineAffix
+`ref` → `HTMLSpanElement`. Muted unit next to the value (`aria-hidden`).
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `side` | `"start" \| "end"` | — (required) | Side of the value. |
 | `children` | `ReactNode` | — (required) | Short unit: `₽`, `%`, `кг`. |
-| `className` | `string` | — | Class on the `<span>` (`aria-hidden`). |
-
-### Input.Badge
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `color` | `"gray" \| "blue" \| "green" \| "orange" \| "red" \| "yellow" \| "purple" \| "sky" \| "pink" \| "teal"` | `"gray"` | Palette hue of the soft badge. |
-| `children` | `ReactNode` | — (required) | Short status text. |
-| `className` | `string` | — | Class on the badge. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the `<span>`. |
 
 ### Input.ClearButton
-`forwardRef` to `HTMLButtonElement`. + native `<button>` props except `type`, `children`, `aria-label`.
+`ref` → `HTMLButtonElement`. A full-height clear segment at the end edge, named by `labels.clear`, with `aria-controls` on the input. Render it only while the field has a value.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `onClick` | `MouseEventHandler<HTMLButtonElement>` | — | Clear the value here. Afterwards focus returns to the input unless `event.preventDefault()` was called. |
-
-Renders `type="button"`, `aria-label={labels.clear}`, `aria-controls` = input id, close icon. Render it only when the field has a value.
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" \| "children" \| "aria-label">` | — | The other button attributes. |
 
 ### Input.Counter
+`ref` → `HTMLSpanElement`. Character counter for the support row; shows `14/40` and announces `labels.counter`.
+
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `current` | `number` | — (required) | Current length. |
 | `max` | `number` | — (required) | Limit; `current > max` turns the counter danger (`data-invalid="true"`). |
-| `className` | `string` | — | Class on the `<span>`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the `<span>`. |
 
 ## Variants
 Input has no `variant` or `tone`: there is one field treatment (fill, no visible border).
@@ -132,7 +135,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | `l` | 40 high, text 16/24, padX 12, radius 10, label 14/20, hint 13/20 | Spacious forms, onboarding | |
 | `xl` | 48 high, text 16/24, padX 16, radius 12, label 14/20, hint 13/20 | Hero search, landing forms | |
 
-**Sizes:** a field of size T lines up with Button, Select, Datepicker trigger, SegmentedControl and Tabs of size T in one row (same height and radius) — see [control-alignment.tsx](examples/control-alignment.tsx). Label and hint always use the same tier as the field.
+**Sizes:** a field of size T lines up with Button, Select, Datepicker trigger, SegmentedControl and Tabs of size T in one row (same height and radius). Label and hint always use the same tier as the field.
 
 ### side (Input.Icon / Input.Affix / Input.InlineAffix)
 | Value | Looks like | Use when | Default |
@@ -140,34 +143,20 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | `start` | Before the value. Icon: muted, centered between edge and text (edge → icon = icon → text = field padX). Affix: tinted `fill-subtle` section flush with the edge. Inline affix: muted text before the value | Search icon, `https://`, currency sign before the number | — (required) |
 | `end` | After the value. Same treatments at the trailing side; numeric fields with an end inline affix align the value to the end | Lock icon on read-only, domain suffix, units `₽ % кг` | — |
 
-### color (Input.Badge)
+### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `gray` | Soft badge on a stronger neutral wash (`fill-strong`) so it stays visible on the field fill | Neutral status ("Черновик") | yes |
-| `blue` | Soft blue badge | "Новое", informational marks | |
-| `green` | Soft green badge | "Проверен", verified values | |
-| `orange` | Soft orange badge | "Не заполнено", needs attention | |
-| `red` | Soft red badge | Rejected or blocked value | |
-| `yellow` | Soft yellow badge | Pending | |
-| `purple` | Soft purple badge | Category marks | |
-| `sky` | Soft sky badge | Category marks | |
-| `pink` | Soft pink badge | Category marks | |
-| `teal` | Soft teal badge | Category marks | |
-
-### Visual flags
-| Flag | Looks like | Use when | Default |
-|---|---|---|---|
 | `focusRing={false}` | No focus ring; the field still switches to the focus fill, caret visible | A single search field where focus is obvious | `true` |
 | `reserveSupportRow` | Empty support row of hint height under the field | Fields validated on the fly; neighbouring fields in one grid row | `false` |
 | `required` / `optional` | Red `*` / muted «необязательно» after the label | Mark the minority: required when most are optional, optional when most are required | `false` |
 
 **Combinations**
 - Recommended: `Input.Icon side="start"` + `Input.ClearButton` for search; `Input.Affix` on both sides for URLs; `Input.InlineAffix side="end"` with `inputMode="decimal"` for amounts.
-- Allowed but rare: `Input.Badge` together with an end icon (badge sits before the icon).
+- Allowed but rare: an end icon together with the clear button (the icon sits before the button).
 - Pointless: `required` and `optional` together; `hint` and `error` together (the error replaces the hint); `invalid` without any message in a form where the user needs to know what is wrong.
 - Forbidden: `focusRing={false}` on regular form fields (WCAG 2.4.7).
 
-**Hierarchy:** keep one size for all fields of a form; mark required/optional consistently; use the badge only for a status of the value, not for decoration.
+**Hierarchy:** keep one size for all fields of a form; mark required/optional consistently; a status of the value goes into the hint, not into the field.
 
 ## States
 | State | Driven by | DOM |
@@ -190,50 +179,44 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - Field → field in a form: `--prime-space-5` (20); group → actions: `--prime-space-8` (32).
 - `Input.Root` is `width: 100%` and `min-width: 0`; there is no `fullWidth` prop — the width comes from the parent (grid column, flex item, capped wrapper).
 - Use `reserveSupportRow` on fields that share a grid row so their bottoms stay aligned when only one shows an error.
-- The value truncates with an ellipsis before badges, icons and affixes; the field height never changes.
+- The value truncates with an ellipsis before icons and affixes; the field height never changes.
 
 ## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Focuses the field, then the clear button when it is shown. |
+| `Enter` · `Space` | On the clear button: clears the value and returns focus to the field. |
+
+### ARIA
 - `label` renders a `<label htmlFor>` bound to the input. Without `label`, set `aria-label` on `Input.Field`. A placeholder never replaces the label.
-- Hint and error are linked through `aria-describedby`; the error replaces the hint.
+- Hint and error are linked through `aria-describedby`; the error replaces the hint and sets `aria-invalid="true"`.
 - `Input.Icon`, `Input.Affix`, `Input.InlineAffix` are `aria-hidden`: put the meaning in the label (e.g. "Сумма, ₽").
-- `Input.ClearButton` is a real button with an accessible name, `aria-controls` the input, and returns focus to the input.
+- `Input.ClearButton` is a real button named by `labels.clear`, with `aria-controls` on the input.
 - `Input.Counter` shows `14/40` visually and announces `labels.counter` through `aria-live="polite"`.
 
-| `labels` key | Default | Used for |
-|---|---|---|
-| `optional` | `"необязательно"` | Marker after the label when `optional` |
-| `clear` | `"Очистить"` | Accessible name of `Input.ClearButton` |
-| `counter` | `"{current} из {max} символов"` | Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced |
+### Labels
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
-## Examples
-| File | Scenario | When to use this pattern |
+| Key | Default | Used for |
 |---|---|---|
-| [anatomy.tsx](examples/anatomy.tsx) | Label, `*`, optional, placeholder, hint, error and counter on every size | Reference for assembling a field |
-| [control-alignment.tsx](examples/control-alignment.tsx) | Input, Select, Datepicker and Button of the same size in one row | Filter bars, toolbars |
-| [sizes.tsx](examples/sizes.tsx) | The same field on `xs`…`xl` | Picking a size |
-| [states.tsx](examples/states.tsx) | Empty, filled, disabled, read-only, error with text, `invalid` only | Checking all states |
-| [surfaces.tsx](examples/surfaces.tsx) | A plain field whose fill follows the surface | Fields on canvas vs inside cards/overlays |
-| [controlled.tsx](examples/controlled.tsx) | Controlled value, `Input.ClearButton`, `Input.Counter` with an error over the limit | Search and length-limited text |
-| [search-without-focus-ring.tsx](examples/search-without-focus-ring.tsx) | `focusRing={false}` search field | A single search field where focus is obvious |
-| [icons-and-affixes.tsx](examples/icons-and-affixes.tsx) | `Input.Icon`, `Input.Affix` on both sides, `Input.InlineAffix` | E-mail, URL, amount fields |
-| [with-badge.tsx](examples/with-badge.tsx) | `Input.Badge`, `Select.Badge`, `Datepicker.Badge` with palette colors | Marking a value as verified / new / missing |
-| [in-form.tsx](examples/in-form.tsx) | Company details form with required, optional, error and actions | Form spacing reference |
-| [reserved-support-row.tsx](examples/reserved-support-row.tsx) | Toggling an error with `reserveSupportRow`, custom `labels.optional`, explicit `id` | Live validation without layout shift |
-| [full-width.tsx](examples/full-width.tsx) | Capped vs full-width parent | Controlling field width from the layout |
-
-```tsx
-import { Input } from "prime-ui-kit";
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
+| `clear` | `"Очистить"` | Accessible name of `Input.ClearButton`. |
+| `counter` | `"{current} из {max} символов"` | Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced. |
 
-export function EmailField() {
-  return (
-    <Input.Root label="Email" required hint="Пришлём ссылку для входа">
-      <Input.Wrapper>
-        <Input.Field type="email" placeholder="name@company.ru" />
-      </Input.Wrapper>
-    </Input.Root>
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A labelled field with a hint under it — `label`, `hint`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier; the label and the hint follow the field tier — `size`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled and a read-only one — `disabled`, `readOnly`. |
+| [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint, an error and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
+| [with-icon.tsx](examples/with-icon.tsx) | A decorative icon at either end of the value — `Input.Icon`, `side`. |
+| [affixes.tsx](examples/affixes.tsx) | A fixed prefix and suffix flush with the edges and a unit next to the value — `Input.Affix`, `Input.InlineAffix`. |
+| [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single search field where the caret and the lighter fill show focus — `focusRing`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the value: a clear button and a character counter follow it — `value`, `onValueChange`, `Input.ClearButton`, `Input.Counter`. |
+| [in-form.tsx](examples/in-form.tsx) | Company details form: required fields checked on submit, neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. |
 
 ## Mistakes
 - `<Input.Field placeholder="Email" />` without a label → add `label` on `Input.Root` or `aria-label` on the field.
@@ -245,6 +228,5 @@ export function EmailField() {
 - `tone="danger"` / `error` as a boolean → use `invalid` or an `error` message.
 
 ## Related
-- [Label](../label/COMPONENT.md), [Hint](../hint/COMPONENT.md) — the parts Input renders for `label`, `hint`, `error`.
-- [Textarea](../textarea/COMPONENT.md), [Select](../select/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md) — fields with the same contract.
-- [Badge](../badge/COMPONENT.md) — what `Input.Badge` renders.
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), `Icon` (`Input.ClearButton`)
+- **See also:** [Textarea](../textarea/COMPONENT.md), [Select](../select/COMPONENT.md), [Datepicker](../datepicker/COMPONENT.md), [TagSelect](../tag-select/COMPONENT.md) — fields with the same contract

package/src/components/input/examples/affixes.tsx

@@ -0,0 +1,22 @@
+/** A fixed prefix and suffix flush with the edges and a unit next to the value — `Input.Affix`, `Input.InlineAffix`. */
+import { Input } from "prime-ui-kit";
+
+export default function InputAffixesExample() {
+  return (
+    <>
+      <Input.Root label="Адрес магазина" hint="Адрес: https://moy-magazin.shop.ru">
+        <Input.Wrapper>
+          <Input.Affix side="start">https://</Input.Affix>
+          <Input.Field placeholder="moy-magazin" />
+          <Input.Affix side="end">.shop.ru</Input.Affix>
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="Сумма платежа, ₽">
+        <Input.Wrapper>
+          <Input.Field placeholder="0,00" inputMode="decimal" />
+          <Input.InlineAffix side="end">₽</Input.InlineAffix>
+        </Input.Wrapper>
+      </Input.Root>
+    </>
+  );
+}

package/src/components/input/examples/controlled.tsx

@@ -1,26 +1,25 @@
-/** Controlled value with a clear button and a character counter in the support row. Use it for search fields and length-limited text. */
+/** The parent owns the value: a clear button and a character counter follow it — `value`, `onValueChange`, `Input.ClearButton`, `Input.Counter`. */
 import { Icon, Input } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
-const MAX = 60;
+const TITLE_LIMIT = 60;
 
 export default function InputControlledExample() {
   const [query, setQuery] = React.useState("");
   const [title, setTitle] = React.useState("Еженедельный отчёт по продажам");
 
   return (
-    <div className={styles.stack}>
+    <>
       <Input.Root label="Поиск по каталогу">
         <Input.Wrapper>
           <Input.Icon side="start">
             <Icon name="action.search" tone="secondary" />
           </Input.Icon>
           <Input.Field
+            type="search"
             placeholder="Название или артикул"
             value={query}
-            onChange={(e) => setQuery(e.target.value)}
+            onValueChange={setQuery}
           />
           {query ? <Input.ClearButton onClick={() => setQuery("")} /> : null}
         </Input.Wrapper>
@@ -28,13 +27,13 @@ export default function InputControlledExample() {
       <Input.Root
         label="Название отчёта"
         hint="Видно всем участникам"
-        error={title.length > MAX ? "Слишком длинное название" : undefined}
-        counter={<Input.Counter current={title.length} max={MAX} />}
+        error={title.length > TITLE_LIMIT ? "Сократите название до 60 символов" : undefined}
+        counter={<Input.Counter current={title.length} max={TITLE_LIMIT} />}
       >
         <Input.Wrapper>
-          <Input.Field value={title} onChange={(e) => setTitle(e.target.value)} />
+          <Input.Field value={title} onValueChange={setTitle} />
         </Input.Wrapper>
       </Input.Root>
-    </div>
+    </>
   );
 }

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

@@ -1,108 +1,6 @@
-/* Layout helpers for the Input examples. Semantic tokens only. */
+/* Layout of the Input scenarios: semantic tokens only. */
 
-/* Vertical list of fields (field → field). */
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-  width: 100%;
-  min-width: 0;
-}
-
-/* ---- anatomy.tsx: rows are scenarios, columns are sizes xs…xl ---- */
-.anatomyScroller {
-  width: 100%;
-  min-width: 0;
-  overflow-x: auto;
-}
-
-.anatomyGrid {
-  display: grid;
-  grid-template-columns: repeat(
-      5,
-      minmax(calc(var(--prime-panel-min-width) - var(--prime-space-8)), 1fr)
-    );
-  align-items: start;
-  column-gap: var(--prime-space-5);
-  row-gap: var(--prime-space-4);
-}
-
-/* One scenario: its heading and the five cells share the outer columns (subgrid). */
-.anatomyRow {
-  grid-column: 1 / -1;
-  display: grid;
-  grid-template-columns: subgrid;
-  align-items: start;
-  row-gap: var(--prime-space-2);
-}
-
-.anatomyRowHead {
-  grid-column: 1 / -1;
-  padding-top: var(--prime-space-2);
-  border-top: var(--prime-border-width) solid var(--prime-color-border-subtle);
-}
-
-/* ---- control-alignment.tsx: one row of controls per size ---- */
-.alignStack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-5);
-  width: 100%;
-  min-width: 0;
-}
-
-.alignRow {
-  display: grid;
-  grid-template-columns: var(--prime-space-8) repeat(4, minmax(0, max-content));
-  align-items: center;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-.alignField {
-  width: calc(var(--prime-panel-min-width) - var(--prime-space-4));
-}
-
-@media (max-width: 767px) {
-  .alignRow {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .alignSize {
-    grid-column: 1 / -1;
-  }
-
-  .alignField {
-    width: auto;
-  }
-}
-
-/* ---- sizes.tsx: five sizes in one row, field bottoms aligned ---- */
-.sizesRow {
-  display: grid;
-  grid-template-columns: repeat(
-      auto-fit,
-      minmax(calc(var(--prime-panel-min-width) - var(--prime-space-12)), 1fr)
-    );
-  align-items: end;
-  gap: var(--prime-space-4);
-  width: 100%;
-}
-
-/* ---- states.tsx ---- */
-.statesGrid {
-  display: grid;
-  grid-template-columns: repeat(
-      auto-fill,
-      minmax(calc(var(--prime-panel-min-width) + var(--prime-space-8)), 1fr)
-    );
-  align-items: start;
-  column-gap: var(--prime-space-6);
-  row-gap: var(--prime-space-5);
-  width: 100%;
-}
-
-/* ---- in-form.tsx: field → field 20, group → actions 32 (foundation §1) ---- */
+/* in-form.tsx: field → field 20, group → actions 32 (foundation §1). */
 .form {
   display: flex;
   flex-direction: column;
@@ -119,6 +17,7 @@
 .formFields {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
+  align-items: start;
   gap: var(--prime-space-5) var(--prime-space-4);
 }
 
@@ -137,15 +36,3 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
-
-/* ---- full-width.tsx ---- */
-.widthRoot {
-  display: grid;
-  gap: var(--prime-space-6);
-  width: 100%;
-}
-
-.widthNarrow {
-  width: 100%;
-  max-width: calc(var(--prime-panel-min-width) + var(--prime-space-8));
-}

package/src/components/input/examples/in-form.tsx

@@ -1,47 +1,68 @@
-/** A settings form in a card: required and optional fields, an error that does not shift the row, actions at the end. Use it as the spacing reference for forms (field → field 20, group → actions 32). */
+/** Company details form: required fields checked on submit, neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. */
 import { Button, Input, Typography } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
+type Errors = { name?: string; inn?: string };
+
+function validate(form: FormData): Errors {
+  const errors: Errors = {};
+  if (!String(form.get("name") ?? "").trim()) errors.name = "Укажите название организации";
+  if (!/^\d{10}$/.test(String(form.get("inn") ?? ""))) errors.inn = "ИНН состоит из 10 цифр";
+  return errors;
+}
+
 export default function InputInFormExample() {
+  const [errors, setErrors] = React.useState<Errors>({});
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setErrors(validate(new FormData(event.currentTarget)));
+  };
+
   return (
-    <form className={styles.form} onSubmit={(e) => e.preventDefault()}>
+    <form className={styles.form} noValidate onSubmit={submit}>
       <div className={styles.formHeader}>
-        <Typography.Root as="h3" variant="title-m">
+        <Typography as="h3" variant="title-m">
           Реквизиты компании
-        </Typography.Root>
-        <Typography.Root as="p" variant="body-s" tone="secondary">
+        </Typography>
+        <Typography as="p" variant="body-s" tone="secondary">
           Используются в счетах и закрывающих документах.
-        </Typography.Root>
+        </Typography>
       </div>
       <div className={styles.formFields}>
         <div className={styles.formWide}>
-          <Input.Root label="Название организации" required>
+          <Input.Root label="Название организации" required error={errors.name}>
             <Input.Wrapper>
-              <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
+              <Input.Field
+                name="name"
+                defaultValue="ООО «Северный ветер»"
+                autoComplete="organization"
+              />
             </Input.Wrapper>
           </Input.Root>
         </div>
-        <Input.Root label="ИНН" required error="ИНН состоит из 10 цифр" reserveSupportRow>
+        <Input.Root label="ИНН" required error={errors.inn} reserveSupportRow>
           <Input.Wrapper>
-            <Input.Field defaultValue="78123" inputMode="numeric" />
+            <Input.Field name="inn" defaultValue="78123" inputMode="numeric" />
           </Input.Wrapper>
         </Input.Root>
         <Input.Root label="КПП" optional reserveSupportRow>
           <Input.Wrapper>
-            <Input.Field placeholder="9 цифр" inputMode="numeric" />
+            <Input.Field name="kpp" placeholder="9 цифр" inputMode="numeric" />
           </Input.Wrapper>
         </Input.Root>
         <div className={styles.formWide}>
-          <Input.Root label="Email для счетов" hint="Сюда придут счета и акты">
+          <Input.Root label="Почта для счетов" hint="Сюда придут счета и акты">
             <Input.Wrapper>
-              <Input.Field type="email" placeholder="buh@company.ru" />
+              <Input.Field name="email" type="email" placeholder="buh@company.ru" />
             </Input.Wrapper>
           </Input.Root>
         </div>
       </div>
       <div className={styles.formActions}>
-        <Button.Root variant="ghost" tone="neutral" type="reset">
+        <Button.Root variant="ghost" tone="neutral" type="reset" onClick={() => setErrors({})}>
           Отменить
         </Button.Root>
         <Button.Root type="submit">Сохранить</Button.Root>

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

@@ -0,0 +1,12 @@
+/** A labelled field with a hint under it — `label`, `hint`. */
+import { Input } from "prime-ui-kit";
+
+export default function InputOverviewExample() {
+  return (
+    <Input.Root label="Рабочая почта" hint="Пришлём ссылку для входа">
+      <Input.Wrapper>
+        <Input.Field type="email" name="email" placeholder="name@company.ru" autoComplete="email" />
+      </Input.Wrapper>
+    </Input.Root>
+  );
+}

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

@@ -1,23 +1,18 @@
-/** The same field on every size: height, padding, text and icon come from the tier. Pick the size that matches the other controls in the row. */
-import { Icon, Input } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Every size tier; the label and the hint follow the field tier — `size`. */
+import { Input } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function InputSizesExample() {
   return (
-    <div className={styles.sizesRow}>
+    <>
       {SIZES.map((size) => (
-        <Input.Root key={size} size={size} label={`size="${size}"`}>
+        <Input.Root key={size} size={size} label={size} hint="Пришлём ссылку для входа">
           <Input.Wrapper>
-            <Input.Icon side="start">
-              <Icon name="field.email" tone="secondary" />
-            </Input.Icon>
-            <Input.Field type="email" placeholder="Почта" />
+            <Input.Field type="email" placeholder="name@company.ru" />
           </Input.Wrapper>
         </Input.Root>
       ))}
-    </div>
+    </>
   );
 }