prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/components/list/examples/overview.tsx

@@ -1,59 +1,60 @@
-/** Support dialogs with a preview, the time and the unread count; a click opens a dialog and makes it the current row — `current`, `onClick`. */
+/** A support ticket queue with the client, the last update and the open count; a click opens a ticket and makes it the current row — `current`, `onClick`. */
 import { Card, List } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
 
-const DIALOGS = [
+const TICKETS = [
   {
-    id: "granit",
+    id: "T-4821",
+    subject: "Счёт без НДС",
     client: "ООО «Гранит»",
-    preview: "Счёт № 4821 пришёл без НДС",
-    time: "15:02",
-    unread: 2,
+    updated: "15:02",
+    open: 2,
   },
   {
-    id: "leto",
+    id: "T-4817",
+    subject: "Перенос доставки на среду",
     client: "ООО «Лето»",
-    preview: "Можно перенести доставку на среду?",
-    time: "13:40",
-    unread: 0,
+    updated: "13:40",
+    open: 0,
   },
   {
-    id: "kozlov",
+    id: "T-4809",
+    subject: "Подключение ЭДО",
     client: "ИП Козлов",
-    preview: "Подключите, пожалуйста, ЭДО",
-    time: "вчера",
-    unread: 1,
+    updated: "вчера",
+    open: 1,
   },
   {
-    id: "sever",
+    id: "T-4796",
+    subject: "Акт сверки за сентябрь",
     client: "АО «Северсталь-Сервис»",
-    preview: "Акт сверки за сентябрь подписан",
-    time: "6 окт",
-    unread: 0,
+    updated: "6 окт",
+    open: 0,
   },
 ];
 
 export default function ListOverviewExample() {
-  const [dialogId, setDialogId] = React.useState("granit");
+  const [ticketId, setTicketId] = React.useState("T-4821");
 
   return (
     <Card.Root className={styles.pane}>
       <Card.Body>
-        <List.Root aria-label="Диалоги">
-          {DIALOGS.map((dialog) => (
+        <List.Root aria-label="Обращения">
+          {TICKETS.map((ticket) => (
             <List.Item
-              key={dialog.id}
-              current={dialog.id === dialogId}
-              onClick={() => setDialogId(dialog.id)}
+              key={ticket.id}
+              value={ticket.id}
+              current={ticket.id === ticketId}
+              onClick={() => setTicketId(ticket.id)}
             >
-              <List.ItemText>{dialog.client}</List.ItemText>
-              <List.ItemDescription>{dialog.preview}</List.ItemDescription>
-              <List.ItemMeta>{dialog.time}</List.ItemMeta>
-              {dialog.unread > 0 ? (
-                <List.ItemCount color="blue">{dialog.unread}</List.ItemCount>
-              ) : null}
+              <List.ItemText>{ticket.subject}</List.ItemText>
+              <List.ItemDescription>
+                {ticket.id} · {ticket.client}
+              </List.ItemDescription>
+              <List.ItemMeta>{ticket.updated}</List.ItemMeta>
+              {ticket.open > 0 ? <List.ItemCount color="blue">{ticket.open}</List.ItemCount> : null}
             </List.Item>
           ))}
         </List.Root>

package/dist/skill/reference/components/list/examples/sizes.tsx

@@ -1,35 +1,35 @@
 /** Every size tier: row height, text, icon and count follow the tier — `size`. */
 import { Icon, List, Typography } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function ListSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
-        <div key={size} className={styles.tier}>
-          <Typography as="span" variant="caption" tone="muted">
-            {size}
-          </Typography>
-          <List.Root size={size} aria-label={`Очереди, ${size}`}>
-            <List.Item current>
-              <List.ItemIcon>
-                <Icon name="object.inbox" />
-              </List.ItemIcon>
-              <List.ItemText>Входящие</List.ItemText>
-              <List.ItemCount color="blue">12</List.ItemCount>
-            </List.Item>
-            <List.Item>
-              <List.ItemIcon>
-                <Icon name="status.sent" />
-              </List.ItemIcon>
-              <List.ItemText>Отправленные</List.ItemText>
-            </List.Item>
-          </List.Root>
+        <div key={size}>
+          <div>
+            <List.Root size={size} aria-label={`Очереди, ${size}`}>
+              <List.Item current>
+                <List.ItemIcon>
+                  <Icon name="object.inbox" />
+                </List.ItemIcon>
+                <List.ItemText>Входящие</List.ItemText>
+                <List.ItemCount color="blue">12</List.ItemCount>
+              </List.Item>
+              <List.Item>
+                <List.ItemIcon>
+                  <Icon name="status.sent" />
+                </List.ItemIcon>
+                <List.ItemText>Отправленные</List.ItemText>
+              </List.Item>
+            </List.Root>
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
         </div>
       ))}
-    </>
+    </div>
   );
 }

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

@@ -1,27 +1,44 @@
 /** The open record, a regular row and an unavailable one — `current`, `disabled`. */
-import { Card, List } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { List, Typography } from "prime-ui-kit";
 
 export default function ListStatesExample() {
   return (
-    <Card.Root className={styles.pane}>
-      <Card.Body>
-        <List.Root aria-label="Заявки">
-          <List.Item current>
-            <List.ItemText>Заявка № 1207 · Возврат оплаты</List.ItemText>
-            <List.ItemDescription>Открыта сейчас</List.ItemDescription>
-          </List.Item>
-          <List.Item>
-            <List.ItemText>Заявка № 1206 · Смена тарифа</List.ItemText>
-            <List.ItemDescription>Ждёт ответа клиента</List.ItemDescription>
-          </List.Item>
-          <List.Item disabled>
-            <List.ItemText>Заявка № 1198 · Доступ к API</List.ItemText>
-            <List.ItemDescription>В архиве, недоступна</List.ItemDescription>
-          </List.Item>
-        </List.Root>
-      </Card.Body>
-    </Card.Root>
+    <div>
+      <div>
+        <div>
+          <List.Root aria-label="Открытая заявка">
+            <List.Item current>
+              <List.ItemText>Заявка № 1207 · Возврат оплаты</List.ItemText>
+              <List.ItemDescription>Открыта сейчас</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            current
+          </Typography>
+        </div>
+        <div>
+          <List.Root aria-label="Заявка в работе">
+            <List.Item>
+              <List.ItemText>Заявка № 1206 · Смена тарифа</List.ItemText>
+              <List.ItemDescription>Ждёт ответа клиента</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            default
+          </Typography>
+        </div>
+        <div>
+          <List.Root aria-label="Заявка в архиве">
+            <List.Item disabled>
+              <List.ItemText>Заявка № 1198 · Доступ к API</List.ItemText>
+              <List.ItemDescription>В архиве, недоступна</List.ItemDescription>
+            </List.Item>
+          </List.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            disabled
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

package/dist/skill/reference/components/list/examples/with-icon.tsx

@@ -1,7 +1,5 @@
-/** Leading avatars of clients and icons of queues; the slot sizes the avatar to the row tier — `List.ItemIcon`. */
-import { Avatar, Card, Icon, List } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+/** Leading avatars of clients and icons of queues; an avatar takes the row tier — `List.ItemIcon`. */
+import { Avatar, Icon, List, Typography } from "prime-ui-kit";
 
 const CLIENTS = [
   { id: "belova", name: "Ирина Белова", company: "ООО «Гранит»", initials: "ИБ", color: "blue" },
@@ -11,9 +9,9 @@ const CLIENTS = [
 
 export default function ListWithIconExample() {
   return (
-    <>
-      <Card.Root className={styles.pane}>
-        <Card.Body>
+    <div>
+      <div>
+        <div>
           <List.Root aria-label="Клиенты">
             {CLIENTS.map((client, index) => (
               <List.Item key={client.id} current={index === 0}>
@@ -27,10 +25,11 @@ export default function ListWithIconExample() {
               </List.Item>
             ))}
           </List.Root>
-        </Card.Body>
-      </Card.Root>
-      <Card.Root className={styles.pane}>
-        <Card.Body>
+          <Typography as="span" variant="caption" tone="muted">
+            Avatar.Root
+          </Typography>
+        </div>
+        <div>
           <List.Root aria-label="Очереди">
             <List.Item current>
               <List.ItemIcon>
@@ -53,8 +52,11 @@ export default function ListWithIconExample() {
               <List.ItemText>Доставка</List.ItemText>
             </List.Item>
           </List.Root>
-        </Card.Body>
-      </Card.Root>
-    </>
+          <Typography as="span" variant="caption" tone="muted">
+            Icon
+          </Typography>
+        </div>
+      </div>
+    </div>
   );
 }

package/dist/skill/reference/components/login-form/COMPONENT.md

@@ -1,6 +1,6 @@
 # LoginForm
 
-**Category:** composition
+**Category:** page
 **Kind:** composite
 
 > A sign-in card with a logo, title, provider buttons and a form; covers sign-in, sign-up, password reset and code confirmation.
@@ -22,14 +22,14 @@ import { LoginForm } from "prime-ui-kit";
 
 ## Anatomy
 ```
-LoginForm.Root                      surface: card fill, radius, shadow
+LoginForm.Root                      width cap; a Card inside: card fill, radius, shadow
 ├─ LoginForm.Header
 │  ├─ LoginForm.Logo                tile with the product mark
 │  ├─ LoginForm.Title               h1
 │  └─ LoginForm.Description
 └─ LoginForm.Body
    ├─ LoginForm.Actions             provider buttons
-   ├─ Divider.Root                  «или»
+   ├─ Divider                       «или»
    ├─ LoginForm.Form                <form>: Input.Root … · Button submit
    │  └─ LoginForm.Actions          primary button + ghost back action
    └─ LoginForm.Footer              «Нет аккаунта? <LinkButton>»
@@ -41,20 +41,34 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### LoginForm.Root
-`ref` → `HTMLDivElement`. The sign-in card: card fill, radius and shadow, the tier rhythm; provides its size to the parts. Native `<div>` props.
+`ref` → `HTMLDivElement`. The sign-in form: a Card (fill, radius, shadow) capped at a small modal's width, the tier rhythm; provides its size to the parts.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Tier of padding, gaps and text roles; every field and button inside without its own `size` takes it. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Tier of padding, gaps and text roles; every field and button inside without its own `size` takes it. Without it the form takes the tier of a sized host (a Modal). |
 | `align` | `"start" \| "center"` | `"start"` | `start` — the Modal header layout (rounded accent tile left, title over description right); `center` — a round logo above centered text. |
 | `flat` | `boolean` | `false` | Removes the card shadow (inside a Modal or on a plain page). No border either way. |
 | `className` | `string` | — | Class on the card. |
+| `children` | `ReactNode` | — | The parts: Header, Body. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | `className` and the other div attributes. |
 
 ### LoginForm.Header
 `ref` → `HTMLElement`. `<header>` with the logo, title and description, laid out by Root `align`. Native props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Logo, Title, Description. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLElement>` | — | The other header attributes. |
+
 ### LoginForm.Logo
-`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label`. Native `<div>` props.
+`ref` → `HTMLDivElement`. A tile for the product mark or an icon (accent tile with `start`, round with `center`); decorative unless it has an `aria-label` — then it is the product mark image (`role="img"`).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The product mark or an `Icon`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Title
 `ref` → `HTMLHeadingElement`. The heading (kit Typography, text role by the tier).
@@ -62,21 +76,54 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `as` | `"h1" \| "h2" \| "h3"` | `"h1"` | Heading level; `h2` when the page already has an `h1`. |
+| `children` | `ReactNode` | — | The heading text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLHeadingElement>` | — | The other heading attributes. |
 
 ### LoginForm.Description
-`ref` → `HTMLParagraphElement`. The secondary line under the title (kit Typography, secondary tone). Native `<p>` props.
+`ref` → `HTMLParagraphElement`. The secondary line under the title (kit Typography, secondary tone).
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The line text. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "children">` | — | The other paragraph attributes. |
 
 ### LoginForm.Body
-`ref` → `HTMLDivElement`. Everything under the header: provider buttons, divider, form, footer. Native `<div>` props.
+`ref` → `HTMLDivElement`. Everything under the header: provider buttons, divider, form, footer.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | Actions, `Divider`, Form, Footer. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Form
 `ref` → `HTMLFormElement`. The `<form>`: fields, then the submit button, with the field → field gap of the tier. Native form props.
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The fields and the Actions. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `FormHTMLAttributes<HTMLFormElement>` | — | The other form (`onSubmit`, `action`) attributes. |
+
 ### LoginForm.Actions
-`ref` → `HTMLDivElement`. A column of full-width buttons: provider buttons above the form, or the primary action with a `ghost` back action. Native `<div>` props.
+`ref` → `HTMLDivElement`. A column of full-width buttons: provider buttons above the form, or the primary action with a `ghost` back action.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The buttons. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `HTMLAttributes<HTMLDivElement>` | — | The other div attributes. |
 
 ### LoginForm.Footer
-`ref` → `HTMLParagraphElement`. The secondary line with a `LinkButton` («Нет аккаунта? Зарегистрироваться»); follows Root `align`. Native `<p>` props.
+`ref` → `HTMLParagraphElement`. The secondary line with a `LinkButton` («Нет аккаунта? Зарегистрироваться»); follows Root `align`.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `children` | `ReactNode` | — | The line with a `LinkButton`. |
+| `className` | `string` | — | Class on the element. |
+| `…rest` | `Omit<HTMLAttributes<HTMLParagraphElement>, "children">` | — | The other paragraph attributes. |
 
 ## Variants
 
@@ -84,7 +131,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
 | `xs` / `s` | padding 16, gap 24, field gap 16, title-s / title-m | inside a Modal or a narrow popover | |
-| `m` | padding 24, gap 32, field gap 20, title-l | a regular sign-in page | yes |
+| `m` | padding 24, gap 32, field gap 20, title-l | a regular sign-in page | the host tier, else `m` |
 | `l` | padding 32, gap 40, field gap 20, heading-s | a standalone sign-in screen on a wide canvas | |
 | `xl` | padding 40, gap 40, field gap 24, heading-m | marketing-grade sign-in, touch-first | |
 
@@ -119,16 +166,23 @@ Root carries `data-size`, `data-align` and `data-flat`.
 ## Layout & spacing
 - header → body `--prime-space-8` (gap on Root); provider buttons → divider → form `--prime-space-4`; field → field → submit `--prime-space-5`; submit → back action `--prime-space-3`; form → footer `--prime-space-6`.
 - Spacing is `gap` on parents; no margins between parts.
-- The card has no border and is capped at the small modal width. To center it on a page, wrap it in your own flex container on the page.
-- The form is a layer of the surface ladder like Card (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
+- The card has no border, takes the full width up to the small modal width. To center it on a page, wrap it in your own flex container on the page.
+- The form is a Card, a layer of the surface ladder (`data-depth`): on the page it is white in light with the raised whisper, fields inside are one step off it.
 
 ## Accessibility
 
 ### Keyboard
-No keyboard interaction.
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
+| Key | Action |
+|---|---|
+| `Enter` | In a field of the form, submits it. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - The title is a real heading (`h1` by default) and the form is a native `<form>`: Enter submits.
+- The logo is decorative; with an `aria-label` it is the product mark image (`role="img"`).
 - Give `LoginForm.Form` an `aria-label` (or `aria-labelledby` pointing to the title id) so the form is a landmark.
 - Fields use `autoComplete` (`email`, `current-password`, `new-password`, `one-time-code`) so password managers and OTP autofill work.
 - Server errors in a Banner need `role="alert"`; field errors come from the fields (`aria-invalid`, described by the error).
@@ -141,15 +195,15 @@ No `labels`.
 ## Examples
 | Example | Shows |
 |---|---|
-| [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header — `align`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
+| [overview.tsx](examples/overview.tsx) | Sign in with a provider button, e-mail and password, a «forgot password» link and a sign-up link under a centered header with the product's named mark — `align`, `LoginForm.Logo`, `LoginForm.Actions`, `LoginForm.Form`, `LoginForm.Footer`. |
 | [sizes.tsx](examples/sizes.tsx) | Padding, gaps and text roles of the card follow the tier; the fields and buttons take the same one — `size`. |
-| [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, and no shadow for a host that already is a surface — `flat`. |
-| [register.tsx](examples/register.tsx) | Sign-up: five fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
+| [structure.tsx](examples/structure.tsx) | The minimal form: no logo, description or footer, no shadow for a host that already is a surface and a second-level title under the host page's own heading — `flat`, `as`. |
+| [register.tsx](examples/register.tsx) | Sign-up: four fields in one column, a strength meter on the new password and a mismatch shown as the field error — `strength`, `error`, `LoginForm.Form`. |
 | [forgot-password.tsx](examples/forgot-password.tsx) | Password reset request: one field, the primary action and a quiet way back — `LoginForm.Actions`. |
 | [reset-password.tsx](examples/reset-password.tsx) | A new password after the e-mail link: a strength meter on the first field and a mismatch error under the second one — `strength`, `error`. |
 | [verification-code.tsx](examples/verification-code.tsx) | The second step with a one-time code: a rejected code shows its error under the cells, resend is a quiet action — `DigitInput`, `LoginForm.Actions`. |
 | [states.tsx](examples/states.tsx) | The submit cycle: the button is busy while the request runs, a failed request shows a danger Banner and marks the password — `loading`, `invalid`. |
-| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width. |
+| [narrow.tsx](examples/narrow.tsx) | On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width — `LoginForm.Form`. |
 
 ## Mistakes
 - A separate block of your own for provider buttons → put them in `LoginForm.Actions`.
@@ -159,5 +213,5 @@ No `labels`.
 - Repeating the card `size` on every field and button → set it once on Root; fields and buttons follow it.
 
 ## Related
-- **Built from:** [Typography](../typography/COMPONENT.md) (`Title`, `Description`, `Footer`)
-- **See also:** [Input](../input/COMPONENT.md), [Fieldset](../fieldset/COMPONENT.md) (disables the fields while signing in), [Card](../card/COMPONENT.md) (the same surface for forms on an app page), [Button](../button/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [DigitInput](../digit-input/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Modal](../modal/COMPONENT.md)
+- **Built from:** [Card](../card/COMPONENT.md) (the surface), [Typography](../typography/COMPONENT.md) (`Title`, `Description`, `Footer`), the icon tile (`iconBox` `.tile`, the `start` logo)
+- **See also:** [Input](../input/COMPONENT.md), [Fieldset](../fieldset/COMPONENT.md) (disables the fields while signing in), [Button](../button/COMPONENT.md), [LinkButton](../link-button/COMPONENT.md), [Divider](../divider/COMPONENT.md), [DigitInput](../digit-input/COMPONENT.md), [Banner](../banner/COMPONENT.md), [Modal](../modal/COMPONENT.md)

package/dist/skill/reference/components/login-form/examples/examples.module.css

@@ -1,25 +1,6 @@
 /* Layout helpers for the LoginForm examples. Semantic tokens only. */
 
-/* Centers one card on the stage (the card itself is capped at the modal width). */
-.stage {
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  min-width: 0;
-}
-
-/* Several cards side by side, wrapping on narrow stages. */
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: center;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-/* A field with a link under it, aligned to the field's end edge. */
+/* overview.tsx: a field with a link under it, aligned to the field's end edge. */
 .withLink {
   display: flex;
   flex-direction: column;
@@ -31,7 +12,7 @@
   align-self: stretch;
 }
 
-/* narrow.tsx: a phone-width stage. */
+/* narrow.tsx: a phone-width stage (320). */
 .narrow {
   display: flex;
   justify-content: center;

package/dist/skill/reference/components/login-form/examples/forgot-password.tsx

@@ -1,39 +1,35 @@
 /** Password reset request: one field, the primary action and a quiet way back — `LoginForm.Actions`. */
 import { Button, Icon, Input, LoginForm } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormForgotPasswordExample() {
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="object.key" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Сброс пароля</LoginForm.Title>
-          <LoginForm.Description>
-            Введите email от аккаунта — отправим ссылку для смены пароля
-          </LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Email" required>
-              <Input.Wrapper>
-                <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
-              </Input.Wrapper>
-            </Input.Root>
-            <LoginForm.Actions>
-              <Button.Root type="submit" fullWidth>
-                Отправить ссылку
-              </Button.Root>
-              <Button.Root variant="ghost" tone="neutral" fullWidth>
-                Вернуться ко входу
-              </Button.Root>
-            </LoginForm.Actions>
-          </LoginForm.Form>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="object.key" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Сброс пароля</LoginForm.Title>
+        <LoginForm.Description>
+          Введите email от аккаунта — отправим ссылку для смены пароля
+        </LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
+          <Input.Root label="Email" required>
+            <Input.Wrapper>
+              <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
+            </Input.Wrapper>
+          </Input.Root>
+          <LoginForm.Actions>
+            <Button.Root type="submit" fullWidth>
+              Отправить ссылку
+            </Button.Root>
+            <Button.Root variant="ghost" tone="neutral" fullWidth>
+              Вернуться ко входу
+            </Button.Root>
+          </LoginForm.Actions>
+        </LoginForm.Form>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

package/dist/skill/reference/components/login-form/examples/narrow.tsx

@@ -1,4 +1,4 @@
-/** On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width. */
+/** On a phone-width screen the card keeps its padding, the header wraps and the buttons stay full width — `LoginForm.Form`. */
 import { Button, Input, LinkButton, LoginForm } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -6,7 +6,7 @@ import styles from "./examples.module.css";
 export default function LoginFormNarrowExample() {
   return (
     <div className={styles.narrow}>
-      <LoginForm.Root size="s">
+      <LoginForm.Root>
         <LoginForm.Header>
           <LoginForm.Title>Вход в кабинет поставщика</LoginForm.Title>
           <LoginForm.Description>Пришлём ссылку для входа на рабочую почту</LoginForm.Description>