prime-ui-kit 0.14.0 → 0.16.0

package/dist/skill/reference/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/dist/skill/reference/components/login-form/examples/register.tsx

@@ -1,80 +1,76 @@
-/** 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`. */
+/** 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`. */
 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/dist/skill/reference/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/dist/skill/reference/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/dist/skill/reference/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>
   );
 }

package/dist/skill/reference/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>
   );
 }