prime-ui-kit 0.14.0 → 0.16.0

package/src/components/login-form/examples/structure.tsx

@@ -1,28 +1,24 @@
-/** The minimal form: no logo, description or footer, and no shadow for a host that already is a surface — `flat`. */
+/** 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`. */
 import { Button, Input, LoginForm } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormStructureExample() {
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root flat>
-        <LoginForm.Header>
-          <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Email">
-              <Input.Wrapper>
-                <Input.Field type="email" placeholder="name@company.ru" />
-              </Input.Wrapper>
-            </Input.Root>
-            <Button.Root type="submit" fullWidth>
-              Получить ссылку для входа
-            </Button.Root>
-          </LoginForm.Form>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root flat>
+      <LoginForm.Header>
+        <LoginForm.Title as="h2">Войти, чтобы оплатить счёт</LoginForm.Title>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
+          <Input.Root label="Email">
+            <Input.Wrapper>
+              <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
+            </Input.Wrapper>
+          </Input.Root>
+          <Button.Root type="submit" fullWidth>
+            Получить ссылку для входа
+          </Button.Root>
+        </LoginForm.Form>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

package/src/components/login-form/examples/verification-code.tsx

@@ -2,56 +2,52 @@
 import { Button, DigitInput, Icon, LinkButton, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormVerificationCodeExample() {
   const [code, setCode] = React.useState("");
   const [invalid, setInvalid] = React.useState(false);
 
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="status.emailSent" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Введите код</LoginForm.Title>
-          <LoginForm.Description>Мы отправили 6 цифр на name@company.ru</LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form
-            onSubmit={(e) => {
-              e.preventDefault();
-              setInvalid(code !== "123456");
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="status.emailSent" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Введите код</LoginForm.Title>
+        <LoginForm.Description>Мы отправили 6 цифр на name@company.ru</LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form
+          onSubmit={(e) => {
+            e.preventDefault();
+            setInvalid(code !== "123456");
+          }}
+        >
+          <DigitInput
+            length={6}
+            size="l"
+            fullWidth
+            groupSize={3}
+            value={code}
+            error={invalid ? "Неверный код. Проверьте письмо и попробуйте ещё раз" : undefined}
+            onValueChange={(value) => {
+              setCode(value);
+              setInvalid(false);
             }}
-          >
-            <DigitInput
-              length={6}
-              size="l"
-              fullWidth
-              groupSize={3}
-              value={code}
-              error={invalid ? "Неверный код. Проверьте письмо и попробуйте ещё раз" : undefined}
-              onValueChange={(value) => {
-                setCode(value);
-                setInvalid(false);
-              }}
-              labels={{ group: "Код из письма" }}
-            />
-            <LoginForm.Actions>
-              <Button.Root type="submit" fullWidth disabled={code.length < 6}>
-                Подтвердить
-              </Button.Root>
-              <Button.Root variant="ghost" tone="neutral" fullWidth>
-                Отправить код ещё раз
-              </Button.Root>
-            </LoginForm.Actions>
-          </LoginForm.Form>
-          <LoginForm.Footer>
-            Не тот адрес? <LinkButton href="#">Изменить email</LinkButton>
-          </LoginForm.Footer>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+            labels={{ group: "Код из письма" }}
+          />
+          <LoginForm.Actions>
+            <Button.Root type="submit" fullWidth disabled={code.length < 6}>
+              Подтвердить
+            </Button.Root>
+            <Button.Root variant="ghost" tone="neutral" fullWidth>
+              Отправить код ещё раз
+            </Button.Root>
+          </LoginForm.Actions>
+        </LoginForm.Form>
+        <LoginForm.Footer>
+          Не тот адрес? <LinkButton href="#">Изменить email</LinkButton>
+        </LoginForm.Footer>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

package/src/components/media-viewer/COMPONENT.md

@@ -57,13 +57,13 @@ MediaViewer                        portal + role="dialog", a dark theme island o
 | `onIndexChange` | `(index: number) => void` | — | The page turned: a swipe, an arrow, a key, a thumbnail of the filmstrip. Fires once the page has settled, also after a slide to a far item. |
 | `loop` | `boolean` | `false` | Past the last item comes the first, and back (with three items or more). |
 | `maxZoom` | `number` | `4` | How far a picture zooms, times its fitted size. |
-| `thumbnails` | `boolean` | `false` | A filmstrip of every item along the bottom: it follows the page, scrolls on its own at rest, and a press slides to that item. |
+| `thumbnails` | `boolean` | `false` | A filmstrip of every item along the bottom: it follows the page; after a scroll by the person it stays where it was left until the page turns, then glides back. A press slides to that item. |
 | `autoPlay` | `boolean` | `true` | A video starts once its page settles, muted where the browser refuses sound without a press. `false` — it waits for a press on its play disk. |
 | `closeOnEscape` | `boolean` | `true` | Escape closes the viewer. |
 | `closeOnOutsideClick` | `boolean` | `true` | A vertical swipe, or a mouse click on the stage past the media, closes the viewer. |
 | `getOrigin` | `(index: number) => Element \| null` | — | The element item `index` opens from and closes into (its thumbnail). Without it the viewer finds the picture showing the item's `thumbnail`, `src` or `poster`; with none on screen, it fades. |
 | `renderActions` | `(item: MediaViewerItem, index: number) => ReactNode` | — | Actions for the item on screen in the top bar, before the zoom and close buttons: `Button shape="circle" variant="shade"`, a ⋯ Dropdown. |
-| `labels` | `Partial<MediaViewerLabels>` | — | System strings, see Labels. |
+| `labels` | `Partial<MediaViewerLabels>` | — | Built-in strings, see Labels. |
 | `aria-label` | `string` | — | The name of the dialog; default `labels.viewer`. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the `role="dialog"` element. |
 
@@ -87,14 +87,14 @@ MediaViewer has no `variant`, `size` or `tone`: the stage is always near black,
 | State | Driven by | DOM |
 |---|---|---|
 | open / closed | `open` / `defaultOpen` / `onOpenChange` | `data-state` on the dialog; mounted until the picture has flown back into its thumbnail (or faded) |
-| page | `index` / `defaultIndex` / `onIndexChange` | `data-current` on the page on screen; the pages around it are `aria-hidden` and `inert`; `onIndexChange` fires once the page has settled |
+| page | `index` / `defaultIndex` / `onIndexChange` | `data-current` on the page on screen; the pages around it are `aria-hidden` and `inert`; `onIndexChange` fires once the page has settled; its thumbnail carries `aria-current="true"` and a ring in the light ink |
 | far slide | a thumbnail, `Home` / `End` | the far item is mounted as the neighbour on its side and slides in; the real neighbour there is hidden meanwhile |
 | zoomed | a pinch (also a trackpad pinch), a double tap, ⌘ / Ctrl + wheel, the zoom button, `+` / `-` / `0` — about the point, up to `maxZoom` | `data-zoomed` on the dialog; the zoom button turns «Уменьшить» |
 | gesture | a finger or the mouse dragging | `data-gesture="page \| pan \| pinch \| dismiss"` on the dialog |
 | chrome hidden | a tap, a pinch or a double tap (Tab brings it back); a playing video after 2.5 s without the pointer moving | `data-chrome="hidden"`: the bars fade and drift aside, take no presses; while a video plays the pointer hides too (`data-playing`). A video standing still always keeps its bar |
 | flight | open and close | `data-phase="opening \| open \| closing"`: only the picture moves; the play disk and the bars come after it lands and go before it takes off |
-| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a Spinner that fades out as the picture arrives |
-| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel with «Повторить»; it fades in, and on a retry cross-fades with the Spinner in the same place |
+| loading | the full picture is on its way or decoding | `data-status="loading"` on the page; a picture shows only once it is decoded, and the `thumbnail` stands in, blurred, until the picture has fully shown over it, so no frame is blank; without one a block Skeleton in the picture's fitted box, which the picture fades in over |
+| error | the picture or the video failed | `data-status="error"`: a «Не удалось загрузить» panel on the media shade with «Повторить»; it fades in, and fades out on a retry while the picture's box holds its Skeleton again |
 | sound | the sound button, its level panel (hover, focus, a tap), ↑ / ↓, M | one `volume` and mute for every video of the viewer; `data-open` on the sound control while the level shows; `autoPlay` refused with sound starts muted |
 
 Motion: it opens out of the thumbnail it was opened from — the picture grows from the thumbnail's shape to its fit over `base` on the `emphasized` curve while the stage fades in — and closes back into the thumbnail of the item on screen (`getOrigin`; without it the opener for the item it opened at, and for any other item the picture on the page that shows its `thumbnail`, `src` or `poster`, nearest the opener — paging on in a grid still closes into the right tile); without one, or with less than a fifth of it in view, it rises from a slight shrink and fades. The shape is what the page shows of the thumbnail: its media box, cut by every clipping ancestor (a scroller, a rounded album, a bubble) and the viewport, and the radius of each corner taken from the frame whose corner it is — an album's inner tiles fly square, its corner tiles round only on the outer side, and the corners glide all the way, never snap. During the flight only the picture moves; a video flies as the frame of the thumbnail it opened from (drawn before the first paint), starts only after it lands (`autoPlay`) and pauses before it takes off. Released gestures settle with a spring: a page turns past half its width or on a flick, and any other item — a thumbnail far along the strip, `Home` / `End` — arrives by the same slide, never a cut or a fade; the filmstrip follows the track on every frame, so its glide and the emphasis of its thumbnails move with the finger and settle with the page; a zoomed picture coasts with iOS momentum (deceleration 0.998 / ms) and springs back from its edges, and at its edge a sideways drag turns the page; a pinch past its range resists like a rubber band and settles inside it, a swipe away shrinks the picture and thins the stage and closes past 12% of the height or on a flick. Under `prefers-reduced-motion` the open and close are instant and the springs land at once; the picture still follows the finger.
@@ -129,6 +129,8 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `ArrowLeft` · `ArrowRight` | Turn the page (mirrored in RTL); at an end without `loop` the track nudges back. |
@@ -142,13 +144,15 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 | `Tab` · `Shift+Tab` | Cycle focus inside the viewer and bring the bars back. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - `role="dialog"`, `aria-modal="true"`, named by `aria-label` or `labels.viewer`.
 - Every page is a `role="group"` with `aria-roledescription="слайд"` and a name like «3 из 12»; the neighbours are `aria-hidden` and `inert`.
 - A page change is read out by a polite live region: «{alt}, 3 из 12».
 - Every gesture has a single-pointer alternative: arrows and keys turn pages, the zoom button and keys zoom, the close button closes (WCAG 2.5.1, 2.5.7).
 - With `autoPlay` a video starts once its page settles; pause, sound and its level are always on the bar (WCAG 1.4.2), and `autoPlay={false}` leaves the start to the person. The seek slider names the time in `aria-valuetext`, the level slider the percent.
 - A video's bar stays while it stands still; while it plays it steps aside after 2.5 s without the pointer moving and comes back on any move, key or touch — never while the pointer rests on it, focus is in it or the level is open.
-- The level is an upright Slider in a panel over the sound button: it opens on hover, on focus (Tab) and on a tap; Escape closes the panel, not the viewer. A mouse click on the button mutes; a click on the video plays and pauses it.
+- The level is an upright Slider in a panel over the sound button: it opens on hover, on focus (Tab) and on a tap; Escape or a press elsewhere closes the panel, not the viewer (Escape returns focus to the button). A mouse click on the button mutes; a click on the video plays and pauses it.
 - The page under the viewer is `inert`, scroll is locked; on close focus returns to the opener.
 
 ### Labels
@@ -185,10 +189,10 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Photos of an acceptance open full-screen from their thumbnails, at the one that was pressed — `items`, `open`, `index`. |
 | [thumbnails.tsx](examples/thumbnails.tsx) | A warehouse inspection of 120 photos with a filmstrip and captions: only the thumbnails in view are mounted — `thumbnails`, `caption`. |
-| [video.tsx](examples/video.tsx) | A video among the photos of a site visit starts once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`, `autoPlay`. |
+| [video.tsx](examples/video.tsx) | A video among the photos of a site visit starts by default once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`. |
 | [actions.tsx](examples/actions.tsx) | Photos of a listing with actions for the one on screen: download it or make it the cover — `renderActions`. |
 | [origin.tsx](examples/origin.tsx) | Every photo flies back into its own thumbnail, also after paging, and the last one leads to the first — `getOrigin`, `loop`. |
-| [dismiss.tsx](examples/dismiss.tsx) | Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button — `closeOnOutsideClick`. |
+| [dismiss.tsx](examples/dismiss.tsx) | Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button, and the small print zooms up to eight times — `closeOnOutsideClick`, `maxZoom`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the page: a finding opens its photo, and paging in the viewer moves the mark along the list — `index`, `onIndexChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent opens a single scan from a link in the text: no counter and no arrows for one item — `open`, `onOpenChange`. |
 
@@ -203,5 +207,5 @@ Motion: it opens out of the thumbnail it was opened from — the picture grows f
 - `autoPlay` left on for videos people need to read beside (a recording next to a form) → `autoPlay={false}`; the play disk starts it.
 
 ## Related
-- **Built from:** [Button](../button/COMPONENT.md) (bars, arrows, play disk, video controls), [Slider](../slider/COMPONENT.md) (video seek; the sound level, `orientation="vertical"`), [Thumbnail](../thumbnail/COMPONENT.md) (filmstrip), [ScrollContainer](../scroll-container/COMPONENT.md) (filmstrip), [Spinner](../spinner/COMPONENT.md) (loading without a thumbnail), `Icon`
+- **Built from:** [Button](../button/COMPONENT.md) (bars, arrows, play disk, video controls), [Slider](../slider/COMPONENT.md) (video seek; the sound level, `orientation="vertical"`), [Thumbnail](../thumbnail/COMPONENT.md) (filmstrip), [ScrollContainer](../scroll-container/COMPONENT.md) (filmstrip), [Skeleton](../skeleton/COMPONENT.md) (loading without a thumbnail), [Spinner](../spinner/COMPONENT.md) (a pending transfer on the play disk), `Icon`, [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Gallery](../gallery/COMPONENT.md) and [Message](../message/COMPONENT.md) (`Message.Media`): their albums open MediaViewer by themselves, [Thumbnail](../thumbnail/COMPONENT.md) (a pressable thumbnail), [Modal](../modal/COMPONENT.md), [VideoNote](../video-note/COMPONENT.md)

package/src/components/media-viewer/examples/dismiss.tsx

@@ -1,4 +1,4 @@
-/** Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button — `closeOnOutsideClick`. */
+/** Contract scans read closely: a stray swipe or click past the page never closes them, only Escape and the close button, and the small print zooms up to eight times — `closeOnOutsideClick`, `maxZoom`. */
 import { Button, Icon, MediaViewer, type MediaViewerItem } from "prime-ui-kit";
 import * as React from "react";
 
@@ -11,6 +11,9 @@ const PAGES: MediaViewerItem[] = [1, 2, 3].map((n) => ({
   alt: `Договор поставки № 52/24, страница ${n}`,
 }));
 
+/** The small print of a scan needs more than the default fourfold zoom. */
+const SMALL_PRINT_ZOOM = 8;
+
 export default function MediaViewerDismissExample() {
   const [open, setOpen] = React.useState(false);
 
@@ -27,6 +30,7 @@ export default function MediaViewerDismissExample() {
         open={open}
         onOpenChange={setOpen}
         closeOnOutsideClick={false}
+        maxZoom={SMALL_PRINT_ZOOM}
         aria-label="Сканы договора № 52/24"
       />
     </>

package/src/components/media-viewer/examples/examples.module.css

@@ -5,12 +5,12 @@
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(var(--prime-space-24), 1fr));
   gap: var(--prime-space-2);
-  inline-size: min(100%, var(--prime-modal-width-m));
+  inline-size: min(100%, var(--prime-layout-form-width-m));
 }
 
 /* controlled.tsx: the list of findings beside the photos. */
 .findings {
   display: grid;
   gap: var(--prime-space-2);
-  inline-size: min(100%, var(--prime-modal-width-s));
+  inline-size: min(100%, var(--prime-layout-form-width-s));
 }

package/src/components/media-viewer/examples/video.tsx

@@ -1,4 +1,4 @@
-/** A video among the photos of a site visit starts once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`, `autoPlay`. */
+/** A video among the photos of a site visit starts by default once its page settles; its bar has play, time, seek, the sound button and its level, and it has no zoom — `type`. */
 import { Icon, MediaViewer, type MediaViewerItem, Thumbnail } from "prime-ui-kit";
 import * as React from "react";