prime-ui-kit 0.16.0 → 0.17.0

package/dist/skill/reference/components/description-list/examples/screen.tsx

@@ -1,6 +1,5 @@
-/** A nested record: the path, the title with its status and due date and the record's actions by weight in the app header, a main column with the line items and their totals and a side column with the client's details and the history — `align`, `orientation`. */
+/** A nested record: the path, the title with its status and due date and the record's actions by weight in its top bar, a main column with the line items and their totals and a side column with the client's details and the history — `align`, `orientation`. */
 import {
-  AppHeader,
   Avatar,
   Breadcrumb,
   Button,
@@ -8,11 +7,9 @@ import {
   DataTable,
   type DataTableColumn,
   DescriptionList,
-  Dropdown,
   Icon,
   LinkButton,
-  PageContent,
-  PageToolbar,
+  Page,
   Timeline,
   Typography,
 } from "prime-ui-kit";
@@ -75,132 +72,128 @@ const COLUMNS: DataTableColumn<Line>[] = [
 
 export default function DescriptionListScreenExample() {
   return (
-    <>
-      {/* A nested record titles itself in the app header: the path up to the list, the record as the
-          only h1 with its status and due date under it, the record's actions in the tools row. */}
-      <AppHeader.Root>
-        <AppHeader.Start>
+    <Page.Root>
+      {/* A nested record titles itself in its top bar: the path up to the list, the record as the
+          only h1 with its status and due date under it, the record's actions at the end. */}
+
+      <Page.TopBar>
+        <Page.Heading>
           <Breadcrumb.Root>
             <Breadcrumb.Item href="#invoices">Счета</Breadcrumb.Item>
           </Breadcrumb.Root>
-          <AppHeader.Separator />
-          <AppHeader.Title>
-            Счёт № 2026-0418
-            <AppHeader.Description>Отправлен · оплатить до 14 октября</AppHeader.Description>
-          </AppHeader.Title>
-        </AppHeader.Start>
-        <AppHeader.Tools>
-          <PageToolbar.Root aria-label="Счёт № 2026-0418">
-            <PageToolbar.Actions>
-              <Dropdown.Root>
-                <Dropdown.Trigger>
-                  <Button.Root variant="soft" tone="neutral" aria-label="Другие действия">
-                    <Button.Icon>
-                      <Icon name="action.more" />
-                    </Button.Icon>
-                  </Button.Root>
-                </Dropdown.Trigger>
-                <Dropdown.Content>
-                  <Dropdown.Item>Дублировать</Dropdown.Item>
-                  <Dropdown.Item>Скачать PDF</Dropdown.Item>
-                  <Dropdown.Separator />
-                  <Dropdown.Item tone="danger">Аннулировать счёт</Dropdown.Item>
-                </Dropdown.Content>
-              </Dropdown.Root>
-              <Button.Root variant="soft" tone="neutral" aria-label="Напомнить клиенту">
-                <Button.Icon>
-                  <Icon name="action.send" />
-                </Button.Icon>
-              </Button.Root>
-              <Button.Root>Отметить оплату</Button.Root>
-            </PageToolbar.Actions>
-          </PageToolbar.Root>
-        </AppHeader.Tools>
-      </AppHeader.Root>
-
-      <PageContent.Root>
-        <PageContent.Body>
-          <div className={styles.columns}>
-            <PageContent.Section label="Позиции" className={styles.main}>
-              <DataTable
-                columns={COLUMNS}
-                rows={LINES}
-                getRowKey={(row) => row.id}
-                paging="none"
-                highlightRowOnHover={false}
-              />
-              {/* The totals end where the «Сумма» column of the table above ends. */}
-              <DescriptionList.Root align="end" className={styles.totals}>
-                {TOTALS.map((row) => (
-                  <DescriptionList.Item key={row.label} label={row.label}>
-                    {row.value}
-                  </DescriptionList.Item>
-                ))}
-                <DescriptionList.Item
-                  label={
-                    <Typography as="span" variant="title-m">
-                      К оплате
-                    </Typography>
-                  }
-                >
-                  <Typography as="span" variant="title-m" numeric="tabular">
-                    {MONEY.format(NET + VAT)}
-                  </Typography>
+          <Page.Title>Счёт № 2026-0418</Page.Title>
+          <Page.Description>Отправлен · оплатить до 14 октября</Page.Description>
+        </Page.Heading>
+        {/* By weight: when the row runs short the soft actions show only their icons, then fold
+            into «⋯»; the primary action stays. */}
+        <Page.Actions>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.copy" />
+            </Button.Icon>
+            Дублировать
+          </Button.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.download" />
+            </Button.Icon>
+            Скачать PDF
+          </Button.Root>
+          <Button.Root variant="soft" tone="neutral">
+            <Button.Icon>
+              <Icon name="action.send" />
+            </Button.Icon>
+            Напомнить
+          </Button.Root>
+          <Button.Root>
+            <Button.Icon>
+              <Icon name="action.check" />
+            </Button.Icon>
+            Отметить оплату
+          </Button.Root>
+        </Page.Actions>
+      </Page.TopBar>
+      <Page.Body>
+        <div className={styles.columns}>
+          <Page.Section label="Позиции" className={styles.main}>
+            <DataTable
+              columns={COLUMNS}
+              rows={LINES}
+              getRowKey={(row) => row.id}
+              paging="none"
+              highlightRowOnHover={false}
+            />
+            {/* The totals end where the «Сумма» column of the table above ends. */}
+            <DescriptionList.Root align="end" className={styles.totals}>
+              {TOTALS.map((row) => (
+                <DescriptionList.Item key={row.label} label={row.label}>
+                  {row.value}
                 </DescriptionList.Item>
-              </DescriptionList.Root>
-            </PageContent.Section>
-            <aside className={styles.aside} aria-label="Клиент и история">
-              <Card.Root variant="panel">
-                <Card.Header>
-                  <Card.Title as="h2">Клиент</Card.Title>
-                </Card.Header>
-                <Card.Body>
-                  <div className={styles.client}>
-                    <span className={styles.person}>
-                      <Avatar.Root color="teal">
-                        <Avatar.Fallback>СВ</Avatar.Fallback>
-                      </Avatar.Root>
-                      <span className={styles.personText}>
-                        <Typography as="span" variant="title-s">
-                          ООО «Северный ветер»
-                        </Typography>
-                        <Typography as="span" variant="caption" tone="muted">
-                          ИНН 7704 512 908
-                        </Typography>
-                      </span>
+              ))}
+              <DescriptionList.Item
+                label={
+                  <Typography as="span" variant="title-m">
+                    К оплате
+                  </Typography>
+                }
+              >
+                <Typography as="span" variant="title-m" numeric="tabular">
+                  {MONEY.format(NET + VAT)}
+                </Typography>
+              </DescriptionList.Item>
+            </DescriptionList.Root>
+          </Page.Section>
+          <aside className={styles.aside} aria-label="Клиент и история">
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">Клиент</Card.Title>
+              </Card.Header>
+              <Card.Body>
+                <div className={styles.client}>
+                  <span className={styles.person}>
+                    <Avatar.Root color="teal">
+                      <Avatar.Fallback>СВ</Avatar.Fallback>
+                    </Avatar.Root>
+                    <span className={styles.personText}>
+                      <Typography as="span" variant="title-s">
+                        ООО «Северный ветер»
+                      </Typography>
+                      <Typography as="span" variant="caption" tone="muted">
+                        ИНН 7704 512 908
+                      </Typography>
                     </span>
-                    <DescriptionList.Root orientation="vertical">
-                      <DescriptionList.Item label="Контакт">
-                        Ольга Мартынова, финансовый директор
-                      </DescriptionList.Item>
-                      <DescriptionList.Item label="Почта для счетов">
-                        <LinkButton href="mailto:billing@veter.ru">billing@veter.ru</LinkButton>
-                      </DescriptionList.Item>
-                    </DescriptionList.Root>
-                  </div>
-                </Card.Body>
-              </Card.Root>
-              <Card.Root variant="panel">
-                <Card.Header>
-                  <Card.Title as="h2">История</Card.Title>
-                </Card.Header>
-                <Card.Body>
-                  <Timeline.Root>
-                    <Timeline.Group>
-                      {HISTORY.map((event) => (
-                        <Timeline.Item key={event.id}>
-                          <Timeline.ItemTitle>{event.title}</Timeline.ItemTitle>
-                          <Timeline.ItemMeta>{event.date}</Timeline.ItemMeta>
-                        </Timeline.Item>
-                      ))}
-                    </Timeline.Group>
-                  </Timeline.Root>
-                </Card.Body>
-              </Card.Root>
-            </aside>
-          </div>
-        </PageContent.Body>
-      </PageContent.Root>
-    </>
+                  </span>
+                  <DescriptionList.Root orientation="vertical">
+                    <DescriptionList.Item label="Контакт">
+                      Ольга Мартынова, финансовый директор
+                    </DescriptionList.Item>
+                    <DescriptionList.Item label="Почта для счетов">
+                      <LinkButton href="mailto:billing@veter.ru">billing@veter.ru</LinkButton>
+                    </DescriptionList.Item>
+                  </DescriptionList.Root>
+                </div>
+              </Card.Body>
+            </Card.Root>
+            <Card.Root variant="panel">
+              <Card.Header>
+                <Card.Title as="h2">История</Card.Title>
+              </Card.Header>
+              <Card.Body>
+                <Timeline.Root>
+                  <Timeline.Group>
+                    {HISTORY.map((event) => (
+                      <Timeline.Item key={event.id}>
+                        <Timeline.ItemTitle>{event.title}</Timeline.ItemTitle>
+                        <Timeline.ItemMeta>{event.date}</Timeline.ItemMeta>
+                      </Timeline.Item>
+                    ))}
+                  </Timeline.Group>
+                </Timeline.Root>
+              </Card.Body>
+            </Card.Root>
+          </aside>
+        </div>
+      </Page.Body>
+    </Page.Root>
   );
 }

package/dist/skill/reference/components/digit-input/examples/grouped.tsx

@@ -1,11 +1,11 @@
 /** A long code read in chunks with a wider gap between groups — `groupSize`. */
-import { DigitInput } from "prime-ui-kit";
+import { DigitInput, Fieldset } from "prime-ui-kit";
 
 export default function DigitInputGroupedExample() {
   return (
-    <>
+    <Fieldset aria-label="Подтверждение входа">
       <DigitInput label="Код из приложения" length={6} groupSize={3} defaultValue="482915" />
-      <DigitInput label="Резервный код" length={8} groupSize={4} />
-    </>
+      <DigitInput label="Резервный код" length={6} groupSize={2} />
+    </Fieldset>
   );
 }

package/dist/skill/reference/components/digit-input/examples/validation.tsx

@@ -18,7 +18,7 @@ export default function DigitInputValidationExample() {
         onValueChange={() => setError(undefined)}
         onComplete={(value) => setError(value === CODE ? undefined : "Неверный код")}
       />
-      <DigitInput label="Код приглашения" optional />
+      <DigitInput label="Код приглашения" length={6} optional />
     </>
   );
 }

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

@@ -12,7 +12,7 @@
 - A vertical break between groups of buttons in a toolbar row; `inset` makes it one text line tall (a header).
 
 ## When not to use
-- To separate cards or panels from each other → use fill and spacing ([Card](../card/COMPONENT.md), [PageContent](../page-content/COMPONENT.md) sections), never a line.
+- To separate cards or panels from each other → use fill and spacing ([Card](../card/COMPONENT.md), [Page](../../layout/page/COMPONENT.md) sections), never a line.
 - Separators inside a dropdown menu → `Dropdown.Separator` ([Dropdown](../dropdown/COMPONENT.md)).
 - Row lines of a table → [DataTable](../data-table/COMPONENT.md) draws them itself.
 
@@ -124,4 +124,4 @@ No `labels`.
 
 ## Related
 - **Built from:** `internal/fieldClasses` (the tier table), `internal/textRole` (the label type), `internal/hasContent`
-- **See also:** [Dropdown](../dropdown/COMPONENT.md) (`Dropdown.Separator`), [Select](../select/COMPONENT.md) (`Select.Separator`), [Accordion](../accordion/COMPONENT.md), [Card](../card/COMPONENT.md), [PageContent](../page-content/COMPONENT.md)
+- **See also:** [Dropdown](../dropdown/COMPONENT.md) (`Dropdown.Separator`), [Select](../select/COMPONENT.md) (`Select.Separator`), [Accordion](../accordion/COMPONENT.md), [Card](../card/COMPONENT.md), [Page](../../layout/page/COMPONENT.md)

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

@@ -18,9 +18,12 @@
   gap: var(--prime-space-4);
 }
 
-/* vertical.tsx: the toolbar row the vertical lines stand in. */
+/* vertical.tsx: the toolbar row the vertical lines stand in; on a phone narrower than the row it
+   wraps rather than squeezing the buttons under their labels. */
 .toolbar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
   gap: var(--prime-space-2);
 }

package/dist/skill/reference/components/divider/examples/vertical.tsx

@@ -1,24 +1,37 @@
 /** Vertical lines between groups of toolbar buttons: one as tall as the row, one inset to a text line — `orientation`, `inset`. */
-import { Button, Divider } from "prime-ui-kit";
+import { Button, Divider, Icon } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function DividerVerticalExample() {
   return (
     <div className={styles.toolbar}>
-      <Button.Root variant="ghost" tone="neutral">
-        Вырезать
+      <Button.Root variant="ghost" tone="neutral" aria-label="Жирный">
+        <Button.Icon>
+          <Icon name="format.bold" />
+        </Button.Icon>
       </Button.Root>
-      <Button.Root variant="ghost" tone="neutral">
-        Копировать
+      <Button.Root variant="ghost" tone="neutral" aria-label="Курсив">
+        <Button.Icon>
+          <Icon name="format.italic" />
+        </Button.Icon>
       </Button.Root>
       <Divider orientation="vertical" />
-      <Button.Root variant="ghost" tone="neutral">
-        Архив
+      <Button.Root variant="ghost" tone="neutral" aria-label="Список">
+        <Button.Icon>
+          <Icon name="format.list" />
+        </Button.Icon>
+      </Button.Root>
+      <Button.Root variant="ghost" tone="neutral" aria-label="Цитата">
+        <Button.Icon>
+          <Icon name="format.quote" />
+        </Button.Icon>
       </Button.Root>
       <Divider orientation="vertical" inset />
-      <Button.Root variant="ghost" tone="danger">
-        Удалить
+      <Button.Root variant="ghost" tone="neutral" aria-label="Ссылка">
+        <Button.Icon>
+          <Icon name="format.link" />
+        </Button.Icon>
       </Button.Root>
     </div>
   );

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

@@ -68,13 +68,15 @@
   padding: var(--prime-space-1) var(--prime-space-2);
 }
 
+/* A card in a column well: the selected thumb of the well's fill (as a Kanban card), so it stands two
+   ladder steps off the column in both themes. */
 .ticket {
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-1);
   padding: var(--prime-space-3) var(--prime-space-4);
   border-radius: var(--prime-radius-m);
-  background: var(--prime-color-layer-nested);
+  background: var(--prime-color-control-selected);
   box-shadow: var(--prime-shadow-raised);
 }
 

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

@@ -235,7 +235,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and opens the drawer from a link, without a trigger — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A settings form in the panel: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Drawer.Body`, `Drawer.Footer`, `error`. |
-| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in the app header: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. |
+| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in its top bar: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. |
 
 ## Mistakes
 - A drawer without `Drawer.Footer` → add one: «Закрыть» for details, «Отмена» + the submit button for a form. The header × alone is not the end of the panel.

package/dist/skill/reference/components/drawer/examples/placement.tsx

@@ -8,38 +8,33 @@ const SIDES = [
 
 export default function DrawerPlacementExample() {
   return (
-    <div>
+    <>
       {SIDES.map(({ side, title }) => (
-        <div key={side}>
-          <Drawer.Root>
-            <Drawer.Trigger>
-              <Button.Root variant="soft" tone="neutral">
-                {title}
-              </Button.Root>
-            </Drawer.Trigger>
-            <Drawer.Content side={side} size="s">
-              <Drawer.Header>
-                <Drawer.Title>{title}</Drawer.Title>
-              </Drawer.Header>
-              <Drawer.Body>
-                <Typography variant="body-m" tone="secondary">
-                  Скругление только со стороны страницы, подложка затемняет остальное.
-                </Typography>
-              </Drawer.Body>
-              <Drawer.Footer>
-                <Drawer.Close>
-                  <Button.Root variant="outline" tone="neutral">
-                    Закрыть
-                  </Button.Root>
-                </Drawer.Close>
-              </Drawer.Footer>
-            </Drawer.Content>
-          </Drawer.Root>
-          <Typography as="span" variant="caption" tone="muted">
-            {side}
-          </Typography>
-        </div>
+        <Drawer.Root key={side}>
+          <Drawer.Trigger>
+            <Button.Root variant="soft" tone="neutral">
+              {title}
+            </Button.Root>
+          </Drawer.Trigger>
+          <Drawer.Content side={side} size="s">
+            <Drawer.Header>
+              <Drawer.Title>{title}</Drawer.Title>
+            </Drawer.Header>
+            <Drawer.Body>
+              <Typography variant="body-m" tone="secondary">
+                Скругление только со стороны страницы, подложка затемняет остальное.
+              </Typography>
+            </Drawer.Body>
+            <Drawer.Footer>
+              <Drawer.Close>
+                <Button.Root variant="outline" tone="neutral">
+                  Закрыть
+                </Button.Root>
+              </Drawer.Close>
+            </Drawer.Footer>
+          </Drawer.Content>
+        </Drawer.Root>
       ))}
-    </div>
+    </>
   );
 }