prime-ui-kit 0.9.3 → 0.10.0

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

@@ -1,4 +1,4 @@
-/** Regional settings form: the required country is checked on submit, the error replaces the hint — `required`, `error`, `hint`. */
+/** 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`. */
 import { Button, Select, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -7,10 +7,12 @@ import styles from "./examples.module.css";
 export default function SelectInFormExample() {
   const [country, setCountry] = React.useState("");
   const [error, setError] = React.useState<string>();
+  const [saved, setSaved] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError(country ? undefined : "Выберите страну");
+    setSaved(Boolean(country));
   };
 
   return (
@@ -33,6 +35,7 @@ export default function SelectInFormExample() {
           onValueChange={(value) => {
             setCountry(value);
             setError(undefined);
+            setSaved(false);
           }}
         >
           <Select.Trigger>
@@ -44,7 +47,12 @@ export default function SelectInFormExample() {
             <Select.Item value="am">Армения</Select.Item>
           </Select.Content>
         </Select.Root>
-        <Select.Root label="Часовой пояс" hint="Время в отчётах и уведомлениях" defaultValue="msk">
+        <Select.Root
+          label="Часовой пояс"
+          hint="Время в отчётах и уведомлениях"
+          defaultValue="msk"
+          onValueChange={() => setSaved(false)}
+        >
           <Select.Trigger>
             <Select.Value />
           </Select.Trigger>
@@ -56,7 +64,21 @@ export default function SelectInFormExample() {
         </Select.Root>
       </div>
       <div className={styles.formActions}>
-        <Button.Root variant="ghost" tone="neutral" type="reset">
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary">
+            Настройки сохранены
+          </Typography>
+        ) : null}
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => {
+            setCountry("");
+            setError(undefined);
+            setSaved(false);
+          }}
+        >
           Отменить
         </Button.Root>
         <Button.Root type="submit">Сохранить</Button.Root>

package/src/components/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 { Select } from "prime-ui-kit";
+import * as React from "react";
 
 export default function SelectValidationExample() {
+  const [owner, setOwner] = React.useState("anna");
+
   return (
     <>
       <Select.Root label="Страна" required hint="Определяет валюту счетов" defaultValue="ru">
@@ -16,13 +19,15 @@ export default function SelectValidationExample() {
       <Select.Root
         label="Ответственный"
         required
-        error="Назначьте ответственного"
-        placeholder="Не выбран"
+        error={owner === "none" ? "Назначьте ответственного" : undefined}
+        value={owner}
+        onValueChange={setOwner}
       >
         <Select.Trigger>
           <Select.Value />
         </Select.Trigger>
         <Select.Content>
+          <Select.Item value="none">Не назначен</Select.Item>
           <Select.Item value="anna">Анна Петрова</Select.Item>
           <Select.Item value="ivan">Иван Смирнов</Select.Item>
         </Select.Content>

package/src/components/slider/COMPONENT.md

@@ -110,7 +110,7 @@ Tone never carries meaning alone: the label names what the value means.
 |---|---|---|
 | default | — | `data-size`, `data-tone`; track `fill-strong`, tone pill up to the thumb centre, opaque thumb |
 | hover | pointer (fine pointers only) | light liquid glass: the thumb grows to 110%, turns translucent and slightly frosted |
-| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the root, `aria-invalid` on the input; the error replaces the hint, danger focus ring |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"` on the root, `aria-invalid` on the input; the error replaces the hint, danger focus ring; the control shakes once when an error arrives (`data-shake` on the frame) |
 | pressed | dragging | clear glass: the thumb grows to 125%, the rounded end of the fill shows through |
 | focus-visible | keyboard | outer focus ring around the thumb |
 | disabled | `disabled` | `data-disabled="true"` on the root, native `disabled`; muted track and fill, flat thumb, `cursor: not-allowed` |

package/src/components/switch/COMPONENT.md

@@ -87,7 +87,7 @@ No `variant` / `tone` / `color`.
 |---|---|---|
 | off | `checked={false}` / default | `data-state="unchecked"`; track `fill-strong` (hover `fill-strong-hover`), thumb at the start |
 | on | `checked` / `defaultChecked` | `data-state="checked"`; accent track, the thumb glides to the end |
-| invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus |
+| invalid | `invalid` or a non-empty `error` | `data-invalid="true"`, `aria-invalid`; danger ring on the off track and on focus; the row shakes once when an error arrives (`data-shake`) |
 | disabled | `disabled` | `data-disabled="true"`; off track `fill-muted`, on track `accent-soft`, `cursor: not-allowed` |
 | read-only | `readOnly` | `aria-readonly="true"` on the input, `data-readonly="true"` on the field; no hover or press, default cursor |
 | pressed | pointer press | the track scales to the compact press scale (not when disabled or read-only) |

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

@@ -96,7 +96,7 @@ No `variant` or `tone`. The control is the field look; chips are soft Badges on
 | collapsed / expanded | focus inside or the list open | `data-expanded="true"` on the control: every chip on up to three rows (then scroll with edge fades); the height animates |
 | open | focus, typing, arrows | `data-state="open"` on the control; list `data-state`, `data-side` |
 | overflow | more chips than fit at rest | a «+N» Badge button with `labels.more` and the hidden labels in `title` |
-| invalid | `invalid` or `error` | `data-invalid="true"`, `aria-invalid` on the input |
+| invalid | `invalid` or `error` | `data-invalid="true"`, `aria-invalid` on the input; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | `data-disabled="true"`, native `disabled` on the input |
 | option highlighted / selected / disabled | keyboard and pointer / value / option `disabled` | `data-highlighted`, `aria-selected` + checked indicator, `data-disabled` |
 
@@ -147,13 +147,13 @@ No `variant` or `tone`. The control is the field look; chips are soft Badges on
 | [overview.tsx](examples/overview.tsx) | A labelled tag field: focus opens the list, typing filters it, picked tags become chips — `label`, `options`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier with two picked tags; chips sit one tier below the field — `size`. |
 | [states.tsx](examples/states.tsx) | A default field next to a disabled and an invalid one, with a disabled option in the list — `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: removing the last region shakes the field and drops the error in, adding one clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. |
 | [creatable.tsx](examples/creatable.tsx) | A typed text that is not in the list becomes a new tag from the Create row or Enter — `creatable`, `onCreate`, `defaultColor`. |
 | [many-tags.tsx](examples/many-tags.tsx) | More tags than fit: at rest one row with «+N», focused every tag on up to three wrapped rows that scroll — `defaultValue`. |
 | [manage-tags.tsx](examples/manage-tags.tsx) | Users keep their own tag dictionary: the row «⋯» menu renames, recolors or deletes an option — `onOptionUpdate`, `onOptionDelete`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value: a preset button replaces the tags and the count follows them — `value`, `onValueChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the list: a button opens it from code, Escape or an outside press closes it — `open`, `onOpenChange`. |
-| [in-form.tsx](examples/in-form.tsx) | A new task form: the required labels field is checked on submit and its error replaces the hint — `required`, `error`, `creatable`. |
+| [in-form.tsx](examples/in-form.tsx) | A new task form: the required labels field is checked on submit, its error shakes the field and leaves once a label is added, a calm note confirms the task — `required`, `error`, `creatable`. |
 
 ## Mistakes
 - `TagSelect.Root` → TagSelect is a single export: `<TagSelect …/>`.

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

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

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

@@ -1,4 +1,4 @@
-/** A new task form: the required labels field is checked on submit and its error replaces the hint — `required`, `error`, `creatable`. */
+/** A new task form: the required labels field is checked on submit, its error shakes the field and leaves once a label is added, a calm note confirms the task — `required`, `error`, `creatable`. */
 import { Button, Input, TagSelect, type TagSelectOption, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -19,10 +19,12 @@ const PEOPLE: TagSelectOption[] = [
 export default function TagSelectInFormExample() {
   const [labels, setLabels] = React.useState<string[]>([]);
   const [error, setError] = React.useState<string>();
+  const [saved, setSaved] = React.useState(false);
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
     setError(labels.length ? undefined : "Добавьте хотя бы одну метку");
+    setSaved(labels.length > 0);
   };
 
   return (
@@ -45,13 +47,28 @@ export default function TagSelectInFormExample() {
         onValueChange={(next) => {
           setLabels(next);
           setError(undefined);
+          setSaved(false);
         }}
         creatable
         placeholder="Добавить метку"
       />
       <TagSelect label="Наблюдатели" optional options={PEOPLE} placeholder="Добавить человека" />
       <div className={styles.actions}>
-        <Button.Root variant="ghost" tone="neutral" type="reset">
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary">
+            Задача создана
+          </Typography>
+        ) : null}
+        <Button.Root
+          variant="ghost"
+          tone="neutral"
+          type="reset"
+          onClick={() => {
+            setLabels([]);
+            setError(undefined);
+            setSaved(false);
+          }}
+        >
           Отмена
         </Button.Root>
         <Button.Root type="submit">Создать задачу</Button.Root>

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

@@ -1,5 +1,6 @@
-/** Required and optional markers, a hint, and an error that replaces the hint in the same row — `required`, `optional`, `hint`, `error`. */
+/** Live validation: removing the last region shakes the field and drops the error in, adding one clears it; required and optional markers and a hint — `required`, `optional`, `hint`, `error`. */
 import { TagSelect, type TagSelectOption } from "prime-ui-kit";
+import * as React from "react";
 
 const CITIES: TagSelectOption[] = [
   { value: "msk", label: "Москва", color: "blue" },
@@ -13,6 +14,8 @@ const PEOPLE: TagSelectOption[] = [
 ];
 
 export default function TagSelectValidationExample() {
+  const [regions, setRegions] = React.useState(["msk"]);
+
   return (
     <>
       <TagSelect
@@ -25,8 +28,10 @@ export default function TagSelectValidationExample() {
       <TagSelect
         label="Регионы"
         required
-        error="Добавьте хотя бы один регион"
+        error={regions.length ? undefined : "Добавьте хотя бы один регион"}
         options={CITIES}
+        value={regions}
+        onValueChange={setRegions}
         placeholder="Добавить регион"
       />
       <TagSelect label="Наблюдатели" optional options={PEOPLE} placeholder="Добавить человека" />

package/src/components/textarea/COMPONENT.md

@@ -100,7 +100,7 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 | hover | — | fill darkens (not when focused, disabled or read-only) |
 | focus | keyboard focus | focus fill and inset focus ring on the field box; clicking the box padding focuses the textarea |
 | no focus ring | `focusRing={false}` | `data-focus-ring="false"` on the field box |
-| invalid | `invalid` or non-empty `error` | `data-invalid="true"` on the outer wrapper and the field box, `aria-invalid="true"`, danger ring |
+| invalid | `invalid` or non-empty `error` | `data-invalid="true"` on the outer wrapper and the field box, `aria-invalid="true"`, danger ring; the control shakes once when an error arrives (`data-shake` on the frame) |
 | disabled | `disabled` | `data-disabled="true"` on the field box, disabled fill and text; label and hint dimmed |
 | read-only | `readOnly` | `data-readonly="true"` on the field box, no hover, default cursor |
 | reserved support row | `reserveSupportRow` | `data-reserve="true"` on the support row |
@@ -141,11 +141,11 @@ Textarea has no `variant` or `tone`: one field treatment (fill, no visible borde
 | [overview.tsx](examples/overview.tsx) | A labelled multi-line field with a hint; the height follows the text — `label`, `hint`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; text, padding, label and hint follow the tier — `size`. |
 | [states.tsx](examples/states.tsx) | A default field next to a read-only and a disabled one — `readOnly`, `disabled`. |
-| [validation.tsx](examples/validation.tsx) | Required and optional markers, a hint, an error and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
+| [validation.tsx](examples/validation.tsx) | Live validation: an error shakes the field as it arrives, drops in and leaves as soon as the text is fixed; required and optional markers, a hint and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. |
 | [auto-resize.tsx](examples/auto-resize.tsx) | A field that grows with its text next to a fixed one with a resize handle — `autoResize`, `rows`. |
 | [without-focus-ring.tsx](examples/without-focus-ring.tsx) | A single reply composer where the caret and the lighter fill show focus — `focusRing`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the text; the counter follows it and `maxLength` stops extra input — `value`, `onValueChange`, `Textarea.Counter`, `maxLength`. |
-| [in-form.tsx](examples/in-form.tsx) | Support request form: the description is checked on submit and its error does not shift the form — `required`, `error`, `reserveSupportRow`. |
+| [in-form.tsx](examples/in-form.tsx) | Support request form: the description is checked on submit, its error leaves as soon as the text is long enough and does not shift the form, a sent request turns the button green — `required`, `error`, `reserveSupportRow`. |
 
 ## Mistakes
 - `<Textarea.Root><textarea /></Textarea.Root>` → Textarea.Root renders the textarea itself; pass native props to the root.

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

@@ -1,4 +1,4 @@
-/** Support request form: the description is checked on submit and its error does not shift the form — `required`, `error`, `reserveSupportRow`. */
+/** Support request form: the description is checked on submit, its error leaves as soon as the text is long enough and does not shift the form, a sent request turns the button green — `required`, `error`, `reserveSupportRow`. */
 import { Button, Input, Textarea, Typography } from "prime-ui-kit";
 import * as React from "react";
 
@@ -9,13 +9,16 @@ const MIN_LENGTH = 20;
 
 export default function TextareaInFormExample() {
   const [message, setMessage] = React.useState("");
-  const [error, setError] = React.useState<string>();
+  const [checked, setChecked] = React.useState(false);
+  const [sent, setSent] = React.useState(false);
+  const tooShort = message.trim().length < MIN_LENGTH;
+  // After the first submit the check is live: the error leaves as soon as the text is long enough.
+  const error = checked && tooShort ? "Опишите проблему хотя бы в 20 символах" : undefined;
 
   const submit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();
-    setError(
-      message.trim().length < MIN_LENGTH ? "Опишите проблему хотя бы в 20 символах" : undefined,
-    );
+    setChecked(true);
+    setSent(!tooShort);
   };
 
   return (
@@ -44,7 +47,10 @@ export default function TextareaInFormExample() {
           error={error}
           value={message}
           maxLength={LIMIT}
-          onValueChange={setMessage}
+          onValueChange={(value) => {
+            setMessage(value);
+            setSent(false);
+          }}
           counter={<Textarea.Counter current={message.length} max={LIMIT} />}
         />
       </div>
@@ -53,11 +59,17 @@ export default function TextareaInFormExample() {
           variant="ghost"
           tone="neutral"
           type="reset"
-          onClick={() => setError(undefined)}
+          onClick={() => {
+            setMessage("");
+            setChecked(false);
+            setSent(false);
+          }}
         >
           Отменить
         </Button.Root>
-        <Button.Root type="submit">Отправить</Button.Root>
+        <Button.Root type="submit" tone={sent ? "success" : "accent"}>
+          {sent ? "Отправлено" : "Отправить"}
+        </Button.Root>
       </div>
     </form>
   );

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

@@ -1,9 +1,15 @@
-/** 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 text is fixed; required and optional markers, a hint and a support row that does not shift — `required`, `optional`, `hint`, `error`, `reserveSupportRow`. */
 import { Button, Textarea } from "prime-ui-kit";
 import * as React from "react";
 
+const MIN_REASON = 20;
+
 export default function TextareaValidationExample() {
-  const [checked, setChecked] = React.useState(false);
+  const [reason, setReason] = React.useState("Нет");
+  const [comment, setComment] = React.useState("Оплата частями");
+  const [commentError, setCommentError] = React.useState<string>();
+
+  const send = () => setCommentError(/\d{3,}/.test(comment) ? undefined : "Укажите номер договора");
 
   return (
     <>
@@ -16,18 +22,28 @@ export default function TextareaValidationExample() {
       <Textarea.Root
         label="Причина отказа"
         required
-        defaultValue="Нет"
-        error="Опишите причину хотя бы в 20 символах"
+        value={reason}
+        onValueChange={setReason}
+        hint="Клиент получит её в письме"
+        error={
+          reason.trim().length < MIN_REASON
+            ? `Опишите причину хотя бы в ${MIN_REASON} символах`
+            : undefined
+        }
       />
       <Textarea.Root
         label="Комментарий для бухгалтерии"
         optional
         reserveSupportRow
-        defaultValue="Оплата частями"
-        error={checked ? "Укажите номер договора" : undefined}
+        value={comment}
+        onValueChange={(value) => {
+          setComment(value);
+          setCommentError(undefined);
+        }}
+        error={commentError}
       />
-      <Button.Root variant="soft" tone="neutral" onClick={() => setChecked((value) => !value)}>
-        {checked ? "Сбросить проверку" : "Проверить комментарий"}
+      <Button.Root variant="soft" tone="neutral" onClick={send}>
+        Отправить в бухгалтерию
       </Button.Root>
     </>
   );

package/src/styles/theme-dark.css

@@ -103,6 +103,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-300);
   --prime-color-success-default: var(--prime-ref-color-green-400);
   --prime-color-success-fg: var(--prime-ref-color-gray-950);
+  --prime-color-success-hover: var(--prime-ref-color-green-300);
   --prime-color-success-soft: color-mix(in srgb, var(--prime-ref-color-green-500) 16%, transparent);
   --prime-color-success-text: var(--prime-ref-color-green-300);
   --prime-color-text-disabled: var(--prime-ref-color-gray-600);

package/src/styles/theme-light.css

@@ -164,6 +164,7 @@
   --prime-color-palette-yellow-text: var(--prime-ref-color-yellow-800);
   --prime-color-success-default: var(--prime-ref-color-green-700);
   --prime-color-success-fg: var(--prime-ref-color-white);
+  --prime-color-success-hover: var(--prime-ref-color-green-800);
   --prime-color-success-soft: var(--prime-ref-color-green-100);
   --prime-color-success-text: var(--prime-ref-color-green-700);
   --prime-color-text-disabled: var(--prime-ref-color-gray-400);

package/src/styles/tokens.css

@@ -31,6 +31,7 @@
   --prime-ref-color-green-400: #4ade80;
   --prime-ref-color-green-500: #22c55e;
   --prime-ref-color-green-700: #15803d;
+  --prime-ref-color-green-800: #166534;
   --prime-ref-color-orange-100: #ffedd5;
   --prime-ref-color-orange-300: #fdba74;
   --prime-ref-color-orange-400: #fb923c;