prime-ui-kit 0.14.0 → 0.16.0

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

@@ -6,7 +6,7 @@
 > Help text or a validation error under a field.
 
 ## When to use
-- 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.
+- 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.
 
 ## When not to use
@@ -31,17 +31,22 @@ Hint.Root      <p> with the text
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### Hint.Root
-`ref` → `HTMLParagraphElement`. A `<p>` with the support text; provides its tier to nested icons. + native `<p>` props (`id`, `role`, `className`, …).
+`ref` → `HTMLParagraphElement`. A `<p>` with the support text; provides its tier to nested icons.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of the paired field: 12/16 for xs–m, 13/20 for l and xl. |
+| `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`. |
 | `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. |
+| `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. |
+| `…rest` | `HTMLAttributes<HTMLParagraphElement>` | — | `children`, `id`, `aria-live`, `className` and the other paragraph attributes. |
 
 ### Hint.Icon
-`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` holding a glyph: 14 px for xs–m, 16 px for l and xl, centred on the first line. + native `<span>` props.
+`ref` → `HTMLSpanElement`. An `aria-hidden` `<span>` holding a glyph: 14 px for xs–m, 16 px for l and xl, centred on the first line.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `…rest` | `HTMLAttributes<HTMLSpanElement>` | — | `children` (the glyph), `className` and the other span attributes. |
 
 ## Variants
 Hint has no `variant` or `tone`; its states are flags.
@@ -63,29 +68,33 @@ 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); add `role="alert"` to an error shown after a user action. `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. There is no success state: use neutral text, or a [Banner](../banner/COMPONENT.md) for a result.
 
 ## States
 | State | Driven by | DOM |
 |---|---|---|
 | 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` | `data-disabled="true"` |
-| size | `size` | `data-size` |
+| disabled | `disabled`, or a disabled `Fieldset` around it | `data-disabled="true"` |
+| size | `size`, else the host tier | `data-size` |
 
 Hint is not interactive: hover and focus belong to the field.
 
 ## Layout & spacing
-- Field → hint: the tier `hint-gap` (`--prime-control-<size>-hint-gap`), set by the field layout, not by Hint.
+- Field → hint: the tier `--field-hint-gap`, set by the field layout, not by Hint. The text and the icon size come from the field tier (`--field-hint-size`, `--field-hint-lh`, `--field-hint-icon`).
 - Icon → text gap: `--prime-space-1`. Long text wraps (`overflow-wrap: anywhere`).
 
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 No keyboard interaction.
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Give the hint an `id` and put it into the control's `aria-describedby` so screen readers read it with the field.
-- Add `role="alert"` to an error that appears after a user action.
+- Inside a field the frame announces an error that arrives: its support slot is a polite live region. A standalone Hint whose text changes after an action stays mounted with `aria-live="polite"`.
 - `Hint.Icon` is decorative; the text carries the meaning.
 
 ### Labels
@@ -96,17 +105,18 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [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`. |
+| [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`. |
+| [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`. |
-| [hint-or-error.tsx](examples/hint-or-error.tsx) | After a check the error replaces the hint in the same element, without a layout jump, and is announced — `invalid`, `role`. |
+| [hint-or-error.tsx](examples/hint-or-error.tsx) | After a check the error replaces the hint in the same element, without a layout jump, and a polite region reads it — `invalid`, `aria-live`. |
 
 ## Mistakes
 - `<Hint.Root>` under an Input → use `hint` / `error` on `Input.Root`; it links the ids itself.
 - 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`.
+- Hint size different from the field size → use the same `size`, or none inside a sized host.
+- `role="alert"` on a field error → none; the field frame announces it, a standalone hint takes `aria-live="polite"`.
 
 ## Related
 - **Built from:** —

package/dist/skill/reference/components/hint/examples/examples.module.css

@@ -1,6 +1,6 @@
 /* Layout of the Hint scenarios: semantic tokens only. */
 
-/* overview.tsx, hint-or-error.tsx: label → control → support row with the m-tier gaps. */
+/* overview.tsx, hint-or-error.tsx: control → support row at the m-tier hint gap. */
 .field {
   display: grid;
   justify-items: start;

package/dist/skill/reference/components/hint/examples/hint-or-error.tsx

@@ -1,4 +1,4 @@
-/** After a check the error replaces the hint in the same element, without a layout jump, and is announced — `invalid`, `role`. */
+/** After a check the error replaces the hint in the same element, without a layout jump, and a polite region reads it — `invalid`, `aria-live`. */
 import { Button, Hint } from "prime-ui-kit";
 import * as React from "react";
 
@@ -17,7 +17,7 @@ export default function HintHintOrErrorExample() {
           Сбросить
         </Button.Root>
       </div>
-      <Hint.Root invalid={invalid} role={invalid ? "alert" : undefined}>
+      <Hint.Root invalid={invalid} aria-live="polite">
         {invalid
           ? "Заполните название перед публикацией."
           : "Черновик можно сохранить без названия."}

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

@@ -1,22 +1,21 @@
-/** Help text under a hand-built field, linked to its input by `id` and `aria-describedby`. */
-import { Hint, Input, Label } from "prime-ui-kit";
+/** Help text under a calendar that has no hint of its own, linked to it through `id` and `aria-describedby` — `id`. */
+import { Datepicker, Hint } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 export default function HintOverviewExample() {
-  const inputId = React.useId();
   const hintId = React.useId();
 
   return (
     <div className={styles.field}>
-      <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>
+      <Datepicker.Panel
+        mode="single"
+        role="group"
+        aria-label="Дата отгрузки"
+        aria-describedby={hintId}
+      />
+      <Hint.Root id={hintId}>Склад отгружает по будням, заказ собирают за два дня.</Hint.Root>
     </div>
   );
 }

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

@@ -1,4 +1,4 @@
-/** Every size tier, matching the field above: 12/16 for xs–m, 13/20 for l and xl — `size`. */
+/** Every size tier, one per field tier: 12/16 for xs–m, 13/20 for l and xl — `size`. */
 import { Hint, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;

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

@@ -51,7 +51,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier for height, padding, radius, text, label and hint. Without it the field takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. Also provided to nested controls via the control-size context. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier for height, padding, radius, text, label and hint. Without it the field takes the tier of its host (LoginForm, Popover, a panel with a size), else `m`. Also provided to nested controls via the control-size context. |
 | `label` | `ReactNode` | — | Label above the field, rendered as `<label htmlFor>`. Without it, give `Input.Field` an `aria-label`. |
 | `required` | `boolean` | `false` | Red `*` after the label (`aria-hidden`) and native `required` on `Input.Field`. |
 | `optional` | `boolean` | `false` | Muted marker right after the label text (`labels.optional`). |
@@ -59,7 +59,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | `false` | Danger inset ring on the field, `aria-invalid` on the input. A non-empty `error` implies it. |
 | `focusRing` | `boolean` | `true` | `false` hides only the visual focus ring on `Input.Wrapper` (`data-focus-ring="false"`); focus, keyboard, ARIA and the invalid ring stay. |
-| `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter />`. |
+| `counter` | `ReactNode` | — | Right side of the support row, usually `<Input.Counter current max />`. |
 | `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 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`. |
@@ -127,7 +127,7 @@ The trailing side has a fixed CSS `order`, independent of JSX order: value · en
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `value` | `string` | `the field's value` | Text to copy instead of the field's current value. |
+| `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
@@ -179,7 +179,7 @@ Input has no `variant` or `tone`: there is one field treatment (fill, no visible
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `focusRing={false}` | No focus ring; the field still switches to the focus fill, caret visible | A single search field where focus is obvious | `true` |
+| `focusRing` | `false`: no focus ring; the field still switches to the focus fill, caret visible | A single search field where focus is obvious | `true` |
 | `reserveSupportRow` | Empty support row of hint height under the field | Fields validated on the fly; neighbouring fields in one grid row | `false` |
 | `required` / `optional` | Red `*` / muted «необязательно» after the label | Mark the minority: required when most are optional, optional when most are required | `false` |
 
@@ -219,7 +219,7 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 
 ## Layout & spacing
 - Label → field gap: tier `label-gap` (`--prime-space-1` on xs/s, `--prime-space-2` on m–xl). Field → support row: `--prime-space-1`.
-- Field → field in a form: `--prime-space-5` (20); group → actions: `--prime-space-8` (32).
+- Fields of a form stack in a label-less [Fieldset](../fieldset/COMPONENT.md) (20 apart); the form around the groups spaces them from its actions (32).
 - `Input.Root` is `width: 100%` and `min-width: 0`; there is no `fullWidth` prop — the width comes from the parent (grid column, flex item, capped wrapper).
 - Use `reserveSupportRow` on fields that share a grid row so their bottoms stay aligned when only one shows an error.
 - The value truncates with an ellipsis before icons and affixes; the field height never changes.
@@ -227,6 +227,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Focuses the field, then the segments at its end (clear, copy, reveal, actions). |
@@ -235,6 +237,8 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 | `Escape` | With `onCommit`: puts the committed value back. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `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. "Сумма, ₽").
@@ -269,12 +273,12 @@ 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`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. |
 | [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 show toggle and a meter that fills step by step and names the level beside the hint — `Input.RevealButton`, `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, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. |
 | [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`. |
@@ -293,5 +297,5 @@ Controlled: `value` + `onChange` (or `onValueChange`) on `Input.Field`. Uncontro
 - 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`), [Tooltip](../tooltip/COMPONENT.md) (`Input.Action`, `Input.CopyButton`), [Spinner](../spinner/COMPONENT.md) (`onCommit`), [ProgressBar](../progress-bar/COMPONENT.md) (`strength`), `Icon` (segments)
+- **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), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **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/dist/skill/reference/components/input/examples/affixes.tsx

@@ -4,14 +4,14 @@ import { Input } from "prime-ui-kit";
 export default function InputAffixesExample() {
   return (
     <>
-      <Input.Root label="Адрес магазина" hint="Адрес: https://moy-magazin.shop.ru">
+      <Input.Root label="Адрес магазина" hint="Латиница, цифры и дефис">
         <Input.Wrapper>
           <Input.Affix side="start">https://</Input.Affix>
           <Input.Field placeholder="moy-magazin" />
           <Input.Affix side="end">.shop.ru</Input.Affix>
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root label="Сумма платежа, ₽">
+      <Input.Root label="Сумма платежа">
         <Input.Wrapper>
           <Input.Field placeholder="0,00" inputMode="decimal" />
           <Input.InlineAffix side="end">₽</Input.InlineAffix>

package/dist/skill/reference/components/input/examples/examples.module.css

@@ -5,13 +5,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-8);
-  width: min(100%, var(--prime-modal-width-m));
-}
-
-.formHeader {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-1);
+  width: min(100%, var(--prime-layout-form-width-m));
 }
 
 .formFields {

package/dist/skill/reference/components/input/examples/in-form.tsx

@@ -1,5 +1,5 @@
 /** 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`. */
-import { Button, Input, Typography } from "prime-ui-kit";
+import { Button, Input } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -32,14 +32,6 @@ export default function InputInFormExample() {
 
   return (
     <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}>
         <div className={styles.formWide}>
           <Input.Root label="Название организации" required error={errors.name}>

package/dist/skill/reference/components/input/examples/password-strength.tsx

@@ -1,13 +1,39 @@
-/** 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`. */
-import { Input } from "prime-ui-kit";
+/** A new password with a show toggle and a meter that fills step by step and names the level beside the hint, and a service password measured by the company's own rule — `Input.RevealButton`, `strength`, `getStrength`. */
+import { Input, type PasswordStrength } from "prime-ui-kit";
+
+/** The company rule for service accounts: only the length counts, 16 characters and more is hard. */
+function serviceStrength(value: string): PasswordStrength {
+  if (value.length === 0) return 0;
+  if (value.length < 8) return 1;
+  if (value.length < 12) return 2;
+  if (value.length < 16) return 3;
+  return 4;
+}
 
 export default function InputPasswordStrengthExample() {
   return (
-    <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
-      <Input.Wrapper>
-        <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
-        <Input.RevealButton />
-      </Input.Wrapper>
-    </Input.Root>
+    <>
+      <Input.Root label="Новый пароль" hint="Не короче 8 символов" strength>
+        <Input.Wrapper>
+          <Input.Field type="password" autoComplete="new-password" defaultValue="Graphite2026" />
+          <Input.RevealButton />
+        </Input.Wrapper>
+      </Input.Root>
+      <Input.Root
+        label="Пароль сервисного аккаунта"
+        hint="По правилам компании — от 16 символов"
+        strength
+        getStrength={serviceStrength}
+      >
+        <Input.Wrapper>
+          <Input.Field
+            type="password"
+            autoComplete="new-password"
+            defaultValue="export-1c-nightly"
+          />
+          <Input.RevealButton />
+        </Input.Wrapper>
+      </Input.Root>
+    </>
   );
 }

package/dist/skill/reference/components/input/examples/sizes.tsx

@@ -7,11 +7,15 @@ export default function InputSizesExample() {
   return (
     <>
       {SIZES.map((size) => (
-        <Input.Root key={size} size={size} label={size} hint="Пришлём ссылку для входа">
-          <Input.Wrapper>
-            <Input.Field type="email" placeholder="name@company.ru" />
-          </Input.Wrapper>
-        </Input.Root>
+        <div key={size}>
+          <div>
+            <Input.Root size={size} label={size} hint="Пришлём ссылку для входа">
+              <Input.Wrapper>
+                <Input.Field type="email" placeholder="name@company.ru" />
+              </Input.Wrapper>
+            </Input.Root>
+          </div>
+        </div>
       ))}
     </>
   );

package/dist/skill/reference/components/input/examples/states.tsx

@@ -1,27 +1,48 @@
-/** A default field next to a disabled and a read-only one — `disabled`, `readOnly`. */
+/** A default field next to a disabled, a read-only and an invalid one with no message — `disabled`, `readOnly`, `invalid`. */
 import { Icon, Input } from "prime-ui-kit";
 
 export default function InputStatesExample() {
   return (
     <>
-      <Input.Root label="default">
-        <Input.Wrapper>
-          <Input.Field placeholder="Например, Москва" />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="disabled">
-        <Input.Wrapper>
-          <Input.Field defaultValue="Екатеринбург" disabled />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="readOnly">
-        <Input.Wrapper>
-          <Input.Field defaultValue="ID 4821-0093" readOnly />
-          <Input.Icon side="end">
-            <Icon name="status.locked" tone="secondary" />
-          </Input.Icon>
-        </Input.Wrapper>
-      </Input.Root>
+      <div>
+        <div>
+          <Input.Root label="default">
+            <Input.Wrapper>
+              <Input.Field placeholder="Например, Москва" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="disabled">
+            <Input.Wrapper>
+              <Input.Field defaultValue="Екатеринбург" disabled />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="readOnly">
+            <Input.Wrapper>
+              <Input.Field defaultValue="ID 4821-0093" readOnly />
+              <Input.Icon side="end">
+                <Icon name="status.locked" tone="secondary" />
+              </Input.Icon>
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="invalid" invalid>
+            <Input.Wrapper>
+              <Input.Field type="tel" defaultValue="+7 900 12" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
     </>
   );
 }

package/dist/skill/reference/components/input/examples/with-icon.tsx

@@ -4,22 +4,30 @@ import { Icon, Input } from "prime-ui-kit";
 export default function InputWithIconExample() {
   return (
     <>
-      <Input.Root label="Поиск по каталогу">
-        <Input.Wrapper>
-          <Input.Icon side="start">
-            <Icon name="action.search" tone="secondary" />
-          </Input.Icon>
-          <Input.Field type="search" placeholder="Название или артикул" />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="Номер договора">
-        <Input.Wrapper>
-          <Input.Field defaultValue="Д-2026/0147" readOnly />
-          <Input.Icon side="end">
-            <Icon name="status.locked" tone="secondary" />
-          </Input.Icon>
-        </Input.Wrapper>
-      </Input.Root>
+      <div>
+        <div>
+          <Input.Root label="Поиск по каталогу">
+            <Input.Wrapper>
+              <Input.Icon side="start">
+                <Icon name="action.search" tone="secondary" />
+              </Input.Icon>
+              <Input.Field type="search" placeholder="Название или артикул" />
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
+      <div>
+        <div>
+          <Input.Root label="Номер договора">
+            <Input.Wrapper>
+              <Input.Field defaultValue="Д-2026/0147" readOnly />
+              <Input.Icon side="end">
+                <Icon name="status.locked" tone="secondary" />
+              </Input.Icon>
+            </Input.Wrapper>
+          </Input.Root>
+        </div>
+      </div>
     </>
   );
 }