prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,79 +0,0 @@
-/** Full anatomy: header with icon, title and description, a body with a copyable link, a footer with two equal actions. Use as the default shape of a dialog. */
-import { Check, Copy, ExternalLink, Send } from "lucide-react";
-import { Button, Input, Modal, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-const LINK = "https://t.me/w2rnotifybot?start=6d2725db4672";
-
-export default function ModalLinkExample() {
-  const [copied, setCopied] = React.useState(false);
-
-  const copy = async () => {
-    try {
-      await navigator.clipboard.writeText(LINK);
-      setCopied(true);
-      window.setTimeout(() => setCopied(false), 1500);
-    } catch {
-      setCopied(false);
-    }
-  };
-
-  return (
-    <Modal.Root>
-      <Modal.Trigger>
-        <Button.Root>
-          <Button.Icon>
-            <Send />
-          </Button.Icon>
-          Привязать Telegram
-        </Button.Root>
-      </Modal.Trigger>
-      <Modal.Content>
-        <Modal.Header>
-          <Modal.Icon>
-            <Send />
-          </Modal.Icon>
-          <Modal.Title>Ссылка для привязки</Modal.Title>
-          <Modal.Description>
-            Откройте в Telegram и нажмите Start. Бот: @w2rnotifybot
-          </Modal.Description>
-        </Modal.Header>
-        <Modal.Body>
-          <Input.Root label="Ссылка" hint="Действует до 07.10.2026, 10:30:33">
-            <Input.Wrapper>
-              <Input.Field readOnly value={LINK} />
-              <Button.Root
-                variant="ghost"
-                tone="neutral"
-                size="xs"
-                aria-label={copied ? "Скопировано" : "Скопировать ссылку"}
-                onClick={copy}
-              >
-                <Button.Icon>{copied ? <Check /> : <Copy />}</Button.Icon>
-              </Button.Root>
-            </Input.Wrapper>
-          </Input.Root>
-          <Typography.Root variant="body-m" tone="secondary">
-            После Start вернитесь в эту вкладку — список обновится сам. Настройки типов уведомлений
-            — в карандаше или по клику на строку.
-          </Typography.Root>
-        </Modal.Body>
-        <Modal.Footer>
-          <Modal.Close>
-            <Button.Root variant="outline" tone="neutral">
-              Закрыть
-            </Button.Root>
-          </Modal.Close>
-          <Modal.Confirm>
-            <Button.Root onClick={() => window.open(LINK, "_blank", "noopener")}>
-              <Button.Icon>
-                <ExternalLink />
-              </Button.Icon>
-              Перейти
-            </Button.Root>
-          </Modal.Confirm>
-        </Modal.Footer>
-      </Modal.Content>
-    </Modal.Root>
-  );
-}

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

@@ -1,73 +0,0 @@
-/** Destructive confirm without a body (danger icon, `closeOnOutsideClick={false}`, loading action in Modal.Confirm) and a header-only info dialog. Use for delete confirmations and short notices. */
-import { FileText, Trash2 } from "lucide-react";
-import { Button, Modal } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function ModalStatesExample() {
-  const [open, setOpen] = React.useState(false);
-  const [deleting, setDeleting] = React.useState(false);
-
-  const remove = () => {
-    setDeleting(true);
-    window.setTimeout(() => {
-      setDeleting(false);
-      setOpen(false);
-    }, 1200);
-  };
-
-  return (
-    <div className={styles.row}>
-      <Modal.Root open={open} onOpenChange={setOpen} closeOnOutsideClick={false}>
-        <Modal.Trigger>
-          <Button.Root variant="soft" tone="danger">
-            Удалить проект
-          </Button.Root>
-        </Modal.Trigger>
-        <Modal.Content size="s">
-          <Modal.Header>
-            <Modal.Icon tone="danger">
-              <Trash2 />
-            </Modal.Icon>
-            <Modal.Title>Удалить «Сайт компании»?</Modal.Title>
-            <Modal.Description>
-              Задачи, файлы и история будут удалены без возможности восстановления.
-            </Modal.Description>
-          </Modal.Header>
-          <Modal.Footer>
-            <Modal.Close>
-              <Button.Root variant="outline" tone="neutral" disabled={deleting}>
-                Отмена
-              </Button.Root>
-            </Modal.Close>
-            <Modal.Confirm>
-              <Button.Root tone="danger" loading={deleting} onClick={remove}>
-                Удалить
-              </Button.Root>
-            </Modal.Confirm>
-          </Modal.Footer>
-        </Modal.Content>
-      </Modal.Root>
-
-      <Modal.Root>
-        <Modal.Trigger>
-          <Button.Root variant="soft" tone="neutral">
-            Только информация
-          </Button.Root>
-        </Modal.Trigger>
-        <Modal.Content size="s">
-          <Modal.Header>
-            <Modal.Icon tone="info">
-              <FileText />
-            </Modal.Icon>
-            <Modal.Title>Отчёт готовится</Modal.Title>
-            <Modal.Description>
-              Пришлём письмо, когда файл можно будет скачать. Обычно это пара минут.
-            </Modal.Description>
-          </Modal.Header>
-        </Modal.Content>
-      </Modal.Root>
-    </div>
-  );
-}

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

@@ -1,42 +0,0 @@
-/** Card options: a custom `icon`, a `badge` counter, an `action` button, and a short title-only toast without a close button (`closable: false`). Use them for message digests and quick confirmations. */
-import { MessageSquare } from "lucide-react";
-import { NotificationCard, type NotificationRecord } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const base = {
-  position: "top-right",
-  size: "m",
-  duration: 0,
-  persistent: true,
-  closable: true,
-  createdAt: 0,
-} as const;
-
-const withEverything: NotificationRecord = {
-  ...base,
-  id: "features-rich",
-  tone: "info",
-  title: "Новые ответы в обсуждении",
-  description: "Мария и ещё двое ответили на ваш комментарий.",
-  icon: <MessageSquare aria-hidden />,
-  badge: 3,
-  action: { label: "Открыть", onClick: () => {} },
-};
-
-const titleOnly: NotificationRecord = {
-  ...base,
-  id: "features-title",
-  tone: "success",
-  title: "Ссылка скопирована",
-  closable: false,
-};
-
-export default function NotificationFeaturesExample() {
-  return (
-    <div className={styles.cards}>
-      <NotificationCard item={withEverything} paused onDismiss={() => {}} />
-      <NotificationCard item={titleOnly} paused onDismiss={() => {}} />
-    </div>
-  );
-}

package/src/components/notification/examples/live.tsx

@@ -1,128 +0,0 @@
-/** Live toasts from `useNotifications().notify()` with a position picker; same position + tone stack, hover expands the stack and pauses timers, `persistent` disables auto-close. Use it to see stacking, positions and `dismissAll`. */
-import {
-  Button,
-  type NotificationPosition,
-  NotificationProvider,
-  Select,
-  Typography,
-  useNotifications,
-} from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const positions: { value: NotificationPosition; label: string }[] = [
-  { value: "top-left", label: "Сверху слева" },
-  { value: "top-center", label: "Сверху по центру" },
-  { value: "top-right", label: "Сверху справа" },
-  { value: "bottom-left", label: "Снизу слева" },
-  { value: "bottom-center", label: "Снизу по центру" },
-  { value: "bottom-right", label: "Снизу справа" },
-];
-
-function LiveToasts() {
-  const { notify, dismissAll, items } = useNotifications();
-  const [position, setPosition] = React.useState<NotificationPosition>("top-right");
-
-  return (
-    <div className={styles.controls}>
-      <div className={styles.select}>
-        <Select.Root value={position} onValueChange={(v) => setPosition(v as NotificationPosition)}>
-          <Select.Trigger aria-label="Позиция тостов">
-            <Select.Value />
-          </Select.Trigger>
-          <Select.Content>
-            {positions.map((p) => (
-              <Select.Item key={p.value} value={p.value}>
-                {p.label}
-              </Select.Item>
-            ))}
-          </Select.Content>
-        </Select.Root>
-      </div>
-      <div className={styles.row}>
-        <Button.Root
-          variant="outline"
-          tone="neutral"
-          onClick={() =>
-            notify({
-              tone: "success",
-              title: "Заказ оформлен",
-              description: "№ 48 213, доставка завтра.",
-              position,
-            })
-          }
-        >
-          Успех
-        </Button.Root>
-        <Button.Root
-          variant="outline"
-          tone="neutral"
-          onClick={() =>
-            notify({
-              tone: "info",
-              title: "Новое сообщение",
-              description: "Поддержка ответила в чате.",
-              position,
-            })
-          }
-        >
-          Инфо
-        </Button.Root>
-        <Button.Root
-          variant="outline"
-          tone="neutral"
-          onClick={() =>
-            notify({
-              tone: "warning",
-              title: "Мало на складе",
-              description: "Осталось 3 шт. «Монитор 27″».",
-              position,
-            })
-          }
-        >
-          Внимание
-        </Button.Root>
-        <Button.Root
-          variant="outline"
-          tone="neutral"
-          onClick={() =>
-            notify({
-              tone: "danger",
-              title: "Платёж отклонён",
-              description: "Банк не подтвердил операцию.",
-              position,
-              persistent: true,
-              action: { label: "Повторить", onClick: () => {} },
-            })
-          }
-        >
-          Ошибка (без таймера)
-        </Button.Root>
-      </div>
-      <div className={styles.row}>
-        <Typography.Root as="span" variant="body-s" tone="secondary" className={styles.count}>
-          Активных: {items.length}
-        </Typography.Root>
-        <Button.Root
-          variant="ghost"
-          tone="neutral"
-          size="s"
-          disabled={items.length === 0}
-          onClick={dismissAll}
-        >
-          Закрыть все
-        </Button.Root>
-      </div>
-    </div>
-  );
-}
-
-export default function NotificationLiveExample() {
-  // In an app NotificationProvider wraps the root once; it is here to keep the example self-contained.
-  return (
-    <NotificationProvider>
-      <LiveToasts />
-    </NotificationProvider>
-  );
-}

package/src/components/notification/examples/save-form.tsx

@@ -1,59 +0,0 @@
-/** Saving a form: the button shows `loading`, then `notify()` shows a success toast or an error toast with a "Повторить" action. Use it as the default pattern for async save feedback. */
-import { Button, Input, NotificationProvider, Typography, useNotifications } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-function SaveForm() {
-  const { notify } = useNotifications();
-  const [saving, setSaving] = React.useState(false);
-  const [email, setEmail] = React.useState("team@prime.dev");
-
-  const save = () => {
-    setSaving(true);
-    window.setTimeout(() => {
-      setSaving(false);
-      if (email.includes("@")) {
-        notify({
-          tone: "success",
-          title: "Настройки сохранены",
-          description: `Отчёты придут на ${email}.`,
-        });
-      } else {
-        notify({
-          tone: "danger",
-          title: "Не удалось сохранить",
-          description: "Укажите корректный адрес почты.",
-          action: { label: "Повторить", onClick: save },
-        });
-      }
-    }, 700);
-  };
-
-  return (
-    <div className={styles.card}>
-      <Typography.Root as="h3" variant="title-m">
-        Рассылка отчётов
-      </Typography.Root>
-      <Input.Root label="Почта для отчётов" hint="Без «@» сохранение завершится ошибкой">
-        <Input.Wrapper>
-          <Input.Field value={email} onChange={(e) => setEmail(e.target.value)} />
-        </Input.Wrapper>
-      </Input.Root>
-      <div className={styles.actions}>
-        <Button.Root loading={saving} onClick={save}>
-          Сохранить
-        </Button.Root>
-      </div>
-    </div>
-  );
-}
-
-export default function NotificationSaveFormExample() {
-  // In an app NotificationProvider wraps the root once; it is here to keep the example self-contained.
-  return (
-    <NotificationProvider>
-      <SaveForm />
-    </NotificationProvider>
-  );
-}

package/src/components/page-content/examples/readable.tsx

@@ -1,24 +0,0 @@
-/** A text page in `PageContent.Root maxWidth="readable"`, held to ~65 characters per line. Use for terms, articles and help pages. */
-import { PageContent, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function PageContentReadableExample() {
-  return (
-    <div className={styles.main}>
-      <PageContent.Root maxWidth="readable">
-        <PageContent.Header>
-          <PageContent.Title>Условия использования</PageContent.Title>
-          <PageContent.Description>Обновлено 1 октября 2026 года.</PageContent.Description>
-        </PageContent.Header>
-        <PageContent.Body>
-          <Typography.Root as="p" variant="body-l">
-            Сервис помогает командам вести продажи и отчётность. Используя его, вы соглашаетесь
-            хранить доступы в тайне и не передавать их третьим лицам. Мы бережно обращаемся с
-            данными и удаляем их по первому запросу.
-          </Typography.Root>
-        </PageContent.Body>
-      </PageContent.Root>
-    </div>
-  );
-}

package/src/components/page-content/examples/settings-page.tsx

@@ -1,49 +0,0 @@
-/** A settings route inside AppShell.Main: header with title, description and actions, then panel cards in Body. Use for any app page with page-level actions. */
-import { Button, Card, Input, PageContent, Switch } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function PageContentSettingsPageExample() {
-  return (
-    <div className={styles.main}>
-      <PageContent.Section aria-labelledby="settings-heading">
-        <PageContent.Header>
-          <PageContent.Title id="settings-heading">Настройки</PageContent.Title>
-          <PageContent.Description measure="full">
-            Профиль рабочего пространства и уведомления.
-          </PageContent.Description>
-          <PageContent.Actions>
-            <Button.Root variant="soft" tone="neutral">
-              Экспорт
-            </Button.Root>
-            <Button.Root>Сохранить</Button.Root>
-          </PageContent.Actions>
-        </PageContent.Header>
-        <PageContent.Body>
-          <Card.Root variant="panel">
-            <Card.SectionHeader>
-              <Card.SectionTitle>Профиль</Card.SectionTitle>
-            </Card.SectionHeader>
-            <Card.Body>
-              <Input.Root label="Название компании">
-                <Input.Wrapper>
-                  <Input.Field defaultValue="Прайм Софт" />
-                </Input.Wrapper>
-              </Input.Root>
-            </Card.Body>
-          </Card.Root>
-          <Card.Root variant="panel">
-            <Card.SectionHeader>
-              <Card.SectionTitle>Уведомления</Card.SectionTitle>
-            </Card.SectionHeader>
-            <Card.Body>
-              <Switch.Root defaultChecked>
-                <Switch.Label>Письма о новых заказах</Switch.Label>
-              </Switch.Root>
-            </Card.Body>
-          </Card.Root>
-        </PageContent.Body>
-      </PageContent.Section>
-    </div>
-  );
-}

package/src/components/page-content/examples/widths.tsx

@@ -1,39 +0,0 @@
-/** `PageContent.Root maxWidth` full · wide · readable: the same page column at three caps. Use `wide` for dashboards on very wide screens, `readable` for text pages, `full` everywhere else. */
-import { PageContent, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const WIDTHS = [
-  { value: "full", title: "На всю ширину", text: "maxWidth: full — колонка занимает весь main." },
-  {
-    value: "wide",
-    title: "Широкая колонка",
-    text: "maxWidth: wide — не шире --prime-layout-content-max-width, по центру.",
-  },
-  {
-    value: "readable",
-    title: "Колонка для чтения",
-    text: "maxWidth: readable — около 65 знаков в строке, по центру.",
-  },
-] as const;
-
-export default function PageContentWidthsExample() {
-  return (
-    <div className={styles.main}>
-      <div className={styles.stack}>
-        {WIDTHS.map(({ value, title, text }) => (
-          <PageContent.Root key={value} maxWidth={value}>
-            <PageContent.Header>
-              <PageContent.Title>{title}</PageContent.Title>
-            </PageContent.Header>
-            <PageContent.Body>
-              <Typography.Root as="div" variant="body-s" tone="secondary" className={styles.block}>
-                {text}
-              </Typography.Root>
-            </PageContent.Body>
-          </PageContent.Root>
-        ))}
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/compact.tsx

@@ -1,36 +0,0 @@
-/** `compact` (arrows + «current / total») and `compact="auto"` that fills its parent and switches below 22rem of container width. Use in narrow cards, mobile footers and table footers. */
-import { Pagination, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function PaginationCompactExample() {
-  const [page, setPage] = React.useState(3);
-
-  return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root as="span" variant="caption" tone="muted">
-          compact
-        </Typography.Root>
-        <Pagination.Root compact value={page} totalPages={12} onValueChange={setPage} />
-      </div>
-      <div className={styles.group}>
-        <Typography.Root as="span" variant="caption" tone="muted">
-          compact="auto" · 36rem
-        </Typography.Root>
-        <div className={styles.wide}>
-          <Pagination.Root compact="auto" value={page} totalPages={12} onValueChange={setPage} />
-        </div>
-      </div>
-      <div className={styles.group}>
-        <Typography.Root as="span" variant="caption" tone="muted">
-          compact="auto" · 20rem
-        </Typography.Root>
-        <div className={styles.narrow}>
-          <Pagination.Root compact="auto" value={page} totalPages={12} onValueChange={setPage} />
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/list-footer.tsx

@@ -1,50 +0,0 @@
-/** List footer: record range on the left, a rows-per-page Select and an `s` pagination on the right; the right group wraps under the range on narrow widths. Use under lists and tables. */
-import { Pagination, Select, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const TOTAL = 248;
-
-export default function PaginationListFooterExample() {
-  const [perPage, setPerPage] = React.useState("25");
-  const [page, setPage] = React.useState(2);
-
-  const size = Number(perPage);
-  const totalPages = Math.ceil(TOTAL / size);
-  const from = (page - 1) * size + 1;
-  const to = Math.min(page * size, TOTAL);
-
-  return (
-    <div className={styles.footer}>
-      <Typography.Root as="span" variant="body-s" tone="secondary" className={styles.summary}>
-        {from}–{to} из {TOTAL}
-      </Typography.Root>
-      <div className={styles.controls}>
-        <div className={styles.perPage}>
-          <Typography.Root as="span" variant="body-s" tone="secondary">
-            Строк на странице
-          </Typography.Root>
-          <Select.Root
-            size="s"
-            value={perPage}
-            onValueChange={(value) => {
-              setPerPage(value);
-              setPage(1);
-            }}
-          >
-            <Select.Trigger aria-label="Строк на странице">
-              <Select.Value />
-            </Select.Trigger>
-            <Select.Content>
-              <Select.Item value="10">10</Select.Item>
-              <Select.Item value="25">25</Select.Item>
-              <Select.Item value="50">50</Select.Item>
-            </Select.Content>
-          </Select.Root>
-        </div>
-        <Pagination.Root size="s" value={page} totalPages={totalPages} onValueChange={setPage} />
-      </div>
-    </div>
-  );
-}

package/src/components/pagination/examples/states.tsx

@@ -1,44 +0,0 @@
-/** Disabled arrows at the edges, no ellipsis up to 7 pages, and the window around the current page set by `siblingCount`. Use to choose the range behaviour. */
-import { Pagination, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-function Example({
-  label,
-  total,
-  start,
-  siblings,
-}: {
-  label: string;
-  total: number;
-  start: number;
-  siblings?: number;
-}) {
-  const [page, setPage] = React.useState(start);
-  return (
-    <div className={styles.group}>
-      <Typography.Root as="span" variant="caption" tone="muted">
-        {label}
-      </Typography.Root>
-      <Pagination.Root
-        value={page}
-        totalPages={total}
-        siblingCount={siblings}
-        onValueChange={setPage}
-      />
-    </div>
-  );
-}
-
-export default function PaginationStatesExample() {
-  return (
-    <div className={styles.stack}>
-      <Example label="первая страница — «назад» отключена" total={12} start={1} />
-      <Example label="последняя — «вперёд» отключена" total={12} start={12} />
-      <Example label="5 страниц — без многоточия" total={5} start={3} />
-      <Example label="середина, siblingCount=1" total={40} start={20} />
-      <Example label="середина, siblingCount=2" total={40} start={20} siblings={2} />
-    </div>
-  );
-}

package/src/components/popover/examples/as-child.tsx

@@ -1,29 +0,0 @@
-/** A text-link button as the trigger: any single element can open the panel. Use for inline explanations of terms in text. */
-import { Popover, Typography } from "prime-ui-kit";
-
-import preview from "./examples.module.css";
-
-export default function PopoverAsChildExample() {
-  return (
-    <Popover.Root>
-      <Popover.Trigger>
-        <button type="button" className={preview.textLinkTrigger}>
-          <Typography.Root
-            as="span"
-            variant="body-m"
-            weight="medium"
-            tone="accent"
-            className={preview.underline}
-          >
-            Что такое НДС 0%?
-          </Typography.Root>
-        </button>
-      </Popover.Trigger>
-      <Popover.Content>
-        <Typography.Root variant="body-s" tone="secondary" className={preview.text}>
-          Ставка для экспорта товаров. Нужны подтверждающие документы в течение 180 дней.
-        </Typography.Root>
-      </Popover.Content>
-    </Popover.Root>
-  );
-}