prime-ui-kit 0.13.1 → 0.15.0

package/src/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.
@@ -54,7 +54,7 @@ Every part is optional except `Root`, `Title` and `Form`. Fields, buttons, divid
 `ref` → `HTMLElement`. `<header>` with the logo, title and description, laid out by Root `align`. Native props.
 
 ### 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"`). Native `<div>` props.
 
 ### LoginForm.Title
 `ref` → `HTMLHeadingElement`. The heading (kit Typography, text role by the tier).
@@ -119,7 +119,7 @@ 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 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 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.
 
 ## Accessibility
@@ -129,6 +129,7 @@ No keyboard interaction.
 
 ### ARIA
 - 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,9 +142,9 @@ 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`. |
+| [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: five 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`. |

package/src/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/src/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/src/components/login-form/examples/narrow.tsx

@@ -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>

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

@@ -1,58 +1,56 @@
-/** 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`. */
+/** 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`. */
 import { Button, Divider, Icon, Input, LinkButton, LoginForm } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 export default function LoginFormOverviewExample() {
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root align="center">
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="action.send" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
-          <LoginForm.Description>Введите данные для входа в кабинет</LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Actions>
-            <Button.Root variant="outline" tone="neutral" fullWidth>
-              <Button.Icon>
-                <Icon name="object.key" />
-              </Button.Icon>
-              Войти через SSO компании
-            </Button.Root>
-          </LoginForm.Actions>
-          <Divider>или</Divider>
-          <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Email" required>
+    <LoginForm.Root align="center">
+      <LoginForm.Header>
+        <LoginForm.Logo aria-label="Маршрут">
+          <Icon name="action.send" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
+        <LoginForm.Description>Введите данные для входа в кабинет</LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Actions>
+          <Button.Root variant="outline" tone="neutral" fullWidth>
+            <Button.Icon>
+              <Icon name="object.key" />
+            </Button.Icon>
+            Войти через SSO компании
+          </Button.Root>
+        </LoginForm.Actions>
+        <Divider>или</Divider>
+        <LoginForm.Form aria-label="Вход по почте" 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>
+          <div className={styles.withLink}>
+            <Input.Root label="Пароль" required>
               <Input.Wrapper>
-                <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
+                <Input.Field
+                  type="password"
+                  autoComplete="current-password"
+                  placeholder="********"
+                />
               </Input.Wrapper>
             </Input.Root>
-            <div className={styles.withLink}>
-              <Input.Root label="Пароль" required>
-                <Input.Wrapper>
-                  <Input.Field
-                    type="password"
-                    autoComplete="current-password"
-                    placeholder="********"
-                  />
-                </Input.Wrapper>
-              </Input.Root>
-              <LinkButton href="#" size="s" tone="neutral">
-                Забыли пароль?
-              </LinkButton>
-            </div>
-            <Button.Root type="submit" fullWidth>
-              Войти
-            </Button.Root>
-          </LoginForm.Form>
-          <LoginForm.Footer>
-            Нет аккаунта? <LinkButton href="#">Зарегистрироваться</LinkButton>
-          </LoginForm.Footer>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+            <LinkButton href="#" size="s" tone="neutral">
+              Забыли пароль?
+            </LinkButton>
+          </div>
+          <Button.Root type="submit" fullWidth>
+            Войти
+          </Button.Root>
+        </LoginForm.Form>
+        <LoginForm.Footer>
+          Нет аккаунта? <LinkButton href="#">Зарегистрироваться</LinkButton>
+        </LoginForm.Footer>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

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

@@ -2,79 +2,75 @@
 import { Button, Divider, Icon, Input, LinkButton, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormRegisterExample() {
   const [password, setPassword] = React.useState("");
   const [confirm, setConfirm] = React.useState("");
   const mismatch = confirm.length > 0 && confirm !== password;
 
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="action.send" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Регистрация</LoginForm.Title>
-          <LoginForm.Description>Создайте аккаунт за минуту</LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Actions>
-            <Button.Root variant="outline" tone="neutral" fullWidth>
-              <Button.Icon>
-                <Icon name="object.key" />
-              </Button.Icon>
-              Войти через SSO компании
-            </Button.Root>
-          </LoginForm.Actions>
-          <Divider>или</Divider>
-          <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Ваше имя" required>
-              <Input.Wrapper>
-                <Input.Field autoComplete="name" placeholder="Анна Смирнова" />
-              </Input.Wrapper>
-            </Input.Root>
-            <Input.Root label="Email" required>
-              <Input.Wrapper>
-                <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
-              </Input.Wrapper>
-            </Input.Root>
-            <Input.Root label="Пароль" required hint="Минимум 8 символов" strength>
-              <Input.Wrapper>
-                <Input.Field
-                  type="password"
-                  autoComplete="new-password"
-                  placeholder="********"
-                  value={password}
-                  onValueChange={setPassword}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <Input.Root
-              label="Повторите пароль"
-              required
-              error={mismatch ? "Пароли не совпадают" : undefined}
-            >
-              <Input.Wrapper>
-                <Input.Field
-                  type="password"
-                  autoComplete="new-password"
-                  placeholder="********"
-                  value={confirm}
-                  onValueChange={setConfirm}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <Button.Root type="submit" fullWidth disabled={mismatch}>
-              Создать аккаунт
-            </Button.Root>
-          </LoginForm.Form>
-          <LoginForm.Footer>
-            Уже есть аккаунт? <LinkButton href="#">Войти</LinkButton>
-          </LoginForm.Footer>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="action.send" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Регистрация</LoginForm.Title>
+        <LoginForm.Description>Создайте аккаунт за минуту</LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Actions>
+          <Button.Root variant="outline" tone="neutral" fullWidth>
+            <Button.Icon>
+              <Icon name="object.key" />
+            </Button.Icon>
+            Войти через SSO компании
+          </Button.Root>
+        </LoginForm.Actions>
+        <Divider>или</Divider>
+        <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
+          <Input.Root label="Ваше имя" required>
+            <Input.Wrapper>
+              <Input.Field autoComplete="name" placeholder="Анна Смирнова" />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root label="Email" required>
+            <Input.Wrapper>
+              <Input.Field type="email" autoComplete="email" placeholder="name@company.ru" />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root label="Пароль" required hint="Минимум 8 символов" strength>
+            <Input.Wrapper>
+              <Input.Field
+                type="password"
+                autoComplete="new-password"
+                placeholder="********"
+                value={password}
+                onValueChange={setPassword}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root
+            label="Повторите пароль"
+            required
+            error={mismatch ? "Пароли не совпадают" : undefined}
+          >
+            <Input.Wrapper>
+              <Input.Field
+                type="password"
+                autoComplete="new-password"
+                placeholder="********"
+                value={confirm}
+                onValueChange={setConfirm}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Button.Root type="submit" fullWidth disabled={mismatch}>
+            Создать аккаунт
+          </Button.Root>
+        </LoginForm.Form>
+        <LoginForm.Footer>
+          Уже есть аккаунт? <LinkButton href="#">Войти</LinkButton>
+        </LoginForm.Footer>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

package/src/components/login-form/examples/reset-password.tsx

@@ -2,7 +2,7 @@
 import { Button, Icon, Input, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
+const MIN_LENGTH = 8;
 
 export default function LoginFormResetPasswordExample() {
   const [password, setPassword] = React.useState("");
@@ -10,51 +10,54 @@ export default function LoginFormResetPasswordExample() {
   const mismatch = confirm.length > 0 && confirm !== password;
 
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="status.locked" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Создайте новый пароль</LoginForm.Title>
-          <LoginForm.Description>
-            Придумайте пароль и храните его в надёжном месте
-          </LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
-            <Input.Root label="Новый пароль" required hint="Минимум 8 символов" strength>
-              <Input.Wrapper>
-                <Input.Field
-                  type="password"
-                  autoComplete="new-password"
-                  placeholder="********"
-                  value={password}
-                  onValueChange={setPassword}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <Input.Root
-              label="Повторите новый пароль"
-              required
-              error={mismatch ? "Пароли не совпадают" : undefined}
-            >
-              <Input.Wrapper>
-                <Input.Field
-                  type="password"
-                  autoComplete="new-password"
-                  placeholder="********"
-                  value={confirm}
-                  onValueChange={setConfirm}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <Button.Root type="submit" fullWidth disabled={mismatch || password.length < 6}>
-              Сохранить
-            </Button.Root>
-          </LoginForm.Form>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="status.locked" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Создайте новый пароль</LoginForm.Title>
+        <LoginForm.Description>
+          Придумайте пароль и храните его в надёжном месте
+        </LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form onSubmit={(e) => e.preventDefault()}>
+          <Input.Root
+            label="Новый пароль"
+            required
+            hint={`Минимум ${MIN_LENGTH} символов`}
+            strength
+          >
+            <Input.Wrapper>
+              <Input.Field
+                type="password"
+                autoComplete="new-password"
+                placeholder="********"
+                value={password}
+                onValueChange={setPassword}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Input.Root
+            label="Повторите новый пароль"
+            required
+            error={mismatch ? "Пароли не совпадают" : undefined}
+          >
+            <Input.Wrapper>
+              <Input.Field
+                type="password"
+                autoComplete="new-password"
+                placeholder="********"
+                value={confirm}
+                onValueChange={setConfirm}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <Button.Root type="submit" fullWidth disabled={mismatch || password.length < MIN_LENGTH}>
+            Сохранить
+          </Button.Root>
+        </LoginForm.Form>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }

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

@@ -1,14 +1,12 @@
 /** Padding, gaps and text roles of the card follow the tier; the fields and buttons take the same one — `size`. */
 import { Button, Input, LoginForm } from "prime-ui-kit";
 
-import styles from "./examples.module.css";
-
-const sizes = ["s", "m", "l"] as const;
+const SIZES = ["s", "m", "l"] as const;
 
 export default function LoginFormSizesExample() {
   return (
-    <div className={styles.row}>
-      {sizes.map((size) => (
+    <>
+      {SIZES.map((size) => (
         <LoginForm.Root key={size} size={size}>
           <LoginForm.Header>
             <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
@@ -33,6 +31,6 @@ export default function LoginFormSizesExample() {
           </LoginForm.Body>
         </LoginForm.Root>
       ))}
-    </div>
+    </>
   );
 }