prime-ui-kit 0.9.3 → 0.11.0

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

@@ -0,0 +1,82 @@
+/** A project plan: work streams with phases, progress and a launch milestone that move and stretch by pointer or keyboard — `getRowBars`, `onBarChange`. */
+import { addDays, startOfToday, startOfWeek } from "date-fns";
+import { Gantt, type GanttBar, type GanttDates, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+type Stream = { id: string; name: string; bars: GanttBar[] };
+
+const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
+const at = (days: number) => addDays(WEEK, days);
+
+const PLAN: Stream[] = [
+  {
+    id: "research",
+    name: "Исследование",
+    bars: [
+      { id: "interviews", label: "Интервью с клиентами", start: at(-14), end: at(-3), progress: 1 },
+    ],
+  },
+  {
+    id: "design",
+    name: "Дизайн",
+    bars: [
+      { id: "prototype", label: "Прототип кабинета", start: at(-7), end: at(5), progress: 0.7 },
+      { id: "ui-kit", label: "Макеты", start: at(5), end: at(19), color: "purple" },
+    ],
+  },
+  {
+    id: "backend",
+    name: "Бэкенд",
+    bars: [
+      {
+        id: "billing-api",
+        label: "API счетов",
+        start: at(0),
+        end: at(18),
+        color: "teal",
+        progress: 0.3,
+      },
+    ],
+  },
+  {
+    id: "frontend",
+    name: "Фронтенд",
+    bars: [{ id: "cabinet", label: "Личный кабинет", start: at(12), end: at(33), color: "orange" }],
+  },
+  {
+    id: "launch",
+    name: "Запуск",
+    bars: [
+      { id: "qa", label: "Тестирование", start: at(30), end: at(40), color: "green" },
+      { id: "release", label: "Релиз 2.0", start: at(42), end: at(42), tone: "accent" },
+    ],
+  },
+];
+
+export default function GanttOverviewExample() {
+  const [plan, setPlan] = React.useState(PLAN);
+
+  const moveBar = (dates: GanttDates, bar: GanttBar) =>
+    setPlan((streams) =>
+      streams.map((stream) => ({
+        ...stream,
+        bars: stream.bars.map((item) => (item.id === bar.id ? { ...item, ...dates } : item)),
+      })),
+    );
+
+  return (
+    <Gantt
+      aria-label="План проекта «Личный кабинет»"
+      rows={plan}
+      getRowKey={(stream) => stream.id}
+      getRowLabel={(stream) => stream.name}
+      getRowBars={(stream) => stream.bars}
+      onBarChange={moveBar}
+      toolbar={
+        <Typography as="h3" variant="title-s">
+          Личный кабинет 2.0
+        </Typography>
+      }
+    />
+  );
+}

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

@@ -0,0 +1,48 @@
+/** Every tier: one-lane rows from 28 to 52 px, bars, header and toolbar controls of the tier — `size`. */
+import { addDays, startOfToday, startOfWeek } from "date-fns";
+import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Room = { id: string; name: string; bars: GanttBar[] };
+
+const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
+const at = (days: number) => addDays(WEEK, days);
+
+const ROOMS: Room[] = [
+  {
+    id: "orion",
+    name: "Переговорная «Орион»",
+    bars: [{ id: "orion-1", label: "Стратсессия", start: at(1), end: at(3), color: "sky" }],
+  },
+  {
+    id: "vega",
+    name: "Переговорная «Вега»",
+    bars: [{ id: "vega-1", label: "Обучение продаж", start: at(2), end: at(5), color: "orange" }],
+  },
+];
+
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
+
+export default function GanttSizesExample() {
+  return (
+    <div className={styles.specimens}>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.specimen}>
+          <Gantt
+            aria-label={`Бронирования, ${size}`}
+            size={size}
+            defaultScale="day"
+            rows={ROOMS}
+            getRowKey={(room) => room.id}
+            getRowLabel={(room) => room.name}
+            getRowBars={(room) => room.bars}
+          />
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/gantt/examples/states.tsx

@@ -0,0 +1,68 @@
+/** Skeleton rows in the chart's geometry while it loads, an empty period and a plan you may only look at — `loading`, `empty`, `readOnly`. */
+import { addDays, startOfToday, startOfWeek } from "date-fns";
+import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Vehicle = { id: string; name: string; bars: GanttBar[] };
+
+const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
+const at = (days: number) => addDays(WEEK, days);
+
+const FLEET: Vehicle[] = [
+  {
+    id: "a123",
+    name: "ГАЗель А123ВС",
+    bars: [{ id: "a-1", label: "Рейс Тверь", start: at(1), end: at(4), color: "blue" }],
+  },
+  {
+    id: "k456",
+    name: "КАМАЗ К456ОР",
+    bars: [{ id: "k-1", label: "ТО", start: at(2), end: at(3), tone: "warning" }],
+  },
+];
+
+const NO_VEHICLES: Vehicle[] = [];
+
+const chartProps = {
+  defaultScale: "day",
+  getRowKey: (vehicle: Vehicle) => vehicle.id,
+  getRowLabel: (vehicle: Vehicle) => vehicle.name,
+  getRowBars: (vehicle: Vehicle) => vehicle.bars,
+} as const;
+
+export default function GanttStatesExample() {
+  return (
+    <div className={styles.specimens}>
+      <div className={styles.specimen}>
+        <Gantt aria-label="Загрузка машин" rows={NO_VEHICLES} loading {...chartProps} />
+        <Typography as="span" variant="caption" tone="muted">
+          loading
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <Gantt
+          aria-label="Рейсы машин"
+          rows={NO_VEHICLES}
+          empty="На этой неделе рейсов нет"
+          {...chartProps}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          empty
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <Gantt
+          aria-label="Рейсы машин, только просмотр"
+          rows={FLEET}
+          readOnly
+          onBarChange={() => undefined}
+          {...chartProps}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          readOnly
+        </Typography>
+      </div>
+    </div>
+  );
+}

package/src/components/gantt/examples/variants.tsx

@@ -0,0 +1,82 @@
+/** Bars colored by category with palette hues, and by status with tones that win over the hue — `color`, `tone`. */
+import { addDays, startOfToday, startOfWeek } from "date-fns";
+import { Gantt, type GanttBar, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Row = { id: string; name: string; bars: GanttBar[] };
+
+const WEEK = startOfWeek(startOfToday(), { weekStartsOn: 1 });
+const at = (days: number) => addDays(WEEK, days);
+
+const BY_PROJECT: Row[] = [
+  {
+    id: "crm",
+    name: "CRM для дилеров",
+    bars: [{ id: "crm-1", label: "Интеграция с 1С", start: at(-3), end: at(11), color: "blue" }],
+  },
+  {
+    id: "portal",
+    name: "Портал поставщиков",
+    bars: [{ id: "portal-1", label: "Каталог", start: at(2), end: at(16), color: "teal" }],
+  },
+  {
+    id: "mobile",
+    name: "Мобильное приложение",
+    bars: [{ id: "mobile-1", label: "Онбординг", start: at(-1), end: at(9), color: "pink" }],
+  },
+];
+
+const BY_STATUS: Row[] = [
+  {
+    id: "done",
+    name: "Готово",
+    bars: [{ id: "s-1", label: "Договор подписан", start: at(-10), end: at(-2), tone: "success" }],
+  },
+  {
+    id: "risk",
+    name: "Под угрозой",
+    bars: [{ id: "s-2", label: "Миграция данных", start: at(-2), end: at(12), tone: "warning" }],
+  },
+  {
+    id: "late",
+    name: "Просрочено",
+    bars: [{ id: "s-3", label: "Аудит доступа", start: at(-8), end: at(1), tone: "danger" }],
+  },
+  {
+    id: "info",
+    name: "На согласовании",
+    bars: [{ id: "s-4", label: "Смета", start: at(3), end: at(10), tone: "info" }],
+  },
+];
+
+export default function GanttVariantsExample() {
+  return (
+    <div className={styles.specimens}>
+      <div className={styles.specimen}>
+        <Gantt
+          aria-label="Проекты по направлениям"
+          rows={BY_PROJECT}
+          getRowKey={(row) => row.id}
+          getRowLabel={(row) => row.name}
+          getRowBars={(row) => row.bars}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          color
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <Gantt
+          aria-label="Задачи по статусу"
+          rows={BY_STATUS}
+          getRowKey={(row) => row.id}
+          getRowLabel={(row) => row.name}
+          getRowBars={(row) => row.bars}
+        />
+        <Typography as="span" variant="caption" tone="muted">
+          tone
+        </Typography>
+      </div>
+    </div>
+  );
+}

package/src/components/hint/COMPONENT.md

@@ -6,11 +6,11 @@
 > Help text or a validation error under a field.
 
 ## When to use
-- Under a control without `hint` / `error` props (SegmentedControl, Slider, a custom control) where you wire the ids yourself: format rules, limits, where the value comes from.
+- Under a custom control without `hint` / `error` props, or a hand-built field, where you wire the ids yourself: format rules, limits, where the value comes from.
 - As the error message of such a control (`invalid`), in the same slot as the hint.
 
 ## When not to use
-- Input, Textarea, Select, Checkbox and other fields with `hint` / `error` props → pass the props; they render Hint and link the ids ([Input](../input/COMPONENT.md), [Textarea](../textarea/COMPONENT.md), [Checkbox](../checkbox/COMPONENT.md)).
+- Input, Textarea, Select, Checkbox, Slider, SegmentedControl and other fields with `hint` / `error` props → pass the props; they render Hint and link the ids ([Input](../input/COMPONENT.md), [Textarea](../textarea/COMPONENT.md), [Checkbox](../checkbox/COMPONENT.md), [Slider](../slider/COMPONENT.md)).
 - The field name → use [Label](../label/COMPONENT.md).
 - A message about the whole page or form (success, warning) → use [Banner](../banner/COMPONENT.md) or a [Notification](../notification/COMPONENT.md).
 - An explanation on hover → use [Tooltip](../tooltip/COMPONENT.md).
@@ -96,7 +96,7 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Help text under a control without its own `hint` prop, linked to it by `id` and `aria-describedby`. |
+| [overview.tsx](examples/overview.tsx) | Help text under a hand-built field, linked to its input by `id` and `aria-describedby`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier, matching the field above: 12/16 for xs–m, 13/20 for l and xl — `size`. |
 | [states.tsx](examples/states.tsx) | Default help text next to an error and a hint under a disabled control — `invalid`, `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A leading icon centred on the first line, in the default and the error state — `Hint.Icon`. |

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

@@ -1,34 +1,22 @@
-/** Help text under a control without its own `hint` prop, linked to it by `id` and `aria-describedby`. */
-import { Hint, Label, SegmentedControl } from "prime-ui-kit";
+/** Help text under a hand-built field, linked to its input by `id` and `aria-describedby`. */
+import { Hint, Input, Label } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const PERIODS = [
-  { value: "day", label: "День" },
-  { value: "week", label: "Неделя" },
-  { value: "month", label: "Месяц" },
-];
-
 export default function HintOverviewExample() {
-  const labelId = React.useId();
+  const inputId = React.useId();
   const hintId = React.useId();
 
   return (
     <div className={styles.field}>
-      <Label.Root id={labelId}>Период отчёта</Label.Root>
-      <SegmentedControl.Root
-        defaultValue="week"
-        aria-labelledby={labelId}
-        aria-describedby={hintId}
-      >
-        {PERIODS.map((period) => (
-          <SegmentedControl.Item key={period.value} value={period.value}>
-            {period.label}
-          </SegmentedControl.Item>
-        ))}
-      </SegmentedControl.Root>
-      <Hint.Root id={hintId}>Отчёт пересчитывается каждую ночь в 03:00 по Москве.</Hint.Root>
+      <Label.Root htmlFor={inputId}>ИНН компании</Label.Root>
+      <Input.Root id={inputId}>
+        <Input.Wrapper>
+          <Input.Field inputMode="numeric" defaultValue="7707083893" aria-describedby={hintId} />
+        </Input.Wrapper>
+      </Input.Root>
+      <Hint.Root id={hintId}>10 цифр для юрлица, 12 — для ИП.</Hint.Root>
     </div>
   );
 }

package/src/components/input/COMPONENT.md

@@ -9,6 +9,8 @@
 - Any single-line value: name, e-mail, phone, search query, amount, URL, code.
 - Search fields with a leading icon and a clear button.
 - Values with a fixed prefix/suffix (`https://`, domain, `₽`, `%`).
+- Inline editing in a record card: each field saves itself (`onCommit`) on blur and Enter.
+- A value with actions beside it: copy, write, open a profile (`Input.CopyButton`, `Input.Action`); a password with a show toggle (`Input.RevealButton`).
 - As the reference field: Select, Datepicker, TagSelect and Textarea follow the same label / field / support-row contract.
 
 ## When not to use
@@ -32,10 +34,13 @@ 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.ClearButton    trailing clear action: a full-height segment at the end edge
+   ├─ Input.ClearButton    clear segment (kit-rendered)
+   ├─ Input.CopyButton     copy segment; the glyph morphs into a check (kit-rendered)
+   ├─ Input.RevealButton   show / hide a password segment, aria-pressed (kit-rendered)
+   └─ Input.Action         the consumer's named icon action with a tooltip (button or asChild link)
 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 · 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 · commit status (`onCommit`) · end icon · segments · end affix. The segments (`ClearButton`, `CopyButton`, `RevealButton`, `Action`) keep their JSX order among themselves and sit edge to edge, full field height, flush with the end edge. 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
 
@@ -57,8 +62,9 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `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` | — | Id of the `<input>` (auto-generated when omitted); hint id is `<id>-hint`, error id is `<id>-error`. |
-| `strength` | `boolean` | `false` | A password strength meter: a stepped `ProgressBar` (4 steps) under the field and the level word at the end of the support row — weak, easy, medium, hard (`labels.strengthWeak` … `strengthHard`), toned danger → warning → accent → success. Follows the value of `Input.Field`, controlled or not. For new-password fields. |
-| `getStrength` | `(value: string) => 0 \| 1 \| 2 \| 3 \| 4` | `getPasswordStrength` | Replaces the kit's estimate: every trait adds a point on its own, in any order — lowercase, uppercase, digits, symbols, 10+ and 14+ characters; 0–2 points weak, 3 easy, 4 medium, 5+ hard, and under 8 characters at most easy. Return 0 for empty, 1 weak … 4 hard. A hint for the person typing, not a security check. |
+| `strength` | `boolean` | `false` | A password strength meter for new-password fields: a stepped `ProgressBar` under the field and the level word (weak … hard) in the support row. Follows the value of `Input.Field`. |
+| `getStrength` | `(value: string) => 0 \| 1 \| 2 \| 3 \| 4` | `getPasswordStrength` | Replaces the kit's estimate of `strength`. Return 0 for empty, 1 weak … 4 hard. A hint for the person typing, not a security check. |
+| `onCommit` | `(value: string) => void \| Promise<void>` | — | Inline save: fires with a changed value on blur and Enter; Escape reverts. Return a Promise: the field shows a spinner and stays editable; a rejection restores the value — show why through `error`. |
 | `labels` | `Partial<InputLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — (required) | Usually `Input.Wrapper`. |
 | `…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). |
@@ -68,11 +74,11 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — (required) | `Field` and the slots: `Icon`, `Affix`, `InlineAffix`, `ClearButton`. |
+| `children` | `ReactNode` | — (required) | `Field` and the slots: `Icon`, `Affix`, `InlineAffix`; the end segments `ClearButton`, `CopyButton`, `RevealButton`, `Action` in source order. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the `<div>`. |
 
 ### Input.Field
-`ref` → `HTMLInputElement`. The native `<input>`; `id`, `aria-invalid` and `aria-describedby` come from the root.
+`ref` → `HTMLInputElement`. The native `<input>`; `id`, `aria-invalid` and `aria-describedby` come from the root, `disabled` also from a disabled `Fieldset` around it.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -116,6 +122,31 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `onClick` | `MouseEventHandler<HTMLButtonElement>` | — | Clear the value here. Afterwards focus returns to the input unless `event.preventDefault()` was called. |
 | `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" \| "children" \| "aria-label">` | — | The other button attributes. |
 
+### Input.CopyButton
+`ref` → `HTMLButtonElement`. Copies the field's value as a full-height segment at the end edge: the copy glyph morphs into a check, the name and tooltip switch to `labels.copied` (`labels.copyError` when the clipboard refuses), a polite live region repeats it.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `value` | `string` | `the field's value` | Text to copy instead of the field's current value. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" \| "children" \| "aria-label">` | — | `onClick`, `disabled` and the other button attributes. |
+
+### Input.RevealButton
+`ref` → `HTMLButtonElement`. A full-height toggle segment that shows a `type="password"` field as text and back (`aria-pressed`, named by `labels.reveal`); the focus, caret and selection stay in the field.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "type" \| "children" \| "aria-label" \| "aria-pressed">` | — | The other button attributes. |
+
+### Input.Action
+`ref` → `HTMLButtonElement` (the child with `asChild`). The consumer's icon action at the end edge («Позвонить», «Открыть профиль»): a full-height button segment named by `label`, with a tooltip and the touch hit area.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `string` | — (required) | Accessible name and tooltip («Позвонить», «Открыть профиль»). |
+| `asChild` | `boolean` | `false` | Renders the one child (an `<a href>`, a router link) with the segment's look; `disabled` becomes `aria-disabled`. |
+| `children` | `ReactNode` | — (required) | The glyph (`<Icon name>`), or with `asChild` the element that carries it. |
+| `…rest` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" \| "children">` | — | `onClick`, `disabled` and the other button attributes. |
+
 ### Input.Counter
 `ref` → `HTMLSpanElement`. Character counter for the support row; shows `14/40` and announces `labels.counter`.
 
@@ -133,7 +164,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 |---|---|---|---|
 | `xs` | 28 high, text 12/16, padX 8, radius 6, label 12/16, hint 12/16 | Dense table toolbars, inline filters | |
 | `s` | 32 high, text 13/20, padX 8, radius 8, label 12/16, hint 12/16 | Compact panels, side filters | |
-| `m` | 36 high, text 14/20, padX 12, radius 8, label 13/20, hint 12/16 | Regular forms and pages | yes |
+| `m` | 36 high, text 14/20, padX 12, radius 8, label 13/20, hint 12/16 | Regular forms and pages | yes (without `size`: the host's tier, else `m`) |
 | `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 | |
 
@@ -166,14 +197,23 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 | default / hover | — | hover darkens the fill (not when disabled, read-only or focused) |
 | focus | keyboard focus on the input | wrapper gets the focus fill and an inset focus ring (`:has(input:focus-visible)`) |
 | no focus ring | `focusRing={false}` | `data-focus-ring="false"` on the wrapper |
-| invalid | `invalid` or non-empty `error` | `data-invalid="true"` on root and wrapper, `aria-invalid="true"` on the input, danger inset ring, danger focus ring |
-| disabled | native `disabled` on `Input.Field` | disabled fill, disabled text and icons, `cursor: not-allowed`, clear button disabled look |
+| invalid | `invalid` or non-empty `error` | `data-invalid="true"` on root and wrapper, `aria-invalid="true"` on the input, danger inset ring, danger focus ring; the control shakes once when an error arrives (`data-shake` on the frame) |
+| disabled | native `disabled` on `Input.Field`, or a disabled `Fieldset` around it | disabled fill, disabled text and icons, `cursor: not-allowed`, clear button disabled look |
 | read-only | native `readOnly` on `Input.Field` | no hover, default cursor |
 | reserved support row | `reserveSupportRow` | `data-reserve="true"` on the support row |
 | counter over limit | `current > max` | `data-invalid="true"` on `Input.Counter`; the current count rolls its digits to each new value |
 | strength | `strength` + the value of `Input.Field` | a stepped `ProgressBar` (4 cells, `aria-label` = `labels.strength`) under the field fills one cell after another, weak · easy · medium · hard, toned danger → warning → accent → success; the level word at the end of the support row flows in letter by letter and is announced (`aria-live`); the support row is reserved |
+| saving | `onCommit` returned a pending Promise | `aria-busy="true"` on the input; a `Spinner` at the end of the field (`data-commit="pending"`); the field stays editable and focusable, neighbours are untouched; a live region says `labels.saving` |
+| saved | the Promise resolved (or `onCommit` returned nothing) | the spinner cross-fades into a success check (`data-commit="saved"`) that fades out after a moment; the live region says `labels.saved` |
+| save refused | the Promise rejected | the committed value is put back (unless the person typed on), the status leaves; the owner shows why through `error` |
+| password shown | `Input.RevealButton` pressed | `aria-pressed="true"` on the button, `type="text"` on the input, the eye glyph switches to eye-off; caret and selection kept |
+| copied | `Input.CopyButton` pressed | the copy glyph cross-fades into a check, the button name becomes `labels.copied` (or `labels.copyError`) |
+
+Size: `data-size` on root and wrapper. Slots: `data-side="start" | "end"`. Segments: `data-field-action`.
+
+Inline save (`onCommit`): the value at focus is the committed one. Blur and Enter commit a changed value (an unchanged one never fires); Escape puts the committed value back through the field's own `onChange`, so a controlled owner receives it, and is consumed — it does not also close the drawer around the field. Return a Promise for a server save: pending shows a spinner, reject restores the value, resolve shows the check.
 
-Size: `data-size` on root and wrapper. Slots: `data-side="start" | "end"`.
+Strength estimate (`strength`, replaced by `getStrength`): every trait adds a point on its own, in any order — lowercase, uppercase, digits, symbols, 10+ and 14+ characters; 0–2 points weak, 3 easy, 4 medium, 5+ hard, and under 8 characters at most easy. The meter follows `Input.Field` controlled or not.
 
 Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontrolled: `defaultValue`. Both are native input props.
 
@@ -189,14 +229,19 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 ### 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. |
+| `Tab` | Focuses the field, then the segments at its end (clear, copy, reveal, actions). |
+| `Enter` · `Space` | On a segment: runs its action (the clear button returns focus to the field). |
+| `Enter` | With `onCommit`: saves a changed value; focus stays in the field. |
+| `Escape` | With `onCommit`: puts the committed value back. |
 
 ### 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 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 named by `labels.clear`, with `aria-controls` on the input.
+- `Input.Action` and `Input.CopyButton` are buttons (or a link with `asChild`) named by their label, with a tooltip; copying announces `labels.copied` through a polite live region.
+- `Input.RevealButton` is a toggle: a constant name `labels.reveal`, `aria-pressed` and `aria-controls` on the input; a pointer press keeps the focus in the field.
+- With `onCommit` the input carries `aria-busy="true"` while saving; a polite live region says `labels.saving`, then `labels.saved`.
 - `Input.Counter` shows `14/40` visually and announces `labels.counter` through `aria-live="polite"`.
 
 ### Labels
@@ -206,6 +251,12 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 |---|---|---|
 | `optional` | `"необязательно"` | Marker after the label when `optional`. |
 | `clear` | `"Очистить"` | Accessible name of `Input.ClearButton`. |
+| `copy` | `"Копировать"` | Name and tooltip of the copy button. |
+| `copied` | `"Скопировано"` | Name, tooltip and announcement once the value is copied. |
+| `copyError` | `"Не удалось скопировать"` | Name, tooltip and announcement when the clipboard refuses. |
+| `reveal` | `"Показать пароль"` | Accessible name of `Input.RevealButton`;`aria-pressed` says whether the password is shown. |
+| `saving` | `"Сохранение"` | Announced while an `onCommit` save is pending. |
+| `saved` | `"Сохранено"` | Announced once an `onCommit` save succeeds. |
 | `counter` | `"{current} из {max} символов"` | Screen-reader text of `Input.Counter`; `{current}` and `{max}` are replaced. |
 | `strength` | `"Надёжность пароля"` | Accessible name of the `strength` meter and the spoken prefix of the level word. |
 | `strengthWeak` | `"Слабый"` | Level word for strength 1. |
@@ -219,13 +270,15 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | [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`. |
+| [validation.tsx](examples/validation.tsx) | Live validation: an error shakes the field as it arrives, drops in and leaves as soon as the value is fixed; required and optional markers, a hint 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`. |
-| [password-strength.tsx](examples/password-strength.tsx) | A new password with a meter that fills step by step and names the level beside the hint — `strength`. |
+| [password-strength.tsx](examples/password-strength.tsx) | A new password with a show toggle and a meter that fills step by step and names the level beside the hint — `Input.RevealButton`, `strength`. |
+| [edge-actions.tsx](examples/edge-actions.tsx) | Actions at the field's end: a mail link with a tooltip beside copying the value, and a profile link on a read-only field — `Input.Action`, `Input.CopyButton`. |
+| [inline-edit.tsx](examples/inline-edit.tsx) | Record card fields that save on blur and Enter, revert on Escape and show the server's refusal — `onCommit`, `error`. |
 | [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`. |
+| [in-form.tsx](examples/in-form.tsx) | Company details form: required fields checked on submit, each error leaves as its field is fixed and a saved form turns the button green; 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.
@@ -235,7 +288,10 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - Rendering `Input.ClearButton` for an empty field → render it only when there is a value.
 - Setting `className` with a custom border or background on `Input.Wrapper` → the fill comes from the surface context; fields inside Card/Modal already switch.
 - `tone="danger"` / `error` as a boolean → use `invalid` or an `error` message.
+- A `Button` placed next to the field for «copy» or «call» → `Input.CopyButton` / `Input.Action` inside `Input.Wrapper`.
+- Hand-written blur / Enter / Escape handlers and a `disabled` field while saving → `onCommit` returning the save Promise; the field stays editable.
+- Returning `false` from `onCommit` to refuse → reject the Promise (throw) and set `error`.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), `Icon` (`Input.ClearButton`)
+- **Built from:** [Label](../label/COMPONENT.md) (`label`), [Hint](../hint/COMPONENT.md) (`hint`, `error`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments)
 - **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/edge-actions.tsx

@@ -0,0 +1,30 @@
+/** Actions at the field's end: a mail link with a tooltip beside copying the value, and a profile link on a read-only field — `Input.Action`, `Input.CopyButton`. */
+import { Icon, Input } from "prime-ui-kit";
+
+export default function InputEdgeActionsExample() {
+  return (
+    <>
+      <Input.Root label="Почта контакта">
+        <Input.Wrapper>
+          <Input.Field type="email" defaultValue="i.sokolova@severny-veter.ru" />
+          <Input.Action label="Написать письмо" asChild>
+            <a href="mailto:i.sokolova@severny-veter.ru">
+              <Icon name="field.email" />
+            </a>
+          </Input.Action>
+          <Input.CopyButton />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root label="Ответственный">
+        <Input.Wrapper>
+          <Input.Field readOnly defaultValue="Анна Ковалёва" />
+          <Input.Action label="Открыть профиль" asChild>
+            <a href="#team-kovaleva">
+              <Icon name="object.user" />
+            </a>
+          </Input.Action>
+        </Input.Wrapper>
+      </Input.Root>
+    </>
+  );
+}