prime-ui-kit 0.7.11 → 0.9.0

package/src/components/file-upload/examples/controlled-list.tsx

@@ -1,103 +0,0 @@
-import { Button, FileUpload } from "prime-ui-kit";
-import * as React from "react";
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  }
-  if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
-  }
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function extensionOf(name: string): string {
-  const dot = name.lastIndexOf(".");
-  return dot >= 0 ? name.slice(dot + 1) : "file";
-}
-
-type FileEntry = { id: string; file: File };
-
-/**
- * Контролируемый список: добавление через зону, удаление по строке и очистка всего списка.
- */
-export function FileUploadControlledListExample() {
-  const [entries, setEntries] = React.useState<FileEntry[]>([]);
-
-  const removeById = (id: string) => {
-    setEntries((prev) => prev.filter((e) => e.id !== id));
-  };
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        maxWidth: 520,
-      }}
-    >
-      <FileUpload.Root
-        multiple
-        accept="image/png,image/jpeg,.pdf,application/pdf"
-        onFilesChange={(next) => {
-          setEntries((prev) => [
-            ...prev,
-            ...next.map((file) => ({ id: crypto.randomUUID(), file })),
-          ]);
-        }}
-      />
-
-      {entries.length > 0 ? (
-        <>
-          <div
-            style={{ display: "flex", flexDirection: "column", gap: "var(--prime-sys-spacing-s)" }}
-          >
-            {entries.map(({ id, file }) => (
-              <FileUpload.Item key={id}>
-                <FileUpload.ItemRow>
-                  <FileUpload.FormatBadge
-                    format={extensionOf(file.name)}
-                    color={file.type.startsWith("image/") ? "blue" : "gray"}
-                  />
-                  <FileUpload.ItemMain>
-                    <FileUpload.ItemTextGroup>
-                      <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
-                      <FileUpload.ItemMeta>
-                        <span>{formatBytes(file.size)}</span>
-                      </FileUpload.ItemMeta>
-                    </FileUpload.ItemTextGroup>
-                  </FileUpload.ItemMain>
-                  <FileUpload.ItemActions>
-                    <Button.Root
-                      type="button"
-                      size="s"
-                      variant="neutral"
-                      mode="stroke"
-                      onClick={() => {
-                        removeById(id);
-                      }}
-                    >
-                      Удалить
-                    </Button.Root>
-                  </FileUpload.ItemActions>
-                </FileUpload.ItemRow>
-              </FileUpload.Item>
-            ))}
-          </div>
-          <Button.Root
-            type="button"
-            size="s"
-            variant="neutral"
-            mode="stroke"
-            onClick={() => {
-              setEntries([]);
-            }}
-          >
-            Очистить всё
-          </Button.Root>
-        </>
-      ) : null}
-    </div>
-  );
-}

package/src/components/file-upload/examples/custom-children.tsx

@@ -1,21 +0,0 @@
-import { FileUpload } from "prime-ui-kit";
-
-/**
- * Свой контент зоны и accept для изображений.
- * См. playground/snippets/file-upload/custom-children.tsx.
- */
-export function FileUploadCustomChildrenExample() {
-  return (
-    <FileUpload.Root accept="image/*">
-      <div
-        style={{
-          padding: "var(--prime-sys-spacing-x4)",
-          fontSize: "var(--prime-sys-size-control-l-text)",
-          color: "var(--prime-sys-color-content-secondary)",
-        }}
-      >
-        Custom drop area — images only
-      </div>
-    </FileUpload.Root>
-  );
-}

package/src/components/file-upload/examples/document-attach.tsx

@@ -1,70 +0,0 @@
-import { FileUpload } from "prime-ui-kit";
-import * as React from "react";
-
-function formatBytes(bytes: number): string {
-  if (bytes < 1024) {
-    return `${bytes} B`;
-  }
-  if (bytes < 1024 * 1024) {
-    return `${(bytes / 1024).toFixed(1)} KB`;
-  }
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-
-function extensionOf(name: string): string {
-  const dot = name.lastIndexOf(".");
-  return dot >= 0 ? name.slice(dot + 1) : "file";
-}
-
-/**
- * Вложения к сообщению: несколько файлов, список в виде Item.
- */
-export function FileUploadDocumentAttachExample() {
-  const [files, setFiles] = React.useState<File[]>([]);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-m)",
-        maxWidth: 480,
-      }}
-    >
-      <FileUpload.Root
-        multiple
-        accept=".pdf,.doc,.docx,application/pdf"
-        onFilesChange={(next) => {
-          setFiles((prev) => [...prev, ...next]);
-        }}
-      >
-        <FileUpload.DropBody>
-          <FileUpload.Title>Прикрепить документы</FileUpload.Title>
-          <FileUpload.Hint>PDF, DOC или DOCX</FileUpload.Hint>
-        </FileUpload.DropBody>
-      </FileUpload.Root>
-
-      {files.length > 0 ? (
-        <div
-          style={{ display: "flex", flexDirection: "column", gap: "var(--prime-sys-spacing-s)" }}
-        >
-          {files.map((file) => (
-            <FileUpload.Item key={`${file.name}-${file.size}-${file.lastModified}`}>
-              <FileUpload.ItemRow>
-                <FileUpload.FormatBadge format={extensionOf(file.name)} color="red" />
-                <FileUpload.ItemMain>
-                  <FileUpload.ItemTextGroup>
-                    <FileUpload.ItemName>{file.name}</FileUpload.ItemName>
-                    <FileUpload.ItemMeta>
-                      <span>{formatBytes(file.size)}</span>
-                    </FileUpload.ItemMeta>
-                  </FileUpload.ItemTextGroup>
-                </FileUpload.ItemMain>
-              </FileUpload.ItemRow>
-            </FileUpload.Item>
-          ))}
-        </div>
-      ) : null}
-    </div>
-  );
-}

package/src/components/file-upload/examples/drag-area.tsx

@@ -1,49 +0,0 @@
-import { FileUpload, Icon } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Кастомная зона: solid, текст с встроенной ссылкой «обзор» и программный open через inputRef.
- */
-export function FileUploadDragAreaExample() {
-  const inputRef = React.useRef<HTMLInputElement>(null);
-  const [lastCount, setLastCount] = React.useState(0);
-
-  return (
-    <div
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: "var(--prime-sys-spacing-s)",
-        maxWidth: 520,
-      }}
-    >
-      <FileUpload.Root
-        inputRef={inputRef}
-        appearance="solid"
-        size="l"
-        multiple
-        onFilesChange={(files) => {
-          setLastCount(files.length);
-        }}
-      >
-        <FileUpload.DropBody>
-          <FileUpload.Icon>
-            <Icon name="action.upload" size="l" tone="subtle" />
-          </FileUpload.Icon>
-          <FileUpload.Title tone="muted">
-            Перетащите файлы сюда или{" "}
-            <FileUpload.BrowseLink type="button" onClick={() => inputRef.current?.click()}>
-              выберите на диске
-            </FileUpload.BrowseLink>
-          </FileUpload.Title>
-          <FileUpload.Hint>Любые типы, несколько файлов за раз</FileUpload.Hint>
-        </FileUpload.DropBody>
-      </FileUpload.Root>
-      {lastCount > 0 ? (
-        <p style={{ fontSize: "var(--prime-sys-typography-support-2xs)", margin: 0 }}>
-          Последний выбор: {lastCount} файл(ов)
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/src/components/file-upload/examples/full-width.tsx

@@ -1,32 +0,0 @@
-import { FileUpload } from "prime-ui-kit";
-
-/**
- * Зона на всю ширину колонки: у Root уже width 100%.
- * См. playground/snippets/file-upload/full-width.tsx.
- */
-export function FileUploadFullWidthExample() {
-  return (
-    <div
-      style={{
-        boxSizing: "border-box",
-        width: "100%",
-        maxWidth: "40rem",
-        padding: "var(--prime-sys-spacing-x4)",
-        borderRadius: "var(--prime-sys-shape-radius-l)",
-        border: "1px dashed var(--prime-sys-color-border-subtle)",
-        background: "var(--prime-sys-color-surface-default)",
-      }}
-    >
-      <p
-        style={{
-          margin: "0 0 var(--prime-sys-spacing-x3)",
-          fontSize: "var(--prime-sys-size-control-s-supportText)",
-          color: "var(--prime-sys-color-content-secondary)",
-        }}
-      >
-        Родитель на всю колонку: зона тянется вместе с формой или панелью.
-      </p>
-      <FileUpload.Root appearance="solid" />
-    </div>
-  );
-}

package/src/components/hint/examples/a11y-describedby.tsx

@@ -1,21 +0,0 @@
-import { Hint, Label } from "prime-ui-kit";
-
-/** Stable `id` on `Hint.Root` and `aria-describedby` on the control so the hint is read with the field. */
-export default function HintA11yDescribedbyExample() {
-  return (
-    <>
-      <Label.Root htmlFor="hint-ex-a11y-volume">Notification volume</Label.Root>
-      <input
-        id="hint-ex-a11y-volume"
-        type="range"
-        min={0}
-        max={100}
-        defaultValue={40}
-        aria-describedby="hint-ex-a11y-volume-help"
-      />
-      <Hint.Root id="hint-ex-a11y-volume-help" variant="default">
-        Does not affect calls and alarms in the mobile app.
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/controlled-variant.tsx

@@ -1,23 +0,0 @@
-import { Button, Hint } from "prime-ui-kit";
-import * as React from "react";
-
-/** Parent drives `variant` (and copy) from state — e.g. after validation. */
-export default function HintControlledVariantExample() {
-  const [variant, setVariant] = React.useState<"default" | "error">("default");
-
-  return (
-    <>
-      <Button.Root size="s" variant="neutral" mode="stroke" onClick={() => setVariant("default")}>
-        Reset
-      </Button.Root>
-      <Button.Root size="s" variant="error" mode="lighter" onClick={() => setVariant("error")}>
-        Show error
-      </Button.Root>
-      <Hint.Root variant={variant}>
-        {variant === "error"
-          ? "Fill the field before saving the draft."
-          : "You can save the draft without required fields."}
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/error-hint.tsx

@@ -1,20 +0,0 @@
-import { Hint, Input, Label } from "prime-ui-kit";
-
-/** Validation message: `variant="error"`, invalid field, optional `role="alert"`. */
-export default function ErrorHintExample() {
-  const hintId = "hint-example-error-desc";
-
-  return (
-    <>
-      <Label.Root htmlFor="hint-example-error">Tax ID</Label.Root>
-      <Input.Root id="hint-example-error" hasError>
-        <Input.Wrapper>
-          <Input.Field type="text" defaultValue="12" aria-describedby={hintId} />
-        </Input.Wrapper>
-      </Input.Root>
-      <Hint.Root id={hintId} variant="error" role="alert">
-        Enter 10 or 12 digits.
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/field-help.tsx

@@ -1,25 +0,0 @@
-import { Hint, Input, Label } from "prime-ui-kit";
-
-/** Neutral helper under a field: same `size` as the input, linked with `aria-describedby`. */
-export default function FieldHelpExample() {
-  const hintId = "hint-example-field-help-desc";
-
-  return (
-    <>
-      <Label.Root htmlFor="hint-example-field-help">Project name</Label.Root>
-      <Input.Root id="hint-example-field-help">
-        <Input.Wrapper>
-          <Input.Field
-            type="text"
-            defaultValue="Alpha"
-            autoComplete="organization"
-            aria-describedby={hintId}
-          />
-        </Input.Wrapper>
-      </Input.Root>
-      <Hint.Root id={hintId} variant="default">
-        Visible to everyone in this workspace.
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/inline-tip-form.tsx

@@ -1,40 +0,0 @@
-import { Hint, Input, Label } from "prime-ui-kit";
-
-/** Multiple rows: label, control, hint — tip copy inline with the form stack. */
-export default function InlineTipFormExample() {
-  const emailHintId = "hint-example-form-email-desc";
-  const budgetHintId = "hint-example-form-budget-desc";
-
-  return (
-    <>
-      <Label.Root htmlFor="hint-example-form-email">Billing email</Label.Root>
-      <Input.Root id="hint-example-form-email">
-        <Input.Wrapper>
-          <Input.Field
-            type="email"
-            placeholder="finance@company.com"
-            aria-describedby={emailHintId}
-          />
-        </Input.Wrapper>
-      </Input.Root>
-      <Hint.Root id={emailHintId} variant="default">
-        Invoices and receipts go here; not the same as your login email.
-      </Hint.Root>
-
-      <Label.Root htmlFor="hint-example-form-budget">Monthly budget</Label.Root>
-      <Input.Root id="hint-example-form-budget">
-        <Input.Wrapper>
-          <Input.Field
-            type="text"
-            inputMode="decimal"
-            placeholder="0"
-            aria-describedby={budgetHintId}
-          />
-        </Input.Wrapper>
-      </Input.Root>
-      <Hint.Root id={budgetHintId} variant="disabled">
-        Optional — leave empty to use the workspace default.
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/success-confirmation.tsx

@@ -1,28 +0,0 @@
-import { Hint, Input, Label } from "prime-ui-kit";
-
-/**
- * There is no `success` variant on `Hint`. Use `variant="default"` for short,
- * neutral confirmation copy under the field (secondary text color).
- */
-export default function SuccessConfirmationExample() {
-  const hintId = "hint-example-success-desc";
-
-  return (
-    <>
-      <Label.Root htmlFor="hint-example-success">API token</Label.Root>
-      <Input.Root id="hint-example-success">
-        <Input.Wrapper>
-          <Input.Field
-            type="text"
-            readOnly
-            defaultValue="pk_live_••••••••"
-            aria-describedby={hintId}
-          />
-        </Input.Wrapper>
-      </Input.Root>
-      <Hint.Root id={hintId} variant="default">
-        Token saved. Rotate it from settings anytime.
-      </Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/variants.tsx

@@ -1,12 +0,0 @@
-import { Hint } from "prime-ui-kit";
-
-/** `variant` on default size `m`: secondary, error, and disabled tones. */
-export default function HintVariantsExample() {
-  return (
-    <>
-      <Hint.Root variant="default">Neutral helper or format guidance.</Hint.Root>
-      <Hint.Root variant="error">Value does not meet password policy requirements.</Hint.Root>
-      <Hint.Root variant="disabled">Editing is not available for the selected role.</Hint.Root>
-    </>
-  );
-}

package/src/components/hint/examples/with-icon.tsx

@@ -1,13 +0,0 @@
-import { Hint, Icon } from "prime-ui-kit";
-
-/** Decorative leading icon; meaning must be repeated in text (`Hint.Icon` is `aria-hidden`). */
-export default function HintWithIconExample() {
-  return (
-    <Hint.Root variant="default">
-      <Hint.Icon>
-        <Icon name="field.email" tone="subtle" />
-      </Hint.Icon>
-      We will send a confirmation code to this address.
-    </Hint.Root>
-  );
-}

package/src/components/input/examples/affix-url-and-amount.tsx

@@ -1,24 +0,0 @@
-import { Input } from "prime-ui-kit";
-
-/**
- * Блочные аффиксы для URL и инлайн-символ валюты — как в playground `composition.tsx`.
- */
-export default function AffixUrlAndAmountExample() {
-  return (
-    <>
-      <Input.Root label="Сайт" hint="Поддомен без схемы">
-        <Input.Wrapper>
-          <Input.Affix side="start">https://</Input.Affix>
-          <Input.Field placeholder="поддомен" />
-          <Input.Affix side="end">.example</Input.Affix>
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="Сумма" hint="Дробная часть через запятую">
-        <Input.Wrapper>
-          <Input.InlineAffix side="start">₽</Input.InlineAffix>
-          <Input.Field placeholder="0,00" inputMode="decimal" />
-        </Input.Wrapper>
-      </Input.Root>
-    </>
-  );
-}

package/src/components/input/examples/checkout-full-width.module.css

@@ -1,8 +0,0 @@
-.column {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-sys-spacing-m);
-  width: 100%;
-  max-width: 28rem;
-  box-sizing: border-box;
-}

package/src/components/input/examples/checkout-full-width.tsx

@@ -1,39 +0,0 @@
-import { Input } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./checkout-full-width.module.css";
-
-/**
- * Оформление заказа: колонка на всю ширину родителя (`Input.Root` уже тянется на 100%).
- */
-export default function CheckoutFullWidthExample() {
-  const [fullName, setFullName] = React.useState("");
-  const [address, setAddress] = React.useState("");
-
-  return (
-    <div className={styles.column}>
-      <Input.Root label="ФИО получателя" hint="Как в паспорте — для доставки">
-        <Input.Wrapper>
-          <Input.Field
-            name="fullName"
-            autoComplete="name"
-            placeholder="Иванов Иван Иванович"
-            value={fullName}
-            onChange={(e) => setFullName(e.target.value)}
-          />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="Адрес доставки" optionalLabel="квартира, подъезд">
-        <Input.Wrapper>
-          <Input.Field
-            name="address"
-            autoComplete="street-address"
-            placeholder="Город, улица, дом"
-            value={address}
-            onChange={(e) => setAddress(e.target.value)}
-          />
-        </Input.Wrapper>
-      </Input.Root>
-    </div>
-  );
-}

package/src/components/input/examples/login-email.tsx

@@ -1,29 +0,0 @@
-import { Icon, Input } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Вход: email с подписью, иконкой и автозаполнением.
- */
-export default function LoginEmailExample() {
-  const [email, setEmail] = React.useState("");
-
-  return (
-    <Input.Root label="Электронная почта" hint="Мы отправим код подтверждения на этот адрес">
-      <Input.Wrapper>
-        <Input.Icon side="start">
-          <Icon name="field.email" size="s" tone="subtle" />
-        </Input.Icon>
-        <Input.Field
-          type="email"
-          name="email"
-          autoComplete="email"
-          inputMode="email"
-          placeholder="you@example.com"
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-      </Input.Wrapper>
-    </Input.Root>
-  );
-}

package/src/components/input/examples/password-with-hint.tsx

@@ -1,28 +0,0 @@
-import { Icon, Input } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Пароль: подсказка под полем и иконка справа (декоративная, без роли имени).
- */
-export default function PasswordWithHintExample() {
-  const [password, setPassword] = React.useState("");
-
-  return (
-    <Input.Root label="Пароль" hint="Не менее 8 символов, буквы и цифры">
-      <Input.Wrapper>
-        <Input.Field
-          type="password"
-          name="password"
-          autoComplete="current-password"
-          placeholder="••••••••"
-          value={password}
-          onChange={(e) => setPassword(e.target.value)}
-          required
-        />
-        <Input.Icon side="end">
-          <Icon name="status.locked" size="s" tone="subtle" />
-        </Input.Icon>
-      </Input.Wrapper>
-    </Input.Root>
-  );
-}

package/src/components/input/examples/search.tsx

@@ -1,30 +0,0 @@
-import { Icon, Input } from "prime-ui-kit";
-import * as React from "react";
-
-/**
- * Поиск: контролируемое значение и иконка слева.
- */
-export default function SearchExample() {
-  const [query, setQuery] = React.useState("");
-
-  return (
-    <Input.Root
-      label="Поиск по каталогу"
-      hint={query ? `Запрос: «${query}»` : "Введите название или артикул"}
-    >
-      <Input.Wrapper>
-        <Input.Icon side="start">
-          <Icon name="nav.layoutGrid" size="s" tone="subtle" />
-        </Input.Icon>
-        <Input.Field
-          type="search"
-          name="q"
-          placeholder="Название или артикул"
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          aria-label="Поиск по каталогу"
-        />
-      </Input.Wrapper>
-    </Input.Root>
-  );
-}

package/src/components/kbd/examples/combination-keys.tsx

@@ -1,22 +0,0 @@
-import { Kbd } from "prime-ui-kit";
-import type * as React from "react";
-
-const row: React.CSSProperties = {
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "var(--prime-sys-spacing-x1)",
-};
-
-/** Аккорд из нескольких клавиш: каждая клавиша — отдельный `Kbd.Root`, плюс вне ключей. */
-export default function CombinationKeysExample() {
-  return (
-    <div style={row}>
-      <Kbd.Root>Ctrl</Kbd.Root>
-      <span aria-hidden="true">+</span>
-      <Kbd.Root>Shift</Kbd.Root>
-      <span aria-hidden="true">+</span>
-      <Kbd.Root>P</Kbd.Root>
-    </div>
-  );
-}