prime-ui-kit 0.14.0 → 0.15.0

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

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

@@ -2,8 +2,6 @@
 import { Banner, Button, Fieldset, Icon, Input, LoginForm } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 export default function LoginFormStatesExample() {
   const [pending, setPending] = React.useState(false);
   const [failed, setFailed] = React.useState(false);
@@ -12,60 +10,58 @@ export default function LoginFormStatesExample() {
   React.useEffect(() => () => clearTimeout(timer.current), []);
 
   return (
-    <div className={styles.stage}>
-      <LoginForm.Root>
-        <LoginForm.Header>
-          <LoginForm.Logo>
-            <Icon name="action.login" />
-          </LoginForm.Logo>
-          <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
-          <LoginForm.Description>Любая пара email и пароля вернёт ошибку</LoginForm.Description>
-        </LoginForm.Header>
-        <LoginForm.Body>
-          <LoginForm.Form
-            onSubmit={(e) => {
-              e.preventDefault();
-              setFailed(false);
-              setPending(true);
-              timer.current = setTimeout(() => {
-                setPending(false);
-                setFailed(true);
-              }, 1200);
-            }}
-          >
-            {failed ? (
-              <Banner.Root tone="danger" role="alert">
-                <Banner.Content>
-                  <Banner.Icon>
-                    <Icon name="status.danger" />
-                  </Banner.Icon>
-                  <Banner.Title>Неверный email или пароль</Banner.Title>
-                </Banner.Content>
-              </Banner.Root>
-            ) : null}
-            <Fieldset disabled={pending}>
-              <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 invalid={failed}>
-                <Input.Wrapper>
-                  <Input.Field
-                    type="password"
-                    autoComplete="current-password"
-                    placeholder="********"
-                    onValueChange={() => setFailed(false)}
-                  />
-                </Input.Wrapper>
-              </Input.Root>
-            </Fieldset>
-            <Button.Root type="submit" fullWidth loading={pending}>
-              Войти
-            </Button.Root>
-          </LoginForm.Form>
-        </LoginForm.Body>
-      </LoginForm.Root>
-    </div>
+    <LoginForm.Root>
+      <LoginForm.Header>
+        <LoginForm.Logo>
+          <Icon name="action.login" />
+        </LoginForm.Logo>
+        <LoginForm.Title>Войти в аккаунт</LoginForm.Title>
+        <LoginForm.Description>Любая пара email и пароля вернёт ошибку</LoginForm.Description>
+      </LoginForm.Header>
+      <LoginForm.Body>
+        <LoginForm.Form
+          onSubmit={(e) => {
+            e.preventDefault();
+            setFailed(false);
+            setPending(true);
+            timer.current = setTimeout(() => {
+              setPending(false);
+              setFailed(true);
+            }, 1200);
+          }}
+        >
+          {failed ? (
+            <Banner.Root tone="danger" role="alert">
+              <Banner.Content>
+                <Banner.Icon>
+                  <Icon name="status.danger" />
+                </Banner.Icon>
+                <Banner.Title>Неверный email или пароль</Banner.Title>
+              </Banner.Content>
+            </Banner.Root>
+          ) : null}
+          <Fieldset disabled={pending}>
+            <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 invalid={failed}>
+              <Input.Wrapper>
+                <Input.Field
+                  type="password"
+                  autoComplete="current-password"
+                  placeholder="********"
+                  onValueChange={() => setFailed(false)}
+                />
+              </Input.Wrapper>
+            </Input.Root>
+          </Fieldset>
+          <Button.Root type="submit" fullWidth loading={pending}>
+            Войти
+          </Button.Root>
+        </LoginForm.Form>
+      </LoginForm.Body>
+    </LoginForm.Root>
   );
 }