prime-ui-kit 0.14.0 → 0.15.0

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

@@ -1,81 +1,114 @@
-/** 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`. */
+/** Documents carried onto folders: a zone takes items by kind and gets the document as data, a locked folder refuses before the release and says why under the carried file, a syncing folder is no target at all, a document on signing stays put, the line above follows the drag, the target flashes where the file landed — `Dnd.Draggable`, `Dnd.DropZone`, `data`, `canDrop`, `disabled`, `onDragStart`, `onDragEnd`, `onEnter`, `onLeave`, `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 };
+type Folder = "inbox" | "contracts" | "accounting" | "archive";
+type Paper = { id: string; title: string; folder: Folder; signing?: boolean };
 
-const FOLDERS: { id: Folder; title: string; locked?: boolean }[] = [
+/** `locked` refuses with a reason; `syncing` is no target at all while it syncs. */
+const FOLDERS: { id: Folder; title: string; locked?: boolean; syncing?: boolean }[] = [
   { id: "contracts", title: "Договоры" },
+  { id: "accounting", title: "Бухгалтерия (синхронизация)", syncing: true },
   { id: "archive", title: "Архив (закрыт для записи)", locked: true },
 ];
 
 const DOCUMENTS: Paper[] = [
   { id: "d1", title: "Договор поставки № 14", folder: "inbox" },
   { id: "d2", title: "Акт сверки за квартал", folder: "inbox" },
-  { id: "d3", title: "Счёт на оплату", folder: "inbox" },
+  { id: "d3", title: "Счёт на оплату № 482", folder: "inbox", signing: true },
 ];
 
 export default function DndDropZonesExample() {
   const [documents, setDocuments] = React.useState(DOCUMENTS);
+  const [carried, setCarried] = React.useState<string | null>(null);
+  const [target, setTarget] = React.useState<string | null>(null);
   const inFolder = (folder: Folder) => documents.filter((doc) => doc.folder === folder);
 
+  const status =
+    carried === null
+      ? "Перетащите документ в папку"
+      : target === null
+        ? `«${carried}» — отпустите над папкой`
+        : `«${carried}» → ${target}`;
+
   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.stage}>
+        <Typography as="p" variant="body-s" tone="muted">
+          {status}
+        </Typography>
+        <div className={styles.board}>
+          <section className={styles.column} aria-label="Входящие">
             <div className={styles.columnHeader}>
               <Typography as="h4" variant="title-s">
-                {folder.title}
+                Входящие
               </Typography>
-              <Badge.Root>{inFolder(folder.id).length}</Badge.Root>
+              <Badge.Root>{inFolder("inbox").length}</Badge.Root>
             </div>
-            {inFolder(folder.id).map((doc) => (
-              <div key={doc.id} className={styles.ticket}>
+            {inFolder("inbox").map((doc) => (
+              <Dnd.Draggable
+                key={doc.id}
+                kind="document"
+                id={doc.id}
+                data={doc}
+                label={doc.title}
+                disabled={doc.signing}
+                className={styles.ticket}
+                onDragStart={(item) => setCarried(item.label)}
+                onDragEnd={() => {
+                  setCarried(null);
+                  setTarget(null);
+                }}
+              >
                 <Typography as="span" variant="body-m">
                   {doc.title}
                 </Typography>
-              </div>
+                {doc.signing ? (
+                  <Badge.Root color="orange" className={styles.badge}>
+                    На подписи
+                  </Badge.Root>
+                ) : null}
+              </Dnd.Draggable>
             ))}
-          </Dnd.DropZone>
-        ))}
+          </section>
+          {FOLDERS.map((folder) => (
+            <Dnd.DropZone<Paper>
+              key={folder.id}
+              as="section"
+              aria-label={folder.title}
+              accepts="document"
+              flashOnDrop
+              disabled={folder.syncing}
+              className={styles.column}
+              canDrop={() => (folder.locked ? "Архив только для чтения" : true)}
+              onEnter={() => setTarget(folder.title)}
+              onLeave={() => setTarget(null)}
+              onDrop={(item) =>
+                setDocuments((current) =>
+                  current.map((doc) =>
+                    doc.id === item.data.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>
       </div>
     </Dnd.Root>
   );

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

@@ -48,6 +48,19 @@
   background: var(--prime-color-fill-muted);
 }
 
+/* drop-zones.tsx: the drag status line above the board. */
+.stage {
+  display: flex;
+  flex-direction: column;
+  gap: var(--prime-space-3);
+  width: 100%;
+}
+
+/* A status badge keeps its own width inside a ticket. */
+.badge {
+  align-self: flex-start;
+}
+
 .columnHeader {
   display: flex;
   align-items: center;
@@ -94,6 +107,43 @@
   text-align: center;
 }
 
+/* table.tsx: a plain table whose bodies are sortable lists; rows sit on faint dividers. */
+.table {
+  width: 100%;
+  max-width: calc(var(--prime-space-24) * 6);
+  border-collapse: collapse;
+}
+
+.caption {
+  padding-block-end: var(--prime-space-3);
+  text-align: start;
+}
+
+.cell,
+.numeric,
+.grip,
+.groupCell {
+  padding: var(--prime-space-2) var(--prime-space-3);
+  border-block-end: var(--prime-border-width) solid var(--prime-color-border-subtle);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.numeric {
+  text-align: end;
+}
+
+.grip {
+  inline-size: var(--prime-space-10);
+  padding-inline-end: 0;
+}
+
+/* A stage's heading row: a fill marks where a new stage starts. */
+.groupCell {
+  padding-block-start: var(--prime-space-4);
+  background: var(--prime-color-fill-muted);
+}
+
 /* 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));

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

@@ -0,0 +1,54 @@
+/** A contract's approval route: a step already signed stays where it is while the rest reorder around it, and once the route is approved the whole list holds still — `Dnd.SortableItem`, `Dnd.Sortable`, `disabled`. */
+import { Badge, Dnd, moveBefore, Switch, Typography } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Step = { id: string; title: string; person: string; signed?: boolean };
+
+const ROUTE: Step[] = [
+  { id: "lawyer", title: "Юрист", person: "Ольга Белова", signed: true },
+  { id: "finance", title: "Финансовый отдел", person: "Илья Петров" },
+  { id: "security", title: "Служба безопасности", person: "Марат Хасанов" },
+  { id: "director", title: "Директор", person: "Анна Климова" },
+];
+
+export default function DndStatesExample() {
+  const [steps, setSteps] = React.useState(ROUTE);
+  const [approved, setApproved] = React.useState(false);
+
+  return (
+    <div className={styles.stage}>
+      <Switch.Root checked={approved} onCheckedChange={setApproved}>
+        <Switch.Label>Маршрут утверждён</Switch.Label>
+      </Switch.Root>
+      <Dnd.Root>
+        <Dnd.Sortable
+          as="ol"
+          aria-label="Маршрут согласования"
+          className={styles.list}
+          disabled={approved}
+          items={steps}
+          getId={(step) => step.id}
+          getLabel={(step) => step.title}
+          onReorder={(id, beforeId) =>
+            setSteps((current) => moveBefore(current, id, beforeId, (step) => step.id))
+          }
+          renderItem={(step) => (
+            <Dnd.SortableItem id={step.id} disabled={step.signed} className={styles.row}>
+              <span className={styles.rowText}>
+                <Typography as="span" variant="body-m">
+                  {step.title}
+                </Typography>
+                <Typography as="span" variant="caption" tone="muted">
+                  {step.person}
+                </Typography>
+              </span>
+              {step.signed ? <Badge.Root color="green">Подписано</Badge.Root> : null}
+            </Dnd.SortableItem>
+          )}
+        />
+      </Dnd.Root>
+    </div>
+  );
+}

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

@@ -0,0 +1,113 @@
+/** A project estimate as a table: each stage is its own body of rows under a heading row that never moves, a row is carried by its grip within a stage or into another, and the rows stay table rows — `as`, `header`, `kind`, `handle`. */
+import { Dnd, moveBefore, Typography, VisuallyHidden } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+type Line = { id: string; title: string; hours: number };
+type Stage = { id: string; title: string; lines: Line[] };
+
+const ESTIMATE: Stage[] = [
+  {
+    id: "analysis",
+    title: "Обследование",
+    lines: [
+      { id: "interviews", title: "Интервью с отделом продаж", hours: 12 },
+      { id: "processes", title: "Описание процессов", hours: 20 },
+    ],
+  },
+  {
+    id: "setup",
+    title: "Настройка",
+    lines: [
+      { id: "roles", title: "Роли и права доступа", hours: 8 },
+      { id: "import", title: "Перенос клиентской базы", hours: 16 },
+      { id: "training", title: "Обучение менеджеров", hours: 6 },
+    ],
+  },
+];
+
+/** Moves line `id` in front of `beforeId` (`null` — last) in stage `to`, from whichever stage holds it. */
+const moveLine = (stages: Stage[], id: string, beforeId: string | null, to: string) => {
+  const line = stages.flatMap((stage) => stage.lines).find((item) => item.id === id);
+  if (!line) return stages;
+  return stages.map((stage) => {
+    const rest = stage.lines.filter((item) => item.id !== id);
+    if (stage.id !== to) return { ...stage, lines: rest };
+    return { ...stage, lines: moveBefore([...rest, line], id, beforeId, (item) => item.id) };
+  });
+};
+
+export default function DndTableExample() {
+  const [stages, setStages] = React.useState(ESTIMATE);
+
+  return (
+    <Dnd.Root>
+      <table className={styles.table}>
+        <caption className={styles.caption}>
+          <Typography as="span" variant="title-s">
+            Смета внедрения CRM
+          </Typography>
+        </caption>
+        <thead>
+          <tr>
+            <th scope="col" className={styles.grip}>
+              <VisuallyHidden>Порядок</VisuallyHidden>
+            </th>
+            <th scope="col" className={styles.cell}>
+              <Typography as="span" variant="caption" tone="muted">
+                Работа
+              </Typography>
+            </th>
+            <th scope="col" className={styles.numeric}>
+              <Typography as="span" variant="caption" tone="muted">
+                Часы
+              </Typography>
+            </th>
+          </tr>
+        </thead>
+        {stages.map((stage) => (
+          <Dnd.Sortable
+            key={stage.id}
+            as="tbody"
+            kind="estimate-line"
+            handle
+            aria-label={stage.title}
+            items={stage.lines}
+            getId={(line) => line.id}
+            getLabel={(line) => line.title}
+            onReorder={(id, beforeId) =>
+              setStages((current) => moveLine(current, id, beforeId, stage.id))
+            }
+            header={
+              <tr>
+                <th scope="colgroup" colSpan={3} className={styles.groupCell}>
+                  <Typography as="span" variant="body-m">
+                    {stage.title}
+                  </Typography>
+                </th>
+              </tr>
+            }
+            renderItem={(line) => (
+              <Dnd.SortableItem id={line.id}>
+                <td className={styles.grip}>
+                  <Dnd.Handle />
+                </td>
+                <td className={styles.cell}>
+                  <Typography as="span" variant="body-m">
+                    {line.title}
+                  </Typography>
+                </td>
+                <td className={styles.numeric}>
+                  <Typography as="span" variant="body-m">
+                    {line.hours}
+                  </Typography>
+                </td>
+              </Dnd.SortableItem>
+            )}
+          />
+        ))}
+      </table>
+    </Dnd.Root>
+  );
+}

package/dist/skill/reference/components/drawer/COMPONENT.md

@@ -212,6 +212,7 @@ Motion: the scrim fades, the panel slides from its side over `slow` and leaves o
 | [dismiss.tsx](examples/dismiss.tsx) | An import closes only from its buttons, and not at all while it runs — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the state and opens the drawer from a link, without a trigger — `open`, `onOpenChange`. |
 | [in-form.tsx](examples/in-form.tsx) | A settings form in the panel: the footer button submits the form and an empty name shakes the field and keeps it open until it is filled — `Drawer.Body`, `Drawer.Footer`, `error`. |
+| [screen.tsx](examples/screen.tsx) | A create form in a Drawer opened from the primary action in the app header: grouped fields, errors on submit with focus on the first invalid field, a loading submit, a toast and the new row in the list — `Drawer.Trigger`, `Drawer.Guard`. |
 
 ## Mistakes
 - A drawer without `Drawer.Footer` → add one: «Закрыть» for details, «Отмена» + the submit button for a form. The header × alone is not the end of the panel.

package/dist/skill/reference/components/drawer/examples/dismiss.tsx

@@ -19,7 +19,7 @@ export default function DrawerDismissExample() {
       open={open}
       onOpenChange={setOpen}
       closeOnOutsideClick={false}
-      closeOnEscape={!importing}
+      closeOnEscape={false}
     >
       <Drawer.Trigger>
         <Button.Root variant="soft" tone="neutral">
@@ -27,7 +27,9 @@ export default function DrawerDismissExample() {
         </Button.Root>
       </Drawer.Trigger>
       <Drawer.Content size="s">
-        <Drawer.Header showClose={!importing}>
+        {/* While the import runs, the guard keeps «Отмена» in place, disabled. */}
+        <Drawer.Guard busy={importing} />
+        <Drawer.Header showClose={false}>
           <Drawer.Title>Импорт товаров</Drawer.Title>
           <Drawer.Description>catalog-october.xlsx · 1 240 строк</Drawer.Description>
         </Drawer.Header>
@@ -41,7 +43,7 @@ export default function DrawerDismissExample() {
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>
-            <Button.Root variant="outline" tone="neutral" disabled={importing}>
+            <Button.Root variant="outline" tone="neutral">
               Отмена
             </Button.Root>
           </Drawer.Close>

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

@@ -6,16 +6,3 @@
   flex-direction: column;
   gap: var(--prime-space-5);
 }
-
-/* overview.tsx: a term / value grid. */
-.details {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  gap: var(--prime-space-2) var(--prime-space-4);
-  margin: 0;
-}
-
-.details dd {
-  margin: 0;
-  font-variant-numeric: tabular-nums;
-}

package/dist/skill/reference/components/drawer/examples/header-actions.tsx

@@ -1,7 +1,5 @@
 /** A record card: its status and a ⋯ menu sit in the header before the close button, one tier smaller — `Drawer.Actions`. */
-import { Badge, Button, Drawer, Dropdown, Icon } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { Badge, Button, DescriptionList, Drawer, Dropdown, Icon } from "prime-ui-kit";
 
 const DEAL = {
   title: "Сделка №1042",
@@ -42,12 +40,10 @@ export default function DrawerHeaderActionsExample() {
           </Drawer.Actions>
         </Drawer.Header>
         <Drawer.Body>
-          <dl className={styles.details}>
-            <dt>Сумма</dt>
-            <dd>{DEAL.amount}</dd>
-            <dt>Ответственный</dt>
-            <dd>{DEAL.owner}</dd>
-          </dl>
+          <DescriptionList.Root>
+            <DescriptionList.Item label="Сумма">{DEAL.amount}</DescriptionList.Item>
+            <DescriptionList.Item label="Ответственный">{DEAL.owner}</DescriptionList.Item>
+          </DescriptionList.Root>
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>

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

@@ -1,8 +1,5 @@
 /** Order details next to the list: the three zones of every drawer — a header with a close button, a read-only body and a footer with Close and the main action — `Drawer.Trigger`, `Drawer.Body`, `Drawer.Footer`. */
-import { Button, Drawer, Typography } from "prime-ui-kit";
-import * as React from "react";
-
-import styles from "./examples.module.css";
+import { Button, DescriptionList, Drawer } from "prime-ui-kit";
 
 const DETAILS = [
   { term: "Клиент", value: "Анна Смирнова" },
@@ -25,22 +22,13 @@ export default function DrawerOverviewExample() {
           <Drawer.Description>Оформлен 3 октября</Drawer.Description>
         </Drawer.Header>
         <Drawer.Body>
-          <dl className={styles.details}>
+          <DescriptionList.Root>
             {DETAILS.map(({ term, value }) => (
-              <React.Fragment key={term}>
-                <dt>
-                  <Typography as="span" variant="body-m" tone="muted">
-                    {term}
-                  </Typography>
-                </dt>
-                <dd>
-                  <Typography as="span" variant="body-m">
-                    {value}
-                  </Typography>
-                </dd>
-              </React.Fragment>
+              <DescriptionList.Item key={term} label={term}>
+                {value}
+              </DescriptionList.Item>
             ))}
-          </dl>
+          </DescriptionList.Root>
         </Drawer.Body>
         <Drawer.Footer>
           <Drawer.Close>