prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/reference/components/data-table/examples/narrow.tsx

@@ -0,0 +1,50 @@
+/** A 320 px support queue: columns scroll inside the table with the first one pinned, the toolbar and footer reflow and the pager turns compact — `stickyFirstColumn`, `size`. */
+import { Badge, Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Ticket = { id: string; subject: string; urgent: boolean; waiting: number };
+
+const SUBJECTS = ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"];
+
+const TICKETS: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
+  id: `T-${2400 + i}`,
+  subject: SUBJECTS[i % SUBJECTS.length],
+  urgent: i % 3 === 0,
+  waiting: (i * 5) % 48,
+}));
+
+const COLUMNS: DataTableColumn<Ticket>[] = [
+  { id: "id", header: "Тикет", accessor: "id" },
+  { id: "subject", header: "Тема", accessor: "subject", truncate: true, maxWidth: "10rem" },
+  {
+    id: "priority",
+    header: "Приоритет",
+    cell: (row) =>
+      row.urgent ? <Badge.Root color="red">Высокий</Badge.Root> : <Badge.Root>Обычный</Badge.Root>,
+  },
+  { id: "waiting", header: "Ждёт, ч", accessor: "waiting", numeric: true },
+];
+
+export default function DataTableNarrowExample() {
+  return (
+    <div className={styles.narrow}>
+      <DataTable
+        size="s"
+        columns={COLUMNS}
+        rows={TICKETS}
+        getRowKey={(row) => row.id}
+        stickyFirstColumn
+        pageSize={5}
+        toolbar={
+          <div className={styles.toolbar}>
+            <Typography as="span" variant="body-s" tone="secondary">
+              Открытые: {TICKETS.length}
+            </Typography>
+            <Button.Root size="xs">Новый тикет</Button.Root>
+          </div>
+        }
+      />
+    </div>
+  );
+}

package/dist/skill/reference/components/data-table/examples/nested-rows.tsx

@@ -0,0 +1,128 @@
+/** Partners with their expense lines: sub-rows indented under the parent's name, a chevron toggle, together with selection and sorting — `getRowChildren`, `expanded`, `onExpandedChange`. */
+import { Avatar, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Entry = {
+  id: string;
+  name: string;
+  note: string;
+  share: number;
+  amount: number;
+  children?: Entry[];
+};
+
+const ENTRIES: Entry[] = [
+  {
+    id: "denis",
+    name: "Денис Карпов",
+    note: "Партнёр",
+    share: 50,
+    amount: 184_000,
+    children: [
+      {
+        id: "denis-company",
+        name: "Расходы компании",
+        note: "доля 50%",
+        share: 50,
+        amount: 62_000,
+      },
+      {
+        id: "denis-payout",
+        name: "Выплата партнёру",
+        note: "за сентябрь",
+        share: 50,
+        amount: 122_000,
+      },
+    ],
+  },
+  {
+    id: "olga",
+    name: "Ольга Белова",
+    note: "Партнёр",
+    share: 30,
+    amount: 110_400,
+    children: [
+      { id: "olga-company", name: "Расходы компании", note: "доля 30%", share: 30, amount: 37_200 },
+      {
+        id: "olga-car",
+        name: "Toyota Camry · А 123 ВС",
+        note: "аренда",
+        share: 30,
+        amount: 73_200,
+      },
+    ],
+  },
+  { id: "ivan", name: "Иван Сорокин", note: "Инвестор", share: 20, amount: 73_600 },
+];
+
+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<Entry>[] = [
+  {
+    id: "name",
+    header: "Участник",
+    accessor: "name",
+    sortable: true,
+    cell: (row) => (
+      <div className={styles.person}>
+        {row.children ? (
+          <Avatar.Root color="purple">
+            <Avatar.Fallback>{initials(row.name)}</Avatar.Fallback>
+          </Avatar.Root>
+        ) : null}
+        <div className={styles.personText}>
+          <span>{row.name}</span>
+          <Typography as="span" variant="caption" tone="muted" truncate>
+            {row.note}
+          </Typography>
+        </div>
+      </div>
+    ),
+  },
+  {
+    id: "share",
+    header: "Доля",
+    accessor: "share",
+    sortable: true,
+    numeric: true,
+    cell: (row) => `${row.share}%`,
+  },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.amount),
+  },
+];
+
+export default function DataTableNestedRowsExample() {
+  const [expanded, setExpanded] = React.useState<React.Key[]>(["denis"]);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ENTRIES}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.name}
+      getRowChildren={(row) => row.children}
+      expanded={expanded}
+      onExpandedChange={setExpanded}
+      selectable
+      paging="none"
+    />
+  );
+}

package/dist/skill/reference/components/data-table/examples/numeric.tsx

@@ -0,0 +1,41 @@
+/** An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title — `numeric`, `truncate`, `maxWidth`. */
+import { DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type Sku = {
+  sku: string;
+  name: string;
+  stock: number;
+  price: number;
+  sold: number;
+  margin: number;
+};
+
+const SKUS: Sku[] = [
+  {
+    sku: "KB-210",
+    name: "Клавиатура беспроводная с подсветкой, русская раскладка",
+    stock: 1240,
+    price: 4990,
+    sold: 318,
+    margin: 0.284,
+  },
+  { sku: "MS-044", name: "Мышь оптическая", stock: 86, price: 1290, sold: 1204, margin: 0.312 },
+  { sku: "MN-27Q", name: 'Монитор 27" QHD IPS', stock: 12, price: 32_900, sold: 41, margin: 0.118 },
+  { sku: "HB-7P", name: "USB-хаб на 7 портов", stock: 530, price: 2190, sold: 97, margin: 0.402 },
+];
+
+const INT = new Intl.NumberFormat("ru-RU");
+const PCT = new Intl.NumberFormat("ru-RU", { style: "percent", maximumFractionDigits: 1 });
+
+const COLUMNS: DataTableColumn<Sku>[] = [
+  { id: "sku", header: "Артикул", accessor: "sku", width: "6rem" },
+  { id: "name", header: "Товар", accessor: "name", truncate: true, maxWidth: "14rem" },
+  { id: "stock", header: "Остаток, шт", numeric: true, cell: (row) => INT.format(row.stock) },
+  { id: "price", header: "Цена, ₽", numeric: true, cell: (row) => INT.format(row.price) },
+  { id: "sold", header: "Продано", numeric: true, cell: (row) => INT.format(row.sold) },
+  { id: "margin", header: "Маржа", numeric: true, cell: (row) => PCT.format(row.margin) },
+];
+
+export default function DataTableNumericExample() {
+  return <DataTable columns={COLUMNS} rows={SKUS} getRowKey={(row) => row.sku} paging="none" />;
+}

package/dist/skill/reference/components/data-table/examples/overview.tsx

@@ -0,0 +1,54 @@
+/** Recent orders: sortable columns, a status Badge, numeric sums and five rows per page — `columns`, `getRowKey`, `pageSize`. */
+import { Badge, DataTable, type DataTableColumn } from "prime-ui-kit";
+
+type OrderStatus = "paid" | "shipping" | "refund";
+type Order = { id: string; customer: 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: "Алина Морозова", status: "paid", items: 3, total: 12_480 },
+  { id: "№ 48 212", customer: "Сергей Фёдоров", status: "shipping", items: 1, total: 54_990 },
+  { id: "№ 48 211", customer: "Ольга Лебедева", status: "paid", items: 6, total: 8_730 },
+  { id: "№ 48 210", customer: "Тимур Ахмедов", status: "refund", items: 2, total: 3_200 },
+  { id: "№ 48 209", customer: "Ксения Волкова", status: "shipping", items: 4, total: 21_650 },
+  { id: "№ 48 208", customer: "Павел Никитин", status: "paid", items: 1, total: 2_490 },
+  { id: "№ 48 207", customer: "Елена Зайцева", status: "paid", items: 2, total: 17_300 },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", width: "7rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  {
+    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 DataTableOverviewExample() {
+  return <DataTable columns={COLUMNS} rows={ORDERS} getRowKey={(row) => row.id} pageSize={5} />;
+}

package/dist/skill/reference/components/data-table/examples/reorder.tsx

@@ -0,0 +1,61 @@
+/** Pipeline stages put in order by the handle or Alt + ↑ / ↓; each move is saved with a spinner in its handle, and sorting by a column turns the handles off — `onReorder`, `getRowLabel`. */
+import { Badge, DataTable, type DataTableColumn, moveBefore } from "prime-ui-kit";
+import * as React from "react";
+
+type Stage = { id: string; name: string; owner: string; deals: number; probability: number };
+
+const STAGES: Stage[] = [
+  { id: "lead", name: "Новый лид", owner: "Отдел продаж", deals: 48, probability: 10 },
+  { id: "call", name: "Первый звонок", owner: "Отдел продаж", deals: 31, probability: 20 },
+  { id: "demo", name: "Демонстрация", owner: "Пресейл", deals: 17, probability: 40 },
+  {
+    id: "offer",
+    name: "Коммерческое предложение",
+    owner: "Отдел продаж",
+    deals: 12,
+    probability: 60,
+  },
+  { id: "contract", name: "Договор", owner: "Юристы", deals: 6, probability: 80 },
+  { id: "payment", name: "Оплата", owner: "Бухгалтерия", deals: 4, probability: 95 },
+];
+
+const COLUMNS: DataTableColumn<Stage>[] = [
+  { id: "name", header: "Этап", accessor: "name", hideable: false },
+  { id: "owner", header: "Ответственный", accessor: "owner" },
+  { id: "deals", header: "Сделки", accessor: "deals", numeric: true, sortable: true },
+  {
+    id: "probability",
+    header: "Вероятность",
+    accessor: "probability",
+    sortable: true,
+    align: "end",
+    cell: (row) => <Badge.Root>{row.probability}%</Badge.Root>,
+  },
+];
+
+/** Stands in for the request that saves the new order. */
+const saveOrder = () => new Promise<void>((resolve) => setTimeout(resolve, 700));
+
+export default function DataTableReorderExample() {
+  const [stages, setStages] = React.useState(STAGES);
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={stages}
+      paging="none"
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.name}
+      onReorder={async (id, beforeId) => {
+        await saveOrder();
+        setStages((current) =>
+          moveBefore(
+            current,
+            String(id),
+            beforeId === null ? null : String(beforeId),
+            (row) => row.id,
+          ),
+        );
+      }}
+    />
+  );
+}

package/dist/skill/reference/components/data-table/examples/row-link.tsx

@@ -0,0 +1,100 @@
+/** Invoices whose rows are links: ⌘-click or a middle click opens a new tab, a plain click routes inside the app, the totals row and the ⋯ menu never open a row — `getRowHref`, `onRowClick`, `isRowClickable`. */
+import { Button, DataTable, type DataTableColumn, Dropdown, Icon, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Invoice = { id: string; client: string; due: string; amount: number; total?: boolean };
+
+const INVOICES: Invoice[] = [
+  { id: "INV-1042", client: "ООО «Северный ветер»", due: "12.10.2026", amount: 184_500 },
+  { id: "INV-1043", client: "ИП Козлов", due: "14.10.2026", amount: 27_900 },
+  { id: "INV-1044", client: "АО «Технопарк»", due: "20.10.2026", amount: 612_000 },
+];
+
+const ROWS: Invoice[] = [
+  ...INVOICES,
+  {
+    id: "total",
+    client: "Итого к оплате",
+    due: "",
+    amount: INVOICES.reduce((sum, invoice) => sum + invoice.amount, 0),
+    total: true,
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+export default function DataTableRowLinkExample() {
+  const [status, setStatus] = React.useState("Откройте счёт из списка");
+
+  const columns: DataTableColumn<Invoice>[] = [
+    { id: "client", header: "Клиент", accessor: "client", hideable: false },
+    { id: "id", header: "Счёт", cell: (row) => (row.total ? "" : row.id) },
+    { id: "due", header: "Оплатить до", accessor: "due", numeric: true },
+    {
+      id: "amount",
+      header: "Сумма",
+      accessor: "amount",
+      numeric: true,
+      cell: (row) => RUB.format(row.amount),
+    },
+    {
+      id: "actions",
+      header: "",
+      align: "end",
+      cell: (row) =>
+        row.total ? null : (
+          <Dropdown.Root>
+            <Dropdown.Trigger>
+              <Button.Root
+                variant="ghost"
+                tone="neutral"
+                size="s"
+                aria-label={`Действия со счётом ${row.id}`}
+              >
+                <Button.Icon>
+                  <Icon name="action.more" />
+                </Button.Icon>
+              </Button.Root>
+            </Dropdown.Trigger>
+            <Dropdown.Content>
+              <Dropdown.Item onSelect={() => setStatus(`${row.id} отправлен клиенту повторно`)}>
+                Отправить повторно
+              </Dropdown.Item>
+              <Dropdown.Item onSelect={() => setStatus(`${row.id} скачан в PDF`)}>
+                Скачать PDF
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown.Root>
+        ),
+    },
+  ];
+
+  return (
+    <DataTable
+      columns={columns}
+      rows={ROWS}
+      getRowKey={(row) => row.id}
+      paging="none"
+      getRowHref={(row) => `/invoices/${row.id}`}
+      isRowClickable={(row) => !row.total}
+      onRowClick={(row, _index, event) => {
+        // A client-side router goes here (navigate(href)); the page itself never reloads.
+        event.preventDefault();
+        setStatus(`Открыт ${row.id} · ${row.client}`);
+      }}
+      toolbar={
+        <div className={styles.toolbar}>
+          <Typography as="span" variant="body-s" tone="secondary" aria-live="polite">
+            {status}
+          </Typography>
+        </div>
+      }
+    />
+  );
+}

package/dist/skill/reference/components/data-table/examples/row-open.tsx

@@ -0,0 +1,129 @@
+/** Deals that open in a side panel: a click, or Enter and Space on the focused row; the panel keeps the last deal while it slides away — `onRowClick`. */
+import { Badge, DataTable, type DataTableColumn, Drawer, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Stage = "new" | "talks" | "won";
+type Deal = { id: string; title: string; client: string; owner: string; stage: Stage; sum: number };
+
+const STAGE: Record<Stage, { label: string; color: "blue" | "orange" | "green" }> = {
+  new: { label: "Новая", color: "blue" },
+  talks: { label: "Переговоры", color: "orange" },
+  won: { label: "Выиграна", color: "green" },
+};
+
+const DEALS: Deal[] = [
+  {
+    id: "D-311",
+    title: "Поставка серверов",
+    client: "АО «Технопарк»",
+    owner: "Ольга Смирнова",
+    stage: "talks",
+    sum: 1_240_000,
+  },
+  {
+    id: "D-312",
+    title: "Годовая лицензия",
+    client: "ООО «Лето»",
+    owner: "Игорь Волков",
+    stage: "new",
+    sum: 360_000,
+  },
+  {
+    id: "D-313",
+    title: "Внедрение CRM",
+    client: "ООО «Гранит»",
+    owner: "Мария Орлова",
+    stage: "won",
+    sum: 890_000,
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Deal>[] = [
+  { id: "title", header: "Сделка", accessor: "title", hideable: false },
+  { id: "client", header: "Клиент", accessor: "client" },
+  {
+    id: "stage",
+    header: "Этап",
+    cell: (row) => <Badge.Root color={STAGE[row.stage].color}>{STAGE[row.stage].label}</Badge.Root>,
+  },
+  {
+    id: "sum",
+    header: "Сумма",
+    accessor: "sum",
+    numeric: true,
+    cell: (row) => RUB.format(row.sum),
+  },
+];
+
+export default function DataTableRowOpenExample() {
+  const [open, setOpen] = React.useState(false);
+  // The last opened deal stays while the panel slides away, so it never empties mid-motion.
+  const [deal, setDeal] = React.useState<Deal | null>(null);
+
+  return (
+    <>
+      <DataTable
+        columns={COLUMNS}
+        rows={DEALS}
+        getRowKey={(row) => row.id}
+        paging="none"
+        onRowClick={(row) => {
+          setDeal(row);
+          setOpen(true);
+        }}
+      />
+      <Drawer.Root open={open} onOpenChange={setOpen}>
+        <Drawer.Content size="s">
+          <Drawer.Header>
+            <Drawer.Title>{deal?.title}</Drawer.Title>
+            <Drawer.Description>{deal?.id}</Drawer.Description>
+          </Drawer.Header>
+          <Drawer.Body>
+            {deal ? (
+              <dl className={styles.details}>
+                <dt>
+                  <Typography as="span" variant="body-m" tone="muted">
+                    Клиент
+                  </Typography>
+                </dt>
+                <dd>
+                  <Typography as="span" variant="body-m">
+                    {deal.client}
+                  </Typography>
+                </dd>
+                <dt>
+                  <Typography as="span" variant="body-m" tone="muted">
+                    Ответственный
+                  </Typography>
+                </dt>
+                <dd>
+                  <Typography as="span" variant="body-m">
+                    {deal.owner}
+                  </Typography>
+                </dd>
+                <dt>
+                  <Typography as="span" variant="body-m" tone="muted">
+                    Сумма
+                  </Typography>
+                </dt>
+                <dd>
+                  <Typography as="span" variant="body-m">
+                    {RUB.format(deal.sum)}
+                  </Typography>
+                </dd>
+              </dl>
+            ) : null}
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/data-table/examples/selection.tsx

@@ -0,0 +1,60 @@
+/** Team members with checkboxes: Shift+click range, press-and-drag, «select all» and bulk actions in the toolbar — `selectable`, `selected`, `onSelectedChange`, `getRowLabel`. */
+import { Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Member = { id: string; name: string; email: string; role: string };
+
+const MEMBERS: Member[] = [
+  { id: "u1", name: "Анна Соколова", email: "anna@prime.dev", role: "Владелец" },
+  { id: "u2", name: "Дмитрий Орлов", email: "d.orlov@prime.dev", role: "Администратор" },
+  { id: "u3", name: "Мария Ким", email: "maria.kim@prime.dev", role: "Редактор" },
+  { id: "u4", name: "Игорь Белов", email: "belov@prime.dev", role: "Наблюдатель" },
+  { id: "u5", name: "Ольга Лебедева", email: "o.lebedeva@prime.dev", role: "Редактор" },
+  { id: "u6", name: "Тимур Ахметов", email: "timur@prime.dev", role: "Наблюдатель" },
+];
+
+const COLUMNS: DataTableColumn<Member>[] = [
+  { id: "name", header: "Имя", accessor: "name", sortable: true },
+  { id: "email", header: "Почта", accessor: "email", truncate: true, maxWidth: "14rem" },
+  { id: "role", header: "Роль", accessor: "role", sortable: true },
+];
+
+export default function DataTableSelectionExample() {
+  const [selected, setSelected] = React.useState<React.Key[]>(["u2"]);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={MEMBERS}
+      getRowKey={(row) => row.id}
+      getRowLabel={(row) => row.name}
+      selectable
+      selected={selected}
+      onSelectedChange={setSelected}
+      paging="none"
+      toolbar={
+        <div className={styles.toolbar}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Выбрано: {selected.length} из {MEMBERS.length}
+          </Typography>
+          <div className={styles.filters}>
+            <Button.Root
+              variant="outline"
+              tone="neutral"
+              size="s"
+              disabled={selected.length === 0}
+              onClick={() => setSelected([])}
+            >
+              Снять выбор
+            </Button.Root>
+            <Button.Root variant="soft" tone="danger" size="s" disabled={selected.length === 0}>
+              Удалить
+            </Button.Root>
+          </div>
+        </div>
+      }
+    />
+  );
+}