prime-ui-kit 0.17.0 → 0.18.0

package/dist/skill/reference/components/drawer/COMPONENT.md

@@ -35,6 +35,7 @@ Drawer.Root                    state and dismiss policy (no DOM)
    │  ├─ Drawer.Description    <p>
    │  └─ Drawer.Actions        row of tier-s controls before the close button
    ├─ Drawer.Body              the only scrolling zone (ScrollContainer)
+   │  └─ Drawer.Section        <section>: <h3> label, description, Drawer.Actions at the heading's end
    └─ Drawer.Footer            always: Close or Cancel + the main action, primary last
       ├─ Drawer.Meta           <p>, muted status at the start
       └─ Drawer.Close          clones its child; closes on click
@@ -80,7 +81,7 @@ No DOM, no ref. State and dismiss policy.
 | `…rest` | `HTMLAttributes<HTMLElement>` | — | `className` and the other attributes of the `<header>`. |
 
 ### Drawer.Actions
-`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button. Controls inside take tier `s`.
+`ref` → `HTMLDivElement`. A row of controls at the end of the header, before the close button: a status Badge, a ⋯ Dropdown, an icon button; or at the end of a `Drawer.Section` heading. Controls inside take tier `s`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -109,6 +110,15 @@ No DOM, no ref. State and dismiss policy.
 |---|---|---|---|
 | `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className`, `children` and the other attributes of the zone. |
 
+### Drawer.Section
+`ref` → `HTMLElement`. A titled `<section>` of the body: an `<h3>` (title-s, under the `<h2>` title), an optional description, a `Drawer.Actions` at the end of the heading row; the content 16 below, sections 32 apart. Fields group in a `Fieldset`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `label` | `ReactNode` | — (required) | The heading of the section; it names the `<section>`. |
+| `description` | `ReactNode` | — | One line of context under the heading (body-s). |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title">` | — | `children` (the content and an optional `Drawer.Actions`), `className` and the other attributes of the `<section>`. |
+
 ### Drawer.Footer
 `ref` → `HTMLElement`. Renders `<footer>` with the actions, primary last, and an optional `Meta` at the start.
 
@@ -189,6 +199,8 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 - Full viewport height; only the body scrolls, with its own side padding.
 - Tabs in the header: a `Tabs.List` inside `Drawer.Header` (with `Tabs.Root` around the header and the body) spans the header's last row. The header becomes the tab strip, edge to edge and without the hairline; the active tab is the body rising into it, the panels sit in the body.
 - Fields inside get the surface field fill.
+- Titled groups of the body (a record's contacts, its deals, its history): `Drawer.Section label` — an `<h3>` under the drawer's `<h2>` title, an optional `description`, a `Drawer.Actions` at the end of its heading row; content 16 below, sections 32 apart. A group of fields is a `Fieldset`; a page section is `Page.Section`.
+- With a `Drawer.Meta` the buttons stay one row: when the footer runs short the status goes above them first.
 
 ## Accessibility
 
@@ -229,7 +241,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [sizes.tsx](examples/sizes.tsx) | Every panel width, 360 to 800 px; below 640 px of viewport the panel takes the full width — `size`. |
 | [placement.tsx](examples/placement.tsx) | The panel slides from the right for details and from the left for filters, rounded only on the edge facing the page — `side`. |
 | [header-actions.tsx](examples/header-actions.tsx) | A record card: its status and a ⋯ menu sit in the header before the close button, one tier smaller — `Drawer.Actions`. |
-| [client-card.tsx](examples/client-card.tsx) | A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details — `Drawer.Icon`, `Avatar.Root`. |
+| [client-card.tsx](examples/client-card.tsx) | A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details in titled sections, one with its own action — `Drawer.Icon`, `Avatar.Root`, `Drawer.Section`, `Drawer.Actions`. |
 | [guard.tsx](examples/guard.tsx) | A form that holds the drawer from inside: after an edit Escape, the scrim and Cancel ask before discarding, the footer says so, and saving locks every way out — `Drawer.Guard`, `Drawer.Meta`. |
 | [long-content.tsx](examples/long-content.tsx) | A long body scrolls on its own while the header and the footer stay in place — `Drawer.Body`. |
 | [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
@@ -241,6 +253,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 - A drawer without `Drawer.Footer` → add one: «Закрыть» for details, «Отмена» + the submit button for a form. The header × alone is not the end of the panel.
 - Save or Cancel buttons at the end of the body, or in the header → they go in `Drawer.Footer`, which stays in place while the body scrolls.
 - A delete confirmation in a Drawer → use ConfirmDialog.
+- A hand-made heading row (`Typography as="h3"` + buttons) over a group in the body → `Drawer.Section label` with `Drawer.Actions`.
 - Busy or unsaved state lifted out of the form into Root props → put `Drawer.Guard` next to the form, inside Content.
 - Clearing the record together with `open` and rendering a skeleton for «no record» → not needed: the panel keeps its last content while it slides out.
 - A Badge or a menu as a custom child of the header text column → put them in `Drawer.Actions`.

package/dist/skill/reference/components/drawer/examples/client-card.tsx

@@ -1,5 +1,5 @@
-/** A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details — `Drawer.Icon`, `Avatar.Root`. */
-import { Avatar, Button, DescriptionList, Drawer } from "prime-ui-kit";
+/** A client card from the list: the contact's avatar heads the panel in place of an icon tile, then the details in titled sections, one with its own action — `Drawer.Icon`, `Avatar.Root`, `Drawer.Section`, `Drawer.Actions`. */
+import { Avatar, Button, DescriptionList, Drawer, Icon } from "prime-ui-kit";
 
 const CLIENT = {
   name: "Анна Соколова",
@@ -10,6 +10,11 @@ const CLIENT = {
   manager: "Игорь Лебедев",
 };
 
+const DEALS = [
+  { id: "D-2041", title: "Поставка серверов", amount: "1 240 000 ₽" },
+  { id: "D-2057", title: "Сервисный контракт на год", amount: "380 000 ₽" },
+];
+
 export default function DrawerClientCardExample() {
   return (
     <Drawer.Root>
@@ -29,12 +34,31 @@ export default function DrawerClientCardExample() {
           <Drawer.Description>{CLIENT.company}</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body>
-          <DescriptionList.Root>
-            <DescriptionList.Item label="Должность">{CLIENT.role}</DescriptionList.Item>
-            <DescriptionList.Item label="Телефон">{CLIENT.phone}</DescriptionList.Item>
-            <DescriptionList.Item label="Почта">{CLIENT.email}</DescriptionList.Item>
-            <DescriptionList.Item label="Менеджер">{CLIENT.manager}</DescriptionList.Item>
-          </DescriptionList.Root>
+          <Drawer.Section label="Контакт">
+            <DescriptionList.Root>
+              <DescriptionList.Item label="Должность">{CLIENT.role}</DescriptionList.Item>
+              <DescriptionList.Item label="Телефон">{CLIENT.phone}</DescriptionList.Item>
+              <DescriptionList.Item label="Почта">{CLIENT.email}</DescriptionList.Item>
+              <DescriptionList.Item label="Менеджер">{CLIENT.manager}</DescriptionList.Item>
+            </DescriptionList.Root>
+          </Drawer.Section>
+          <Drawer.Section label="Открытые сделки" description="2 сделки на 1 620 000 ₽">
+            <Drawer.Actions>
+              <Button.Root variant="ghost" tone="neutral">
+                <Button.Icon>
+                  <Icon name="action.add" />
+                </Button.Icon>
+                Сделка
+              </Button.Root>
+            </Drawer.Actions>
+            <DescriptionList.Root>
+              {DEALS.map((deal) => (
+                <DescriptionList.Item key={deal.id} label={deal.title}>
+                  {deal.amount}
+                </DescriptionList.Item>
+              ))}
+            </DescriptionList.Root>
+          </Drawer.Section>
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>

package/dist/skill/reference/components/field-list/COMPONENT.md

@@ -30,6 +30,7 @@ FieldList                    field frame: label · the list · hint / error
 ├─ <ol>                      the rows (Dnd.Sortable with `reorderable`)
 │  └─ <li> row               [lead: handle | lock] [a cell per column] [end: remove]
 │     └─ cell                one kit field without `label`, named by its column heading
+├─ totals row                `renderTotals`: a group «Итого», a total per column on the same tracks
 └─ add row                   Button «addLabel» (+ `labels.maxReached` at `max`)
 ```
 A leaf: rows come from `value` through `renderItem`, which returns one element per column (a fragment). Every framed kit field (Input, Select, Datepicker, NativeSelect, ColorField…) in a cell takes its column heading as its label: read by screen readers, not shown while the heading row is on screen, shown above the field once the rows stack in a narrow container. `ColorPresets` takes it as the name of its trigger.
@@ -43,12 +44,13 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `columns` | `readonly FieldListColumn[]` | — (required) | The columns in cell order: `label` (the heading; it names the field of the column in every row), `width` (`fill` \| `compact` \| `s` \| `m`), `required` (a `*` after the heading). |
+| `columns` | `readonly FieldListColumn[]` | — (required) | The columns in cell order: `label` (the heading; it names the field of the column in every row), `width` (`fill` \| `compact` \| `xs` \| `s` \| `m`), `required` (a `*` after the heading). |
 | `renderItem` | `(item: T, row: FieldListRow<T>) => ReactNode` | — (required) | The cells of a row, one element per column (a fragment): kit fields without `label`. `row` has `index`, `update(patch)` and `remove()`. |
+| `renderTotals` | `(items: readonly T[]) => ReactNode` | — | The totals row under the rows: one node per column (a fragment), `null` where a column has none. The first cell without a total reads `labels.totals`, the row's group name. |
 | `getId` | `(item: T) => string` | — (required) | Stable unique id of an item: the row key and the drag id. |
 | `value` | `readonly T[]` | — | The rows (controlled). |
 | `defaultValue` | `readonly T[]` | `[]` | The first rows (uncontrolled). |
-| `onValueChange` | `(value: T[]) => void` | — | The new list after an edit (`row.update`), an added, removed or moved row. |
+| `onValueChange` | `(value: T[]) => void \| Promise<void>` | — | The new list after an edit (`row.update`), an add, a remove or a move. Return the save's promise: the new list shows while it is pending, the owner's again on a reject (say why with `error`). |
 | `createItem` | `() => T` | — | A new empty item; with it the add button shows under the rows and focus goes to the new row's first field. |
 | `addLabel` | `string` | — | Text of the add button: what is added («Добавить позицию»). |
 | `getLabel` | `(item: T) => string` | — | The row's own text (its title field) for the remove button, the handle and drag announcements; else the row number. |
@@ -59,6 +61,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | `label` | `ReactNode` | — | Heading of the list; names the `<ol>`. Omit it inside a `Fieldset` whose legend names the list. |
 | `aria-label` | `string` | — | Name of the `<ol>` when no visible `label` names it (a section heading above the list). |
 | `hint` | `ReactNode` | — | Help text under the list; hidden while `error` shows. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | A problem of the list as a whole («Добавьте хотя бы одну позицию»); a field's own error goes on that field. |
 | `disabled` | `boolean` | `false` | Disables every field, handle and button; a disabled `Fieldset` around it sets it too. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the headings, buttons and the kit fields that read the host tier. Without it the host tier, else `m`. |
@@ -72,6 +75,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 |---|---|---|---|
 | `fill` | shares the free width with the other `fill` columns | names, descriptions, any text | yes |
 | `compact` | two control heights wide | an icon-only `Select`, a `ColorPresets` swatch, a checkbox | |
+| `xs` | 96 px | a number of a few digits: a share, a percent, a count | |
 | `s` | 144 px | a quantity, a code, a number of days | |
 | `m` | 192 px | an amount with its unit, a date, a phone | |
 
@@ -82,6 +86,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | `getLocked` | a lock where the grip is, no remove button; the row holds its place | a base value, system records a person cannot drop | — |
 | `createItem` | the add button under the rows, aligned with the first column | the person grows the list | — |
 | `min` · `max` | remove buttons off at `min`; the add button off with «Не больше {max}» at `max` | the record count is bounded | `0` · — |
+| `renderTotals` | a row of totals under the rows over a faint line, each on its column; «Итого» in the first cell without a total | the rows add up (shares, amounts, hours) | — |
 
 **Combinations**
 - Recommended: `label` on the list (or a `Fieldset` legend around it), one heading per column, a `getLabel` from the title field, an `addLabel` that says what is added.
@@ -98,13 +103,15 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | pinned row | `getLocked(item)` | `data-locked="true"` on the `<li>`; a lock, no remove button |
 | invalid | `error` (the list), a field's own `error` | the list's message under the add row; a field's under the field in its row |
 | disabled | `disabled` (or a disabled Fieldset) | `data-disabled="true"` on the frame; fields, handles and buttons disabled through the kit's disabled context |
-| stacked | container narrower than 30rem | heading row hidden, each row's fields in one column with their labels shown |
+| stacked | container narrower than 30rem | heading row hidden, each row's fields in one column with their labels shown; each total on its own line after its column name |
+| saving | a promise from `onValueChange` | the rows show the new list, `aria-busy="true"` on the `<ol>`; a reject brings the owner's list back |
 | rows come and go | the add button, a remove button, a new `value` | a row the data adds rises in once (`enterMotion`), a removed one closes up in place and the rows below glide up (`listPresence`); the heading row rises in with the first row and closes up with the last (`partPresence`); the first render stays still |
 
 ## Layout & spacing
 - Rows 12 apart (`--prime-space-3`); columns 12 apart; the heading row sits at the tier's label gap above the first row.
 - Every row and the heading row share one track list: `[lead] [columns] [end]`; the lead is one `xs` control wide (the grip or the lock), the end fits a remove button of the tier.
 - The handle, the lock and the remove button stand on the middle of the first line of fields, so a field's error under it grows the row downwards only.
+- The totals row stands 12 under the last row over a faint line, 12 more above its totals; a total's text starts where its column's field text does.
 - The add button lines up with the first column of fields, 12 under the last row.
 - Under 30rem of its own width (a container query): rows stack, fields 16 apart inside a row, rows 24 apart.
 
@@ -126,6 +133,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 - The heading row is `aria-hidden`: each field in a cell carries its column heading as its own label, read but not shown on wide rows.
 - The `<ol>` is described by the list's `hint` and `error` (`aria-describedby`), which speak for every row.
 - In a narrow container the heading row goes and each field's label shows above it.
+- The totals row (`renderTotals`) is a `group` named by `labels.totals`; each total is read after its column heading.
 - The remove button is «Удалить {row}», the handle «Переместить {row}»: the row's name from `getLabel`, else its number.
 - A pinned row has a lock in place of the handle and no remove button; without `reorderable` the lock is Dnd's lock (an image named «Закреплена»).
 
@@ -140,6 +148,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | `namedRow` | `"«{label}»"` | Name of a row with `getLabel` text; `{label}` is that text. |
 | `locked` | `"Закреплена"` | Spoken name of the lock of a pinned row in a list without `reorderable`. |
 | `maxReached` | `"Не больше {max}"` | Text beside the disabled add button once the list holds `max` rows. |
+| `totals` | `"Итого"` | Name of the totals row (`renderTotals`), shown in its first cell when that has no total. |
 
 ## Examples
 | Example | Shows |
@@ -151,6 +160,8 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 | [base-row.tsx](examples/base-row.tsx) | A plan price and its changes by month in one table: the base price is the first, pinned row, each change is a row with its month and its price, and the unit sits in the field, not in a heading — `getLocked`, `width`. |
 | [limits.tsx](examples/limits.tsx) | Recipients of invoice reminders, from one to three: the last row cannot be removed and the add button says why it is off once the list is full — `min`, `max`, `hint`. |
 | [errors.tsx](examples/errors.tsx) | Contacts of a client checked on save: a field's problem shows under that field in its row, a problem of the whole list under the list, and focus goes to the first wrong field; a `*` after a heading marks a required column — `error`, `required`. |
+| [totals.tsx](examples/totals.tsx) | A deal bonus split between the team: the share takes a narrow column, and the totals row under the lines sums the shares and the amounts — `renderTotals`, `width`. |
+| [saving.tsx](examples/saving.tsx) | Removing a recipient is saved on the server: the row leaves at once and comes back with the reason if the server refuses — `onValueChange`, `error`. |
 | [states.tsx](examples/states.tsx) | The same list editable and disabled while the request saves it: fields, handles and buttons turn off together — `disabled`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the lines: it sums them under the list and puts the saved lines back on reset — `value`, `onValueChange`. |
 | [narrow.tsx](examples/narrow.tsx) | The invoice lines in a 320 px column: the headings give way, each row stacks its fields with their own labels and rows stand a group apart — `columns`. |
@@ -165,6 +176,7 @@ Generic `FieldList<T>`; `ref` → `HTMLDivElement` (the field frame). An editabl
 - A hint that explains what the lock already shows («Первые три всегда первыми») → no hint; the lock says it.
 - `aria-label` written on every field in a cell → none: the column heading names the field.
 - A grip, a remove button and an add button drawn by hand around a `.map()` of fields → FieldList.
+- A total under the list typed by hand in a line of text, or a DataTable of fields to get a totals row → `renderTotals`.
 
 ## Related
 - **Built from:** [Button](../button/COMPONENT.md) (add, remove), [Dnd](../dnd/COMPONENT.md) (`reorderable`: `Dnd.Sortable`, `Dnd.Handle`; the lock of a pinned row), [Label](../label/COMPONENT.md) (headings), the field frame (label, [Hint](../hint/COMPONENT.md) for the hint and error), [VisuallyHidden](../visually-hidden/COMPONENT.md)

package/dist/skill/reference/components/field-list/examples/saving.tsx

@@ -0,0 +1,83 @@
+/** Removing a recipient is saved on the server: the row leaves at once and comes back with the reason if the server refuses — `onValueChange`, `error`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Recipient = { id: string; name: string; email: string; billing: boolean };
+
+const COLUMNS: FieldListColumn[] = [{ label: "Имя" }, { label: "Почта" }];
+
+const RECIPIENTS: Recipient[] = [
+  { id: "accounting", name: "Бухгалтерия", email: "buh@severstroy.ru", billing: true },
+  { id: "director", name: "Ирина Котова", email: "kotova@severstroy.ru", billing: false },
+  { id: "manager", name: "Олег Демин", email: "demin@severstroy.ru", billing: false },
+];
+
+/** The server's answer to a removal, a beat later: the billing contact stays. */
+function saveRemoval(removed: Recipient[]) {
+  return new Promise<void>((resolve, reject) => {
+    setTimeout(() => {
+      if (removed.some((recipient) => recipient.billing)) {
+        reject(new Error("Бухгалтерию нельзя убрать: на неё уходят счета"));
+      } else {
+        resolve();
+      }
+    }, 900);
+  });
+}
+
+export default function FieldListSavingExample() {
+  const [recipients, setRecipients] = React.useState(RECIPIENTS);
+  const [failure, setFailure] = React.useState<string | null>(null);
+
+  return (
+    <FieldList
+      label="Кому отправлять счета"
+      error={failure}
+      columns={COLUMNS}
+      value={recipients}
+      onValueChange={(next) => {
+        setFailure(null);
+        const removed = recipients.filter(
+          (recipient) => !next.some((item) => item.id === recipient.id),
+        );
+        if (removed.length === 0) {
+          setRecipients(next);
+          return;
+        }
+        return saveRemoval(removed).then(
+          () => setRecipients(next),
+          (reason: Error) => {
+            setFailure(reason.message);
+            throw reason;
+          },
+        );
+      }}
+      getId={(recipient) => recipient.id}
+      getLabel={(recipient) => recipient.name}
+      createItem={() => ({ id: crypto.randomUUID(), name: "", email: "", billing: false })}
+      addLabel="Добавить получателя"
+      renderItem={(recipient, row) => (
+        <>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={recipient.name}
+                onChange={(event) => row.update({ name: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                type="email"
+                value={recipient.email}
+                placeholder="name@company.ru"
+                onChange={(event) => row.update({ email: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+        </>
+      )}
+    />
+  );
+}

package/dist/skill/reference/components/field-list/examples/totals.tsx

@@ -0,0 +1,82 @@
+/** A deal bonus split between the team: the share takes a narrow column, and the totals row under the lines sums the shares and the amounts — `renderTotals`, `width`. */
+import { FieldList, type FieldListColumn, Input } from "prime-ui-kit";
+import * as React from "react";
+
+type Share = { id: string; member: string; percent: string };
+
+const BONUS = 240_000;
+
+const COLUMNS: FieldListColumn[] = [
+  { label: "Участник" },
+  { label: "Доля", width: "xs" },
+  { label: "Сумма", width: "m" },
+];
+
+const SHARES: Share[] = [
+  { id: "sokolova", member: "Анна Соколова", percent: "50" },
+  { id: "demin", member: "Олег Демин", percent: "30" },
+  { id: "kotova", member: "Ирина Котова", percent: "20" },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const percentOf = (share: Share) => Number(share.percent.replace(",", ".")) || 0;
+
+export default function FieldListTotalsExample() {
+  const [shares, setShares] = React.useState(SHARES);
+
+  return (
+    <FieldList
+      label="Бонус по сделке"
+      hint="Доли в сумме дают 100 %."
+      columns={COLUMNS}
+      value={shares}
+      onValueChange={setShares}
+      getId={(share) => share.id}
+      getLabel={(share) => share.member}
+      createItem={() => ({ id: crypto.randomUUID(), member: "", percent: "" })}
+      addLabel="Добавить участника"
+      renderItem={(share, row) => (
+        <>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={share.member}
+                onChange={(event) => row.update({ member: event.target.value })}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field
+                value={share.percent}
+                inputMode="decimal"
+                onChange={(event) => row.update({ percent: event.target.value })}
+              />
+              <Input.InlineAffix side="end">%</Input.InlineAffix>
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root>
+            <Input.Wrapper>
+              <Input.Field value={RUB.format((BONUS * percentOf(share)) / 100)} readOnly />
+            </Input.Wrapper>
+          </Input.Root>
+        </>
+      )}
+      renderTotals={(items) => {
+        const percent = items.reduce((sum, share) => sum + percentOf(share), 0);
+        return (
+          <>
+            {null}
+            {`${percent} %`}
+            {RUB.format((BONUS * percent) / 100)}
+          </>
+        );
+      }}
+    />
+  );
+}

package/dist/skill/reference/components/file-upload/COMPONENT.md

@@ -120,6 +120,7 @@ A rejection of `upload` fails the file with its message as the reason; retry que
 | `required` | `boolean` | — | Red `*` after the label and native `required` on the input. |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the field. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message under the field (a rejected file, too few files); implies `invalid`. |
 | `invalid` | `boolean` | — | Danger line and icon of the zone, `aria-invalid` on the input. A non-empty `error` implies it. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring of the drop zone and the add tile (`data-focus-ring="false"`); focus, keyboard and ARIA stay. The picker Button keeps its ring. |

package/dist/skill/reference/components/hint/COMPONENT.md

@@ -8,6 +8,7 @@
 ## When to use
 - Under a control without `hint` / `error` props (an embedded `Datepicker.Panel`, a custom control), 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.
+- A status the field's value has (a deadline that nears, a check that passed): `tone`, with the status in the words.
 
 ## When not to use
 - 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)).
@@ -36,6 +37,7 @@ Hint.Root      <p> with the text
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of the paired field: 12/16 for xs–m, 13/20 for l and xl. Without it the tier of its host, else `m`. |
+| `tone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of the text (a deadline that nears, a check that passed). The words carry the status, the color repeats it; `invalid` and `disabled` take over the color. |
 | `invalid` | `boolean` | `false` | Error styling: danger text that drops in (fade + 4 px from above). |
 | `disabled` | `boolean` | `false` | Disabled text color, next to a disabled control. A disabled `Fieldset` around the hint sets it too. |
 | `children` | `ReactNode` | — | Text, optionally with `Hint.Icon` first. |
@@ -49,7 +51,15 @@ Hint.Root      <p> with the text
 | `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children` (the glyph), `className` and the other span attributes. |
 
 ## Variants
-Hint has no `variant` or `tone`; its states are flags.
+### tone
+| Value | Looks like | Use when | Default |
+|---|---|---|---|
+| `neutral` | Muted text | Format rules, limits, where the value comes from | yes |
+| `success` | Success text | The value passed a check («ИНН проверен») | |
+| `warning` | Warning text | The value needs attention soon («Осталось 12 дней») | |
+| `danger` | Danger text, no `aria-invalid` | A status of the data, not a validation error («Срок истёк») | |
+
+The words carry the status; the color only repeats it, and a `Hint.Icon` with the status glyph adds a shape. A validation error is `invalid` (or a field's `error`), never `tone="danger"`. `invalid` and `disabled` take over the tone's color.
 
 ### size
 | Value | Looks like | Use when | Default |
@@ -68,11 +78,12 @@ The hint is always smaller than the field text; use the field's size.
 | `invalid` | Danger text, drops in | Validation error | `false` |
 | `disabled` | Disabled text | Under a disabled control | `false` |
 
-**Combinations** — one element switches between the hint text and the error text with `invalid` (no layout jump); a standalone hint that changes after an action stays mounted with `aria-live="polite"` (inside a field the frame does it). `invalid` and `disabled` together make no sense. There is no success state: use neutral text, or a [Banner](../banner/COMPONENT.md) for a result.
+**Combinations** — one element switches between the hint text and the error text with `invalid` (no layout jump); a standalone hint that changes after an action stays mounted with `aria-live="polite"` (inside a field the frame does it). `invalid` and `disabled` together make no sense. A result of the whole form goes to a [Banner](../banner/COMPONENT.md), not a toned hint.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
+| status | `tone` | `data-tone` with the shared text tone (none for `neutral`, and none while `invalid` or `disabled`); the color eases between tones |
 | error | `invalid` | `data-invalid="true"`; the message drops in over `fast` (fade + `--prime-space-1` from above, no shake, no layout shift) and the color eases from the hint color |
 | disabled | `disabled`, or a disabled `Fieldset` around it | `data-disabled="true"` |
 | size | `size`, else the host tier | `data-size` |
@@ -106,6 +117,7 @@ No `labels`.
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Help text under a calendar that has no hint of its own, linked to it through `id` and `aria-describedby` — `id`. |
+| [variants.tsx](examples/variants.tsx) | Status hints whose words carry the status and the color repeats it — `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier, one per field tier: 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`. |
@@ -116,6 +128,8 @@ No `labels`.
 - A separate hint and error element at the same time → one element; the error replaces the hint.
 - Hint without `id` + `aria-describedby` → the screen reader does not connect it to the field.
 - Hint size different from the field size → use the same `size`, or none inside a sized host.
+- `tone="danger"` for a validation error → `invalid` (or the field's `error`): only it sets `aria-invalid`.
+- A status by color alone («12 д.» in orange) → the words say it («Осталось 12 дней»), the tone repeats it.
 - `role="alert"` on a field error → none; the field frame announces it, a standalone hint takes `aria-live="polite"`.
 
 ## Related

package/dist/skill/reference/components/hint/examples/variants.tsx

@@ -0,0 +1,48 @@
+/** Status hints whose words carry the status and the color repeats it — `tone`. */
+import { Hint, Icon, Typography } from "prime-ui-kit";
+
+export default function HintVariantsExample() {
+  return (
+    <div>
+      <div>
+        <Hint.Root>Действует до 30 ноября.</Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          neutral
+        </Typography>
+      </div>
+      <div>
+        <Hint.Root tone="success">
+          <Hint.Icon>
+            <Icon name="status.success" />
+          </Hint.Icon>
+          ИНН проверен в ФНС.
+        </Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          success
+        </Typography>
+      </div>
+      <div>
+        <Hint.Root tone="warning">
+          <Hint.Icon>
+            <Icon name="status.warning" />
+          </Hint.Icon>
+          Осталось 12 дней.
+        </Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          warning
+        </Typography>
+      </div>
+      <div>
+        <Hint.Root tone="danger">
+          <Hint.Icon>
+            <Icon name="status.danger" />
+          </Hint.Icon>
+          Срок истёк 3 дня назад.
+        </Hint.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          danger
+        </Typography>
+      </div>
+    </div>
+  );
+}