prime-ui-kit 0.9.0 → 0.9.1

package/src/components/data-table/examples/dashboard.tsx

@@ -1,205 +0,0 @@
-/** Store dashboard: a row of `stat-trend` cards and a recent-orders table with avatar, status badge and `numeric` sums. Use as the skeleton of an overview screen. */
-
-import {
-  Avatar,
-  Badge,
-  Button,
-  Card,
-  DataTable,
-  type DataTableColumn,
-  SegmentedControl,
-  Typography,
-} from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-type OrderStatus = "paid" | "shipping" | "refund";
-type Order = {
-  id: string;
-  customer: string;
-  email: string;
-  status: OrderStatus;
-  items: number;
-  total: number;
-};
-
-const status: Record<OrderStatus, { label: string; color: "green" | "blue" | "red" }> = {
-  paid: { label: "Оплачен", color: "green" },
-  shipping: { label: "В пути", color: "blue" },
-  refund: { label: "Возврат", color: "red" },
-};
-
-const orders: Order[] = [
-  {
-    id: "№ 48 213",
-    customer: "Алина Морозова",
-    email: "alina.m@mail.ru",
-    status: "paid",
-    items: 3,
-    total: 12_480,
-  },
-  {
-    id: "№ 48 212",
-    customer: "Сергей Фёдоров",
-    email: "s.fedorov@yandex.ru",
-    status: "shipping",
-    items: 1,
-    total: 54_990,
-  },
-  {
-    id: "№ 48 211",
-    customer: "Ольга Лебедева",
-    email: "olga.l@gmail.com",
-    status: "paid",
-    items: 6,
-    total: 8_730,
-  },
-  {
-    id: "№ 48 210",
-    customer: "Тимур Ахмедов",
-    email: "timur@ahmedov.ru",
-    status: "refund",
-    items: 2,
-    total: 3_200,
-  },
-  {
-    id: "№ 48 209",
-    customer: "Ксения Волкова",
-    email: "k.volkova@mail.ru",
-    status: "shipping",
-    items: 4,
-    total: 21_650,
-  },
-  {
-    id: "№ 48 208",
-    customer: "Павел Никитин",
-    email: "p.nikitin@corp.ru",
-    status: "paid",
-    items: 1,
-    total: 2_490,
-  },
-  {
-    id: "№ 48 207",
-    customer: "Елена Зайцева",
-    email: "zaytseva@gmail.com",
-    status: "paid",
-    items: 2,
-    total: 17_300,
-  },
-];
-
-const rub = new Intl.NumberFormat("ru-RU", {
-  style: "currency",
-  currency: "RUB",
-  maximumFractionDigits: 0,
-});
-
-const initials = (name: string) =>
-  name
-    .split(" ")
-    .map((part) => part[0])
-    .join("");
-
-const columns: DataTableColumn<Order>[] = [
-  { id: "id", header: "Заказ", accessor: "id", width: "7rem" },
-  {
-    id: "customer",
-    header: "Покупатель",
-    accessor: "customer",
-    sortable: true,
-    minWidth: "14rem",
-    cell: (row) => (
-      <span className={styles.customer}>
-        <Avatar.Root size="s" color="purple">
-          <Avatar.Fallback>{initials(row.customer)}</Avatar.Fallback>
-        </Avatar.Root>
-        <span className={styles.customerText}>
-          <span>{row.customer}</span>
-          <Typography.Root as="span" variant="caption" tone="muted" truncate>
-            {row.email}
-          </Typography.Root>
-        </span>
-      </span>
-    ),
-  },
-  {
-    id: "status",
-    header: "Статус",
-    accessor: "status",
-    sortable: true,
-    cell: (row) => (
-      <Badge.Root color={status[row.status].color}>{status[row.status].label}</Badge.Root>
-    ),
-  },
-  { id: "items", header: "Товаров", accessor: "items", numeric: true },
-  {
-    id: "total",
-    header: "Сумма",
-    accessor: "total",
-    sortable: true,
-    numeric: true,
-    cell: (row) => rub.format(row.total),
-  },
-];
-
-export default function DataTableDashboardExample() {
-  const [period, setPeriod] = React.useState("30");
-
-  return (
-    <div className={styles.dashboard}>
-      <div className={styles.dashboardHeader}>
-        <Typography.Root as="h3" variant="heading-s">
-          Продажи
-        </Typography.Root>
-        <SegmentedControl.Root aria-label="Период" value={period} onValueChange={setPeriod}>
-          <SegmentedControl.Item value="7">7 дней</SegmentedControl.Item>
-          <SegmentedControl.Item value="30">30 дней</SegmentedControl.Item>
-          <SegmentedControl.Item value="90">Квартал</SegmentedControl.Item>
-        </SegmentedControl.Root>
-      </div>
-
-      <div className={styles.kpis}>
-        <Card.Root variant="stat-trend">
-          <Card.Label>Выручка</Card.Label>
-          <Card.Value>₽ 4,82 млн</Card.Value>
-          <Card.Delta tone="success">+12,4% к прошлому периоду</Card.Delta>
-        </Card.Root>
-        <Card.Root variant="stat-trend">
-          <Card.Label>Заказы</Card.Label>
-          <Card.Value>1 284</Card.Value>
-          <Card.Delta tone="success">+86 заказов</Card.Delta>
-        </Card.Root>
-        <Card.Root variant="stat-trend">
-          <Card.Label>Средний чек</Card.Label>
-          <Card.Value>₽ 3 754</Card.Value>
-          <Card.Delta tone="neutral">без изменений</Card.Delta>
-        </Card.Root>
-        <Card.Root variant="stat-trend">
-          <Card.Label>Возвраты</Card.Label>
-          <Card.Value>2,1%</Card.Value>
-          <Card.Delta tone="danger">+0,4 п. п.</Card.Delta>
-        </Card.Root>
-      </div>
-
-      <DataTable.Root
-        columns={columns}
-        rows={orders}
-        getRowKey={(row) => row.id}
-        defaultSort={null}
-        pageSize={5}
-        onRowClick={() => {}}
-        toolbar={
-          <div className={styles.toolbar}>
-            <Typography.Root as="span" variant="body-s" tone="secondary">
-              Последние заказы
-            </Typography.Root>
-            <Button.Root variant="ghost" tone="neutral" size="s">
-              Все заказы
-            </Button.Root>
-          </div>
-        }
-      />
-    </div>
-  );
-}

package/src/components/data-table/examples/sorting-pagination.tsx

@@ -1,66 +0,0 @@
-/** Controlled `sort` and `page`: a header click goes asc → desc → none, and a sort change returns to page 1. Use when sorting and paging live in the URL or a store. */
-
-import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
-import * as React from "react";
-
-type Order = { id: number; customer: string; city: string; date: string; total: number };
-
-const customers = ["Анна С.", "Борис К.", "Вера Л.", "Глеб М.", "Дарья Н.", "Егор П."];
-const cities = ["Москва", "Казань", "Самара", "Томск", "Пермь"];
-
-const rows: Order[] = Array.from({ length: 23 }, (_, i) => ({
-  id: 5000 + i,
-  customer: customers[i % customers.length],
-  city: cities[(i * 3) % cities.length],
-  date: `2026-09-${String((i % 28) + 1).padStart(2, "0")}`,
-  total: 1200 + ((i * 7919) % 48_000),
-}));
-
-const rub = new Intl.NumberFormat("ru-RU", {
-  style: "currency",
-  currency: "RUB",
-  maximumFractionDigits: 0,
-});
-const day = new Intl.DateTimeFormat("ru-RU", { day: "numeric", month: "short" });
-
-const columns: DataTableColumn<Order>[] = [
-  { id: "id", header: "№", accessor: "id", sortable: true, numeric: true, width: "5rem" },
-  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
-  { id: "city", header: "Город", accessor: "city", sortable: true },
-  {
-    id: "date",
-    header: "Дата",
-    accessor: "date",
-    sortable: true,
-    cell: (row) => day.format(new Date(row.date)),
-  },
-  {
-    id: "total",
-    header: "Сумма",
-    accessor: "total",
-    sortable: true,
-    numeric: true,
-    cell: (row) => rub.format(row.total),
-  },
-];
-
-export default function DataTableSortingPaginationExample() {
-  const [sort, setSort] = React.useState<DataTableSortState>({ columnId: "total", order: "desc" });
-  const [page, setPage] = React.useState(1);
-
-  return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
-      getRowKey={(row) => row.id}
-      sort={sort}
-      onSortChange={(next) => {
-        setSort(next);
-        setPage(1);
-      }}
-      page={page}
-      onPageChange={setPage}
-      pageSize={5}
-    />
-  );
-}

package/src/components/datepicker/examples/badge.tsx

@@ -1,19 +0,0 @@
-/** An empty date field with a «Не заполнено» Datepicker.Badge at the trailing edge. Use it to flag a missing date without an error state. */
-import { Datepicker } from "prime-ui-kit";
-import * as React from "react";
-
-export default function DatepickerBadgeExample() {
-  const [day, setDay] = React.useState<Date | null>(null);
-  return (
-    <Datepicker.Root
-      mode="single"
-      label="Дата выдачи"
-      placeholder="дд.мм.гггг"
-      fullWidth
-      value={day}
-      onValueChange={setDay}
-    >
-      {day ? null : <Datepicker.Badge color="orange">Не заполнено</Datepicker.Badge>}
-    </Datepicker.Root>
-  );
-}

package/src/components/datepicker/examples/single.tsx

@@ -1,16 +0,0 @@
-/** A single date without a footer: one month, a click on a day applies the value at once. Use it for one-off dates in filters and forms. */
-import { Datepicker } from "prime-ui-kit";
-import * as React from "react";
-
-export default function DatepickerSingleExample() {
-  const [date, setDate] = React.useState<Date | null>(null);
-  return (
-    <Datepicker.Root
-      mode="single"
-      value={date}
-      onValueChange={setDate}
-      placeholder="Дата продажи"
-      aria-label="Дата продажи"
-    />
-  );
-}

package/src/components/digit-input/examples/length-and-complete.tsx

@@ -1,30 +0,0 @@
-/** `length`, `onComplete` and keyboard navigation (typing, Backspace, arrow keys, paste). Use `onComplete` to submit the code as soon as the last cell is filled. */
-import { DigitInput, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function DigitInputLengthAndCompleteExample() {
-  const [completed, setCompleted] = React.useState<string | null>(null);
-
-  return (
-    <div className={styles.statesGrid}>
-      <div className={styles.cell}>
-        <DigitInput.Root length={6} defaultValue="12" labels={{ group: "Код из шести цифр" }} />
-        <Typography.Root variant="caption" tone="muted">
-          length=6 · ← → ходят по ячейкам
-        </Typography.Root>
-      </div>
-      <div className={styles.cell}>
-        <DigitInput.Root
-          length={4}
-          onComplete={setCompleted}
-          labels={{ group: "Код подтверждения" }}
-        />
-        <Typography.Root variant="caption" tone="muted">
-          {completed ? `onComplete: ${completed}` : "Введите или вставьте 4 цифры"}
-        </Typography.Root>
-      </div>
-    </div>
-  );
-}

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

@@ -1,6 +0,0 @@
-/** Cells use the field fill: white on the canvas, `field-bg-surface` inside a card or popover. Place the code field on any surface without overrides. */
-import { DigitInput } from "prime-ui-kit";
-
-export default function DigitInputSurfacesExample() {
-  return <DigitInput.Root length={4} defaultValue="73" labels={{ group: "PIN-код" }} />;
-}

package/src/components/digit-input/examples/verification-step.tsx

@@ -1,62 +0,0 @@
-/** A sign-in confirmation step in a card: Label, a six-digit code, a Hint that turns into an error, resend and submit actions. Use it as the full OTP screen pattern. */
-import { Button, Card, DigitInput, Hint, Label, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-const VALID_CODE = "123456";
-
-export default function DigitInputVerificationStepExample() {
-  const id = React.useId();
-  const [code, setCode] = React.useState("");
-  const [error, setError] = React.useState(false);
-
-  const verify = (value: string) => setError(value !== VALID_CODE);
-
-  return (
-    <Card.Root variant="panel" className={styles.card}>
-      <Card.SectionHeader>
-        <Card.SectionTitle>Подтвердите вход</Card.SectionTitle>
-      </Card.SectionHeader>
-      <Card.Body>
-        <form
-          className={styles.form}
-          onSubmit={(e) => {
-            e.preventDefault();
-            verify(code);
-          }}
-        >
-          <Typography.Root variant="body-s" tone="muted">
-            Мы отправили код на +7 900 ••• 12 34. Для демо подходит {VALID_CODE}.
-          </Typography.Root>
-          <div className={styles.field}>
-            <Label.Root>Код из SMS</Label.Root>
-            <DigitInput.Root
-              invalid={error}
-              length={6}
-              value={code}
-              onValueChange={(value) => {
-                setCode(value);
-                setError(false);
-              }}
-              onComplete={verify}
-              labels={{ group: "Код из SMS" }}
-              aria-describedby={`${id}-hint`}
-            />
-            <Hint.Root invalid={error} id={`${id}-hint`}>
-              {error ? "Неверный код. Проверьте SMS и введите снова." : "Код действует 5 минут."}
-            </Hint.Root>
-          </div>
-          <div className={styles.actions}>
-            <Button.Root variant="ghost" tone="neutral" type="button" onClick={() => setCode("")}>
-              Отправить код ещё раз
-            </Button.Root>
-            <Button.Root type="submit" disabled={code.length < 6}>
-              Подтвердить
-            </Button.Root>
-          </div>
-        </form>
-      </Card.Body>
-    </Card.Root>
-  );
-}

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

@@ -1,49 +0,0 @@
-/** An «или» divider between sign-in options, a section heading with an icon and presentation lines between list rows. Use when lines separate content inside one surface. */
-import { Button, Divider, Icon, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-const rows = [
-  { label: "Пароль", value: "Изменён 12 дней назад" },
-  { label: "Двухфакторный вход", value: "Включён" },
-  { label: "Активные сессии", value: "3 устройства" },
-];
-
-export default function DividerCompositionExample() {
-  return (
-    <div className={styles.column}>
-      <div className={styles.stack}>
-        <Button.Root fullWidth>Войти</Button.Root>
-        <Divider.Root>или</Divider.Root>
-        <Button.Root variant="outline" tone="neutral" fullWidth>
-          <Button.Icon>
-            <Icon name="field.email" />
-          </Button.Icon>
-          Получить ссылку на почту
-        </Button.Root>
-      </div>
-
-      <div>
-        <Divider.Root align="start">
-          <Icon name="status.locked" />
-          Безопасность
-        </Divider.Root>
-        <div className={styles.list}>
-          {rows.map((row, index) => (
-            <div key={row.label}>
-              {index > 0 ? <Divider.Root role="presentation" /> : null}
-              <div className={styles.listRow}>
-                <Typography.Root as="span" variant="body-m">
-                  {row.label}
-                </Typography.Root>
-                <Typography.Root as="span" variant="body-m" tone="secondary">
-                  {row.value}
-                </Typography.Root>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,62 +0,0 @@
-/** Plain line, label positions (start · center · end), a line inside a gap column and a vertical divider between toolbar groups. Use as a reference for every Divider shape. */
-import { Button, Divider, Typography } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
-
-export default function DividerVariantsExample() {
-  return (
-    <div className={styles.column}>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          без подписи
-        </Typography.Root>
-        <Divider.Root />
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          align: start · center · end
-        </Typography.Root>
-        <Divider.Root align="start">Начало</Divider.Root>
-        <Divider.Root>По центру</Divider.Root>
-        <Divider.Root align="end">Конец</Divider.Root>
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          align=&quot;start&quot; — заголовок секции
-        </Typography.Root>
-        <Divider.Root align="start">Уведомления</Divider.Root>
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          в колонке — ритм задаёт gap родителя
-        </Typography.Root>
-        <div className={styles.lineSpacingColumn}>
-          <Typography.Root as="span" variant="body-m" tone="secondary">
-            Первый пункт
-          </Typography.Root>
-          <Divider.Root />
-          <Typography.Root as="span" variant="body-m" tone="secondary">
-            Второй пункт
-          </Typography.Root>
-        </div>
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="caption" tone="muted">
-          orientation=&quot;vertical&quot; — между группами в ряду
-        </Typography.Root>
-        <div className={styles.toolbar}>
-          <Button.Root variant="ghost" tone="neutral">
-            Вырезать
-          </Button.Root>
-          <Button.Root variant="ghost" tone="neutral">
-            Копировать
-          </Button.Root>
-          <Divider.Root orientation="vertical" />
-          <Button.Root variant="ghost" tone="neutral">
-            Удалить
-          </Button.Root>
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,94 +0,0 @@
-/** Settings drawer: a grouped form in the body, Cancel / Save in the footer with a loading state. Use for editing settings or a record next to the page. */
-import { Settings } from "lucide-react";
-import { Button, Drawer, Input, Label, SegmentedControl, Select, Switch } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function DrawerCompositionExample() {
-  const [open, setOpen] = React.useState(false);
-  const [saving, setSaving] = React.useState(false);
-  const languageId = React.useId();
-
-  const save = () => {
-    setSaving(true);
-    window.setTimeout(() => {
-      setSaving(false);
-      setOpen(false);
-    }, 1000);
-  };
-
-  return (
-    <Drawer.Root open={open} onOpenChange={setOpen}>
-      <Drawer.Trigger>
-        <Button.Root variant="soft" tone="neutral">
-          <Button.Icon>
-            <Settings />
-          </Button.Icon>
-          Настройки рабочего пространства
-        </Button.Root>
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Header>
-          <Drawer.Icon>
-            <Settings />
-          </Drawer.Icon>
-          <Drawer.Title>Рабочее пространство</Drawer.Title>
-          <Drawer.Description>Изменения увидят все участники</Drawer.Description>
-        </Drawer.Header>
-        <Drawer.Body>
-          <div className={styles.form}>
-            <Input.Root label="Название" required>
-              <Input.Wrapper>
-                <Input.Field defaultValue="Команда продукта" />
-              </Input.Wrapper>
-            </Input.Root>
-            <Input.Root label="Адрес" hint="Только латиница, цифры и дефис">
-              <Input.Wrapper>
-                <Input.Field defaultValue="product-team" />
-              </Input.Wrapper>
-            </Input.Root>
-            <div className={styles.field}>
-              <Label.Root id={languageId}>Язык интерфейса</Label.Root>
-              <Select.Root defaultValue="ru">
-                <Select.Trigger aria-labelledby={languageId}>
-                  <Select.Value />
-                </Select.Trigger>
-                <Select.Content>
-                  <Select.Item value="ru">Русский</Select.Item>
-                  <Select.Item value="en">English</Select.Item>
-                  <Select.Item value="kk">Қазақша</Select.Item>
-                </Select.Content>
-              </Select.Root>
-            </div>
-            <div className={styles.field}>
-              <Label.Root>Начало недели</Label.Root>
-              <SegmentedControl.Root defaultValue="mon" fullWidth aria-label="Начало недели">
-                <SegmentedControl.Item value="mon">Понедельник</SegmentedControl.Item>
-                <SegmentedControl.Item value="sun">Воскресенье</SegmentedControl.Item>
-              </SegmentedControl.Root>
-            </div>
-            <div className={styles.group}>
-              <Switch.Root defaultChecked>
-                <Switch.Label>Письма о новых задачах</Switch.Label>
-              </Switch.Root>
-              <Switch.Root>
-                <Switch.Label>Еженедельная сводка</Switch.Label>
-              </Switch.Root>
-            </div>
-          </div>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close>
-            <Button.Root variant="outline" tone="neutral" disabled={saving}>
-              Отмена
-            </Button.Root>
-          </Drawer.Close>
-          <Button.Root loading={saving} onClick={save}>
-            Сохранить
-          </Button.Root>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer.Root>
-  );
-}

package/src/components/drawer/examples/controlled.tsx

@@ -1,42 +0,0 @@
-/** Controlled drawer opened from a link: `open` + `onOpenChange` on Drawer.Root, a custom close label and `layout="fill"` in the footer. Use when any element, not a trigger, opens the panel. */
-import { Button, Drawer, LinkButton, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
-
-export default function DrawerControlledExample() {
-  const [open, setOpen] = React.useState(false);
-
-  return (
-    <div className={styles.row}>
-      <LinkButton.Root
-        href="#help"
-        onClick={(event) => {
-          event.preventDefault();
-          setOpen(true);
-        }}
-      >
-        Как это работает?
-      </LinkButton.Root>
-      <Drawer.Root open={open} onOpenChange={setOpen} labels={{ close: "Закрыть справку" }}>
-        <Drawer.Content size="s">
-          <Drawer.Header>
-            <Drawer.Title>Справка</Drawer.Title>
-          </Drawer.Header>
-          <Drawer.Body>
-            <Typography.Root variant="body-m" tone="secondary">
-              Состояние хранит родитель: open и onOpenChange на Drawer.Root, триггер не нужен.
-            </Typography.Root>
-          </Drawer.Body>
-          <Drawer.Footer layout="fill">
-            <Drawer.Close>
-              <Button.Root variant="outline" tone="neutral">
-                Понятно
-              </Button.Root>
-            </Drawer.Close>
-          </Drawer.Footer>
-        </Drawer.Content>
-      </Drawer.Root>
-    </div>
-  );
-}