prime-ui-kit 0.13.1 → 0.15.0

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

@@ -158,6 +158,7 @@ Item DOM: `data-state`, `data-disabled`, `data-icon-only`, `data-two-line`, `dat
 ## Layout & spacing
 - In a form it is a field: label → track `label-gap`, track → support row `hint-gap`, field → field `--prime-space-5` like every field.
 - Width is content-based by default; segments never wrap. In a narrow container the row scrolls horizontally with fading edges.
+- On a coarse pointer each segment's hit area grows to the 44 px touch target in height; the track keeps its tier height.
 - In a toolbar: gap `--prime-space-3` between controls; keep every control at one size.
 - Caption under a group: gap `--prime-space-2`.
 - `fullWidth` inside modals and mobile sheets. Single-line segments are `flex: 1 1 0` with `min-width: max-content`: short labels share the spare width equally, a long label keeps its own width, nothing truncates; when the labels do not fit, the row scrolls.
@@ -191,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

@@ -30,7 +30,7 @@ import { Select } from "prime-ui-kit";
 ```
 Select.Root                       field frame: label · control · hint/error; value, open, search
 ├── Select.Trigger                <button role="combobox">: [icon] [value] [clear] [chevron]
-│   ├── Select.TriggerIcon        optional leading glyph
+│   ├── Select.TriggerIcon        optional leading glyph; alone (no Select.Value) — an icon-only trigger
 │   └── Select.Value              picked label or placeholder (renderValue for a rich trigger)
 └── Select.Content                portaled panel while open; closed, the items render hidden in place so the trigger knows their labels
     ├── search row                with `searchable`
@@ -103,7 +103,7 @@ an icon) goes inside `Select.ItemMeta`.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `children` | `ReactNode` | — | `Select.TriggerIcon`, `Select.Value`, optionally a Badge after it. |
+| `children` | `ReactNode` | — | `Select.TriggerIcon`, `Select.Value`, optionally a Badge after it. A `Select.TriggerIcon` alone makes an icon-only trigger (the value read, not shown). |
 
 ### Select.Value
 `ref` → `HTMLSpanElement`. The picked label (labels joined with `multiple`) with an ellipsis, or the placeholder.
@@ -212,6 +212,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 - Label → field: tier `label-gap`; field → hint: tier `hint-gap`; field → field in a form: `--prime-space-5`.
 - Panel: at least the trigger width and `--prime-panel-min-width`, at most twice that; max height `--prime-panel-max-height` (scrolls); flips near the viewport edge.
 - Long values truncate with an ellipsis in the trigger.
+- The clear segment's hit area grows to the 44 px touch target in height on a coarse pointer, like the clear segment of an Input.
 - A rich row and its trigger use the same parts in the same order: leading media (`Avatar.Root`,
   `Thumbnail.Root`) → `Select.ItemText` (+ `Select.ItemDescription`) → trailing `Badge.Root` /
   `Select.ItemMeta`. In a row the trailing part sits before the check; in the trigger, at the end
@@ -294,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`. |
@@ -306,6 +307,7 @@ No `variant` or `tone`. The trigger is the field look (fill, inset control borde
 | [saving.tsx](examples/saving.tsx) | A choice that saves on the server at once: the picked value shows with a spinner on the trigger, and a refused save rolls it back and says why — `onValueChange`, `error`. |
 | [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`. |
 | [people.tsx](examples/people.tsx) | People in the rows and the trigger: an avatar sized to the tier before the name, a role badge after it — `Avatar.Root`, `Badge.Root`, `renderValue`. |
+| [icon-only.tsx](examples/icon-only.tsx) | An icon picker as wide as its glyph: the trigger holds only the picked icon and the chevron, the value is still read aloud — `Select.TriggerIcon`. |
 | [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 shakes the field and leaves once a country is picked, a calm note confirms the save — `required`, `error`, `hint`. |

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/icon-only.tsx

@@ -0,0 +1,38 @@
+/** An icon picker as wide as its glyph: the trigger holds only the picked icon and the chevron, the value is still read aloud — `Select.TriggerIcon`. */
+import { Icon, type IconName, Select } from "prime-ui-kit";
+import * as React from "react";
+
+const ICONS: { value: IconName; label: string }[] = [
+  { value: "object.package", label: "Склад" },
+  { value: "object.truck", label: "Доставка" },
+  { value: "object.receipt", label: "Счета" },
+  { value: "object.users", label: "Клиенты" },
+];
+
+export default function SelectIconOnlyExample() {
+  const [icon, setIcon] = React.useState<IconName>("object.truck");
+
+  return (
+    <Select.Root
+      label="Иконка раздела"
+      value={icon}
+      onValueChange={(next) => setIcon(next as IconName)}
+    >
+      <Select.Trigger>
+        <Select.TriggerIcon>
+          <Icon name={icon} />
+        </Select.TriggerIcon>
+      </Select.Trigger>
+      <Select.Content>
+        {ICONS.map((option) => (
+          <Select.Item key={option.value} value={option.value}>
+            <Select.ItemIcon>
+              <Icon name={option.value} />
+            </Select.ItemIcon>
+            {option.label}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select.Root>
+  );
+}

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);
+}

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

@@ -0,0 +1,47 @@
+/** Campaign limits submitted with the form by `name`, a calm note confirms the save — `name`, `label`. */
+import { Button, Slider, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+export default function SliderInFormExample() {
+  const [saved, setSaved] = React.useState<string>();
+
+  const submit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    setSaved(
+      `Сохранено: показов в день — ${data.get("dailyCap")}, ставка — ${data.get("bidShare")}%.`,
+    );
+  };
+
+  return (
+    <form className={styles.column} noValidate onSubmit={submit}>
+      <Slider
+        label="Показов одному клиенту в день"
+        name="dailyCap"
+        min={1}
+        max={10}
+        defaultValue={3}
+        showValue
+        onValueChange={() => setSaved(undefined)}
+      />
+      <Slider
+        label="Доля бюджета на ставки, %"
+        name="bidShare"
+        step={5}
+        defaultValue={40}
+        showValue
+        onValueChange={() => setSaved(undefined)}
+      />
+      <div className={styles.actions}>
+        <Button.Root type="submit">Сохранить лимиты</Button.Root>
+        {saved ? (
+          <Typography as="p" variant="body-s" tone="secondary" role="status">
+            {saved}
+          </Typography>
+        ) : null}
+      </div>
+    </form>
+  );
+}

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

@@ -1,4 +1,4 @@
-/** The fill at both ends and a disabled slider — `disabled`. */
+/** The fill at both ends, an invalid slider and a disabled one — `invalid`, `disabled`. */
 import { Slider } from "prime-ui-kit";
 
 export default function SliderStatesExample() {
@@ -10,6 +10,9 @@ export default function SliderStatesExample() {
       <div>
         <Slider label="max" showValue defaultValue={100} />
       </div>
+      <div>
+        <Slider label="invalid" showValue defaultValue={90} invalid />
+      </div>
       <div>
         <Slider label="disabled" showValue defaultValue={35} disabled />
       </div>

package/dist/skill/reference/components/smart-filter/COMPONENT.md

@@ -213,7 +213,7 @@ same height and type.
 | [overview.tsx](examples/overview.tsx) | Filters above a request list: the filter button and the search, applied filters as tags, rows narrowed by the value and the text — `fields`, `value`, `search`, `matchesSmartFilter`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: the filter button, the search, the tags and the panel follow one tier — `size`. |
 | [many-values.tsx](examples/many-values.tsx) | An open set of twenty services, degraded ones marked with an icon, collapsed after eight; typing narrows the panel and marks the match in accent — `finite`, `icon`, `collapsedLimit`. |
-| [ranges.tsx](examples/ranges.tsx) | Deals narrowed by an amount from–to and a period from the calendar; each range is one readable chip — `kind`, `formatValue`, `matchesSmartFilter`. |
+| [ranges.tsx](examples/ranges.tsx) | Deals narrowed by an amount from–to and a period from the calendar; each range is one readable chip, and the bounds go to the server as from / to parameters — `kind`, `formatValue`, `matchesSmartFilter`, `isSmartFilterRange`. |
 | [single-value.tsx](examples/single-value.tsx) | For an API that takes one value per field: the filter button without a search, a press picks only that value and nothing can be hidden — `searchable`, `multiple`. |
 | [option-groups.tsx](examples/option-groups.tsx) | Values of different kinds in one field: owner types and people under their own headings — `options`, `group`. |
 | [controlled.tsx](examples/controlled.tsx) | A saved view sets the value from outside; the selection is read back as the list to ask the server for — `value`, `onValueChange`, `resolveSmartFilterValues`. |

package/dist/skill/reference/components/smart-filter/examples/controlled.tsx

@@ -30,13 +30,13 @@ export default function SmartFilterControlledExample() {
         <SmartFilter.Chips />
       </SmartFilter.Root>
       <div className={styles.views}>
-        <Button.Root variant="soft" tone="neutral" size="s" onClick={() => setValue(ONLY_PUT)}>
+        <Button.Root variant="soft" tone="neutral" onClick={() => setValue(ONLY_PUT)}>
           Только PUT
         </Button.Root>
-        <Button.Root variant="soft" tone="neutral" size="s" onClick={() => setValue(NO_READS)}>
+        <Button.Root variant="soft" tone="neutral" onClick={() => setValue(NO_READS)}>
           Без GET и POST
         </Button.Root>
-        <Button.Root variant="ghost" tone="neutral" size="s" onClick={() => setValue({})}>
+        <Button.Root variant="ghost" tone="neutral" onClick={() => setValue({})}>
           Сбросить
         </Button.Root>
       </div>