prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,70 +0,0 @@
-/** Field anatomy on every size: label, required/optional markers, placeholder, hint, error and counter. Use it as the reference for how a field is assembled. */
-import { Input, Typography } from "prime-ui-kit";
-import type * as React from "react";
-
-import styles from "./examples.module.css";
-
-const SIZES = ["xs", "s", "m", "l", "xl"] as const;
-type Size = (typeof SIZES)[number];
-
-const ROWS: { title: string; render: (size: Size) => React.ReactNode }[] = [
-  {
-    title: "Обязательное: подпись, *, плейсхолдер, подсказка",
-    render: (size) => (
-      <Input.Root size={size} label="Email" required hint="Пришлём ссылку для входа">
-        <Input.Wrapper>
-          <Input.Field type="email" placeholder="name@company.ru" />
-        </Input.Wrapper>
-      </Input.Root>
-    ),
-  },
-  {
-    title: "Необязательное и счётчик",
-    render: (size) => (
-      <Input.Root
-        size={size}
-        label="Должность"
-        optional
-        counter={<Input.Counter current={14} max={40} />}
-      >
-        <Input.Wrapper>
-          <Input.Field defaultValue="Менеджер по ИТ" maxLength={40} />
-        </Input.Wrapper>
-      </Input.Root>
-    ),
-  },
-  {
-    title: "Ошибка вместо подсказки",
-    render: (size) => (
-      <Input.Root size={size} label="ИНН" required error="ИНН состоит из 10 или 12 цифр">
-        <Input.Wrapper>
-          <Input.Field defaultValue="77010" inputMode="numeric" />
-        </Input.Wrapper>
-      </Input.Root>
-    ),
-  },
-];
-
-export default function InputAnatomyExample() {
-  return (
-    <div className={styles.anatomyScroller}>
-      <div className={styles.anatomyGrid}>
-        {SIZES.map((size) => (
-          <Typography.Root key={size} variant="code" tone="muted">
-            size="{size}"
-          </Typography.Root>
-        ))}
-        {ROWS.map((row) => (
-          <div key={row.title} className={styles.anatomyRow}>
-            <Typography.Root variant="caption" tone="muted" className={styles.anatomyRowHead}>
-              {row.title}
-            </Typography.Root>
-            {SIZES.map((size) => (
-              <div key={size}>{row.render(size)}</div>
-            ))}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/input/examples/control-alignment.tsx

@@ -1,57 +0,0 @@
-/** Button, Input, Select and Datepicker of the same size share height and radius. Use it for filter bars and toolbars that mix controls in one row. */
-import { Button, Datepicker, Icon, Input, Select, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const SIZES = ["xs", "s", "m", "l", "xl"] as const;
-
-function FilterRow({ size }: { size: (typeof SIZES)[number] }) {
-  const [date, setDate] = React.useState<Date | null>(null);
-  return (
-    <div className={styles.alignRow}>
-      <Typography.Root as="span" variant="code" tone="muted" className={styles.alignSize}>
-        {size}
-      </Typography.Root>
-      <div className={styles.alignField}>
-        <Input.Root size={size}>
-          <Input.Wrapper>
-            <Input.Icon side="start">
-              <Icon name="action.search" tone="secondary" />
-            </Input.Icon>
-            <Input.Field placeholder="Поиск заказа" aria-label="Поиск заказа" />
-          </Input.Wrapper>
-        </Input.Root>
-      </div>
-      <Select.Root size={size} placeholder="Статус">
-        <Select.Trigger aria-label="Статус">
-          <Select.Value />
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="new">Новый</Select.Item>
-          <Select.Item value="paid">Оплачен</Select.Item>
-          <Select.Item value="shipped">Отправлен</Select.Item>
-        </Select.Content>
-      </Select.Root>
-      <Datepicker.Root
-        size={size}
-        mode="single"
-        value={date}
-        onValueChange={setDate}
-        placeholder="Дата"
-        aria-label="Дата заказа"
-      />
-      <Button.Root size={size}>Найти</Button.Root>
-    </div>
-  );
-}
-
-export default function InputControlAlignmentExample() {
-  return (
-    <div className={styles.alignStack}>
-      {SIZES.map((size) => (
-        <FilterRow key={size} size={size} />
-      ))}
-    </div>
-  );
-}

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

@@ -1,23 +0,0 @@
-/** Input.Root always fills its parent; the width comes from the layout column, there is no `fullWidth` prop. Use a capped wrapper for short values like a postal code. */
-import { Input } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function InputFullWidthExample() {
-  return (
-    <div className={styles.widthRoot}>
-      <div className={styles.widthNarrow}>
-        <Input.Root label="Индекс" hint="Колонка ограничена родителем">
-          <Input.Wrapper>
-            <Input.Field placeholder="190000" inputMode="numeric" />
-          </Input.Wrapper>
-        </Input.Root>
-      </div>
-      <Input.Root label="Адрес доставки" hint="Родитель на всю ширину">
-        <Input.Wrapper>
-          <Input.Field placeholder="Улица, дом, квартира" autoComplete="street-address" />
-        </Input.Wrapper>
-      </Input.Root>
-    </div>
-  );
-}

package/src/components/input/examples/icons-and-affixes.tsx

@@ -1,32 +0,0 @@
-/** Slots inside the field: a leading icon, a tinted section affix and an inline unit. Use them for e-mail/URL/amount fields that need a visual cue or a fixed prefix/suffix. */
-import { Icon, Input } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function InputIconsAndAffixesExample() {
-  return (
-    <div className={styles.stack}>
-      <Input.Root label="Электронная почта">
-        <Input.Wrapper>
-          <Input.Icon side="start">
-            <Icon name="field.email" tone="secondary" />
-          </Input.Icon>
-          <Input.Field type="email" placeholder="name@company.ru" />
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="Адрес магазина">
-        <Input.Wrapper>
-          <Input.Affix side="start">https://</Input.Affix>
-          <Input.Field placeholder="moy-magazin" />
-          <Input.Affix side="end">.shop.ru</Input.Affix>
-        </Input.Wrapper>
-      </Input.Root>
-      <Input.Root label="Сумма платежа">
-        <Input.Wrapper>
-          <Input.Field placeholder="0,00" inputMode="decimal" />
-          <Input.InlineAffix side="end">₽</Input.InlineAffix>
-        </Input.Wrapper>
-      </Input.Root>
-    </div>
-  );
-}

package/src/components/input/examples/reserved-support-row.tsx

@@ -1,33 +0,0 @@
-/** `reserveSupportRow` keeps the support row in place, so an appearing error does not move the button below; also shows a custom `labels.optional` and an explicit `id`. Use it for fields validated on the fly. */
-import { Button, Input } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function InputReservedSupportRowExample() {
-  const [invalid, setInvalid] = React.useState(false);
-
-  return (
-    <div className={styles.stack}>
-      <Input.Root
-        optional
-        labels={{ optional: "если есть" }}
-        label="Промокод"
-        reserveSupportRow
-        error={invalid ? "Промокод недействителен или истёк" : undefined}
-      >
-        <Input.Wrapper>
-          <Input.Field placeholder="Введите код" defaultValue="SAVE50" />
-        </Input.Wrapper>
-      </Input.Root>
-      <Button.Root variant="outline" tone="neutral" onClick={() => setInvalid((v) => !v)}>
-        {invalid ? "Убрать ошибку" : "Показать ошибку"}
-      </Button.Root>
-      <Input.Root id="delivery-phone" label="Телефон для курьера" optional>
-        <Input.Wrapper>
-          <Input.Field type="tel" autoComplete="tel" placeholder="+7 900 000-00-00" />
-        </Input.Wrapper>
-      </Input.Root>
-    </div>
-  );
-}

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

@@ -1,12 +0,0 @@
-/** A plain field whose fill comes from the surface context: white on the canvas, gray inside Card, Modal or Popover. Drop fields into any surface without overriding their background. */
-import { Input } from "prime-ui-kit";
-
-export default function InputSurfacesExample() {
-  return (
-    <Input.Root label="Город" hint="Заливка зависит от фона">
-      <Input.Wrapper>
-        <Input.Field placeholder="Москва" />
-      </Input.Wrapper>
-    </Input.Root>
-  );
-}

package/src/components/input/examples/with-badge.tsx

@@ -1,40 +0,0 @@
-/** A soft status badge inside the field (`Input.Badge`, `Select.Badge`, `Datepicker.Badge`). Use it to mark a field value as verified, new or missing without changing the field height. */
-import { Datepicker, Input, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function InputWithBadgeExample() {
-  const [serviceDate, setServiceDate] = React.useState<Date | null>(null);
-  return (
-    <div className={styles.stack}>
-      <Datepicker.Root
-        mode="single"
-        label="Дата последнего ТО"
-        placeholder="дд.мм.гггг"
-        fullWidth
-        value={serviceDate}
-        onValueChange={setServiceDate}
-      >
-        {serviceDate ? null : <Datepicker.Badge color="orange">Не заполнено</Datepicker.Badge>}
-      </Datepicker.Root>
-      <Input.Root label="ИНН контрагента">
-        <Input.Wrapper>
-          <Input.Field defaultValue="7707083893" inputMode="numeric" />
-          <Input.Badge color="green">Проверен</Input.Badge>
-        </Input.Wrapper>
-      </Input.Root>
-      <Select.Root label="Тариф" defaultValue="business">
-        <Select.Trigger>
-          <Select.Value />
-          <Select.Badge color="blue">Новое</Select.Badge>
-        </Select.Trigger>
-        <Select.Content>
-          <Select.Item value="start">Старт</Select.Item>
-          <Select.Item value="business">Бизнес с расширенной поддержкой</Select.Item>
-          <Select.Item value="corporate">Корпоративный</Select.Item>
-        </Select.Content>
-      </Select.Root>
-    </div>
-  );
-}

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

@@ -1,24 +0,0 @@
-/** A chord of symbol keys with `aria-label` / `title` and a visual "+" hidden from screen readers. Use whenever a key is shown as a symbol (⌘ ⌥ ⇧). */
-import { Kbd, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function KbdModifierKeysExample() {
-  return (
-    <span className={styles.chord}>
-      <Kbd.Root aria-label="Command" title="Command">
-        ⌘
-      </Kbd.Root>
-      <Typography.Root as="span" variant="body-m" tone="muted" aria-hidden="true">
-        +
-      </Typography.Root>
-      <Kbd.Root aria-label="Shift" title="Shift">
-        ⇧
-      </Kbd.Root>
-      <Typography.Root as="span" variant="body-m" tone="muted" aria-hidden="true">
-        +
-      </Typography.Root>
-      <Kbd.Root>P</Kbd.Root>
-    </span>
-  );
-}

package/src/components/label/examples/in-form.tsx

@@ -1,39 +0,0 @@
-/** Built-in Input labels next to a standalone `Label.Root` over a Select look the same; the Select is linked via `aria-labelledby`. Use a standalone Label for controls without a `label` prop. */
-import { Input, Label, Select } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function LabelInFormExample() {
-  const roleLabelId = React.useId();
-
-  return (
-    <form className={styles.form} aria-label="Приглашение в команду">
-      <Input.Root label="Email" required>
-        <Input.Wrapper>
-          <Input.Field type="email" placeholder="name@company.ru" />
-        </Input.Wrapper>
-      </Input.Root>
-      <div className={styles.field}>
-        <Label.Root id={roleLabelId} required>
-          Роль
-        </Label.Root>
-        <Select.Root placeholder="Выберите роль" defaultValue="editor">
-          <Select.Trigger aria-labelledby={roleLabelId}>
-            <Select.Value />
-          </Select.Trigger>
-          <Select.Content>
-            <Select.Item value="admin">Администратор</Select.Item>
-            <Select.Item value="editor">Редактор</Select.Item>
-            <Select.Item value="viewer">Наблюдатель</Select.Item>
-          </Select.Content>
-        </Select.Root>
-      </div>
-      <Input.Root label="Должность" optional hint="Видна коллегам в профиле.">
-        <Input.Wrapper>
-          <Input.Field placeholder="Например, аналитик" />
-        </Input.Wrapper>
-      </Input.Root>
-    </form>
-  );
-}

package/src/components/label/examples/markers.tsx

@@ -1,27 +0,0 @@
-/** `required` adds a red asterisk, `optional` a muted marker (text via `labels.optional`), `Label.Sub` an inline clarification. Mark the minority of fields in a form. */
-import { Label } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function LabelMarkersExample() {
-  return (
-    <div className={styles.list}>
-      <Label.Root htmlFor="label-mk-phone" required>
-        Телефон
-      </Label.Root>
-      <Label.Root htmlFor="label-mk-company" optional>
-        Компания
-      </Label.Root>
-      <Label.Root labels={{ optional: "если есть" }} htmlFor="label-mk-promo" optional>
-        Промокод
-      </Label.Root>
-      <Label.Root htmlFor="label-mk-note" optional>
-        Комментарий
-      </Label.Root>
-      <Label.Root htmlFor="label-mk-budget">
-        Бюджет
-        <Label.Sub>₽, без НДС</Label.Sub>
-      </Label.Root>
-    </div>
-  );
-}

package/src/components/link-button/examples/composition.tsx

@@ -1,30 +0,0 @@
-/** Sign-in card: a link inside text, a link next to a Button of the same size and neutral `s` service links. Use as the pattern for mixing links and actions in one block. */
-import { Button, LinkButton, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function LinkButtonCompositionExample() {
-  return (
-    <div className={styles.card}>
-      <Typography.Root variant="body-m" tone="secondary">
-        Ссылка для входа отправлена на почту. Не пришло письмо?{" "}
-        <LinkButton.Root href="#">Отправить ещё раз</LinkButton.Root>
-      </Typography.Root>
-      <div className={styles.between}>
-        <LinkButton.Root href="#">Войти по паролю</LinkButton.Root>
-        <Button.Root>Продолжить</Button.Root>
-      </div>
-      <nav aria-label="Служебные ссылки" className={styles.footer}>
-        <LinkButton.Root href="#" tone="neutral" size="s">
-          Условия
-        </LinkButton.Root>
-        <LinkButton.Root href="#" tone="neutral" size="s">
-          Конфиденциальность
-        </LinkButton.Root>
-        <LinkButton.Root href="#" tone="neutral" size="s">
-          Помощь
-        </LinkButton.Root>
-      </nav>
-    </div>
-  );
-}

package/src/components/link-button/examples/examples.module.css

@@ -1,46 +0,0 @@
-/* Layout for the LinkButton examples: semantic tokens only. */
-
-.row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: var(--prime-space-3);
-}
-
-.sizeRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: flex-end;
-  justify-content: center;
-  gap: var(--prime-space-8);
-}
-
-.sizeCell {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-.card {
-  display: grid;
-  gap: var(--prime-space-4);
-  width: 100%;
-  max-width: var(--prime-modal-width-s);
-}
-
-.between {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-}
-
-.footer {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--prime-space-2) var(--prime-space-4);
-  padding-top: var(--prime-space-2);
-}

package/src/components/link-button/examples/tones.tsx

@@ -1,15 +0,0 @@
-/** `accent` (regular link) next to `neutral` (secondary text, primary on hover). Use neutral for footers, metadata and dense lists. */
-import { LinkButton } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function LinkButtonTonesExample() {
-  return (
-    <div className={styles.row}>
-      <LinkButton.Root href="#">Открыть отчёт</LinkButton.Root>
-      <LinkButton.Root href="#" tone="neutral">
-        Открыть отчёт
-      </LinkButton.Root>
-    </div>
-  );
-}

package/src/components/modal/examples/composition.tsx

@@ -1,87 +0,0 @@
-/** Settings form in a dialog: fields with an inline error that does not shift layout, a labelled Select and a Switch; Enter saves through Modal.Confirm. Use for short edit forms. */
-import { Settings } from "lucide-react";
-import { Button, Input, Label, Modal, Select, Switch } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function ModalCompositionExample() {
-  const [open, setOpen] = React.useState(false);
-  const [name, setName] = React.useState("Сайт компании");
-  const [touched, setTouched] = React.useState(false);
-  const ownerId = React.useId();
-  const error = touched && name.trim() === "" ? "Введите название проекта" : undefined;
-
-  const save = () => {
-    setTouched(true);
-    if (name.trim() !== "") setOpen(false);
-  };
-
-  return (
-    <Modal.Root
-      open={open}
-      onOpenChange={(next) => {
-        setOpen(next);
-        if (!next) setTouched(false);
-      }}
-    >
-      <Modal.Trigger>
-        <Button.Root variant="soft" tone="neutral">
-          <Button.Icon>
-            <Settings />
-          </Button.Icon>
-          Настройки проекта
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Content>
-        <Modal.Header>
-          <Modal.Icon>
-            <Settings />
-          </Modal.Icon>
-          <Modal.Title>Настройки проекта</Modal.Title>
-          <Modal.Description>Изменения увидят все участники команды.</Modal.Description>
-        </Modal.Header>
-        <Modal.Body>
-          <div className={styles.form}>
-            <Input.Root label="Название" required error={error} reserveSupportRow>
-              <Input.Wrapper>
-                <Input.Field
-                  autoFocus
-                  placeholder="Например, «Мобильное приложение»"
-                  value={name}
-                  onChange={(event) => setName(event.target.value)}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <div className={styles.field}>
-              <Label.Root id={ownerId}>Ответственный</Label.Root>
-              <Select.Root defaultValue="anna">
-                <Select.Trigger aria-labelledby={ownerId}>
-                  <Select.Value />
-                </Select.Trigger>
-                <Select.Content>
-                  <Select.Item value="anna">Анна Смирнова</Select.Item>
-                  <Select.Item value="igor">Игорь Петров</Select.Item>
-                  <Select.Item value="olga">Ольга Ким</Select.Item>
-                </Select.Content>
-              </Select.Root>
-            </div>
-            <Switch.Root defaultChecked>
-              <Switch.Label>Уведомлять участников об изменениях</Switch.Label>
-            </Switch.Root>
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <Modal.Close>
-            <Button.Root variant="outline" tone="neutral">
-              Отмена
-            </Button.Root>
-          </Modal.Close>
-          <Modal.Confirm>
-            <Button.Root onClick={save}>Сохранить</Button.Root>
-          </Modal.Confirm>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal.Root>
-  );
-}

package/src/components/modal/examples/features.tsx

@@ -1,68 +0,0 @@
-/** A long body that scrolls while header and footer stay put, and a dialog portaled into a custom `container`. Use for terms and long text, or to mount a dialog inside a specific node. */
-import { Button, Modal, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const TERMS = Array.from(
-  { length: 14 },
-  (_, i) =>
-    `${i + 1}. Исполнитель обрабатывает данные только для оказания услуги и не передаёт их третьим лицам без согласия заказчика.`,
-);
-
-export default function ModalFeaturesExample() {
-  const [host, setHost] = React.useState<HTMLDivElement | null>(null);
-
-  return (
-    <div className={styles.row}>
-      <Modal.Root>
-        <Modal.Trigger>
-          <Button.Root variant="soft" tone="neutral">
-            Длинный текст
-          </Button.Root>
-        </Modal.Trigger>
-        <Modal.Content size="l">
-          <Modal.Header>
-            <Modal.Title>Условия обработки данных</Modal.Title>
-            <Modal.Description>Редакция от 1 октября 2026 года</Modal.Description>
-          </Modal.Header>
-          <Modal.Body>
-            {TERMS.map((line) => (
-              <Typography.Root key={line} variant="body-m" tone="secondary">
-                {line}
-              </Typography.Root>
-            ))}
-          </Modal.Body>
-          <Modal.Footer>
-            <Modal.Close>
-              <Button.Root variant="outline" tone="neutral">
-                Не сейчас
-              </Button.Root>
-            </Modal.Close>
-            <Modal.Close>
-              <Button.Root>Принимаю</Button.Root>
-            </Modal.Close>
-          </Modal.Footer>
-        </Modal.Content>
-      </Modal.Root>
-
-      <div ref={setHost} className={styles.portalHost}>
-        {host ? (
-          <Modal.Root>
-            <Modal.Trigger>
-              <Button.Root variant="soft" tone="neutral">
-                Портал в этот блок
-              </Button.Root>
-            </Modal.Trigger>
-            <Modal.Content container={host} size="s">
-              <Modal.Header>
-                <Modal.Title>Свой контейнер</Modal.Title>
-                <Modal.Description>Диалог смонтирован внутрь выделенного блока.</Modal.Description>
-              </Modal.Header>
-            </Modal.Content>
-          </Modal.Root>
-        ) : null}
-      </div>
-    </div>
-  );
-}