prime-ui-kit 0.9.3 → 0.11.0

package/dist/skill/reference/components/dnd/examples/board.tsx

@@ -0,0 +1,91 @@
+/** A ticket board: columns share one kind, so a ticket lands in another column at an exact position or moves there with Alt + ← / →, an empty column says so, and a full column refuses it before the release with the reason under the ticket — `kind`, `canDrop`, `empty`, `onReorder`. */
+import { Badge, Dnd, moveBefore, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Status = "todo" | "doing" | "done";
+type Ticket = { id: string; title: string; status: Status };
+
+const COLUMNS: { status: Status; title: string }[] = [
+  { status: "todo", title: "К выполнению" },
+  { status: "doing", title: "В работе" },
+  { status: "done", title: "Готово" },
+];
+
+const WIP_LIMIT = 3;
+
+const TICKETS: Ticket[] = [
+  { id: "t1", title: "Починить загрузку аватара", status: "todo" },
+  { id: "t2", title: "Тёмная тема для таблиц", status: "todo" },
+  { id: "t3", title: "Экспорт отчёта в CSV", status: "doing" },
+  { id: "t5", title: "Фильтры в списке заказов", status: "doing" },
+];
+
+export default function DndBoardExample() {
+  const [tickets, setTickets] = React.useState(TICKETS);
+
+  // The ticket changes column and lands in front of `beforeId` (`null` = at the end).
+  const place = (id: string, status: Status, beforeId: string | null) =>
+    setTickets((current) =>
+      moveBefore(
+        current.map((ticket) => (ticket.id === id ? { ...ticket, status } : ticket)),
+        id,
+        beforeId,
+        (ticket) => ticket.id,
+      ),
+    );
+
+  return (
+    <Dnd.Root>
+      <div className={styles.board}>
+        {COLUMNS.map((column) => {
+          const inColumn = tickets.filter((ticket) => ticket.status === column.status);
+          const headingId = `board-${column.status}`;
+          return (
+            <section key={column.status} className={styles.column}>
+              <div className={styles.columnHeader}>
+                <Typography as="h4" variant="title-s" id={headingId}>
+                  {column.title}
+                </Typography>
+                <Badge.Root>{inColumn.length}</Badge.Root>
+              </div>
+              <Dnd.Sortable
+                kind="ticket"
+                // Named by the visible heading: the live region says «В работе» on a move.
+                aria-labelledby={headingId}
+                className={styles.cards}
+                items={inColumn}
+                getId={(ticket) => ticket.id}
+                getLabel={(ticket) => ticket.title}
+                canDrop={(id) =>
+                  column.status === "doing" &&
+                  inColumn.length >= WIP_LIMIT &&
+                  !inColumn.some((ticket) => ticket.id === id)
+                    ? `В работе уже ${WIP_LIMIT} тикета`
+                    : true
+                }
+                empty={
+                  <Typography as="p" variant="body-s" tone="muted" className={styles.empty}>
+                    Нет тикетов
+                  </Typography>
+                }
+                onReorder={(id, beforeId) => place(id, column.status, beforeId)}
+                renderItem={(ticket) => (
+                  <Dnd.SortableItem id={ticket.id} className={styles.ticket}>
+                    <Typography as="span" variant="body-m">
+                      {ticket.title}
+                    </Typography>
+                    <Typography as="span" variant="caption" tone="muted">
+                      {ticket.id.toUpperCase()}
+                    </Typography>
+                  </Dnd.SortableItem>
+                )}
+              />
+            </section>
+          );
+        })}
+      </div>
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/dnd/examples/drop-zones.tsx

@@ -0,0 +1,82 @@
+/** Documents carried onto folders: a zone takes items by kind, a locked folder refuses before the release and says why under the carried file, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `canDrop`, `flashOnDrop`. */
+import { Badge, Dnd, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Folder = "inbox" | "contracts" | "archive";
+type Paper = { id: string; title: string; folder: Folder };
+
+const FOLDERS: { id: Folder; title: string; locked?: boolean }[] = [
+  { id: "contracts", title: "Договоры" },
+  { id: "archive", title: "Архив (закрыт для записи)", locked: true },
+];
+
+const DOCUMENTS: Paper[] = [
+  { id: "d1", title: "Договор поставки № 14", folder: "inbox" },
+  { id: "d2", title: "Акт сверки за квартал", folder: "inbox" },
+  { id: "d3", title: "Счёт на оплату", folder: "inbox" },
+];
+
+export default function DndDropZonesExample() {
+  const [documents, setDocuments] = React.useState(DOCUMENTS);
+  const inFolder = (folder: Folder) => documents.filter((doc) => doc.folder === folder);
+
+  return (
+    <Dnd.Root>
+      <div className={styles.board}>
+        <section className={styles.column} aria-label="Входящие">
+          <div className={styles.columnHeader}>
+            <Typography as="h4" variant="title-s">
+              Входящие
+            </Typography>
+            <Badge.Root>{inFolder("inbox").length}</Badge.Root>
+          </div>
+          {inFolder("inbox").map((doc) => (
+            <Dnd.Draggable
+              key={doc.id}
+              kind="document"
+              id={doc.id}
+              label={doc.title}
+              className={styles.ticket}
+            >
+              <Typography as="span" variant="body-m">
+                {doc.title}
+              </Typography>
+            </Dnd.Draggable>
+          ))}
+        </section>
+        {FOLDERS.map((folder) => (
+          <Dnd.DropZone
+            key={folder.id}
+            as="section"
+            aria-label={folder.title}
+            accepts="document"
+            flashOnDrop
+            className={styles.column}
+            canDrop={() => (folder.locked ? "Архив только для чтения" : true)}
+            onDrop={(item) =>
+              setDocuments((current) =>
+                current.map((doc) => (doc.id === item.id ? { ...doc, folder: folder.id } : doc)),
+              )
+            }
+          >
+            <div className={styles.columnHeader}>
+              <Typography as="h4" variant="title-s">
+                {folder.title}
+              </Typography>
+              <Badge.Root>{inFolder(folder.id).length}</Badge.Root>
+            </div>
+            {inFolder(folder.id).map((doc) => (
+              <div key={doc.id} className={styles.ticket}>
+                <Typography as="span" variant="body-m">
+                  {doc.title}
+                </Typography>
+              </div>
+            ))}
+          </Dnd.DropZone>
+        ))}
+      </div>
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/dnd/examples/examples.module.css

@@ -0,0 +1,112 @@
+/* Layout of the Dnd scenarios: semantic tokens only. */
+
+.list {
+  width: 100%;
+  max-width: calc(var(--prime-space-24) * 4);
+}
+
+/* A row is a fill on the page, no outline: the fill reads as "a thing you can hold". */
+.row,
+.handleRow {
+  display: flex;
+  align-items: center;
+  gap: var(--prime-space-3);
+  min-width: 0;
+  padding: var(--prime-space-3) var(--prime-space-4);
+  border-radius: var(--prime-radius-m);
+  background: var(--prime-color-layer-nested);
+  box-shadow: var(--prime-shadow-raised);
+}
+
+/* The grip sits closer to the edge: it is a square button with its own inner room. */
+.handleRow {
+  padding-inline-start: var(--prime-space-2);
+}
+
+.rowText {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.board {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 2)), 1fr));
+  gap: var(--prime-space-4);
+  width: 100%;
+  min-width: 0;
+}
+
+.column {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-2);
+  min-height: calc(var(--prime-space-24) * 2);
+  padding: var(--prime-space-3);
+  border-radius: var(--prime-radius-l);
+  background: var(--prime-color-fill-muted);
+}
+
+.columnHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--prime-space-1) var(--prime-space-2);
+}
+
+.ticket {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-1);
+  padding: var(--prime-space-3) var(--prime-space-4);
+  border-radius: var(--prime-radius-m);
+  background: var(--prime-color-layer-nested);
+  box-shadow: var(--prime-shadow-raised);
+}
+
+/* The sortable area of a column fills it, so an empty column is still a drop target. */
+.cards {
+  flex: 1;
+  min-height: calc(var(--prime-space-24) * 1.5);
+}
+
+/* grid.tsx: the host sets the tracks of a wrapping grid; the gap takes a cell. */
+.gallery[data-axis] {
+  grid-template-columns: repeat(auto-fill, minmax(calc(var(--prime-space-24) * 1.25), 1fr));
+  gap: var(--prime-space-3);
+  width: 100%;
+  max-width: calc(var(--prime-space-24) * 6);
+}
+
+/* A tile is its photo: the item takes the thumbnail's radius, so the gap and the ring match it. */
+.tile {
+  display: flex;
+  border-radius: var(--prime-thumbnail-m-radius);
+}
+
+/* An empty column's line: a dashed «put it here» slot, like the gap that replaces it. */
+.empty {
+  margin: 0;
+  padding: var(--prime-space-4);
+  border: var(--prime-border-width) dashed var(--prime-color-fill-strong);
+  border-radius: var(--prime-radius-m);
+  text-align: center;
+}
+
+/* 320 px strip; the padding keeps room for the focus ring of the first and last tag. */
+.strip {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+  padding: var(--prime-space-1);
+}
+
+.chips {
+  gap: var(--prime-space-2);
+  width: max-content;
+}
+
+/* The item takes the badge's own shape, so the gap and the focus ring match it. */
+.chip {
+  display: inline-flex;
+  border-radius: var(--prime-badge-m-radius);
+}

package/dist/skill/reference/components/dnd/examples/grid.tsx

@@ -0,0 +1,48 @@
+/** Product photos in a wrapping grid: a photo carried across rows lands in reading order, the gap takes a cell, Alt + ← / → steps it one place — `axis`. */
+import { Dnd, Icon, moveBefore, Thumbnail } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Photo = { id: string; title: string };
+
+const PHOTOS: Photo[] = [
+  { id: "chair-front", title: "Кресло спереди" },
+  { id: "chair-side", title: "Кресло сбоку" },
+  { id: "chair-back", title: "Кресло сзади" },
+  { id: "chair-detail", title: "Подлокотник" },
+  { id: "chair-base", title: "Крестовина" },
+  { id: "chair-box", title: "Упаковка" },
+  { id: "chair-room", title: "В интерьере" },
+];
+
+export default function DndGridExample() {
+  const [photos, setPhotos] = React.useState(PHOTOS);
+
+  return (
+    <Dnd.Root>
+      <Dnd.Sortable
+        as="ul"
+        axis="grid"
+        aria-label="Фото товара по порядку"
+        className={styles.gallery}
+        items={photos}
+        getId={(photo) => photo.id}
+        getLabel={(photo) => photo.title}
+        onReorder={(id, beforeId) =>
+          setPhotos((current) => moveBefore(current, id, beforeId, (photo) => photo.id))
+        }
+        renderItem={(photo) => (
+          <Dnd.SortableItem id={photo.id} className={styles.tile} aria-label={photo.title}>
+            <Thumbnail.Root fullWidth ratio="1:1">
+              <Thumbnail.Image src={`https://picsum.photos/seed/${photo.id}/320/320`} />
+              <Thumbnail.Fallback>
+                <Icon name="object.image" />
+              </Thumbnail.Fallback>
+            </Thumbnail.Root>
+          </Dnd.SortableItem>
+        )}
+      />
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/dnd/examples/handle.tsx

@@ -0,0 +1,58 @@
+/** Notification channels with switches: only the grip starts a drag, and the async save can roll the order back — `handle`, `Dnd.Handle`, `onReorder`. */
+import { Dnd, moveBefore, Switch, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Channel = { id: string; title: string; enabled: boolean };
+
+const CHANNELS: Channel[] = [
+  { id: "email", title: "Почта", enabled: true },
+  { id: "push", title: "Push-уведомления", enabled: true },
+  { id: "slack", title: "Slack", enabled: false },
+  { id: "sms", title: "SMS", enabled: false },
+];
+
+export default function DndHandleExample() {
+  const [channels, setChannels] = React.useState(CHANNELS);
+
+  return (
+    <Dnd.Root>
+      <Dnd.Sortable
+        as="ul"
+        handle
+        aria-label="Каналы по приоритету"
+        className={styles.list}
+        items={channels}
+        getId={(channel) => channel.id}
+        getLabel={(channel) => channel.title}
+        onReorder={async (id, beforeId) => {
+          await new Promise((resolve) => setTimeout(resolve, 600));
+          // The server refuses to put a switched-off channel first: the row glides back.
+          const moved = channels.find((channel) => channel.id === id);
+          if (moved && !moved.enabled && beforeId === channels[0]?.id) {
+            throw new Error("Выключенный канал не может быть первым");
+          }
+          setChannels((current) => moveBefore(current, id, beforeId, (channel) => channel.id));
+        }}
+        renderItem={(channel) => (
+          <Dnd.SortableItem id={channel.id} className={styles.handleRow}>
+            <Dnd.Handle />
+            <Typography as="span" variant="body-m" className={styles.rowText}>
+              {channel.title}
+            </Typography>
+            <Switch.Root
+              aria-label={channel.title}
+              checked={channel.enabled}
+              onCheckedChange={(enabled) =>
+                setChannels((current) =>
+                  current.map((item) => (item.id === channel.id ? { ...item, enabled } : item)),
+                )
+              }
+            />
+          </Dnd.SortableItem>
+        )}
+      />
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/dnd/examples/locked.tsx

@@ -0,0 +1,57 @@
+/** Sections of a workspace menu: the home section is pinned first with a lock in place of its grip, the rest reorder around nothing past it; each row is named by its visible title — `locked`, `handle`, `aria-labelledby`. */
+import { Dnd, moveBefore, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Section = { id: string; title: string; description: string; pinned?: boolean };
+
+const SECTIONS: Section[] = [
+  { id: "home", title: "Главная", description: "Всегда первая в меню", pinned: true },
+  { id: "orders", title: "Заказы", description: "Новые и в работе" },
+  { id: "invoices", title: "Счета", description: "Выставленные и оплаченные" },
+  { id: "clients", title: "Клиенты", description: "Компании и контакты" },
+  { id: "reports", title: "Отчёты", description: "Продажи и склад" },
+];
+
+export default function DndLockedExample() {
+  const [sections, setSections] = React.useState(SECTIONS);
+  const uid = React.useId();
+
+  return (
+    <Dnd.Root>
+      <Dnd.Sortable
+        as="ul"
+        handle
+        aria-label="Порядок разделов меню"
+        className={styles.list}
+        items={sections}
+        getId={(section) => section.id}
+        getLabel={(section) => section.title}
+        onReorder={(id, beforeId) =>
+          setSections((current) => moveBefore(current, id, beforeId, (section) => section.id))
+        }
+        renderItem={(section) => (
+          <Dnd.SortableItem
+            id={section.id}
+            locked={section.pinned ?? false}
+            className={styles.handleRow}
+            // Named and described by what it shows: `aria-label` here would hide the row's text.
+            aria-labelledby={`${uid}-${section.id}`}
+            aria-describedby={`${uid}-${section.id}-note`}
+          >
+            <Dnd.Handle aria-label={`Переместить раздел «${section.title}»`} />
+            <span className={styles.rowText}>
+              <Typography as="span" variant="body-m" id={`${uid}-${section.id}`}>
+                {section.title}
+              </Typography>
+              <Typography as="span" variant="caption" tone="muted" id={`${uid}-${section.id}-note`}>
+                {section.description}
+              </Typography>
+            </span>
+          </Dnd.SortableItem>
+        )}
+      />
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/dnd/examples/narrow.tsx

@@ -0,0 +1,42 @@
+/** A row of status filters in a 320 px strip: tags reorder sideways and the strip scrolls when a tag is held near its edge — `axis`. */
+import { Badge, Dnd, moveBefore, ScrollContainer } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const FILTERS = [
+  { id: "all", title: "Все заказы" },
+  { id: "new", title: "Новые" },
+  { id: "paid", title: "Оплаченные" },
+  { id: "shipping", title: "В доставке" },
+  { id: "done", title: "Доставленные" },
+  { id: "refund", title: "Возвраты" },
+];
+
+export default function DndNarrowExample() {
+  const [filters, setFilters] = React.useState(FILTERS);
+
+  return (
+    <Dnd.Root>
+      <ScrollContainer axis="horizontal" className={styles.strip}>
+        <Dnd.Sortable
+          axis="x"
+          as="ul"
+          aria-label="Порядок фильтров"
+          className={styles.chips}
+          items={filters}
+          getId={(filter) => filter.id}
+          getLabel={(filter) => filter.title}
+          onReorder={(id, beforeId) =>
+            setFilters((current) => moveBefore(current, id, beforeId, (filter) => filter.id))
+          }
+          renderItem={(filter) => (
+            <Dnd.SortableItem id={filter.id} className={styles.chip}>
+              <Badge.Root>{filter.title}</Badge.Root>
+            </Dnd.SortableItem>
+          )}
+        />
+      </ScrollContainer>
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/dnd/examples/overview.tsx

@@ -0,0 +1,45 @@
+/** Project tasks reordered by dragging the whole row; one root above, the move applied with a helper — `Dnd.Root`, `Dnd.Sortable`, `onReorder`, `moveBefore`. */
+import { Dnd, moveBefore, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const TASKS = [
+  { id: "brief", title: "Согласовать бриф", due: "Сегодня" },
+  { id: "design", title: "Макеты главной страницы", due: "Завтра" },
+  { id: "build", title: "Вёрстка и интеграция", due: "Через 3 дня" },
+  { id: "review", title: "Ревью и правки", due: "Через неделю" },
+  { id: "launch", title: "Запуск", due: "Через 2 недели" },
+];
+
+export default function DndOverviewExample() {
+  const [tasks, setTasks] = React.useState(TASKS);
+
+  return (
+    <Dnd.Root>
+      <Dnd.Sortable
+        as="ul"
+        aria-label="Задачи проекта"
+        className={styles.list}
+        items={tasks}
+        getId={(task) => task.id}
+        getLabel={(task) => task.title}
+        onReorder={(id, beforeId) =>
+          setTasks((current) => moveBefore(current, id, beforeId, (task) => task.id))
+        }
+        renderItem={(task) => (
+          <Dnd.SortableItem id={task.id} className={styles.row}>
+            <span className={styles.rowText}>
+              <Typography as="span" variant="body-m" truncate>
+                {task.title}
+              </Typography>
+              <Typography as="span" variant="caption" tone="muted">
+                {task.due}
+              </Typography>
+            </span>
+          </Dnd.SortableItem>
+        )}
+      />
+    </Dnd.Root>
+  );
+}