prime-ui-kit 0.9.3 → 0.10.0

package/src/components/file-upload/COMPONENT.md

@@ -157,7 +157,7 @@ The built-in body (icon, `labels.title`, `labels.description` and a decorative s
 | hover | — | zone fill and dashed line darken |
 | focus | keyboard focus on the hidden input | inset focus ring on the zone (danger when invalid); Enter / Space opens the dialog |
 | drag-over | a file dragged over the zone | `data-state="active"` on the zone: accent line, accent soft fill, accent icon |
-| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the zone, `aria-invalid` on the input; `data-invalid="true"` on Item |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the zone, `aria-invalid` on the input; `data-invalid="true"` on Item; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | `data-disabled="true"`, disabled input, disabled fill and text, drops ignored |
 
 Also `data-size`, `data-variant` on the zone and `data-size` on Item. Files are not kept by the component: keep the list in your state and update it in `onFilesChange`.
@@ -197,11 +197,11 @@ Also `data-size`, `data-variant` on the zone and `data-size` on Item. Files are
 | [variants.tsx](examples/variants.tsx) | The dashed drop line next to a zone with only the fill, for cards and modals — `variant`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size of the zone and of a file row: padding, icon, button and text follow the tier — `size`. |
 | [states.tsx](examples/states.tsx) | A default zone, a disabled one and an invalid one without a message — `disabled`, `invalid`. |
-| [validation.tsx](examples/validation.tsx) | A required zone with a hint, a rejected file whose error replaces the hint and an optional zone — `required`, `hint`, `error`, `optional`. |
+| [validation.tsx](examples/validation.tsx) | A required scan checked as soon as it is picked: a wrong type or a large file shakes in an error that leaves when the file is removed; a hint and an optional zone — `required`, `hint`, `error`, `optional`. |
 | [custom-body.tsx](examples/custom-body.tsx) | A custom body: a muted title with a browse link and source buttons instead of the built-in one — `FileUpload.Body`, `FileUpload.Title`. |
 | [upload-progress.tsx](examples/upload-progress.tsx) | File rows while uploading, uploaded and failed with a retry — `FileUpload.ItemProgress`, `invalid`, `FileUpload.ItemActions`. |
 | [avatar-upload.tsx](examples/avatar-upload.tsx) | A round zone around an Avatar that takes images and shows a preview; buttons open the same input — `inputRef`, `accept`, `className`. |
-| [in-form.tsx](examples/in-form.tsx) | A contract upload form: the required scan is checked on submit and its error replaces the hint — `required`, `error`, `name`. |
+| [in-form.tsx](examples/in-form.tsx) | A contract upload form: submit checks the required scan, its error shakes in and leaves once a valid file is picked or removed — `required`, `error`, `name`. |
 | [narrow.tsx](examples/narrow.tsx) | In a phone-width column the zone text wraps and a long file name truncates. |
 
 ## Mistakes

package/src/components/file-upload/examples/in-form.tsx

@@ -1,18 +1,31 @@
-/** A contract upload form: the required scan is checked on submit and its error replaces the hint — `required`, `error`, `name`. */
+/** A contract upload form: submit checks the required scan, its error shakes in and leaves once a valid file is picked or removed — `required`, `error`, `name`. */
 import { Button, FileUpload, Icon, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
 const HINT = "PDF до 20 МБ, все страницы";
+const MAX_SIZE = 20 * 1024 * 1024;
+
+/** The scan error on submit, or nothing when exactly a PDF within the limit is attached. */
+function scanError(files: File[]) {
+  if (files.length === 0) return "Приложите скан договора";
+  if (files.some((file) => !file.name.toLowerCase().endsWith(".pdf")))
+    return "Нужен файл в формате PDF";
+  if (files.some((file) => file.size > MAX_SIZE)) return "Файл больше 20 МБ";
+  return undefined;
+}
 
 export default function FileUploadInFormExample() {
   const [files, setFiles] = React.useState<File[]>([]);
   const [error, setError] = React.useState<string>();
+  const [sent, setSent] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setError(files.length === 0 ? "Приложите скан договора" : undefined);
+    const next = scanError(files);
+    setError(next);
+    setSent(next === undefined);
   };
 
   return (
@@ -36,18 +49,23 @@ export default function FileUploadInFormExample() {
           onFilesChange={(next) => {
             setFiles(next);
             setError(undefined);
+            setSent(false);
           }}
         />
         {files.map((file) => (
           <FileUpload.Item key={file.name}>
-            <FileUpload.FormatBadge format="pdf" color="red" />
+            <FileUpload.FormatBadge format={file.name.split(".").pop() ?? ""} color="red" />
             <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
             <FileUpload.ItemActions>
               <Button.Root
                 variant="ghost"
                 tone="neutral"
                 aria-label={`Удалить ${file.name}`}
-                onClick={() => setFiles([])}
+                onClick={() => {
+                  setFiles([]);
+                  setError(undefined);
+                  setSent(false);
+                }}
               >
                 <Button.Icon>
                   <Icon name="action.close" />
@@ -57,6 +75,11 @@ export default function FileUploadInFormExample() {
           </FileUpload.Item>
         ))}
       </div>
+      {sent ? (
+        <Typography as="p" variant="body-s" tone="secondary" role="status">
+          Договор отправлен на проверку.
+        </Typography>
+      ) : null}
       <div className={styles.formActions}>
         <Button.Root
           variant="ghost"
@@ -65,6 +88,7 @@ export default function FileUploadInFormExample() {
           onClick={() => {
             setFiles([]);
             setError(undefined);
+            setSent(false);
           }}
         >
           Отменить

package/src/components/file-upload/examples/validation.tsx

@@ -1,18 +1,49 @@
-/** A required zone with a hint, a rejected file whose error replaces the hint and an optional zone — `required`, `hint`, `error`, `optional`. */
-import { FileUpload } from "prime-ui-kit";
+/** A required scan checked as soon as it is picked: a wrong type or a large file shakes in an error that leaves when the file is removed; a hint and an optional zone — `required`, `hint`, `error`, `optional`. */
+import { Button, FileUpload, Icon } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
+const MAX_SIZE = 20 * 1024 * 1024;
+
+/** The scan error, or nothing when every picked file is a PDF within the limit. */
+function scanError(files: File[]) {
+  if (files.some((file) => !file.name.toLowerCase().endsWith(".pdf")))
+    return "Нужен файл в формате PDF";
+  if (files.some((file) => file.size > MAX_SIZE)) return "Файл больше 20 МБ";
+  return undefined;
+}
+
 export default function FileUploadValidationExample() {
+  const [files, setFiles] = React.useState<File[]>([]);
+
   return (
     <div className={styles.column}>
-      <FileUpload.Root label="Скан договора" required hint="PDF до 20 МБ, все страницы" />
       <FileUpload.Root
-        label="Счёт на оплату"
+        label="Скан договора"
         required
-        error="Файл не подошёл: нужен PDF до 20 МБ"
-        labels={{ title: "Выберите другой файл" }}
+        hint="PDF до 20 МБ, все страницы"
+        error={scanError(files)}
+        onFilesChange={setFiles}
       />
+      {files.map((file) => (
+        <FileUpload.Item key={file.name}>
+          <FileUpload.FormatBadge format={file.name.split(".").pop() ?? ""} color="red" />
+          <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
+          <FileUpload.ItemActions>
+            <Button.Root
+              variant="ghost"
+              tone="neutral"
+              aria-label={`Удалить ${file.name}`}
+              onClick={() => setFiles([])}
+            >
+              <Button.Icon>
+                <Icon name="action.close" />
+              </Button.Icon>
+            </Button.Root>
+          </FileUpload.ItemActions>
+        </FileUpload.Item>
+      ))}
       <FileUpload.Root label="Доверенность" optional hint="Если подписывает не директор" />
     </div>
   );

package/src/components/input/COMPONENT.md

@@ -166,7 +166,7 @@ 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 |
+| 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` | 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 |
@@ -219,13 +219,13 @@ 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`. |
 | [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.

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

@@ -1,4 +1,4 @@
-/** Company details form: required fields checked on submit, neighbours keep their bottoms aligned — `required`, `error`, `reserveSupportRow`. */
+/** 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 * as React from "react";
 
@@ -15,10 +15,19 @@ function validate(form: FormData): Errors {
 
 export default function InputInFormExample() {
   const [errors, setErrors] = React.useState<Errors>({});
+  const [saved, setSaved] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setErrors(validate(new FormData(event.currentTarget)));
+    const next = validate(new FormData(event.currentTarget));
+    setErrors(next);
+    setSaved(Object.keys(next).length === 0);
+  };
+
+  /** Editing a field takes its error away and makes the form unsaved again. */
+  const edit = (field?: keyof Errors) => {
+    setSaved(false);
+    if (field) setErrors((current) => ({ ...current, [field]: undefined }));
   };
 
   return (
@@ -37,6 +46,7 @@ export default function InputInFormExample() {
             <Input.Wrapper>
               <Input.Field
                 name="name"
+                onValueChange={() => edit("name")}
                 defaultValue="ООО «Северный ветер»"
                 autoComplete="organization"
               />
@@ -45,27 +55,52 @@ export default function InputInFormExample() {
         </div>
         <Input.Root label="ИНН" required error={errors.inn} reserveSupportRow>
           <Input.Wrapper>
-            <Input.Field name="inn" defaultValue="78123" inputMode="numeric" />
+            <Input.Field
+              name="inn"
+              defaultValue="78123"
+              inputMode="numeric"
+              onValueChange={() => edit("inn")}
+            />
           </Input.Wrapper>
         </Input.Root>
         <Input.Root label="КПП" optional reserveSupportRow>
           <Input.Wrapper>
-            <Input.Field name="kpp" placeholder="9 цифр" inputMode="numeric" />
+            <Input.Field
+              name="kpp"
+              placeholder="9 цифр"
+              inputMode="numeric"
+              onValueChange={() => edit()}
+            />
           </Input.Wrapper>
         </Input.Root>
         <div className={styles.formWide}>
           <Input.Root label="Почта для счетов" hint="Сюда придут счета и акты">
             <Input.Wrapper>
-              <Input.Field name="email" type="email" placeholder="buh@company.ru" />
+              <Input.Field
+                name="email"
+                type="email"
+                placeholder="buh@company.ru"
+                onValueChange={() => edit()}
+              />
             </Input.Wrapper>
           </Input.Root>
         </div>
       </div>
       <div className={styles.formActions}>
-        <Button.Root variant="ghost" tone="neutral" type="reset" onClick={() => setErrors({})}>
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => {
+            setErrors({});
+            setSaved(false);
+          }}
+        >
           Отменить
         </Button.Root>
-        <Button.Root type="submit">Сохранить</Button.Root>
+        <Button.Root type="submit" tone={saved ? "success" : "accent"}>
+          {saved ? "Сохранено" : "Сохранить"}
+        </Button.Root>
       </div>
     </form>
   );

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

@@ -1,9 +1,28 @@
-/** Required and optional markers, a hint, an error and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. */
+/** 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`. */
 import { Button, Input } from "prime-ui-kit";
 import * as React from "react";
 
+const PROMO_CODES = ["SPRING25", "TEAM10"];
+
+/** The INN error, or nothing when the value is a valid INN. */
+function innError(value: string) {
+  if (value === "") return "Введите ИНН";
+  if (/\D/.test(value)) return "Только цифры, без пробелов и букв";
+  if (value.length !== 10 && value.length !== 12) return "ИНН состоит из 10 или 12 цифр";
+  return undefined;
+}
+
 export default function InputValidationExample() {
-  const [checked, setChecked] = React.useState(false);
+  const [inn, setInn] = React.useState("77010");
+  const [promo, setPromo] = React.useState("SPRING");
+  const [promoError, setPromoError] = React.useState<string>();
+
+  const applyPromo = () =>
+    setPromoError(
+      PROMO_CODES.includes(promo.trim().toUpperCase())
+        ? undefined
+        : "Промокод недействителен или истёк",
+    );
 
   return (
     <>
@@ -12,23 +31,29 @@ export default function InputValidationExample() {
           <Input.Field defaultValue="ООО «Северный ветер»" autoComplete="organization" />
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root label="ИНН" required error="ИНН состоит из 10 или 12 цифр">
+      <Input.Root
+        label="ИНН"
+        required
+        hint="10 цифр для организации, 12 — для ИП"
+        error={innError(inn)}
+      >
         <Input.Wrapper>
-          <Input.Field defaultValue="77010" inputMode="numeric" />
+          <Input.Field value={inn} onValueChange={setInn} inputMode="numeric" />
         </Input.Wrapper>
       </Input.Root>
-      <Input.Root
-        label="Промокод"
-        optional
-        reserveSupportRow
-        error={checked ? "Промокод недействителен или истёк" : undefined}
-      >
+      <Input.Root label="Промокод" optional reserveSupportRow error={promoError}>
         <Input.Wrapper>
-          <Input.Field defaultValue="SPRING25" />
+          <Input.Field
+            value={promo}
+            onValueChange={(value) => {
+              setPromo(value);
+              setPromoError(undefined);
+            }}
+          />
         </Input.Wrapper>
       </Input.Root>
-      <Button.Root variant="soft" tone="neutral" onClick={() => setChecked((value) => !value)}>
-        {checked ? "Сбросить проверку" : "Проверить промокод"}
+      <Button.Root variant="soft" tone="neutral" onClick={applyPromo}>
+        Применить промокод
       </Button.Root>
     </>
   );

package/src/components/modal/COMPONENT.md

@@ -201,7 +201,7 @@ Loading or disabled actions use the Button props (`loading`, `disabled`) inside
 | [custom-container.tsx](examples/custom-container.tsx) | The dialog portals into a given node instead of the document body — `container`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A destructive confirm closes only from its buttons, and not at all while the request runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the open state and opens the dialog from code, without a trigger — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | A settings form in a dialog: the footer button submits the form and an empty name keeps it open — `Modal.Body`, `Modal.Footer`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | A settings form in a dialog: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Modal.Body`, `Modal.Footer`, `error`. |
 
 ## Mistakes
 - Destructive confirm that closes on a stray scrim click → `closeOnOutsideClick={false}`.

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

@@ -1,4 +1,4 @@
-/** A settings form in a dialog: the footer button submits the form and an empty name keeps it open — `Modal.Body`, `Modal.Footer`, `error`. */
+/** A settings form in a dialog: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Modal.Body`, `Modal.Footer`, `error`. */
 import { Button, Icon, Input, Modal, Select, Switch } from "prime-ui-kit";
 import * as React from "react";
 
@@ -44,7 +44,12 @@ export default function ModalInFormExample() {
           <form id={formId} className={styles.form} noValidate onSubmit={submit}>
             <Input.Root label="Название" required error={error} reserveSupportRow>
               <Input.Wrapper>
-                <Input.Field name="name" defaultValue="Сайт компании" autoFocus />
+                <Input.Field
+                  name="name"
+                  defaultValue="Сайт компании"
+                  autoFocus
+                  onValueChange={() => setError(undefined)}
+                />
               </Input.Wrapper>
             </Input.Root>
             <Select.Root label="Ответственный" defaultValue="anna">

package/src/components/native-select/COMPONENT.md

@@ -81,7 +81,7 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 | State | Driven by | DOM |
 |---|---|---|
 | placeholder shown | `placeholder` and no value | the empty first option is selected; placeholder text color |
-| invalid | `invalid` or `error` | `aria-invalid="true"`, `data-invalid="true"` |
+| invalid | `invalid` or `error` | `aria-invalid="true"`, `data-invalid="true"`; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | native `disabled` |
 | size | `size` | `data-size` |
 | focus ring off | `focusRing={false}` | `data-focus-ring="false"` |
@@ -116,10 +116,10 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 | [overview.tsx](examples/overview.tsx) | A labelled system select with a hint; the OS picker opens on phones — `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 an invalid one — `disabled`, `invalid`. |
-| [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. |
+| [validation.tsx](examples/validation.tsx) | Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [option-groups.tsx](examples/option-groups.tsx) | Options under group headings with the native optgroup, and a placeholder while nothing is picked — `placeholder`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: the plan drives the price under the field — `value`, `onValueChange`. |
-| [in-form.tsx](examples/in-form.tsx) | A delivery form for phones: the native value goes into FormData, the required city is checked on submit — `name`, `required`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | A delivery form for phones: the native value goes into FormData, the required city is checked on submit, the error shakes the field and leaves once a city is picked, a calm note confirms the order — `name`, `required`, `error`. |
 
 ## Mistakes
 - `Select.Item` parts as children → NativeSelect takes plain `<option>` / `<optgroup>`.

package/src/components/native-select/examples/examples.module.css

@@ -10,5 +10,7 @@
 
 .actions {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
+  gap: var(--prime-space-2);
 }

package/src/components/native-select/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** A delivery form for phones: the native value goes into FormData, the required city is checked on submit — `name`, `required`, `error`. */
+/** A delivery form for phones: the native value goes into FormData, the required city is checked on submit, the error shakes the field and leaves once a city is picked, a calm note confirms the order — `name`, `required`, `error`. */
 import { Button, NativeSelect, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -6,11 +6,13 @@ import styles from "./examples.module.css";
 
 export default function NativeSelectInFormExample() {
   const [error, setError] = React.useState<string>();
+  const [saved, setSaved] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     const city = String(new FormData(event.currentTarget).get("city") ?? "");
     setError(city ? undefined : "Выберите город доставки");
+    setSaved(Boolean(city));
   };
 
   return (
@@ -24,18 +26,31 @@ export default function NativeSelectInFormExample() {
         required
         error={error}
         placeholder="Выберите город"
-        onValueChange={() => setError(undefined)}
+        onValueChange={() => {
+          setError(undefined);
+          setSaved(false);
+        }}
       >
         <option value="msk">Москва</option>
         <option value="spb">Санкт-Петербург</option>
         <option value="kzn">Казань</option>
       </NativeSelect>
-      <NativeSelect name="slot" label="Время" defaultValue="day">
+      <NativeSelect
+        name="slot"
+        label="Время"
+        defaultValue="day"
+        onValueChange={() => setSaved(false)}
+      >
         <option value="morning">09:00–12:00</option>
         <option value="day">12:00–18:00</option>
         <option value="evening">18:00–21:00</option>
       </NativeSelect>
       <div className={styles.actions}>
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary">
+            Доставка оформлена
+          </Typography>
+        ) : null}
         <Button.Root type="submit">Продолжить</Button.Root>
       </div>
     </form>

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

@@ -1,7 +1,10 @@
-/** Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. */
+/** Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. */
 import { NativeSelect } from "prime-ui-kit";
+import * as React from "react";
 
 export default function NativeSelectValidationExample() {
+  const [owner, setOwner] = React.useState("anna");
+
   return (
     <>
       <NativeSelect label="Страна" required hint="Определяет валюту счетов" defaultValue="ru">
@@ -11,9 +14,11 @@ export default function NativeSelectValidationExample() {
       <NativeSelect
         label="Ответственный"
         required
-        error="Назначьте ответственного"
-        placeholder="Не выбран"
+        error={owner === "none" ? "Назначьте ответственного" : undefined}
+        value={owner}
+        onValueChange={setOwner}
       >
+        <option value="none">Не назначен</option>
         <option value="anna">Анна Петрова</option>
         <option value="ivan">Иван Смирнов</option>
       </NativeSelect>

package/src/components/popover/COMPONENT.md

@@ -162,7 +162,7 @@ No `labels`.
 | [flush.tsx](examples/flush.tsx) | A notification list whose rows and dividers reach the panel edges; each row brings its own padding — `flush`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A destructive confirm that closes only from its buttons, and not at all while the request runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the open state: another button opens the panel from code and its own button closes it — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | An invite form in a panel: Tab stays inside, the role list does not count as an outside click, and submit closes the panel — `trapFocus`. |
+| [in-form.tsx](examples/in-form.tsx) | An invite form in a panel: Tab stays inside, the role list does not count as an outside click, an invalid email shakes the field and keeps the panel open until it is fixed — `trapFocus`, `error`. |
 
 ## Mistakes
 - A hint of a few words in a Popover → use Tooltip (hover / focus, no interactive content).

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

@@ -1,14 +1,28 @@
-/** An invite form in a panel: Tab stays inside, the role list does not count as an outside click, and submit closes the panel — `trapFocus`. */
+/** An invite form in a panel: Tab stays inside, the role list does not count as an outside click, an invalid email shakes the field and keeps the panel open until it is fixed — `trapFocus`, `error`. */
 import { Button, Input, Popover, Select } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
+/** The email error, or nothing when the address is valid. */
+function emailError(value: string) {
+  if (!value.trim()) return "Введите почту";
+  if (!/^\S+@\S+\.\S+$/.test(value.trim())) return "Проверьте адрес: нужен вид name@company.ru";
+  return undefined;
+}
+
 export default function PopoverInFormExample() {
   const [open, setOpen] = React.useState(false);
+  const [error, setError] = React.useState<string>();
 
   return (
-    <Popover.Root open={open} onOpenChange={setOpen}>
+    <Popover.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setError(undefined);
+      }}
+    >
       <Popover.Trigger>
         <Button.Root>Пригласить</Button.Root>
       </Popover.Trigger>
@@ -19,14 +33,22 @@ export default function PopoverInFormExample() {
         </Popover.Header>
         <form
           className={styles.stack}
+          noValidate
           onSubmit={(event) => {
             event.preventDefault();
-            setOpen(false);
+            const next = emailError(String(new FormData(event.currentTarget).get("email") ?? ""));
+            setError(next);
+            if (!next) setOpen(false);
           }}
         >
-          <Input.Root label="Почта" required>
+          <Input.Root label="Почта" required error={error} reserveSupportRow>
             <Input.Wrapper>
-              <Input.Field type="email" name="email" placeholder="name@company.ru" />
+              <Input.Field
+                type="email"
+                name="email"
+                placeholder="name@company.ru"
+                onValueChange={() => setError(undefined)}
+              />
             </Input.Wrapper>
           </Input.Root>
           <Select.Root label="Роль" defaultValue="editor">

package/src/components/radio/COMPONENT.md

@@ -109,7 +109,7 @@ No `variant` / `tone` / `color`.
 |---|---|---|
 | unselected | group `value` ≠ option `value` | `data-state="unchecked"` on the option; circle `fill-strong`, hover `fill-strong-hover` |
 | selected | group `value` = option `value` | `data-state="checked"`; accent circle with a thumb-coloured dot that grows in |
-| invalid | `invalid` or a non-empty `error` on the group | `data-invalid="true"`, `aria-invalid` on the group and the inputs; danger ring on unselected circles |
+| invalid | `invalid` or a non-empty `error` on the group | `data-invalid="true"`, `aria-invalid` on the group and the inputs; danger ring on unselected circles; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | group or option `disabled` | `data-disabled="true"`, native `disabled` on every radio; `fill-muted` circle, `cursor: not-allowed` |
 | pressed | pointer press | the circle scales to the compact press scale |
 | focus-visible | keyboard | outer focus ring around the circle |

package/src/components/select/COMPONENT.md

@@ -159,7 +159,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 |---|---|---|
 | empty | no value | `data-placeholder="true"` on Value, placeholder color |
 | open | `open` / click / arrows | trigger `data-state="open"`, `aria-expanded`; panel `data-state`, `data-side`; chevron turns 180° |
-| invalid | `invalid` or `error` | `data-invalid="true"`, `aria-invalid` on the trigger; error text below |
+| invalid | `invalid` or `error` | `data-invalid="true"`, `aria-invalid` on the trigger; error text below; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | native `disabled`, `data-disabled="true"` |
 | loading | `loading` | `data-loading="true"`, `aria-busy`; status row in the list |
 | searching | typing in the search | panel `data-searching="true"`; groups without matches and separators hide; the match in an option's title, description and plain text is a `<mark>` in `accent-text` (not in the trigger) |
@@ -209,7 +209,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 | [overview.tsx](examples/overview.tsx) | A labelled field with a placeholder; picking an option closes the list and shows its label — `label`, `placeholder`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the label, the list rows and the hint take the tier of the field — `size`. |
 | [states.tsx](examples/states.tsx) | A default field next to a disabled, a loading, an invalid one and a list with nothing in it — `disabled`, `loading`, `invalid`, `labels`. |
-| [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. |
+| [validation.tsx](examples/validation.tsx) | Live validation: unassigning the owner shakes the field and drops the error in, picking someone clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [with-icon.tsx](examples/with-icon.tsx) | A leading icon in the trigger and an icon before every option label — `Select.TriggerIcon`, `Select.ItemIcon`. |
 | [multiple.tsx](examples/multiple.tsx) | Several values: checkboxes in the list, the list stays open on a pick, labels joined in the trigger — `multiple`. |
 | [searchable.tsx](examples/searchable.tsx) | A long list with a search field: options match their label and keywords, groups and the separator hide while searching — `searchable`, `keywords`, `Select.Group`. |
@@ -217,7 +217,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 | [rich-options.tsx](examples/rich-options.tsx) | Options with a picture, a second line and a price; the trigger draws the picked option with the same parts — `renderValue`, `Select.ItemText`, `Select.ItemDescription`, `Select.ItemMeta`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: the plan drives the price under the field and a button resets it — `value`, `onValueChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the list: a button opens it from code, a pick or Escape closes it — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | Regional settings form: the required country is checked on submit, the error replaces the hint — `required`, `error`, `hint`. |
+| [in-form.tsx](examples/in-form.tsx) | Regional settings form: the required country is checked on submit, the error shakes the field and leaves once a country is picked, a calm note confirms the save — `required`, `error`, `hint`. |
 
 ## Mistakes
 - A Label + `aria-labelledby` next to the field → pass `label`, `hint`, `error` to `Select.Root`.

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

@@ -23,6 +23,7 @@
 
 .formActions {
   display: flex;
+  align-items: center;
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }