prime-ui-kit 0.14.0 → 0.15.0

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

@@ -0,0 +1,45 @@
+/** Choices of an order form: a required group shows its error after a submit without a choice, an optional one is marked — `name`, `required`, `optional`, `error`. */
+import { Button, Radio } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function RadioInFormExample() {
+  const [error, setError] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const chosen = new FormData(event.currentTarget).get("delivery");
+    setError(chosen ? undefined : "Выберите способ доставки");
+  };
+
+  return (
+    <form className={styles.form} noValidate onSubmit={submit}>
+      <Radio.Group
+        label="Способ доставки"
+        name="delivery"
+        required
+        error={error}
+        onValueChange={() => setError(undefined)}
+      >
+        <Radio.Root value="courier">
+          <Radio.Label>Курьером до склада</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="pickup">
+          <Radio.Label>Самовывоз с терминала</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <Radio.Group label="Упаковка" name="packing" optional>
+        <Radio.Root value="pallet">
+          <Radio.Label>На паллетах</Radio.Label>
+        </Radio.Root>
+        <Radio.Root value="crate">
+          <Radio.Label>В обрешётке</Radio.Label>
+        </Radio.Root>
+      </Radio.Group>
+      <div className={styles.formActions}>
+        <Button.Root type="submit">Оформить заказ</Button.Root>
+      </div>
+    </form>
+  );
+}

package/dist/skill/reference/components/scroll-container/COMPONENT.md

@@ -160,6 +160,7 @@ No `labels`.
 | [auto-scroll.tsx](examples/auto-scroll.tsx) | A task dragged to the top or bottom edge of a scrolling list scrolls it, faster the closer it comes — `ScrollContainer`, `Dnd.Sortable`. |
 | [overscroll.tsx](examples/overscroll.tsx) | At the end of the list the scroll passes on to the page instead of stopping — `overscrollBehavior`. |
 | [chat.tsx](examples/chat.tsx) | A support chat pinned to its last message: a sent message keeps it at the end, scrolling up loads older ones without moving what is on screen — `anchor`, `onReachStart`. |
+| [load-more.tsx](examples/load-more.tsx) | An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. |
 
 ## Mistakes
 - `overflow: auto` on a plain `div` inside a flex column that never shrinks → use ScrollContainer (it sets `min-height: 0`).

package/dist/skill/reference/components/scroll-container/examples/auto-scroll.tsx

@@ -22,9 +22,9 @@ export default function ScrollContainerAutoScrollExample() {
 
   return (
     <Card.Root role="region" className={styles.card} aria-label="План проекта">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        План проекта
-      </Typography>
+      <Card.Header>
+        <Card.Title>План проекта</Card.Title>
+      </Card.Header>
       <ScrollContainer>
         <Dnd.Root>
           <Dnd.Sortable

package/dist/skill/reference/components/scroll-container/examples/chat.tsx

@@ -57,9 +57,9 @@ export default function ScrollContainerChatExample() {
 
   return (
     <Card.Root className={styles.chat}>
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        ООО «Гранит» · счёт № 4821
-      </Typography>
+      <Card.Header>
+        <Card.Title>ООО «Гранит» · счёт № 4821</Card.Title>
+      </Card.Header>
       <ScrollContainer
         anchor="end"
         onReachStart={loadOlder}

package/dist/skill/reference/components/scroll-container/examples/edges.tsx

@@ -22,9 +22,12 @@ export default function ScrollContainerEdgesExample() {
     <div className={styles.layout}>
       {EDGES.map((edges) => (
         <Card.Root key={edges} role="region" className={styles.card} aria-label={`Лента: ${edges}`}>
-          <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-            {edges}
-          </Typography>
+          <Card.Header>
+            <Card.Title>Лента событий</Card.Title>
+            <Typography as="span" variant="caption" tone="muted">
+              {edges}
+            </Typography>
+          </Card.Header>
           <ScrollContainer edges={edges}>
             <ul className={styles.list}>
               {EVENTS.map((event) => (

package/dist/skill/reference/components/scroll-container/examples/examples.module.css

@@ -17,15 +17,11 @@
   width: auto;
 }
 
-.cardTitle {
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
 .list {
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: 0 var(--prime-space-4) var(--prime-space-3);
+  padding: var(--prime-space-2) var(--prime-space-4) var(--prime-space-3);
   list-style: none;
 }
 
@@ -48,7 +44,7 @@
 }
 
 .messages {
-  padding-top: var(--prime-space-2);
+  min-height: 0;
 }
 
 /* Older messages loading: lines in the messages' geometry, at the top where they will appear. */
@@ -77,7 +73,7 @@
 
 /* Two-axis scroller: the side padding lives on the scrolling element itself (foundation §7). */
 .canvas {
-  padding: 0 var(--prime-space-4) var(--prime-space-3);
+  padding: var(--prime-space-3) var(--prime-space-4);
 }
 
 .grid {
@@ -94,15 +90,6 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* lock.tsx: the title and the review button in one row above the queue. */
-.cardHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-  padding: var(--prime-space-3) var(--prime-space-4);
-}
-
 /* snap.tsx: a row of fixed-width cards; the padding keeps the edge cards' rings unclipped. */
 .tiles {
   display: flex;
@@ -124,7 +111,7 @@
   flex-direction: column;
   gap: var(--prime-space-1);
   margin: 0;
-  padding: 0 var(--prime-space-3) var(--prime-space-3);
+  padding: var(--prime-space-3);
   list-style: none;
 }
 

package/dist/skill/reference/components/scroll-container/examples/load-more.tsx

@@ -0,0 +1,51 @@
+/** An order log that loads the next page as the reader nears its end, with loading lines in the rows' place — `onReachEnd`. */
+import { Card, ScrollContainer, Skeleton, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const ORDERS = Array.from({ length: 40 }, (_, index) => ({
+  id: 2400 - index,
+  amount: `${(18 + ((index * 7) % 23)) * 1000} ₽`,
+}));
+
+const PAGE = 10;
+
+export default function ScrollContainerLoadMoreExample() {
+  const [shown, setShown] = React.useState(PAGE);
+  const [loading, setLoading] = React.useState(false);
+  const done = shown >= ORDERS.length;
+
+  const loadMore = () => {
+    if (done) return;
+    setLoading(true);
+    // The promise keeps the region `aria-busy` and stops repeat calls until it settles.
+    return new Promise<void>((resolve) => {
+      window.setTimeout(() => {
+        setShown((count) => Math.min(count + PAGE, ORDERS.length));
+        setLoading(false);
+        resolve();
+      }, 800);
+    });
+  };
+
+  return (
+    <Card.Root role="region" className={styles.card} aria-label="Журнал заказов">
+      <Card.Header>
+        <Card.Title>Журнал заказов</Card.Title>
+      </Card.Header>
+      <ScrollContainer onReachEnd={loadMore} tabIndex={0} aria-label="Заказы">
+        <ul className={styles.list}>
+          {ORDERS.slice(0, shown).map((order) => (
+            <li key={order.id}>
+              <Typography as="span" variant="body-m" tone="secondary">
+                Заказ № {order.id} · {order.amount}
+              </Typography>
+            </li>
+          ))}
+        </ul>
+        {loading ? <Skeleton lines={3} className={styles.older} /> : null}
+      </ScrollContainer>
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/scroll-container/examples/lock.tsx

@@ -20,10 +20,8 @@ export default function ScrollContainerLockExample() {
 
   return (
     <Card.Root role="region" className={styles.card} aria-label="Очередь заказов">
-      <div className={styles.cardHeader}>
-        <Typography as="h3" variant="title-s">
-          Очередь заказов
-        </Typography>
+      <Card.Header>
+        <Card.Title>Очередь заказов</Card.Title>
         <Button.Root
           variant="soft"
           tone="neutral"
@@ -32,7 +30,7 @@ export default function ScrollContainerLockExample() {
         >
           {reviewing ? "Закрыть проверку" : "Проверить заказ"}
         </Button.Root>
-      </div>
+      </Card.Header>
       <ScrollContainer lock={reviewing}>
         <ul className={styles.list}>
           {ORDERS.map((order) => (

package/dist/skill/reference/components/scroll-container/examples/overscroll.tsx

@@ -8,9 +8,9 @@ const HOURS = Array.from({ length: 12 }, (_, index) => `${String(9 + index).padS
 export default function ScrollContainerOverscrollExample() {
   return (
     <Card.Root role="region" className={styles.card} aria-label="Журнал">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        Журнал выгрузок
-      </Typography>
+      <Card.Header>
+        <Card.Title>Журнал выгрузок</Card.Title>
+      </Card.Header>
       <ScrollContainer overscrollBehavior="auto" tabIndex={0} aria-label="Журнал выгрузок">
         <ul className={styles.list}>
           {HOURS.map((hour) => (

package/dist/skill/reference/components/scroll-container/examples/overview.tsx

@@ -8,9 +8,9 @@ const EVENTS = Array.from({ length: 16 }, (_, index) => `Заказ № ${1040 +
 export default function ScrollContainerOverviewExample() {
   return (
     <Card.Root role="region" className={styles.card} aria-label="Лента событий">
-      <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-        Лента событий
-      </Typography>
+      <Card.Header>
+        <Card.Title>Лента событий</Card.Title>
+      </Card.Header>
       <ScrollContainer>
         <ul className={styles.list}>
           {EVENTS.map((event) => (

package/dist/skill/reference/components/scroll-container/examples/scrollbar.tsx

@@ -20,9 +20,12 @@ export default function ScrollContainerScrollbarExample() {
   return (
     <div className={styles.layout}>
       <Card.Root role="region" className={styles.card} aria-label="Клиенты">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          thin
-        </Typography>
+        <Card.Header>
+          <Card.Title>Клиенты</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            thin
+          </Typography>
+        </Card.Header>
         <ScrollContainer>
           <ul className={styles.list}>
             {CLIENTS.map((client) => (
@@ -35,10 +38,13 @@ export default function ScrollContainerScrollbarExample() {
           </ul>
         </ScrollContainer>
       </Card.Root>
-      <Card.Root role="region" className={styles.card} aria-label="Фильтры заказов">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          hidden
-        </Typography>
+      <Card.Root role="region" className={styles.card} aria-label="Статусы заказов">
+        <Card.Header>
+          <Card.Title>Статусы заказов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            hidden
+          </Typography>
+        </Card.Header>
         <ScrollContainer axis="horizontal" scrollbar="hidden">
           <div className={styles.strip}>
             {TAGS.map((tag) => (

package/dist/skill/reference/components/scroll-container/examples/variants.tsx

@@ -10,10 +10,13 @@ const ROOMS = Array.from({ length: 16 }, (_, index) => `Зал ${index + 1}`);
 export default function ScrollContainerVariantsExample() {
   return (
     <div className={styles.layout}>
-      <Card.Root role="region" className={styles.card} aria-label="Фильтры">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          horizontal
-        </Typography>
+      <Card.Root role="region" className={styles.card} aria-label="Статусы заказов">
+        <Card.Header>
+          <Card.Title>Статусы заказов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            horizontal
+          </Typography>
+        </Card.Header>
         <ScrollContainer axis="horizontal">
           <div className={styles.strip}>
             {TAGS.map((tag) => (
@@ -23,9 +26,12 @@ export default function ScrollContainerVariantsExample() {
         </ScrollContainer>
       </Card.Root>
       <Card.Root role="region" className={styles.card} aria-label="Расписание залов">
-        <Typography as="h3" variant="title-s" className={styles.cardTitle}>
-          both
-        </Typography>
+        <Card.Header>
+          <Card.Title>Расписание залов</Card.Title>
+          <Typography as="span" variant="caption" tone="muted">
+            both
+          </Typography>
+        </Card.Header>
         <ScrollContainer
           axis="both"
           tabIndex={0}

package/dist/skill/reference/components/segmented-control/COMPONENT.md

@@ -192,14 +192,14 @@ Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `dat
 |---|---|
 | [overview.tsx](examples/overview.tsx) | One value out of a few, with a sliding thumb on the chosen segment — `defaultValue`, `aria-label`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier; the outer height equals the control height of the same tier — `size`. |
-| [states.tsx](examples/states.tsx) | No selection yet, a disabled segment and a disabled group next to the default — `disabled`. |
+| [states.tsx](examples/states.tsx) | No selection yet, an invalid group, a disabled segment and a disabled group next to the default — `invalid`, `disabled`. |
 | [with-icon.tsx](examples/with-icon.tsx) | An icon before the label and square icon-only segments named for screen readers — `SegmentedControl.Icon`, `aria-label`. |
 | [colors.tsx](examples/colors.tsx) | A status per option: a dot of its hue before the label and a tinted thumb when chosen — `color`. |
 | [full-width.tsx](examples/full-width.tsx) | The group fills its column; segments tend to equal widths and a long label keeps its own — `fullWidth`. |
 | [scroll.tsx](examples/scroll.tsx) | Segments never wrap: in a column narrower than the row it scrolls with edge fades and brings the chosen segment into view. |
 | [two-line.tsx](examples/two-line.tsx) | A label and a counter on the first line, a metric on the second — `SegmentedControl.Label`, `SegmentedControl.Count`, `SegmentedControl.Description`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the choice and updates other content from it — `value`, `onValueChange`. |
-| [in-form.tsx](examples/in-form.tsx) | An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen — `label`, `hint`, `required`, `error`. |
+| [in-form.tsx](examples/in-form.tsx) | An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen; an optional choice beside it — `label`, `hint`, `required`, `error`, `optional`. |
 
 ## Mistakes
 - Using it as tabs that show different panels → use `Tabs`.

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

@@ -1,4 +1,4 @@
-/** An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen — `label`, `hint`, `required`, `error`. */
+/** An expense form: the choice is a labelled field with a hint, checked on submit, its error leaves as soon as a segment is chosen; an optional choice beside it — `label`, `hint`, `required`, `error`, `optional`. */
 import { Button, Input, SegmentedControl } from "prime-ui-kit";
 import * as React from "react";
 
@@ -36,6 +36,10 @@ export default function SegmentedControlInFormExample() {
         <SegmentedControl.Item value="project">Проекта</SegmentedControl.Item>
         <SegmentedControl.Item value="personal">Личный</SegmentedControl.Item>
       </SegmentedControl.Root>
+      <SegmentedControl.Root label="Возмещение" optional defaultValue="salary">
+        <SegmentedControl.Item value="salary">С зарплатой</SegmentedControl.Item>
+        <SegmentedControl.Item value="card">На карту</SegmentedControl.Item>
+      </SegmentedControl.Root>
       <Button.Root type="submit">Сохранить расход</Button.Root>
     </form>
   );

package/dist/skill/reference/components/segmented-control/examples/states.tsx

@@ -1,4 +1,4 @@
-/** No selection yet, a disabled segment and a disabled group next to the default — `disabled`. */
+/** No selection yet, an invalid group, a disabled segment and a disabled group next to the default — `invalid`, `disabled`. */
 import { SegmentedControl, Typography } from "prime-ui-kit";
 
 export default function SegmentedControlStatesExample() {
@@ -22,6 +22,15 @@ export default function SegmentedControlStatesExample() {
           empty
         </Typography>
       </div>
+      <div>
+        <SegmentedControl.Root invalid aria-label="Статус кампании">
+          <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+          <SegmentedControl.Item value="archived">Архив</SegmentedControl.Item>
+        </SegmentedControl.Root>
+        <Typography as="span" variant="caption" tone="muted">
+          invalid
+        </Typography>
+      </div>
       <div>
         <SegmentedControl.Root defaultValue="active" aria-label="Статус кампании">
           <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>

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

@@ -295,7 +295,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`. |
+| [states.tsx](examples/states.tsx) | A default field next to a disabled, a loading, an invalid one, a list with nothing in it and a field whose focus shows without the ring — `disabled`, `loading`, `invalid`, `labels`, `focusRing`. |
 | [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`. |

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

@@ -16,7 +16,8 @@
 
 .formFields {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  /* Two columns while each keeps 12rem, one column in a narrower form — from its own width. */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-16) * 3)), 1fr));
   align-items: start;
   gap: var(--prime-space-5) var(--prime-space-4);
 }
@@ -27,9 +28,3 @@
   justify-content: flex-end;
   gap: var(--prime-space-2);
 }
-
-@media (max-width: 639px) {
-  .formFields {
-    grid-template-columns: minmax(0, 1fr);
-  }
-}

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

@@ -1,4 +1,4 @@
-/** A default field next to a disabled, a loading, an invalid one and a list with nothing in it — `disabled`, `loading`, `invalid`, `labels`. */
+/** A default field next to a disabled, a loading, an invalid one, a list with nothing in it and a field whose focus shows without the ring — `disabled`, `loading`, `invalid`, `labels`, `focusRing`. */
 import { Select } from "prime-ui-kit";
 
 const ROLES = [
@@ -62,6 +62,18 @@ export default function SelectStatesExample() {
         </Select.Trigger>
         <Select.Content>{null}</Select.Content>
       </Select.Root>
+      <Select.Root label="focusRing={false}" defaultValue="editor" focusRing={false}>
+        <Select.Trigger>
+          <Select.Value />
+        </Select.Trigger>
+        <Select.Content>
+          {ROLES.map((role) => (
+            <Select.Item key={role.value} value={role.value}>
+              {role.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
     </>
   );
 }

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

@@ -198,6 +198,8 @@ Motion: the scrim fades, the sheet slides up over `slow` and down over `base` (`
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Actions with an order raised from the bottom edge: a header names the order, a column of actions follows, and each action closes the sheet — `Sheet.Trigger`, `Sheet.Header`, `Sheet.Close`. |
 | [structure.tsx](examples/structure.tsx) | The content alone: a date sheet with no header and no footer, the calendar across its width, named by `aria-label`; a pick or a swipe down closes it — `aria-label`, `Sheet.Body`. |
+| [header-actions.tsx](examples/header-actions.tsx) | The courier is at the door: an icon tile heads the sheet, the payment status and a ⋯ menu sit before the close button, and two equal buttons fill the footer — `Sheet.Icon`, `Sheet.Actions`, `layout`. |
+| [guard.tsx](examples/guard.tsx) | A review form that holds the sheet: after an edit a swipe, the scrim, Escape and Cancel ask before discarding and the footer says so; sending locks every way out — `Sheet.Guard`, `Sheet.Meta`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A handover the courier must answer: no swipe, scrim or Escape closes the sheet, only its two buttons — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and raises the sheet from a link in the text, without a trigger — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A short form that needs an explicit submit: the one case for a footer, Cancel and Send under the field, an empty comment keeps the sheet open — `Sheet.Footer`, `error`. |

package/dist/skill/reference/components/sheet/examples/guard.tsx

@@ -0,0 +1,72 @@
+/** A review form that holds the sheet: after an edit a swipe, the scrim, Escape and Cancel ask before discarding and the footer says so; sending locks every way out — `Sheet.Guard`, `Sheet.Meta`. */
+import { Button, Fieldset, Sheet, Textarea } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+/** Pretends to send the review. */
+function sendReview() {
+  return new Promise((resolve) => setTimeout(resolve, 1200));
+}
+
+export default function SheetGuardExample() {
+  const formId = React.useId();
+  const [open, setOpen] = React.useState(false);
+  const [dirty, setDirty] = React.useState(false);
+  const [sending, setSending] = React.useState(false);
+
+  const submit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSending(true);
+    await sendReview();
+    setSending(false);
+    setDirty(false);
+    setOpen(false);
+  };
+
+  return (
+    <Sheet.Root
+      open={open}
+      onOpenChange={(next) => {
+        setOpen(next);
+        if (!next) setDirty(false);
+      }}
+    >
+      <Sheet.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Отзыв о доставке
+        </Button.Root>
+      </Sheet.Trigger>
+      <Sheet.Content>
+        <Sheet.Guard busy={sending} dirty={dirty} />
+        <Sheet.Header>
+          <Sheet.Title>Отзыв о доставке</Sheet.Title>
+          <Sheet.Description>Заказ № 1042 · курьер Олег Р.</Sheet.Description>
+        </Sheet.Header>
+        <Sheet.Body>
+          <form id={formId} className={styles.form} onSubmit={submit}>
+            <Fieldset disabled={sending}>
+              <Textarea.Root
+                label="Что понравилось или нет"
+                name="review"
+                placeholder="Привёз вовремя, помог занести коробки"
+                onValueChange={() => setDirty(true)}
+              />
+            </Fieldset>
+          </form>
+        </Sheet.Body>
+        <Sheet.Footer>
+          {dirty ? <Sheet.Meta>Есть несохранённые изменения</Sheet.Meta> : null}
+          <Sheet.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Отмена
+            </Button.Root>
+          </Sheet.Close>
+          <Button.Root type="submit" form={formId} loading={sending} disabled={!dirty}>
+            Отправить
+          </Button.Root>
+        </Sheet.Footer>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+}

package/dist/skill/reference/components/sheet/examples/header-actions.tsx

@@ -0,0 +1,56 @@
+/** The courier is at the door: an icon tile heads the sheet, the payment status and a ⋯ menu sit before the close button, and two equal buttons fill the footer — `Sheet.Icon`, `Sheet.Actions`, `layout`. */
+import { Badge, Button, Dropdown, Icon, Sheet, Typography } from "prime-ui-kit";
+
+export default function SheetHeaderActionsExample() {
+  return (
+    <Sheet.Root>
+      <Sheet.Trigger>
+        <Button.Root variant="soft" tone="neutral">
+          Курьер на месте
+        </Button.Root>
+      </Sheet.Trigger>
+      <Sheet.Content>
+        <Sheet.Header>
+          <Sheet.Icon tone="info">
+            <Icon name="object.truck" />
+          </Sheet.Icon>
+          <Sheet.Title>Курьер у двери</Sheet.Title>
+          <Sheet.Description>Заказ № 1042 · 3 коробки</Sheet.Description>
+          <Sheet.Actions>
+            <Badge.Root color="green">Оплачен</Badge.Root>
+            <Dropdown.Root>
+              <Dropdown.Trigger>
+                <Button.Root variant="ghost" tone="neutral" aria-label="Действия с заказом">
+                  <Button.Icon>
+                    <Icon name="action.more" />
+                  </Button.Icon>
+                </Button.Root>
+              </Dropdown.Trigger>
+              <Dropdown.Content>
+                <Dropdown.Item>Позвонить курьеру</Dropdown.Item>
+                <Dropdown.Item>Перенести доставку</Dropdown.Item>
+                <Dropdown.Separator />
+                <Dropdown.Item tone="danger">Отказаться от заказа</Dropdown.Item>
+              </Dropdown.Content>
+            </Dropdown.Root>
+          </Sheet.Actions>
+        </Sheet.Header>
+        <Sheet.Body>
+          <Typography variant="body-m" tone="secondary">
+            Проверьте коробки при курьере: после приёмки претензии к упаковке не принимаются.
+          </Typography>
+        </Sheet.Body>
+        <Sheet.Footer layout="fill">
+          <Sheet.Close>
+            <Button.Root variant="outline" tone="neutral">
+              Позже
+            </Button.Root>
+          </Sheet.Close>
+          <Sheet.Close>
+            <Button.Root>Принять заказ</Button.Root>
+          </Sheet.Close>
+        </Sheet.Footer>
+      </Sheet.Content>
+    </Sheet.Root>
+  );
+}

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

@@ -166,13 +166,14 @@ Controlled: `value` + `onValueChange`. Uncontrolled: `defaultValue` (falls back
 | [overview.tsx](examples/overview.tsx) | A labelled slider with its current value — `label`, `showValue`. |
 | [variants.tsx](examples/variants.tsx) | Every fill color; accent by default, semantic tones when the value carries meaning — `tone`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size; the thumb, the label and the value grow with the tier — `size`. |
-| [states.tsx](examples/states.tsx) | The fill at both ends and a disabled slider — `disabled`. |
+| [states.tsx](examples/states.tsx) | The fill at both ends, an invalid slider and a disabled one — `invalid`, `disabled`. |
 | [orientation.tsx](examples/orientation.tsx) | Notification levels as a row of upright sliders, minimum at the bottom — `orientation`. |
 | [value-format.tsx](examples/value-format.tsx) | Units in the shown value that are also read by screen readers — `formatValue`, `showValue`. |
 | [range-step.tsx](examples/range-step.tsx) | Own bounds and a coarse or fractional step; a slider without a visible label — `min`, `max`, `step`, `aria-label`. |
 | [hint-and-error.tsx](examples/hint-and-error.tsx) | A slider framed like every field: required marker, a hint, and an error in its place — `required`, `hint`, `error`, `optional`. |
 | [autosave.tsx](examples/autosave.tsx) | A setting saved once the thumb is let go, not on every step: the thumb waits dimmed while it saves, and a value the server refuses glides back — `onCommit`, `hint`, `error`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the value and shares it with a number field for exact entry — `value`, `onValueChange`. |
+| [in-form.tsx](examples/in-form.tsx) | Campaign limits submitted with the form by `name`, a calm note confirms the save — `name`, `label`. |
 
 ## Mistakes
 - `<Slider.Root>` → the slider is a single export: `<Slider />`.

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

@@ -22,3 +22,11 @@
   display: flex;
   gap: var(--prime-space-8);
 }
+
+/* in-form.tsx: the submit row after the fields, the note beside the button. */
+.actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--prime-space-3);
+}