prime-ui-kit 0.9.0 → 0.9.2

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

@@ -1,60 +1,50 @@
-/** A 320px container: columns scroll inside the table, the first one sticks; toolbar and footer reflow by the table's own width and pagination collapses to «‹ 3 / 8 ›». Use to check mobile layouts. */
-
+/** 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; priority: "high" | "normal"; age: number };
+type Ticket = { id: string; subject: string; urgent: boolean; waiting: number };
+
+const SUBJECTS = ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"];
 
-const rows: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
+const TICKETS: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
   id: `T-${2400 + i}`,
-  subject: ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"][i % 4],
-  priority: i % 3 === 0 ? "high" : "normal",
-  age: (i * 5) % 48,
+  subject: SUBJECTS[i % SUBJECTS.length],
+  urgent: i % 3 === 0,
+  waiting: (i * 5) % 48,
 }));
 
-const columns: DataTableColumn<Ticket>[] = [
+const COLUMNS: DataTableColumn<Ticket>[] = [
   { id: "id", header: "Тикет", accessor: "id" },
   { id: "subject", header: "Тема", accessor: "subject", truncate: true, maxWidth: "10rem" },
   {
     id: "priority",
     header: "Приоритет",
     cell: (row) =>
-      row.priority === "high" ? (
-        <Badge.Root color="red">Высокий</Badge.Root>
-      ) : (
-        <Badge.Root>Обычный</Badge.Root>
-      ),
+      row.urgent ? <Badge.Root color="red">Высокий</Badge.Root> : <Badge.Root>Обычный</Badge.Root>,
   },
-  { id: "age", header: "Ждёт, ч", accessor: "age", numeric: true },
+  { id: "waiting", header: "Ждёт, ч", accessor: "waiting", numeric: true },
 ];
 
 export default function DataTableNarrowExample() {
   return (
-    <div className={styles.narrowFrame}>
-      <div className={styles.narrow}>
-        <DataTable.Root
-          size="s"
-          columns={columns}
-          rows={rows}
-          getRowKey={(row) => row.id}
-          stickyFirstColumn
-          pageSize={5}
-          toolbar={
-            <div className={styles.toolbar}>
-              <Typography.Root
-                as="span"
-                variant="body-s"
-                tone="secondary"
-                className={styles.tabular}
-              >
-                Открытые: {rows.length}
-              </Typography.Root>
-              <Button.Root size="xs">Новый тикет</Button.Root>
-            </div>
-          }
-        />
-      </div>
+    <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/src/components/data-table/examples/nested-rows.tsx

@@ -1,6 +1,4 @@
-/** Tree rows with `getRowChildren`: sub-rows under the parent indented by the avatar width, a chevron toggle, controlled `expanded`, together with selection and sorting. Use for hierarchical data (partners → expenses). */
-
-import { Building2, Car, Wallet } from "lucide-react";
+/** 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";
 
@@ -10,18 +8,16 @@ type Entry = {
   id: string;
   name: string;
   note: string;
-  kind: "partner" | "company" | "payout" | "car";
   share: number;
   amount: number;
   children?: Entry[];
 };
 
-const rows: Entry[] = [
+const ENTRIES: Entry[] = [
   {
     id: "denis",
-    name: "Денис",
+    name: "Денис Карпов",
     note: "Партнёр",
-    kind: "partner",
     share: 50,
     amount: 184_000,
     children: [
@@ -29,7 +25,6 @@ const rows: Entry[] = [
         id: "denis-company",
         name: "Расходы компании",
         note: "доля 50%",
-        kind: "company",
         share: 50,
         amount: 62_000,
       },
@@ -37,7 +32,6 @@ const rows: Entry[] = [
         id: "denis-payout",
         name: "Выплата партнёру",
         note: "за сентябрь",
-        kind: "payout",
         share: 50,
         amount: 122_000,
       },
@@ -45,73 +39,57 @@ const rows: Entry[] = [
   },
   {
     id: "olga",
-    name: "Ольга",
+    name: "Ольга Белова",
     note: "Партнёр",
-    kind: "partner",
     share: 30,
     amount: 110_400,
     children: [
-      {
-        id: "olga-company",
-        name: "Расходы компании",
-        note: "доля 30%",
-        kind: "company",
-        share: 30,
-        amount: 37_200,
-      },
+      { id: "olga-company", name: "Расходы компании", note: "доля 30%", share: 30, amount: 37_200 },
       {
         id: "olga-car",
         name: "Toyota Camry · А 123 ВС",
         note: "аренда",
-        kind: "car",
         share: 30,
         amount: 73_200,
       },
     ],
   },
-  { id: "ivan", name: "Иван", note: "Инвестор", kind: "partner", share: 20, amount: 73_600 },
+  { id: "ivan", name: "Иван Сорокин", note: "Инвестор", share: 20, amount: 73_600 },
 ];
 
-const rub = new Intl.NumberFormat("ru-RU", {
+const RUB = new Intl.NumberFormat("ru-RU", {
   style: "currency",
   currency: "RUB",
   maximumFractionDigits: 0,
 });
 
-const icons = { company: Building2, payout: Wallet, car: Car };
-
-function initials(name: string) {
-  return name.slice(0, 2).toUpperCase();
-}
+const initials = (name: string) =>
+  name
+    .split(" ")
+    .map((part) => part[0])
+    .join("");
 
-const columns: DataTableColumn<Entry>[] = [
+const COLUMNS: DataTableColumn<Entry>[] = [
   {
     id: "name",
     header: "Участник",
     accessor: "name",
     sortable: true,
-    cell: (row) => {
-      const Icon = row.kind === "partner" ? null : icons[row.kind];
-      return (
-        <div className={styles.customer}>
-          {Icon ? (
-            <span className={styles.iconBox} aria-hidden="true">
-              <Icon />
-            </span>
-          ) : (
-            <Avatar.Root size="m" color="purple">
-              <Avatar.Fallback>{initials(row.name)}</Avatar.Fallback>
-            </Avatar.Root>
-          )}
-          <div className={styles.customerText}>
-            <span>{row.name}</span>
-            <Typography.Root as="span" variant="caption" tone="muted" truncate>
-              {row.note}
-            </Typography.Root>
-          </div>
+    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",
@@ -127,7 +105,7 @@ const columns: DataTableColumn<Entry>[] = [
     accessor: "amount",
     sortable: true,
     numeric: true,
-    cell: (row) => rub.format(row.amount),
+    cell: (row) => RUB.format(row.amount),
   },
 ];
 
@@ -135,16 +113,16 @@ export default function DataTableNestedRowsExample() {
   const [expanded, setExpanded] = React.useState<React.Key[]>(["denis"]);
 
   return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
+    <DataTable
+      columns={COLUMNS}
+      rows={ENTRIES}
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.name}
       getRowChildren={(row) => row.children}
       expanded={expanded}
       onExpandedChange={setExpanded}
       selectable
-      showPagination={false}
+      paging="none"
     />
   );
 }

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

@@ -1,5 +1,4 @@
-/** `numeric` columns align end with `tabular-nums`; `truncate` + `maxWidth` keeps a long name on one line with a `title`; `columnDividers` adds vertical lines. Use for inventories and reports with many numbers. */
-
+/** 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 = {
@@ -11,7 +10,7 @@ type Sku = {
   margin: number;
 };
 
-const rows: Sku[] = [
+const SKUS: Sku[] = [
   {
     sku: "KB-210",
     name: "Клавиатура беспроводная с подсветкой, русская раскладка",
@@ -25,26 +24,18 @@ const rows: Sku[] = [
   { 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 INT = new Intl.NumberFormat("ru-RU");
+const PCT = new Intl.NumberFormat("ru-RU", { style: "percent", maximumFractionDigits: 1 });
 
-const columns: DataTableColumn<Sku>[] = [
+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: (r) => int.format(r.stock) },
-  { id: "price", header: "Цена, ₽", numeric: true, cell: (r) => int.format(r.price) },
-  { id: "sold", header: "Продано", numeric: true, cell: (r) => int.format(r.sold) },
-  { id: "margin", header: "Маржа", numeric: true, cell: (r) => pct.format(r.margin) },
+  { 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.Root
-      columns={columns}
-      rows={rows}
-      getRowKey={(row) => row.sku}
-      columnDividers
-      showPagination={false}
-    />
-  );
+  return <DataTable columns={COLUMNS} rows={SKUS} getRowKey={(row) => row.sku} paging="none" />;
 }

package/src/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/src/components/data-table/examples/selection.tsx

@@ -1,5 +1,4 @@
-/** Built-in row selection with `selectable`: Shift+click range, press-and-drag across checkboxes, Space, «select all» and bulk actions in the `toolbar`. Use for lists with bulk operations. */
-
+/** 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";
 
@@ -7,17 +6,16 @@ import styles from "./examples.module.css";
 
 type Member = { id: string; name: string; email: string; role: string };
 
-const rows: Member[] = [
+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: "Наблюдатель" },
-  { id: "u7", name: "Светлана Яковлева", email: "s.yakovleva@prime.dev", role: "Редактор" },
 ];
 
-const columns: DataTableColumn<Member>[] = [
+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 },
@@ -27,23 +25,21 @@ export default function DataTableSelectionExample() {
   const [selected, setSelected] = React.useState<React.Key[]>(["u2"]);
 
   return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
+    <DataTable
+      columns={COLUMNS}
+      rows={MEMBERS}
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.name}
       selectable
       selected={selected}
       onSelectedChange={setSelected}
-      showPagination={false}
+      paging="none"
       toolbar={
         <div className={styles.toolbar}>
-          <Typography.Root as="span" variant="body-s" tone="secondary" className={styles.tabular}>
-            {selected.length > 0
-              ? `Выбрано: ${selected.length} из ${rows.length}`
-              : "Ничего не выбрано"}
-          </Typography.Root>
-          <div className={styles.toolbarGroup}>
+          <Typography as="span" variant="body-s" tone="secondary">
+            Выбрано: {selected.length} из {MEMBERS.length}
+          </Typography>
+          <div className={styles.filters}>
             <Button.Root
               variant="outline"
               tone="neutral"

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

@@ -1,65 +1,54 @@
-/** Density via `size`: rows 36 / 36 / 44 / 52 / 52, the header is the control height of the tier and one step smaller in text; badges follow by themselves. Use `s` for dense back-office lists, `m` by default. */
-
-import { Badge, type ControlSize, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+/** Every density: rows from 36 to 52 px, the head at the control height of the tier — `size`. */
+import { Badge, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Invoice = { id: string; client: string; status: "paid" | "due"; amount: number };
+type Invoice = { id: string; client: string; paid: boolean; amount: number };
 
-const rows: Invoice[] = [
-  { id: "INV-1042", client: "ООО «Северный ветер»", status: "paid", amount: 184_500 },
-  { id: "INV-1043", client: "ИП Гончаров", status: "due", amount: 42_000 },
-  { id: "INV-1044", client: "АО «Транслайн»", status: "paid", amount: 1_250_000 },
+const INVOICES: Invoice[] = [
+  { id: "INV-1042", client: "ООО «Северный ветер»", paid: true, amount: 184_500 },
+  { id: "INV-1043", client: "ИП Гончаров", paid: false, amount: 42_000 },
 ];
 
-const rub = new Intl.NumberFormat("ru-RU", {
+const RUB = new Intl.NumberFormat("ru-RU", {
   style: "currency",
   currency: "RUB",
   maximumFractionDigits: 0,
 });
 
-const columns: DataTableColumn<Invoice>[] = [
+const COLUMNS: DataTableColumn<Invoice>[] = [
   { id: "id", header: "Счёт", accessor: "id", width: "7rem" },
-  { id: "client", header: "Клиент", accessor: "client", truncate: true, maxWidth: "16rem" },
+  { id: "client", header: "Клиент", accessor: "client" },
   {
     id: "status",
     header: "Статус",
     cell: (row) =>
-      row.status === "paid" ? (
+      row.paid ? (
         <Badge.Root color="green">Оплачен</Badge.Root>
       ) : (
         <Badge.Root color="orange">Ожидает</Badge.Root>
       ),
   },
-  { id: "amount", header: "Сумма", numeric: true, cell: (row) => rub.format(row.amount) },
+  { id: "amount", header: "Сумма", numeric: true, cell: (row) => RUB.format(row.amount) },
 ];
 
-const densities: { size: ControlSize; note: string }[] = [
-  { size: "xs", note: "строка 36 · шапка 28, 12/16 · ячейки 12/16" },
-  { size: "s", note: "строка 36 · шапка 32, 12/16 · ячейки 13/20" },
-  { size: "m", note: "по умолчанию · строка 44 · шапка 36, 13/20 · ячейки 14/20" },
-  { size: "l", note: "строка 52 · шапка 40, 14/20 · ячейки 16/24" },
-  { size: "xl", note: "строка 52 · шапка 48, 14/20 · ячейки 16/24" },
-];
+const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function DataTableSizesExample() {
   return (
-    <div className={styles.stack}>
-      {densities.map(({ size, note }) => (
-        <div key={size} className={styles.group}>
-          <Typography.Root variant="caption" tone="muted">
-            <Typography.Root as="span" variant="code" tone="muted">
-              size="{size}"
-            </Typography.Root>{" "}
-            — {note}
-          </Typography.Root>
-          <DataTable.Root
+    <div className={styles.specimens}>
+      {SIZES.map((size) => (
+        <div key={size} className={styles.specimen}>
+          <DataTable
             size={size}
-            columns={columns}
-            rows={rows}
+            columns={COLUMNS}
+            rows={INVOICES}
             getRowKey={(row) => row.id}
-            showPagination={false}
+            paging="none"
           />
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
         </div>
       ))}
     </div>

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

@@ -1,51 +1,50 @@
-/** Loading skeleton (`loading` + `loadingRows`), `empty` and `error` with a retry button: the header stays, only the body changes. Use for every table backed by a request. */
-
+/** Loading skeleton, an empty period and a load error with a retry: the head stays, only the body changes — `loading`, `loadingRows`, `empty`, `error`. */
 import { Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
 type Payment = { id: string; payer: string; amount: number };
 
-const columns: DataTableColumn<Payment>[] = [
+const COLUMNS: DataTableColumn<Payment>[] = [
   { id: "id", header: "Платёж", accessor: "id" },
   { id: "payer", header: "Плательщик", accessor: "payer" },
   { id: "amount", header: "Сумма, ₽", accessor: "amount", numeric: true },
 ];
 
-const none: Payment[] = [];
+const NO_PAYMENTS: Payment[] = [];
 
 export default function DataTableStatesExample() {
   return (
-    <div className={styles.statesGrid}>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          loading + loadingRows
-        </Typography.Root>
-        <DataTable.Root columns={columns} rows={none} loading loadingRows={3} />
+    <>
+      <div className={styles.specimen}>
+        <DataTable columns={COLUMNS} rows={NO_PAYMENTS} loading loadingRows={3} />
+        <Typography as="span" variant="caption" tone="muted">
+          loading · loadingRows=&#123;3&#125;
+        </Typography>
       </div>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
+      <div className={styles.specimen}>
+        <DataTable columns={COLUMNS} rows={NO_PAYMENTS} empty="Платежей за выбранный период нет" />
+        <Typography as="span" variant="caption" tone="muted">
           empty
-        </Typography.Root>
-        <DataTable.Root columns={columns} rows={none} empty="Платежей за выбранный период нет" />
+        </Typography>
       </div>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          error
-        </Typography.Root>
-        <DataTable.Root
-          columns={columns}
-          rows={none}
+      <div className={styles.specimen}>
+        <DataTable
+          columns={COLUMNS}
+          rows={NO_PAYMENTS}
           error={
-            <div className={styles.errorBody}>
+            <>
               Не удалось загрузить платежи
               <Button.Root variant="outline" tone="neutral" size="s">
                 Повторить
               </Button.Root>
-            </div>
+            </>
           }
         />
+        <Typography as="span" variant="caption" tone="muted">
+          error
+        </Typography>
       </div>
-    </div>
+    </>
   );
 }