prime-ui-kit 0.9.0 → 0.9.2

package/src/components/tag-select/examples/many-tags.tsx

@@ -0,0 +1,20 @@
+/** More tags than fit: at rest one row with «+N», focused every tag on up to three wrapped rows that scroll — `defaultValue`. */
+import { TagSelect, type TagSelectOption } from "prime-ui-kit";
+
+const CITIES: TagSelectOption[] = [
+  { value: "msk", label: "Москва", color: "blue" },
+  { value: "spb", label: "Санкт-Петербург", color: "teal" },
+  { value: "kzn", label: "Казань", color: "green" },
+  { value: "ekb", label: "Екатеринбург", color: "orange" },
+  { value: "nsk", label: "Новосибирск", color: "purple" },
+  { value: "sam", label: "Самара", color: "pink" },
+  { value: "ufa", label: "Уфа", color: "sky" },
+  { value: "krs", label: "Красноярск", color: "yellow" },
+  { value: "vvo", label: "Владивосток", color: "red" },
+];
+
+const PICKED = ["msk", "spb", "kzn", "ekb", "nsk", "sam", "ufa"];
+
+export default function TagSelectManyTagsExample() {
+  return <TagSelect label="Города доставки" options={CITIES} defaultValue={PICKED} />;
+}

package/src/components/tag-select/examples/overview.tsx

@@ -0,0 +1,21 @@
+/** A labelled tag field: focus opens the list, typing filters it, picked tags become chips — `label`, `options`. */
+import { TagSelect, type TagSelectOption } from "prime-ui-kit";
+
+const OPTIONS: TagSelectOption[] = [
+  { value: "design", label: "Дизайн", color: "purple" },
+  { value: "backend", label: "Бэкенд", color: "blue" },
+  { value: "frontend", label: "Фронтенд", color: "sky" },
+  { value: "urgent", label: "Срочно", color: "red" },
+];
+
+export default function TagSelectOverviewExample() {
+  return (
+    <TagSelect
+      label="Метки задачи"
+      options={OPTIONS}
+      defaultValue={["design"]}
+      placeholder="Добавить метку"
+      labels={{ panelHint: "Выберите метку" }}
+    />
+  );
+}

package/src/components/tag-select/examples/sizes.tsx

@@ -1,11 +1,9 @@
-/** All five size tiers with two selected tags; chips are one tier below the field. Use it to match the field to the other controls of a form. */
+/** Every size tier with two picked tags; chips sit one tier below the field — `size`. */
 import { TagSelect, type TagSelectOption } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
-const options: TagSelectOption[] = [
+const OPTIONS: TagSelectOption[] = [
   { value: "design", label: "Дизайн", color: "purple" },
   { value: "backend", label: "Бэкенд", color: "blue" },
   { value: "urgent", label: "Срочно", color: "red" },
@@ -13,18 +11,17 @@ const options: TagSelectOption[] = [
 
 export default function TagSelectSizesExample() {
   return (
-    <div className={styles.column}>
+    <>
       {SIZES.map((size) => (
-        <TagSelect.Root
+        <TagSelect
           key={size}
           size={size}
-          options={options}
+          label={size}
+          options={OPTIONS}
           defaultValue={["design", "backend"]}
-          label={`Метки, ${size}`}
           labels={{ panelHint: "Выберите метку" }}
-          placeholder="Добавить метку"
         />
       ))}
-    </div>
+    </>
   );
 }

package/src/components/tag-select/examples/states.tsx

@@ -1,49 +1,24 @@
-/** Empty, overflowing into «+N», error and disabled fields, with a disabled option in the list. Use it as a reference for every field state. */
+/** A default field next to a disabled and an invalid one, with a disabled option in the list — `disabled`, `invalid`. */
 import { TagSelect, type TagSelectOption } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-const options: TagSelectOption[] = [
+const OPTIONS: TagSelectOption[] = [
   { value: "msk", label: "Москва", color: "blue" },
   { value: "spb", label: "Санкт-Петербург", color: "teal" },
   { value: "kzn", label: "Казань", color: "green" },
-  { value: "ekb", label: "Екатеринбург", color: "orange" },
-  { value: "nsk", label: "Новосибирск", color: "purple" },
-  { value: "sam", label: "Самара", color: "pink" },
-  { value: "ufa", label: "Уфа", color: "sky" },
-  { value: "krs", label: "Красноярск", color: "yellow" },
-  { value: "vvo", label: "Владивосток", color: "red" },
-  { value: "kgd", label: "Калининград", disabled: true },
+  { value: "kgd", label: "Калининград — склад закрыт", disabled: true },
 ];
 
-const LABELS = { panelHint: "Выберите город" };
-
 export default function TagSelectStatesExample() {
   return (
-    <div className={styles.grid}>
-      <TagSelect.Root
-        label="Пусто"
-        hint="Длинный список прокручивается, «Калининград» недоступен"
-        options={options}
-        labels={LABELS}
-        placeholder="Добавить город"
-      />
-      <TagSelect.Root
-        label="Переполнение"
-        hint="В покое — одна строка и «+N»; в фокусе видны все"
-        options={options}
-        labels={LABELS}
-        defaultValue={["msk", "spb", "kzn", "ekb", "nsk"]}
-      />
-      <TagSelect.Root
-        label="Ошибка"
-        required
-        error="Добавьте хотя бы один город"
-        options={options}
-        labels={LABELS}
+    <>
+      <TagSelect
+        label="default"
+        options={OPTIONS}
+        defaultValue={["msk"]}
         placeholder="Добавить город"
       />
-      <TagSelect.Root label="Отключено" options={options} defaultValue={["msk", "kzn"]} disabled />
-    </div>
+      <TagSelect label="disabled" options={OPTIONS} defaultValue={["msk", "kzn"]} disabled />
+      <TagSelect label="invalid" options={OPTIONS} invalid placeholder="Добавить город" />
+    </>
   );
 }

package/src/components/tag-select/examples/validation.tsx

@@ -0,0 +1,35 @@
+/** Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. */
+import { TagSelect, type TagSelectOption } from "prime-ui-kit";
+
+const CITIES: TagSelectOption[] = [
+  { value: "msk", label: "Москва", color: "blue" },
+  { value: "spb", label: "Санкт-Петербург", color: "teal" },
+  { value: "kzn", label: "Казань", color: "green" },
+];
+
+const PEOPLE: TagSelectOption[] = [
+  { value: "anna", label: "Анна Смирнова" },
+  { value: "igor", label: "Игорь Петров" },
+];
+
+export default function TagSelectValidationExample() {
+  return (
+    <>
+      <TagSelect
+        label="Города доставки"
+        required
+        hint="Склады, откуда отправляем заказы"
+        options={CITIES}
+        defaultValue={["msk"]}
+      />
+      <TagSelect
+        label="Регионы"
+        required
+        error="Добавьте хотя бы один регион"
+        options={CITIES}
+        placeholder="Добавить регион"
+      />
+      <TagSelect label="Наблюдатели" optional options={PEOPLE} placeholder="Добавить человека" />
+    </>
+  );
+}

package/src/components/textarea/COMPONENT.md

@@ -1,6 +1,7 @@
 # Textarea
 
 **Category:** inputs
+**Kind:** field
 
 > Multi-line text field with label, hint, error and a character counter; grows with its content by default.
 
@@ -23,38 +24,43 @@ import { Textarea } from "prime-ui-kit";
 Textarea.Root       label row → field box with the native <textarea> → support row (hint | error · counter)
 Textarea.Counter    goes into Textarea.Root `counter` (right side of the support row)
 ```
-Unlike Input, Textarea has no Wrapper/Field parts: `Textarea.Root` renders the whole field and takes native `<textarea>` props directly.
+Unlike Input, Textarea has no Wrapper / Field parts: `Textarea.Root` renders the whole field and takes native `<textarea>` props directly.
 
 ## API
 
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 ### Textarea.Root
-`forwardRef` to `HTMLTextAreaElement`. + native `<textarea>` props except `size` and `children` (`value`, `defaultValue`, `onChange`, `placeholder`, `rows`, `maxLength`, `name`, `disabled`, `readOnly`, `required`, `aria-label`, …); they go to the `<textarea>`.
+`ref` → `HTMLTextAreaElement`. Renders the label row, the field box with the native `<textarea>` and the support row. Field-root rule for a leaf without a `Field` part: `className` goes to the field frame; `id`, `ref` and the native `<textarea>` props to the textarea.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier for text, padding, radius, label and hint. One line of text sits exactly like an Input of the same size. |
-| `invalid` | `boolean` | `false` | Danger inset ring, `aria-invalid`. A non-empty `error` implies it. |
-| `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on the field box (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier for text, padding, radius, label and hint. One line of text sits exactly like an Input of the same size. Without it the tier of its host (LoginForm, Popover, a panel with a size), else `m`. |
 | `label` | `ReactNode` | — | Label above the field (`<label htmlFor>`). Without it, set `aria-label`. |
-| `required` | `boolean` | — | Native `required` on the textarea and a red `*` after the label. |
+| `required` | `boolean` | — | Native `required` on the textarea and a red `*` after the label (`aria-hidden`). |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
-| `hint` | `ReactNode` | — | Help text under the field; hidden while `error` is shown. |
+| `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 box, `aria-invalid` on the textarea. A non-empty `error` implies it. |
+| `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on the field box (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
 | `counter` | `ReactNode` | — | Right side of the support row, usually `<Textarea.Counter />`. |
-| `reserveSupportRow` | `boolean` | `false` | Always render the support row, so an appearing error does not shift the layout. |
-| `autoResize` | `boolean` | `true` | Height follows the content (minimum three lines, no scrollbar, no resize handle). `false` → fixed height (minimum three lines or `rows`) with native vertical resize. |
+| `reserveSupportRow` | `boolean` | `false` | Always render the support row (min height = hint line height), so an appearing error does not shift the layout. |
+| `autoResize` | `boolean` | `true` | Height follows the content (minimum three lines, no scrollbar, no resize handle). `false` → fixed height (three lines or `rows`) with native vertical resize. |
 | `onValueChange` | `(value: string) => void` | — | Called with the new string; native `onChange` still fires first. |
-| `labels` | `Partial<TextareaLabels>` | see Accessibility | Built-in strings. |
-| `id` | `string` | auto (`useId`) | Id of the textarea; hint id `${id}-hint`, error id `${id}-error`. |
+| `id` | `string` | — | Id of the `<textarea>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
 | `aria-describedby` | `string` | — | Merged before the hint/error ids. |
-| `className` | `string` | — | Class on the visible field box (not on the outer wrapper). |
+| `labels` | `Partial<TextareaLabels>` | — | Built-in strings, see Labels. |
+| `className` | `string` | — | Class on the field frame `<div>` (label, field box, support row), as on every field root. |
+| `…rest` | `Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "size" \| "children">` | — | `value`, `defaultValue`, `onChange`, `placeholder`, `rows`, `maxLength`, `name`, `disabled`, `readOnly`, `aria-label`… |
 
 ### Textarea.Counter
+`ref` → `HTMLSpanElement`. Character counter for the support row; shows `14/280` 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"`). Add `maxLength` on the root for a hard limit. |
-| `className` | `string` | — | Class on the `<span>`. |
+| `…rest` | `Omit<HTMLAttributes<HTMLSpanElement>, "children">` | — | `className` and the other attributes of the `<span>`. |
 
 ## Variants
 Textarea has no `variant` or `tone`: one field treatment (fill, no visible border).
@@ -76,8 +82,8 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 | `true` | Box grows line by line with the text, minimum three lines, no resize handle | Comments, descriptions — most cases | yes |
 | `false` | Fixed height (`rows` or three lines), native vertical resize handle, scrolls inside | Very long text where the page must not grow, or a fixed layout | |
 
-### Visual flags
-| Flag | Looks like | Use when | Default |
+### Flags
+| Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `focusRing={false}` | No focus ring; focus fill and caret remain | A single composer field where focus is obvious | `true` |
 | `reserveSupportRow` | Empty support row of hint height | Live validation, fields side by side | `false` |
@@ -103,57 +109,51 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 `data-size` is set on the outer wrapper and the field box. Controlled: `value` + `onValueChange` (or `onChange`). Uncontrolled: `defaultValue`.
 
 ## Layout & spacing
-- Label → field: tier `label-gap` (`--prime-space-1` on xs/s, `--prime-space-2` on m–xl); field → support row: `--prime-space-1`.
+- Label → field: tier `label-gap` (`--prime-space-1` on xs/s, `--prime-space-2` on m–xl); field → support row: tier `hint-gap`.
 - Field → field in a form: `--prime-space-5`; group → actions: `--prime-space-8`.
 - Width is always `100%` of the parent; set the width with the layout column.
 - Long words wrap (`overflow-wrap: anywhere`), so the field never overflows horizontally.
 
 ## Accessibility
+
+### Keyboard
+| Key | Action |
+|---|---|
+| `Tab` | Focuses the field; Enter inserts a line break instead of submitting the form. |
+
+### ARIA
 - `label` renders `<label htmlFor>` bound to the textarea; without it set `aria-label`. A placeholder never replaces the label.
-- Hint and error are linked via `aria-describedby`; the error replaces the hint.
-- The field box is a `<div>`, not a `<label>`, so counter and hint never leak into the accessible name.
+- Hint and error are linked via `aria-describedby`; the error replaces the hint and sets `aria-invalid="true"`.
+- The field box is a `<div>`, not a `<label>`, so counter and hint never leak into the accessible name; clicking its padding focuses the textarea.
 - `Textarea.Counter` shows `12/280` visually and announces `labels.counter` (`aria-live="polite"`).
 
-| `labels` key | Default | Used for |
-|---|---|---|
-| `optional` | `"необязательно"` | Marker after the label when `optional` |
-| `counter` | `"{current} из {max} символов"` | Screen-reader text of `Textarea.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 |
 |---|---|---|
-| [sizes.tsx](examples/sizes.tsx) | `xs`…`xl` with label and hint | Picking a size |
-| [with-label.tsx](examples/with-label.tsx) | `required`, `optional`, custom `labels.optional`, `aria-label` without a visible label | Marking fields |
-| [hint-and-error.tsx](examples/hint-and-error.tsx) | Hint vs error replacing it | Validation messages |
-| [states.tsx](examples/states.tsx) | Empty, filled, error, read-only, disabled | Checking all states |
-| [surfaces.tsx](examples/surfaces.tsx) | Fill following the surface | Fields on canvas vs in cards/overlays |
-| [controlled.tsx](examples/controlled.tsx) | `value` + `onValueChange` with `Textarea.Counter` | Length-limited text |
-| [reserved-support-row.tsx](examples/reserved-support-row.tsx) | With and without `reserveSupportRow` while toggling an error | Validation without layout shift |
-| [height-and-limits.tsx](examples/height-and-limits.tsx) | `autoResize` vs `autoResize={false}`, soft vs hard limit | Choosing height and limit behaviour |
-| [in-form.tsx](examples/in-form.tsx) | Support request form in a card with Input, Textarea and actions | Form reference |
+| `optional` | `"необязательно"` | Marker after the label when `optional`. |
+| `counter` | `"{current} из {max} символов"` | Screen-reader text of `Textarea.Counter`; `{current}` and `{max}` are replaced. |
 
-```tsx
-import { Textarea } from "prime-ui-kit";
-
-export function CommentField() {
-  return (
-    <Textarea.Root
-      label="Комментарий"
-      optional
-      placeholder="Пожелания к заказу"
-      hint="Курьер увидит этот текст."
-    />
-  );
-}
-```
+## Examples
+| Example | Shows |
+|---|---|
+| [overview.tsx](examples/overview.tsx) | A labelled multi-line field with a hint; the height follows the text — `label`, `hint`. |
+| [sizes.tsx](examples/sizes.tsx) | Every size tier; text, padding, label and hint follow the tier — `size`. |
+| [states.tsx](examples/states.tsx) | A default field next to a read-only and a disabled one — `readOnly`, `disabled`. |
+| [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`. |
+| [auto-resize.tsx](examples/auto-resize.tsx) | A field that grows with its text next to a fixed one with a resize handle — `autoResize`, `rows`. |
+| [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single reply composer where the caret and the lighter fill show focus — `focusRing`. |
+| [controlled.tsx](examples/controlled.tsx) | The parent owns the text; the counter follows it and `maxLength` stops extra input — `value`, `onValueChange`, `Textarea.Counter`, `maxLength`. |
+| [in-form.tsx](examples/in-form.tsx) | Support request form: the description is checked on submit and its error does not shift the form — `required`, `error`, `reserveSupportRow`. |
 
 ## Mistakes
 - `<Textarea.Root><textarea /></Textarea.Root>` → Textarea.Root renders the textarea itself; pass native props to the root.
 - Counter without `maxLength` when the limit is hard → add `maxLength` so extra input is blocked.
-- `className` expected on the outer wrapper → it lands on the field box; wrap the root in your own element for layout.
+- `className` expected on the field box → it lands on the field frame (label, box, support row), as on every field root; size the box through the frame's layout.
 - Expecting a fixed height with the default `autoResize` → set `autoResize={false}` (and `rows`) for a fixed box with a resize handle.
 - Only a placeholder, no label → add `label` or `aria-label`.
 
 ## Related
-- [Input](../input/COMPONENT.md) — same field contract for one line.
-- [Label](../label/COMPONENT.md), [Hint](../hint/COMPONENT.md) — rendered by `label`, `hint`, `error`.
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`)
+- **See also:** [Input](../input/COMPONENT.md) — the same field contract for one line; [CodeBlock](../code-block/COMPONENT.md)

package/src/components/textarea/examples/auto-resize.tsx

@@ -0,0 +1,21 @@
+/** A field that grows with its text next to a fixed one with a resize handle — `autoResize`, `rows`. */
+import { Textarea } from "prime-ui-kit";
+
+export default function TextareaAutoResizeExample() {
+  return (
+    <>
+      <Textarea.Root
+        label="Описание товара"
+        placeholder="Состав, размеры, уход"
+        hint="Высота растёт вместе с текстом, минимум три строки"
+      />
+      <Textarea.Root
+        label="Условия договора"
+        autoResize={false}
+        rows={5}
+        placeholder="Текст условий"
+        hint="Фиксированная высота, угол можно потянуть"
+      />
+    </>
+  );
+}

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

@@ -1,25 +1,21 @@
-/** Controlled `value` + `onValueChange` with the text length passed to `Textarea.Counter`. Use it for length-limited text such as reviews. */
+/** The parent owns the text; the counter follows it and `maxLength` stops extra input — `value`, `onValueChange`, `Textarea.Counter`, `maxLength`. */
 import { Textarea } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
-const MAX = 280;
+const LIMIT = 280;
 
 export default function TextareaControlledExample() {
-  const [text, setText] = React.useState("Курьер приехал раньше срока, всё целое.");
+  const [review, setReview] = React.useState("Курьер приехал раньше срока, всё целое.");
 
   return (
-    <div className={styles.column}>
-      <Textarea.Root
-        label="Отзыв о доставке"
-        value={text}
-        onValueChange={setText}
-        maxLength={MAX}
-        placeholder="Что понравилось, что нет"
-        hint="Отзыв появится после модерации."
-        counter={<Textarea.Counter current={text.length} max={MAX} />}
-      />
-    </div>
+    <Textarea.Root
+      label="Отзыв о доставке"
+      placeholder="Что понравилось, что нет"
+      hint="Отзыв появится после модерации"
+      value={review}
+      onValueChange={setReview}
+      maxLength={LIMIT}
+      counter={<Textarea.Counter current={review.length} max={LIMIT} />}
+    />
   );
 }

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

@@ -1,60 +1,27 @@
-/* Layout helpers for the Textarea examples. Semantic tokens only. */
+/* Layout of the Textarea scenarios: semantic tokens only. */
 
-.sizesGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 2)), 1fr));
-  align-items: start;
-  gap: var(--prime-space-5);
-  width: 100%;
-}
-
-.column {
-  display: grid;
-  gap: var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
-.pair {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--prime-panel-min-width)), 1fr));
-  align-items: start;
-  gap: var(--prime-space-5);
-  width: 100%;
-  max-width: var(--prime-modal-width-m);
-}
-
-.cell {
-  display: grid;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* Demo block below the field that shows whether the layout shifts. */
-.marker {
-  padding: var(--prime-space-2) var(--prime-space-3);
-  border-radius: var(--prime-radius-s);
-  background: var(--prime-color-fill-subtle);
+/* in-form.tsx: field → field 20, group → actions 32 (foundation §1). */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-modal-width-m));
 }
 
-.card {
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
+.formHeader {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-1);
 }
 
-.form {
-  display: grid;
+.formFields {
+  display: flex;
+  flex-direction: column;
   gap: var(--prime-space-5);
 }
 
-.actions {
+.formActions {
   display: flex;
-  flex-wrap: wrap;
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }
-
-/* Fills its surface tile like Input does, so no stray gap remains on the right. */
-.surfaceField {
-  width: 100%;
-}

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

@@ -1,60 +1,64 @@
-/** A support request form in a card: Input and Textarea of size `m`, required and optional fields, counter and an error after submit. Use it as a form reference. */
-import { Button, Card, Input, Textarea } from "prime-ui-kit";
+/** Support request form: the description is checked on submit and its error does not shift the form — `required`, `error`, `reserveSupportRow`. */
+import { Button, Input, Textarea, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const MAX = 1000;
+const LIMIT = 1000;
+const MIN_LENGTH = 20;
 
 export default function TextareaInFormExample() {
   const [message, setMessage] = React.useState("");
-  const [sent, setSent] = React.useState(false);
-  const tooShort = sent && message.trim().length < 20;
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setError(
+      message.trim().length < MIN_LENGTH ? "Опишите проблему хотя бы в 20 символах" : undefined,
+    );
+  };
 
   return (
-    <Card.Root variant="panel" className={styles.card}>
-      <Card.SectionHeader>
-        <Card.SectionTitle>Обращение в поддержку</Card.SectionTitle>
-      </Card.SectionHeader>
-      <Card.Body>
-        <form
-          className={styles.form}
-          onSubmit={(e) => {
-            e.preventDefault();
-            setSent(true);
-          }}
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <div className={styles.formHeader}>
+        <Typography as="h3" variant="title-m">
+          Обращение в поддержку
+        </Typography>
+        <Typography as="p" variant="body-s" tone="secondary">
+          Ответим в течение рабочего дня.
+        </Typography>
+      </div>
+      <div className={styles.formFields}>
+        <Input.Root label="Тема" required>
+          <Input.Wrapper>
+            <Input.Field name="subject" defaultValue="Не проходит оплата счёта" />
+          </Input.Wrapper>
+        </Input.Root>
+        <Textarea.Root
+          label="Опишите проблему"
+          name="message"
+          required
+          reserveSupportRow
+          placeholder="Что вы делали и что пошло не так"
+          hint="Не указывайте пароли и данные карты"
+          error={error}
+          value={message}
+          maxLength={LIMIT}
+          onValueChange={setMessage}
+          counter={<Textarea.Counter current={message.length} max={LIMIT} />}
+        />
+      </div>
+      <div className={styles.formActions}>
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => setError(undefined)}
         >
-          <Input.Root label="Тема" required>
-            <Input.Wrapper>
-              <Input.Field placeholder="Не проходит оплата" />
-            </Input.Wrapper>
-          </Input.Root>
-          <Textarea.Root
-            label="Опишите проблему"
-            required
-            reserveSupportRow
-            value={message}
-            maxLength={MAX}
-            onValueChange={setMessage}
-            placeholder="Что вы делали и что пошло не так"
-            hint="Не указывайте пароли и данные карты."
-            error={tooShort ? "Нужно хотя бы 20 символов." : undefined}
-            counter={<Textarea.Counter current={message.length} max={MAX} />}
-          />
-          <Textarea.Root label="Шаги воспроизведения" optional placeholder="1. Открыть корзину…" />
-          <div className={styles.actions}>
-            <Button.Root
-              variant="outline"
-              tone="neutral"
-              type="button"
-              onClick={() => setSent(false)}
-            >
-              Отмена
-            </Button.Root>
-            <Button.Root type="submit">Отправить</Button.Root>
-          </div>
-        </form>
-      </Card.Body>
-    </Card.Root>
+          Отменить
+        </Button.Root>
+        <Button.Root type="submit">Отправить</Button.Root>
+      </div>
+    </form>
   );
 }

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

@@ -0,0 +1,12 @@
+/** A labelled multi-line field with a hint; the height follows the text — `label`, `hint`. */
+import { Textarea } from "prime-ui-kit";
+
+export default function TextareaOverviewExample() {
+  return (
+    <Textarea.Root
+      label="Комментарий к заказу"
+      placeholder="Пожелания по доставке и упаковке"
+      hint="Курьер увидит этот текст"
+    />
+  );
+}

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

@@ -1,21 +1,20 @@
-/** Five tiers side by side: text, padding, label and hint come from the size. Pick the size that matches the neighbouring fields. */
+/** Every size tier; text, padding, label and hint follow the tier — `size`. */
 import { Textarea } from "prime-ui-kit";
-import styles from "./examples.module.css";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function TextareaSizesExample() {
   return (
-    <div className={styles.sizesGrid}>
+    <>
       {SIZES.map((size) => (
         <Textarea.Root
           key={size}
           size={size}
-          label={`Размер ${size}`}
-          placeholder="Комментарий"
-          hint={`Подсказка яруса ${size}`}
+          label={size}
+          placeholder="Комментарий к заказу"
+          hint="Курьер увидит этот текст"
         />
       ))}
-    </div>
+    </>
   );
 }