prime-ui-kit 0.17.0 → 0.19.0

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

@@ -0,0 +1,154 @@
+/** Orders wider than the table: the order number stays at the start, the ⋯ row actions at the end with the column chooser in their header cell, and the columns between scroll sideways — `stickyFirstColumn`, `stickyLastColumn`, `columnsMenu`. */
+import { Badge, Button, DataTable, type DataTableColumn, Dropdown, Icon } from "prime-ui-kit";
+
+type Order = {
+  id: string;
+  client: string;
+  manager: string;
+  city: string;
+  address: string;
+  status: "new" | "paid" | "shipped" | "cancelled";
+  date: string;
+  items: number;
+  amount: number;
+};
+
+const ORDERS: Order[] = [
+  {
+    id: "З-2041",
+    client: "ООО «Северный ветер»",
+    manager: "Анна Смирнова",
+    city: "Санкт-Петербург",
+    address: "Лиговский пр., 50, склад 3",
+    status: "paid",
+    date: "02.10.2026",
+    items: 14,
+    amount: 184_500,
+  },
+  {
+    id: "З-2042",
+    client: "ИП Козлов",
+    manager: "Игорь Петров",
+    city: "Казань",
+    address: "ул. Петербургская, 12, офис 4",
+    status: "new",
+    date: "03.10.2026",
+    items: 3,
+    amount: 27_900,
+  },
+  {
+    id: "З-2043",
+    client: "АО «Технопарк»",
+    manager: "Анна Смирнова",
+    city: "Новосибирск",
+    address: "ул. Станционная, 38, терминал Б",
+    status: "shipped",
+    date: "05.10.2026",
+    items: 42,
+    amount: 612_000,
+  },
+  {
+    id: "З-2044",
+    client: "ООО «Лента Логистик»",
+    manager: "Мария Орлова",
+    city: "Екатеринбург",
+    address: "ул. Монтажников, 4, ворота 2",
+    status: "cancelled",
+    date: "06.10.2026",
+    items: 8,
+    amount: 96_300,
+  },
+  {
+    id: "З-2045",
+    client: "ООО «Гранит»",
+    manager: "Игорь Петров",
+    city: "Москва",
+    address: "Варшавское ш., 125, стр. 1",
+    status: "paid",
+    date: "08.10.2026",
+    items: 21,
+    amount: 275_400,
+  },
+];
+
+const STATUS = {
+  new: { label: "Новый", tone: "info" },
+  paid: { label: "Оплачен", tone: "success" },
+  shipped: { label: "Отгружен", tone: "neutral" },
+  cancelled: { label: "Отменён", tone: "danger" },
+} as const;
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", hideable: false },
+  { id: "client", header: "Клиент", accessor: "client", minWidth: "14rem" },
+  { id: "manager", header: "Менеджер", accessor: "manager", minWidth: "10rem" },
+  { id: "city", header: "Город", accessor: "city", minWidth: "10rem" },
+  { id: "address", header: "Адрес доставки", accessor: "address", minWidth: "18rem" },
+  {
+    id: "status",
+    header: "Статус",
+    cell: (row) => (
+      <Badge.Root tone={STATUS[row.status].tone}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true, headerAlign: "end" },
+  { id: "items", header: "Позиций", accessor: "items", numeric: true, headerAlign: "end" },
+  {
+    id: "amount",
+    header: "Сумма",
+    accessor: "amount",
+    numeric: true,
+    headerAlign: "end",
+    cell: (row) => RUB.format(row.amount),
+  },
+  {
+    id: "actions",
+    header: "Действия",
+    hideHeader: true,
+    hideable: false,
+    align: "end",
+    cell: (row) => (
+      <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>Открыть</Dropdown.Item>
+          <Dropdown.Item>Скачать счёт</Dropdown.Item>
+          <Dropdown.Item>Повторить заказ</Dropdown.Item>
+          <Dropdown.Separator />
+          <Dropdown.Item tone="danger">Отменить</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    ),
+  },
+];
+
+export default function DataTableActionsColumnExample() {
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      paging="none"
+      stickyFirstColumn
+      stickyLastColumn
+      columnsMenu
+    />
+  );
+}

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

@@ -1,9 +1,7 @@
-/** Orders with the column chooser in the toolbar; the choice outlives a reload in local storage, the order number always stays — `DataTable.ColumnsMenu`, `hiddenColumns`, `onHiddenColumnsChange`, `hideable`. */
-import { Badge, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+/** Orders with the column chooser at the end of the header row; the choice outlives a reload in local storage, the order number always stays — `columnsMenu`, `hiddenColumns`, `onHiddenColumnsChange`, `hideable`. */
+import { Badge, DataTable, type DataTableColumn } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Status = "paid" | "shipped" | "waiting";
 type Order = {
   id: string;
@@ -138,14 +136,7 @@ export default function DataTableColumnsVisibilityExample() {
       rows={ORDERS}
       getRowKey={(row) => row.id}
       stickyFirstColumn
-      toolbar={
-        <div className={styles.toolbar}>
-          <Typography as="span" variant="body-s" tone="secondary">
-            Заказы за неделю: {ORDERS.length}
-          </Typography>
-          <DataTable.ColumnsMenu />
-        </div>
-      }
+      columnsMenu
     />
   );
 }

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

@@ -52,7 +52,7 @@ export default function DataTableControlledExample() {
       columns={COLUMNS}
       rows={ORDERS}
       getRowKey={(row) => row.id}
-      toolbar={<DataTable.ColumnsMenu />}
+      columnsMenu
       hiddenColumns={hiddenColumns}
       onHiddenColumnsChange={setHiddenColumns}
       sort={sort}

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

@@ -1,5 +1,5 @@
-/** 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";
+/** A 320 px support queue: columns scroll inside the table with the first one pinned, the column chooser stays at the end of the header row, the footer reflows and the pager turns compact — `stickyFirstColumn`, `columnsMenu`, `size`. */
+import { Badge, DataTable, type DataTableColumn } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
@@ -15,7 +15,7 @@ const TICKETS: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
 }));
 
 const COLUMNS: DataTableColumn<Ticket>[] = [
-  { id: "id", header: "Тикет", accessor: "id" },
+  { id: "id", header: "Тикет", accessor: "id", hideable: false },
   { id: "subject", header: "Тема", accessor: "subject", truncate: true, maxWidth: "10rem" },
   {
     id: "priority",
@@ -39,15 +39,8 @@ export default function DataTableNarrowExample() {
         rows={TICKETS}
         getRowKey={(row) => row.id}
         stickyFirstColumn
+        columnsMenu
         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/numeric.tsx

@@ -1,4 +1,4 @@
-/** An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title, formatted cells sort by their raw number and article numbers in natural order — `numeric`, `truncate`, `maxWidth`, `sortAccessor`, `sortComparator`. */
+/** An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title, formatted cells sort by their raw number article numbers in natural order and a header that needs a word more explains itself in a tooltip — `numeric`, `truncate`, `maxWidth`, `sortAccessor`, `sortComparator`, `description`. */
 import { DataTable, type DataTableColumn } from "prime-ui-kit";
 
 type Sku = {
@@ -57,10 +57,17 @@ const COLUMNS: DataTableColumn<Sku>[] = [
     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: "sold",
+    header: "Продано",
+    description: "Штук за последние 30 дней, без возвратов",
+    numeric: true,
+    cell: (row) => INT.format(row.sold),
+  },
   {
     id: "margin",
     header: "Маржа",
+    description: "Доля прибыли в цене после закупки и доставки",
     numeric: true,
     sortable: true,
     sortAccessor: (row) => row.margin,

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

@@ -2,8 +2,6 @@
 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[] = [
@@ -77,25 +75,23 @@ export default function DataTableRowLinkExample() {
   ];
 
   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>
-      }
-    />
+    <>
+      <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}`);
+        }}
+      />
+      <Typography as="span" variant="body-s" tone="secondary" aria-live="polite">
+        {status}
+      </Typography>
+    </>
   );
 }

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

@@ -177,7 +177,15 @@ const initials = (name: string) =>
     .toUpperCase();
 
 const COLUMNS: DataTableColumn<Invoice>[] = [
-  { id: "id", header: "Счёт", accessor: "id", sortable: true, numeric: true, align: "start" },
+  {
+    id: "id",
+    header: "Счёт",
+    accessor: "id",
+    sortable: true,
+    numeric: true,
+    align: "start",
+    hideable: false,
+  },
   {
     id: "client",
     header: "Клиент",
@@ -230,6 +238,7 @@ const COLUMNS: DataTableColumn<Invoice>[] = [
     id: "actions",
     header: "Действия",
     hideHeader: true,
+    hideable: false,
     width: "3.5rem",
     align: "end",
     cell: (row) => (
@@ -320,6 +329,8 @@ export default function DataTableScreenExample() {
             getRowLabel={(row) => `Счёт ${row.id}`}
             pageSize={6}
             stickyFirstColumn
+            stickyLastColumn
+            columnsMenu
             defaultSort={{ columnId: "due", order: "desc" }}
             empty={
               <EmptyPage.Root size="s" role="status" aria-labelledby="invoices-empty">

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

@@ -1,7 +1,6 @@
-/** A campaign list with search, a status filter and export above the table; the empty text when nothing matches — `toolbar`, `empty`. */
+/** A campaign table with its own search and status filter above it — two table-scoped controls; the empty text when nothing matches — `toolbar`, `empty`. */
 import {
   Badge,
-  Button,
   DataTable,
   type DataTableColumn,
   Icon,
@@ -87,36 +86,31 @@ export default function DataTableToolbarExample() {
       pageSize={5}
       empty="Ничего не найдено — измените запрос или фильтр"
       toolbar={
-        <div className={styles.toolbar}>
-          <div className={styles.filters}>
-            <Input.Root size="s" className={styles.search}>
-              <Input.Wrapper>
-                <Input.Icon side="start">
-                  <Icon name="action.search" />
-                </Input.Icon>
-                <Input.Field
-                  type="search"
-                  placeholder="Поиск кампаний"
-                  aria-label="Поиск кампаний"
-                  value={query}
-                  onValueChange={setQuery}
-                />
-              </Input.Wrapper>
-            </Input.Root>
-            <SegmentedControl.Root
-              size="s"
-              aria-label="Статус"
-              value={status}
-              onValueChange={setStatus}
-            >
-              <SegmentedControl.Item value="all">Все</SegmentedControl.Item>
-              <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
-              <SegmentedControl.Item value="paused">На паузе</SegmentedControl.Item>
-            </SegmentedControl.Root>
-          </div>
-          <Button.Root variant="outline" tone="neutral" size="s">
-            Экспорт
-          </Button.Root>
+        <div className={styles.filters}>
+          <Input.Root size="s" className={styles.search}>
+            <Input.Wrapper>
+              <Input.Icon side="start">
+                <Icon name="action.search" />
+              </Input.Icon>
+              <Input.Field
+                type="search"
+                placeholder="Поиск кампаний"
+                aria-label="Поиск кампаний"
+                value={query}
+                onValueChange={setQuery}
+              />
+            </Input.Wrapper>
+          </Input.Root>
+          <SegmentedControl.Root
+            size="s"
+            aria-label="Статус"
+            value={status}
+            onValueChange={setStatus}
+          >
+            <SegmentedControl.Item value="all">Все</SegmentedControl.Item>
+            <SegmentedControl.Item value="active">Активные</SegmentedControl.Item>
+            <SegmentedControl.Item value="paused">На паузе</SegmentedControl.Item>
+          </SegmentedControl.Root>
         </div>
       }
     />

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

@@ -12,7 +12,7 @@
 - An annual day and month without a year (`yearless`).
 
 ## When not to use
-- Time of day only → use [Input](../input/COMPONENT.md) with a time mask.
+- Time of day only → use [Input](../input/COMPONENT.md) with `Input.Field type="time"`: the time is typed in hour and minute segments, there is no day to pick (a date with a time is `withTime`).
 - A choice between a few fixed periods («7 дней», «30 дней») → use [SegmentedControl](../segmented-control/COMPONENT.md) or [Select](../select/COMPONENT.md).
 - A free-text date the user types → use [Input](../input/COMPONENT.md).
 
@@ -63,6 +63,7 @@ panel                       presets column (range) · 1–2 month grids · promp
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Field tier (height 28 · 32 · 36 · 40 · 48) and panel tier (day cell 24 · 28 · 32 · 36 · 40). Without it the tier of its host, else `m`. |
 | `label` | `ReactNode` | — | Field label; part of the button's accessible name together with the value. |
 | `hint` | `ReactNode` | — | Support text under the field (`aria-describedby`). |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in place of the hint; implies `invalid`. |
 | `required` | `boolean` | `false` | Red `*` after the label; the field button is described by `labels.required` (a button takes no `aria-required`). |
 | `optional` | `boolean` | — | Muted `labels.optional` after the label. |
@@ -241,6 +242,7 @@ Committing: without `footer` a picked day (or the second day of a range) applies
 | [inline-panel.tsx](examples/inline-panel.tsx) | A booking calendar embedded in a card: the card is its container, two months when the parent has room, the range applies at once — `Datepicker.Panel`, `months`, `prompt`. |
 | [yearless.tsx](examples/yearless.tsx) | An annual price change date: day and month without a year, a value prefix and taken days disabled — `yearless`, `valuePrefix`, `isDayDisabled`. |
 | [locale.tsx](examples/locale.tsx) | A delivery window on a partner portal in English: month and weekday names from the date-fns locale, the week from Sunday and the system texts translated — `locale`, `weekStartsOn`, `labels`. |
+| [deadline.tsx](examples/deadline.tsx) | A document's expiry date whose hint counts the days left and takes the status tone — `hint`, `hintTone`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A shift period with a footer: the calendar keeps the draft on a press beside it and closes by Escape, Reset or Apply — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled.tsx](examples/controlled.tsx) | A report filter owns the period: quick buttons set it from outside, the field shows it — `value`, `onValueChange`. |
 | [controlled-open.tsx](examples/controlled-open.tsx) | The parent owns the panel: a reminder button opens the calendar from code, a picked day closes it — `open`, `onOpenChange`. |

package/dist/skill/reference/components/datepicker/examples/deadline.tsx

@@ -0,0 +1,33 @@
+/** A document's expiry date whose hint counts the days left and takes the status tone — `hint`, `hintTone`. */
+import { differenceInCalendarDays } from "date-fns";
+import { Datepicker } from "prime-ui-kit";
+import * as React from "react";
+
+const TODAY = new Date(2026, 9, 15);
+const WARN_DAYS = 30;
+
+/** The hint and its tone: the words say the status, the tone repeats it. */
+function expiryHint(expires: Date | null) {
+  if (!expires) return { hint: "Дата из договора страхования", tone: "neutral" as const };
+  const days = differenceInCalendarDays(expires, TODAY);
+  if (days < 0) return { hint: `Срок истёк ${-days} дн. назад`, tone: "danger" as const };
+  if (days <= WARN_DAYS) return { hint: `Осталось ${days} дн.`, tone: "warning" as const };
+  return { hint: `Действует ещё ${days} дн.`, tone: "success" as const };
+}
+
+export default function DatepickerDeadlineExample() {
+  const [expires, setExpires] = React.useState<Date | null>(new Date(2026, 9, 27));
+  const { hint, tone } = expiryHint(expires);
+
+  return (
+    <Datepicker.Root
+      mode="single"
+      label="Страховка действует до"
+      value={expires}
+      onValueChange={setExpires}
+      hint={hint}
+      hintTone={tone}
+      fullWidth
+    />
+  );
+}

package/dist/skill/reference/components/digit-input/COMPONENT.md

@@ -42,6 +42,7 @@ DigitInput            field frame: label row → cells → support row (hint | e
 | `required` | `boolean` | — | Red `*` after the label and native `required` on every cell. |
 | `optional` | `boolean` | — | Muted marker right after the label text (`labels.optional`). |
 | `hint` | `ReactNode` | — | Help text under the cells. Hidden while `error` is shown. |
+| `hintTone` | `"neutral" \| "success" \| "warning" \| "danger"` | `"neutral"` | Status color of `hint` («Осталось 12 дней» in `warning`). The words carry the status, the color repeats it; an `error` replaces the hint and its tone. A validation error is `error`, never a `danger` hint. |
 | `error` | `ReactNode` | — | Error message in the hint slot; implies `invalid`. |
 | `invalid` | `boolean` | — | Danger ring and danger digits on every cell, `aria-invalid`. A non-empty `error` implies it. |
 | `success` | `boolean` | `false` | The code was accepted (after the server checked it): the cells turn success one after another. Ignored while invalid. Say it in words too (`hint`). |

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

@@ -30,7 +30,7 @@ Dnd.Root                         session owner: overlay (portal), live region, l
 ├─ Dnd.Sortable                  list container and drop target; renders items in the drawn order
 │  ├─ header                     optional content before the items that never moves (a group's heading row)
 │  ├─ Dnd.SortableItem           one item (li in ul/ol, div otherwise); the gap is drawn before it
-│  │  └─ Dnd.Handle              optional grip: a ghost icon-only Button (with `handle` on the list); a lock in a `locked` item; busy while the item's move is saved
+│  │  └─ Dnd.Handle              optional grip, last in the item: a ghost icon-only Button (with `handle` on the list); a lock in a `locked` item; busy while the item's move is saved
 │  ├─ empty                      the `empty` content while the list has no items
 │  └─ children                   optional content after the items that never moves (an add tile)
 ├─ Dnd.Draggable                 an item to carry elsewhere; stays in place, faded, until the drop
@@ -85,7 +85,7 @@ Generic `Dnd.Sortable<T>`; `ref` → `HTMLElement`. The list and its drop target
 | `…rest` | `Omit<HTMLAttributes<HTMLElement>, "id">` | — | `aria-labelledby` / `aria-describedby` (the visible title and description) and the other attributes. |
 
 ### Dnd.Handle
-`ref` → `HTMLButtonElement` (`HTMLSpanElement` in a `locked` item). The grip: a ghost icon-only `xs` Button that starts the drag and takes the item's keys; busy while the item's move is saved. In a `locked` item it is a lock.
+`ref` → `HTMLButtonElement` (`HTMLSpanElement` in a `locked` item). The grip: a ghost icon-only `xs` Button that starts the drag and takes the item's keys; busy while saving. In a `locked` item it is a lock. Place it last in the item, after its controls.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -201,6 +201,7 @@ An item's own `onPointerDown` / `onKeyDown` run before the kit's: `preventDefaul
 ## Layout & spacing
 - The distance between items is `--prime-space-2`; a host sets `--dnd-sortable-gap` on the list for another one.
 - A grid (`axis="grid"`) is `display: grid`: the host sets the tracks (`grid-template-columns`) and the cells' size; the gap takes a cell, and a carried item resizes to the cell it would land in.
+- A `Dnd.Handle` ends its item: the last child, after the item's own trailing controls (a remove button), at the inline end (on the left in RTL); a `locked` item's lock takes the same place, so the grips of every row stand on one line. In a table it is the last cell. An on / off switch leads the item (its first child), so its state reads first and nothing stands between the text and the grip.
 - The reason chip stands `--prime-tooltip-offset` under the carried copy, start-aligned, at most `--prime-tooltip-max-width` wide.
 - The look of a row is the consumer's: give `Dnd.SortableItem` / `Dnd.Draggable` a radius on its own class (the gap and the clone's fill take it) and keep the row's look within its ancestors up to the nearest surface (`data-depth`) — the clone flies inside empty copies (`display: contents`) of exactly those, so their variables and selectors still apply. A table row flies in a one-row copy of its table inside them.
 - A scrollable ancestor under the pointer auto-scrolls within 64 px of its edge (a `ScrollContainer` strip works).
@@ -251,7 +252,7 @@ An item's own `onPointerDown` / `onKeyDown` run before the kit's: `preventDefaul
 | Example | Shows |
 |---|---|
 | [overview.tsx](examples/overview.tsx) | Project tasks reordered by dragging the whole row; one root above, the move applied with a helper — `Dnd.Root`, `Dnd.Sortable`, `onReorder`, `moveBefore`. |
-| [handle.tsx](examples/handle.tsx) | Notification channels with switches: only the grip starts a drag, and the async save can roll the order back — `handle`, `Dnd.Handle`, `onReorder`. |
+| [handle.tsx](examples/handle.tsx) | Notification channels, each switch leading its row and the grip ending it: only the grip starts a drag, and the async save can roll the order back — `handle`, `Dnd.Handle`, `onReorder`. |
 | [grid.tsx](examples/grid.tsx) | 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`. |
 | [locked.tsx](examples/locked.tsx) | 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`. |
 | [board.tsx](examples/board.tsx) | 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`. |

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

@@ -18,9 +18,9 @@
   box-shadow: var(--prime-shadow-raised);
 }
 
-/* The grip sits closer to the edge: it is a square button with its own inner room. */
+/* The grip ends the row and sits closer to the edge: a square button with its own inner room. */
 .handleRow {
-  padding-inline-start: var(--prime-space-2);
+  padding-inline-end: var(--prime-space-2);
 }
 
 .rowText {
@@ -134,9 +134,10 @@
   text-align: end;
 }
 
+/* The grip column ends the row. */
 .grip {
   inline-size: var(--prime-space-10);
-  padding-inline-end: 0;
+  padding-inline-start: 0;
 }
 
 /* A stage's heading row: a fill marks where a new stage starts. */

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

@@ -1,4 +1,4 @@
-/** Notification channels with switches: only the grip starts a drag, and the async save can roll the order back — `handle`, `Dnd.Handle`, `onReorder`. */
+/** Notification channels, each switch leading its row and the grip ending it: 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";
 
@@ -37,10 +37,6 @@ export default function DndHandleExample() {
         }}
         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}
@@ -50,6 +46,10 @@ export default function DndHandleExample() {
                 )
               }
             />
+            <Typography as="span" variant="body-m" className={styles.rowText}>
+              {channel.title}
+            </Typography>
+            <Dnd.Handle />
           </Dnd.SortableItem>
         )}
       />

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

@@ -40,7 +40,6 @@ export default function DndLockedExample() {
             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}
@@ -49,6 +48,7 @@ export default function DndLockedExample() {
                 {section.description}
               </Typography>
             </span>
+            <Dnd.Handle aria-label={`Переместить раздел «${section.title}»`} />
           </Dnd.SortableItem>
         )}
       />

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

@@ -51,9 +51,6 @@ export default function DndTableExample() {
         </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">
                 Работа
@@ -64,6 +61,9 @@ export default function DndTableExample() {
                 Часы
               </Typography>
             </th>
+            <th scope="col" className={styles.grip}>
+              <VisuallyHidden>Порядок</VisuallyHidden>
+            </th>
           </tr>
         </thead>
         {stages.map((stage) => (
@@ -90,9 +90,6 @@ export default function DndTableExample() {
             }
             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}
@@ -103,6 +100,9 @@ export default function DndTableExample() {
                     {line.hours}
                   </Typography>
                 </td>
+                <td className={styles.grip}>
+                  <Dnd.Handle />
+                </td>
               </Dnd.SortableItem>
             )}
           />