@nexub/react 6.3.0 → 6.5.0

package/accessibility.json

@@ -1,5 +1,5 @@
 {
-  "version": "6.3.0",
+  "version": "6.5.0",
   "standard": "WCAG 2.2 Level AA",
   "method": {
     "automated": "axe-core rules tagged wcag2a, wcag2aa, wcag21a, wcag21aa and wcag22aa, run on every Storybook story in light and dark, and on open popups (menus, listboxes, dialogs), on every pull request; a new violation fails the build.",
@@ -42,6 +42,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "action-bar",
+      "name": "Action Bar",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "alert-dialog",
       "name": "Alert Dialog",
@@ -613,6 +622,18 @@
         "Visible focus ring on `:focus-visible`. Pair with a `<Label htmlFor>` so clicking the label moves focus into the field."
       ]
     },
+    {
+      "slug": "kanban",
+      "name": "Kanban",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Alt+ArrowUp / Alt+ArrowDown: On a handle: moves the card within its column.",
+        "Alt+ArrowLeft / Alt+ArrowRight: Moves the card to the previous or next column. Mirrored in RTL."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "kbd",
       "name": "Kbd",
@@ -925,6 +946,19 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "resizable-panels",
+      "name": "Resizable Panels",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Arrow keys: Move the focused separator by 5%. Mirrored in RTL.",
+        "Home / End: To the smallest or largest size.",
+        "Enter: Back to the default split."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "saved-views",
       "name": "Saved Views",
@@ -1028,6 +1062,17 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "sortable",
+      "name": "Sortable",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [
+        "Alt+ArrowUp / Alt+ArrowDown: On a handle: moves the item; focus stays on its handle."
+      ],
+      "screenReader": []
+    },
     {
       "slug": "sparkline",
       "name": "Sparkline",
@@ -1067,6 +1112,15 @@
       "keyboard": [],
       "screenReader": []
     },
+    {
+      "slug": "stepper",
+      "name": "Stepper",
+      "package": "@nexub/react",
+      "automated": "pass",
+      "exceptions": [],
+      "keyboard": [],
+      "screenReader": []
+    },
     {
       "slug": "streaming-text",
       "name": "Streaming Text",

package/dist/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Status on the start side, e.g. "Unsaved changes". Announced politely. */
+    message?: React.ReactNode;
+    /** Names the region. @default the message when it's a string */
+    'aria-label'?: string;
+}
+/**
+ * Save / cancel that stay in view at the bottom of a long form or settings
+ * page. Put it last inside the scrolling area.
+ */
+export declare const ActionBar: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ActionBar/ActionBar.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { floatingSurface } from "../../utils/surface.js";
+const ActionBar = React.forwardRef(function ActionBar2({ message, className, children, "aria-label": ariaLabel, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-label": ariaLabel ?? (typeof message === "string" ? message : void 0),
+      className: cn(
+        floatingSurface,
+        "sticky bottom-4 z-10 flex flex-wrap items-center gap-3 px-4 py-2",
+        className
+      ),
+      ...props,
+      children: [
+        message !== void 0 && /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "me-auto text-label-lg text-[var(--color-on-surface)]", children: message }),
+        /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-2", message === void 0 && "ms-auto"), children })
+      ]
+    }
+  );
+});
+export {
+  ActionBar
+};

package/dist/components/ActionBar/index.d.ts

@@ -0,0 +1,2 @@
+export { ActionBar } from './ActionBar.js';
+export type { ActionBarProps } from './ActionBar.js';

package/dist/components/ActionBar/index.js

@@ -0,0 +1,4 @@
+import { ActionBar } from "./ActionBar.js";
+export {
+  ActionBar
+};

package/dist/components/DataTable/DataTable.d.ts

@@ -84,5 +84,12 @@ export interface DataTableProps<TData> extends React.HTMLAttributes<HTMLDivEleme
     expanded?: ExpandedState;
     defaultExpanded?: ExpandedState;
     onExpandedChange?: (expanded: ExpandedState) => void;
+    /**
+     * Lets people reorder rows: a handle column (drag, or Alt+ArrowUp/Down on the
+     * handle). Called with the reordered data. Hidden while a column is sorted.
+     */
+    onRowOrderChange?: (data: TData[]) => void;
+    /** Names a row in "Move ‹label›" and the move announcements. @default its position */
+    getRowLabel?: (row: TData) => string;
 }
-export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;
+export declare function DataTable<TData>({ columns, data, enableSorting, enableRowSelection, selectionColumn, rowSelection: rowSelectionProp, onRowSelectionChange, getRowId, bulkActions, density: densityProp, defaultDensity, onDensityChange, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, viewOptions, toolbar, enableColumnResizing, columnSizing: columnSizingProp, onColumnSizingChange, enableColumnReordering, columnOrder: columnOrderProp, onColumnOrderChange, columnPinning: columnPinningProp, onColumnPinningChange, maxHeight, grid, rowWindow, pagination, getSubRows, expanded: expandedProp, defaultExpanded, onExpandedChange, onRowOrderChange, getRowLabel, caption, captionHidden, className, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: DataTableProps<TData>): React.JSX.Element;

package/dist/components/DataTable/DataTable.js

@@ -22,6 +22,7 @@ import { Checkbox } from "../Checkbox/Checkbox.js";
 import { Button } from "../Button/Button.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import { createGridNavigation } from "./gridNavigation.js";
+import { useReorder } from "../Sortable/reorder.js";
 const alignText = {
   start: "text-start",
   end: "text-end",
@@ -167,6 +168,8 @@ function DataTable({
   expanded: expandedProp,
   defaultExpanded,
   onExpandedChange,
+  onRowOrderChange,
+  getRowLabel,
   caption,
   captionHidden = false,
   className,
@@ -221,12 +224,34 @@ function DataTable({
     pageSize: pagination?.pageSize ?? 20
   });
   const withSelectColumn = enableRowSelection && selectionColumn;
+  const reorderRows = Boolean(onRowOrderChange) && sorting.length === 0;
+  const rowReorder = useReorder({
+    lists: [data],
+    getId: (r) => getRowId ? getRowId(r, data.indexOf(r)) : String(data.indexOf(r)),
+    getLabel: (r) => getRowLabel?.(r) ?? String(data.indexOf(r) + 1),
+    onMove: (next) => onRowOrderChange?.(next[0])
+  });
   const columnPinning = React.useMemo(
     () => withSelectColumn && pinningIn.left?.length && !pinningIn.left.includes("__select") ? { ...pinningIn, left: ["__select", ...pinningIn.left] } : pinningIn,
     [withSelectColumn, pinningIn]
   );
+  const withRowHandles = React.useCallback(
+    (cols) => reorderRows ? [
+      {
+        id: "__drag",
+        enableSorting: false,
+        enableHiding: false,
+        header: () => null,
+        cell: ({ row }) => row.depth === 0 ? rowReorder.handle([0, row.index]) : null
+      },
+      ...cols
+    ] : cols,
+    // rowReorder changes every render; the handle reads fresh data through it.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [reorderRows, data]
+  );
   const allColumns = React.useMemo(
-    () => withSelectColumn ? [
+    () => withRowHandles(withSelectColumn ? [
       {
         id: "__select",
         enableSorting: false,
@@ -250,8 +275,8 @@ function DataTable({
         )
       },
       ...columns
-    ] : columns,
-    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow]
+    ] : columns),
+    [withSelectColumn, columns, messages.selectAllOnPage, messages.selectRow, withRowHandles]
   );
   const tableState = React.useMemo(
     () => ({
@@ -396,6 +421,7 @@ function DataTable({
       /* @__PURE__ */ jsx(Button, { variant: "link", size: "sm", onClick: () => table.toggleAllRowsSelected(true), children: messages.selectAllRows(fmt(totalRows)) })
     ] }) }),
     /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: announcement }),
+    reorderRows && rowReorder.live,
     /* @__PURE__ */ jsxs(
       TableRoot,
       {
@@ -421,7 +447,7 @@ function DataTable({
                 className: cn(
                   alignText[align],
                   compact && "h-8",
-                  col.id === "__select" && "w-10",
+                  (col.id === "__select" || col.id === "__drag") && "w-10",
                   // Anchors the resize handle; sticky (below) wins when set and anchors it too.
                   (enableColumnResizing || reorderable) && "relative",
                   maxHeight != null && "sticky top-0 z-[2] bg-[var(--color-surface)]",
@@ -513,6 +539,7 @@ function DataTable({
                   "data-index": i,
                   "aria-rowindex": rowWin.virtual ? i + 2 : void 0,
                   "data-state": enableRowSelection && row.getIsSelected() ? "selected" : void 0,
+                  ...reorderRows && row.depth === 0 ? rowReorder.itemProps([0, row.index]) : {},
                   children: row.getVisibleCells().map((cell, _i, cells) => /* @__PURE__ */ jsx(
                     TableCell,
                     {

package/dist/components/Kanban/Kanban.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface KanbanColumn<T> {
+    id: string;
+    title: string;
+    items: T[];
+}
+export interface KanbanProps<T> {
+    columns: KanbanColumn<T>[];
+    getId: (item: T) => string;
+    getLabel: (item: T) => string;
+    /** Called with the columns after a move; store them to apply it. */
+    onChange: (columns: KanbanColumn<T>[]) => void;
+    renderCard: (item: T) => React.ReactNode;
+    className?: string;
+}
+/**
+ * Columns of cards people can move: drag a card, or focus its handle and press
+ * Alt+Arrow keys (up/down within a column, left/right across columns).
+ */
+export declare function Kanban<T>({ columns, getId, getLabel, onChange, renderCard, className }: KanbanProps<T>): React.JSX.Element;

package/dist/components/Kanban/Kanban.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useReorder } from "../Sortable/reorder.js";
+function Kanban({ columns, getId, getLabel, onChange, renderCard, className }) {
+  const baseId = React.useId();
+  const { itemProps, listProps, handle, live } = useReorder({
+    lists: columns.map((c) => c.items),
+    getId,
+    getLabel,
+    listLabels: columns.map((c) => c.title),
+    onMove: (next) => onChange(columns.map((c, i) => ({ ...c, items: next[i] })))
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex gap-4 overflow-x-auto pb-2", className), children: [
+    columns.map((column, c) => {
+      const headingId = `${baseId}-${c}`;
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          "aria-labelledby": headingId,
+          className: "flex w-72 shrink-0 flex-col gap-2 rounded-shape-container bg-[var(--color-surface-container-low)] p-3",
+          children: [
+            /* @__PURE__ */ jsxs("h3", { id: headingId, className: "flex items-center justify-between text-title-sm font-semibold text-[var(--color-on-surface)]", children: [
+              column.title,
+              /* @__PURE__ */ jsx("span", { className: "text-label-md font-normal tabular-nums text-[var(--color-on-surface-muted)]", children: column.items.length })
+            ] }),
+            /* @__PURE__ */ jsx("ul", { ...listProps(c), className: "m-0 flex min-h-16 list-none flex-col gap-2 p-0", children: column.items.map((item, i) => /* @__PURE__ */ jsxs(
+              "li",
+              {
+                ...itemProps([c, i]),
+                className: "flex items-start gap-1 rounded-shape-control bg-[var(--color-surface)] p-2 text-body-md shadow-elevation-1",
+                children: [
+                  handle([c, i]),
+                  /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 pt-0.5", children: renderCard(item) })
+                ]
+              },
+              getId(item)
+            )) })
+          ]
+        },
+        column.id
+      );
+    }),
+    live
+  ] });
+}
+export {
+  Kanban
+};

package/dist/components/Kanban/index.d.ts

@@ -0,0 +1,2 @@
+export { Kanban } from './Kanban.js';
+export type { KanbanProps, KanbanColumn } from './Kanban.js';

package/dist/components/Kanban/index.js

@@ -0,0 +1,4 @@
+import { Kanban } from "./Kanban.js";
+export {
+  Kanban
+};

package/dist/components/ResizablePanels/ResizablePanels.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface ResizablePanelsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Side by side (`horizontal`) or stacked (`vertical`). @default 'horizontal' */
+    direction?: 'horizontal' | 'vertical';
+    /** One percentage per panel, adding up to 100. Persist them yourself. */
+    sizes?: number[];
+    defaultSizes?: number[];
+    onSizesChange?: (sizes: number[]) => void;
+    /** Smallest size per panel, in percent. @default 10 each */
+    minSizes?: number[];
+    /** Names each separator: "Resize panels" by default. */
+    handleLabel?: string;
+    /** The panels; a separator goes between each pair. */
+    children: React.ReactNode;
+}
+/**
+ * Panels with draggable separators (ARIA window splitter). Arrow keys move a
+ * focused separator by 5%, Home/End to its limits, and Enter resets the pair.
+ */
+export declare function ResizablePanels({ direction, sizes: sizesProp, defaultSizes, onSizesChange, minSizes, handleLabel, className, children, ...props }: ResizablePanelsProps): React.JSX.Element;

package/dist/components/ResizablePanels/ResizablePanels.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useControllableState } from "../../hooks/useControllableState.js";
+import { useLocale, useNexubMessages } from "../NexubProvider/NexubProvider.js";
+const STEP = 5;
+function ResizablePanels({
+  direction = "horizontal",
+  sizes: sizesProp,
+  defaultSizes,
+  onSizesChange,
+  minSizes,
+  handleLabel,
+  className,
+  children,
+  ...props
+}) {
+  const t = useNexubMessages();
+  const { dir } = useLocale();
+  const panels = React.Children.toArray(children);
+  const n = panels.length;
+  const even = Array.from({ length: n }, () => 100 / n);
+  const initial = defaultSizes ?? even;
+  const [sizes = even, setSizes] = useControllableState({
+    value: sizesProp,
+    defaultValue: initial,
+    onChange: onSizesChange
+  });
+  const rootRef = React.useRef(null);
+  const baseId = React.useId();
+  const horizontal = direction === "horizontal";
+  const min = (i) => minSizes?.[i] ?? 10;
+  const resize = (current, i, to) => {
+    const pair = current[i] + current[i + 1];
+    const a = Math.min(pair - min(i + 1), Math.max(min(i), to));
+    const next = [...current];
+    next[i] = Math.round(a * 100) / 100;
+    next[i + 1] = Math.round((pair - a) * 100) / 100;
+    setSizes(next);
+  };
+  const startDrag = (i, e) => {
+    const root = rootRef.current;
+    if (!root) return;
+    e.preventDefault();
+    const rect = root.getBoundingClientRect();
+    const total = horizontal ? rect.width : rect.height;
+    const origin = horizontal ? e.clientX : e.clientY;
+    const start = [...sizes];
+    const flip = horizontal && dir === "rtl" ? -1 : 1;
+    const onMove = (ev) => {
+      const pos = horizontal ? ev.clientX : ev.clientY;
+      resize(start, i, start[i] + (pos - origin) * flip / total * 100);
+    };
+    const onUp = () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+    };
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+  };
+  const onKeyDown = (i, e) => {
+    const fwd = horizontal ? dir === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+    const back = horizontal ? dir === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+    const pair = sizes[i] + sizes[i + 1];
+    let to;
+    if (e.key === fwd) to = sizes[i] + STEP;
+    else if (e.key === back) to = sizes[i] - STEP;
+    else if (e.key === "Home") to = min(i);
+    else if (e.key === "End") to = pair - min(i + 1);
+    else if (e.key === "Enter") to = initial[i] / (initial[i] + initial[i + 1]) * pair;
+    if (to === void 0) return;
+    e.preventDefault();
+    resize(sizes, i, to);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: rootRef,
+      className: cn("flex min-h-0 min-w-0", horizontal ? "flex-row" : "flex-col", className),
+      ...props,
+      children: panels.map((panel, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            id: `${baseId}-${i}`,
+            ref: (el) => {
+              if (el) el.style.flex = `${sizes[i] ?? 0} 1 0px`;
+            },
+            className: "min-h-0 min-w-0 overflow-auto",
+            children: panel
+          }
+        ),
+        i < n - 1 && /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "separator",
+            tabIndex: 0,
+            "aria-label": handleLabel ?? t.resizePanels,
+            "aria-controls": `${baseId}-${i}`,
+            "aria-orientation": horizontal ? "vertical" : "horizontal",
+            "aria-valuenow": Math.round(sizes[i]),
+            "aria-valuemin": min(i),
+            "aria-valuemax": Math.round(sizes[i] + sizes[i + 1] - min(i + 1)),
+            onPointerDown: (e) => startDrag(i, e),
+            onKeyDown: (e) => onKeyDown(i, e),
+            className: cn(
+              "relative shrink-0 touch-none bg-[var(--color-outline-variant)] outline-none",
+              // A wider invisible hit area around the 1px line.
+              horizontal ? "w-px cursor-col-resize before:absolute before:-inset-x-1.5 before:inset-y-0" : "h-px cursor-row-resize before:absolute before:inset-x-0 before:-inset-y-1.5",
+              "hover:bg-[var(--color-primary)] focus-visible:bg-[var(--color-primary)] focus-visible:shadow-[0_0_0_1px_var(--color-primary)]"
+            )
+          }
+        )
+      ] }, i))
+    }
+  );
+}
+export {
+  ResizablePanels
+};

package/dist/components/ResizablePanels/index.d.ts

@@ -0,0 +1,2 @@
+export { ResizablePanels } from './ResizablePanels.js';
+export type { ResizablePanelsProps } from './ResizablePanels.js';

package/dist/components/ResizablePanels/index.js

@@ -0,0 +1,4 @@
+import { ResizablePanels } from "./ResizablePanels.js";
+export {
+  ResizablePanels
+};

package/dist/components/Sortable/Sortable.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+export interface SortableProps<T> {
+    items: T[];
+    getId: (item: T) => string;
+    /** Names the item in "Move ‹label›" and the move announcements. */
+    getLabel: (item: T) => string;
+    /** Called with the reordered items; store them to apply the move. */
+    onReorder: (items: T[]) => void;
+    /** The item's content; the drag handle sits before it. */
+    children: (item: T) => React.ReactNode;
+    'aria-label'?: string;
+    className?: string;
+}
+/**
+ * A list people can reorder: drag an item, or focus its handle and press
+ * Alt+ArrowUp / Alt+ArrowDown. Each move is announced.
+ */
+export declare function Sortable<T>({ items, getId, getLabel, onReorder, children, className, ...aria }: SortableProps<T>): React.JSX.Element;

package/dist/components/Sortable/Sortable.js

@@ -0,0 +1,31 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../utils/cn.js";
+import { useReorder } from "./reorder.js";
+function Sortable({ items, getId, getLabel, onReorder, children, className, ...aria }) {
+  const { itemProps, listProps, handle, live } = useReorder({
+    lists: [items],
+    getId,
+    getLabel,
+    onMove: (next) => onReorder(next[0])
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("ul", { ...aria, ...listProps(0), className: cn("m-0 flex list-none flex-col gap-1 p-0", className), children: items.map((item, i) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        ...itemProps([0, i]),
+        className: "flex items-center gap-2 rounded-shape-control border border-[var(--color-outline-variant)] bg-[var(--color-surface)] py-1.5 pe-3 ps-1.5 text-body-md",
+        children: [
+          handle([0, i]),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children: children(item) })
+        ]
+      },
+      getId(item)
+    )) }),
+    live
+  ] });
+}
+export {
+  Sortable
+};

package/dist/components/Sortable/index.d.ts

@@ -0,0 +1,2 @@
+export { Sortable } from './Sortable.js';
+export type { SortableProps } from './Sortable.js';

package/dist/components/Sortable/index.js

@@ -0,0 +1,4 @@
+import { Sortable } from "./Sortable.js";
+export {
+  Sortable
+};

package/dist/components/Sortable/reorder.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+/** Internal: lists of items, moved by drag (native) or Alt+Arrow on a handle. */
+export type Pos = [list: number, index: number];
+export declare function moveItem<T>(lists: T[][], [fc, fi]: Pos, [tc, ti]: Pos): T[][];
+interface ReorderOptions<T> {
+    lists: T[][];
+    getId: (item: T) => string;
+    getLabel: (item: T) => string;
+    /** List names, for moves across lists. */
+    listLabels?: string[];
+    onMove: (next: T[][]) => void;
+}
+/** Shared engine: drag state, keyboard moves, focus after a move, announcements. */
+export declare function useReorder<T>({ lists, getId, getLabel, listLabels, onMove }: ReorderOptions<T>): {
+    itemProps: (pos: Pos) => {
+        draggable: boolean;
+        onDragStart: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+        onDragEnd: () => void;
+    };
+    listProps: (list: number) => {
+        onDragOver: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => void;
+    };
+    handle: (pos: Pos, className?: string) => React.JSX.Element;
+    live: React.JSX.Element;
+};
+export {};