@dreamtree-org/twreact-ui 2.0.4 → 2.0.5

package/dist/components/charts/ScatterTooltip.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Tooltip for one ScatterChart point: the entity (`index`) or series name as the
+ * heading, then the series (when both are set) and the formatted x and y values.
+ */
+export default function ScatterTooltipContent({ active, payload, index, category, colorFor, x, y }: {
+    active: any;
+    payload: any;
+    index: any;
+    category: any;
+    colorFor?: {} | undefined;
+    x: any;
+    y: any;
+}): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=ScatterTooltip.d.ts.map

package/dist/components/charts/ScatterTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScatterTooltip.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ScatterTooltip.jsx"],"names":[],"mappings":"AAIA;;;GAGG;AACH;;;;;;;;mDA4BC"}

package/dist/components/charts/scatterData.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Axis domain. recharts draws a zero-width scale for a single distinct value, so
+ * pad around it; otherwise let recharts pick nice bounds.
+ */
+export function scatterDomain(values: any): string[] | number[];
+/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
+export function groupScatter(data: any, { x, y, category }: {
+    x: any;
+    y: any;
+    category: any;
+}): {
+    rows: any[];
+    names: any[];
+    groups: Map<any, any>;
+};
+export function textOf(v: any): string;
+//# sourceMappingURL=scatterData.d.ts.map

package/dist/components/charts/scatterData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scatterData.d.ts","sourceRoot":"","sources":["../../../src/components/charts/scatterData.js"],"names":[],"mappings":"AAKA;;;GAGG;AACH,gEAOC;AAED,+FAA+F;AAC/F;;;;;;;;EASC;AAzBM,uCAAkD"}

package/dist/components/navigation/Sidebar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAqBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAglBG;kBA1wBI,OAAO"}
+{"version":3,"file":"Sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/Sidebar.jsx"],"names":[],"mappings":"AAoBA,oCAAqC,oBAAoB,CAAC;;AAoJ1D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,iFAglBG;kBAzwBI,OAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AAqBA,kFAsHG;kBA3I0G,OAAO"}
+{"version":3,"file":"Sortable.d.ts","sourceRoot":"","sources":["../../../src/components/utility/Sortable.jsx"],"names":[],"mappings":";AASA,kFAmIG;kBA5I0G,OAAO"}

package/dist/components/utility/SortableGroup.d.ts

@@ -0,0 +1,15 @@
+/** Where an item from another list would land; styled by whether `canDrop` allows it. */
+export function SortablePlaceholder({ as: Tag, allowed }: {
+    as: any;
+    allowed: any;
+}): import("react/jsx-runtime").JSX.Element;
+export default SortableGroup;
+/**
+ * Connects several `<Sortable id="…">` lists so items can move between them
+ * (pointer drag, or the cross-axis arrow keys while an item is picked up).
+ * `canDrop(item, target, from)` is asked before a target is shown as droppable;
+ * a refused target is marked as such and dropping there does nothing.
+ */
+declare const SortableGroup: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";
+//# sourceMappingURL=SortableGroup.d.ts.map

package/dist/components/utility/SortableGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SortableGroup.d.ts","sourceRoot":"","sources":["../../../src/components/utility/SortableGroup.jsx"],"names":[],"mappings":"AAuBA,yFAAyF;AACzF;;;4CAaC;;AAjCD;;;;;GAKG;AACH,uFASG;kBAnB+B,OAAO"}

package/dist/esm/charts/index.js

@@ -3,3 +3,4 @@ export { default as BarChart } from '../components/charts/BarChart.js';
 export { default as AreaChart } from '../components/charts/AreaChart.js';
 export { default as DonutChart } from '../components/charts/DonutChart.js';
 export { default as Sparkline } from '../components/charts/Sparkline.js';
+export { default as ScatterChart } from '../components/charts/ScatterChart.js';

package/dist/esm/components/charts/ChartFrame.js

@@ -90,11 +90,11 @@ function ChartDataTable(_ref3) {
       children: caption
     }), jsx("thead", {
       children: jsx("tr", {
-        children: columns.map(function (c) {
+        children: columns.map(function (c, i) {
           return jsx("th", {
             scope: "col",
             children: c.label
-          }, c.key);
+          }, "".concat(c.key, "-").concat(i));
         })
       })
     }), jsx("tbody", {
@@ -104,9 +104,9 @@ function ChartDataTable(_ref3) {
             return i === 0 ? jsx("th", {
               scope: "row",
               children: c.format(row[c.key])
-            }, c.key) : jsx("td", {
+            }, "".concat(c.key, "-").concat(i)) : jsx("td", {
               children: c.format(row[c.key])
-            }, c.key);
+            }, "".concat(c.key, "-").concat(i));
           })
         }, r);
       })
@@ -174,4 +174,4 @@ var ChartFrame = /*#__PURE__*/React.forwardRef(function ChartFrame(_ref4, ref) {
   }));
 });
 
-export { ChartFrame, ChartLegend, ChartTooltipContent };
+export { ChartFrame, ChartLegend, ChartTooltipContent, swatch };

package/dist/esm/components/charts/ScatterChart.js

@@ -0,0 +1,204 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React from 'react';
+import { ResponsiveContainer, ScatterChart as ScatterChart$1, CartesianGrid, XAxis, YAxis, Tooltip, Scatter } from 'recharts';
+import { ChartFrame } from './ChartFrame.js';
+import ScatterTooltipContent from './ScatterTooltip.js';
+import { useChartTheme, useChartId, defaultValueFormatter } from './chartTheme.js';
+import { useElementWidth, tickGapFor, yAxisWidthFor } from './useChartLayout.js';
+import { groupScatter, scatterDomain, textOf } from './scatterData.js';
+import { useReducedMotion } from '../../hooks/useReducedMotion.js';
+
+var _excluded = ["data", "x", "y", "index", "category", "colors", "valueFormatter", "xAxisFormatter", "xAxisLabel", "yAxisLabel", "height", "aspectRatio", "showLegend", "showTooltip", "showXAxis", "showYAxis", "showGrid", "yAxisWidth", "animate", "title", "description", "emptyState", "accessibleTable", "className"];
+var ScatterChart = /*#__PURE__*/React.forwardRef(function ScatterChart(_ref, ref) {
+  var data = _ref.data,
+    x = _ref.x,
+    y = _ref.y,
+    index = _ref.index,
+    category = _ref.category,
+    colors = _ref.colors,
+    _ref$valueFormatter = _ref.valueFormatter,
+    valueFormatter = _ref$valueFormatter === void 0 ? defaultValueFormatter : _ref$valueFormatter,
+    _ref$xAxisFormatter = _ref.xAxisFormatter,
+    xAxisFormatter = _ref$xAxisFormatter === void 0 ? defaultValueFormatter : _ref$xAxisFormatter,
+    xAxisLabel = _ref.xAxisLabel,
+    yAxisLabel = _ref.yAxisLabel,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 300 : _ref$height,
+    aspectRatio = _ref.aspectRatio,
+    _ref$showLegend = _ref.showLegend,
+    showLegend = _ref$showLegend === void 0 ? true : _ref$showLegend,
+    _ref$showTooltip = _ref.showTooltip,
+    showTooltip = _ref$showTooltip === void 0 ? true : _ref$showTooltip,
+    _ref$showXAxis = _ref.showXAxis,
+    showXAxis = _ref$showXAxis === void 0 ? true : _ref$showXAxis,
+    _ref$showYAxis = _ref.showYAxis,
+    showYAxis = _ref$showYAxis === void 0 ? true : _ref$showYAxis,
+    _ref$showGrid = _ref.showGrid,
+    showGrid = _ref$showGrid === void 0 ? true : _ref$showGrid,
+    yAxisWidth = _ref.yAxisWidth,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    title = _ref.title,
+    description = _ref.description,
+    emptyState = _ref.emptyState,
+    _ref$accessibleTable = _ref.accessibleTable,
+    accessibleTable = _ref$accessibleTable === void 0 ? true : _ref$accessibleTable,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _groupScatter = groupScatter(data, {
+      x: x,
+      y: y,
+      category: category
+    }),
+    rows = _groupScatter.rows,
+    names = _groupScatter.names,
+    groups = _groupScatter.groups;
+  var _useChartTheme = useChartTheme(names, colors),
+    chrome = _useChartTheme.chrome,
+    series = _useChartTheme.series;
+  var reducedMotion = useReducedMotion();
+  var chartId = useChartId();
+  var _useElementWidth = useElementWidth(),
+    _useElementWidth2 = _slicedToArray(_useElementWidth, 2),
+    measureRef = _useElementWidth2[0],
+    width = _useElementWidth2[1];
+  var tick = {
+    fill: chrome.axis,
+    fontSize: 12
+  };
+  var axisTitle = function axisTitle(value, angle) {
+    return value ? {
+      value: value,
+      angle: angle,
+      position: angle ? "insideLeft" : "insideBottom",
+      offset: angle ? 10 : -4,
+      fill: chrome.axis,
+      fontSize: 12
+    } : undefined;
+  };
+  var xLabel = xAxisLabel || x;
+  var yLabel = yAxisLabel || y;
+  return jsx(ChartFrame, _objectSpread2(_objectSpread2({
+    ref: ref,
+    className: className,
+    title: title,
+    description: description,
+    defaultTitle: "Scatter chart",
+    data: rows,
+    height: height,
+    aspectRatio: aspectRatio,
+    emptyState: emptyState,
+    accessibleTable: accessibleTable,
+    legend: showLegend && category ? names.map(function (name, i) {
+      return {
+        name: name,
+        color: series[i]
+      };
+    }) : null,
+    tableColumns: [].concat(_toConsumableArray(index ? [{
+      key: index,
+      label: index,
+      format: textOf
+    }] : []), _toConsumableArray(category && category !== index ? [{
+      key: category,
+      label: category,
+      format: textOf
+    }] : []), [{
+      key: x,
+      label: xLabel,
+      format: xAxisFormatter
+    }, {
+      key: y,
+      label: yLabel,
+      format: valueFormatter
+    }])
+  }, rest), {}, {
+    children: jsx("div", {
+      className: "h-full w-full",
+      ref: measureRef,
+      children: jsx(ResponsiveContainer, {
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        children: jsxs(ScatterChart$1, {
+          id: chartId,
+          margin: {
+            top: 8,
+            right: 8,
+            bottom: xAxisLabel ? 16 : 0,
+            left: 0
+          },
+          accessibilityLayer: false,
+          children: [showGrid && jsx(CartesianGrid, {
+            stroke: chrome.grid,
+            strokeDasharray: "3 3"
+          }), jsx(XAxis, {
+            type: "number",
+            dataKey: x,
+            name: xLabel,
+            domain: scatterDomain(rows.map(function (row) {
+              return row[x];
+            })),
+            tick: tick,
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: xAxisFormatter,
+            minTickGap: tickGapFor(width),
+            hide: !showXAxis,
+            label: axisTitle(xAxisLabel, 0)
+          }), jsx(YAxis, {
+            type: "number",
+            dataKey: y,
+            name: yLabel,
+            domain: scatterDomain(rows.map(function (row) {
+              return row[y];
+            })),
+            tick: tick,
+            tickLine: false,
+            axisLine: false,
+            tickFormatter: valueFormatter,
+            width: yAxisWidth !== null && yAxisWidth !== void 0 ? yAxisWidth : yAxisWidthFor(width),
+            hide: !showYAxis,
+            label: axisTitle(yAxisLabel, -90)
+          }), showTooltip && jsx(Tooltip, {
+            cursor: {
+              stroke: chrome.grid,
+              strokeDasharray: "3 3"
+            },
+            isAnimationActive: false,
+            content: jsx(ScatterTooltipContent, {
+              index: index,
+              category: category,
+              colorFor: Object.fromEntries(names.map(function (name, i) {
+                return [name, series[i]];
+              })),
+              x: {
+                key: x,
+                label: xLabel,
+                format: xAxisFormatter
+              },
+              y: {
+                key: y,
+                label: yLabel,
+                format: valueFormatter
+              }
+            })
+          }), names.map(function (name, i) {
+            return jsx(Scatter, {
+              id: "".concat(chartId, "-").concat(i),
+              name: name,
+              data: groups.get(name),
+              fill: series[i],
+              isAnimationActive: animate && !reducedMotion
+            }, name);
+          })]
+        })
+      })
+    })
+  }));
+});
+ScatterChart.displayName = "ScatterChart";
+
+export { ScatterChart as default };

package/dist/esm/components/charts/ScatterTooltip.js

@@ -0,0 +1,61 @@
+'use client';
+import { toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import 'react';
+import { swatch } from './ChartFrame.js';
+import { textOf } from './scatterData.js';
+
+/**
+ * Tooltip for one ScatterChart point: the entity (`index`) or series name as the
+ * heading, then the series (when both are set) and the formatted x and y values.
+ */
+function ScatterTooltipContent(_ref) {
+  var active = _ref.active,
+    payload = _ref.payload,
+    index = _ref.index,
+    category = _ref.category,
+    _ref$colorFor = _ref.colorFor,
+    colorFor = _ref$colorFor === void 0 ? {} : _ref$colorFor,
+    x = _ref.x,
+    y = _ref.y;
+  var row = active && payload && payload.length ? payload[0].payload : null;
+  if (!row) return null;
+  var seriesName = category ? textOf(row[category]) : null;
+  var heading = index ? textOf(row[index]) : seriesName;
+  var lines = [].concat(_toConsumableArray(index && seriesName ? [[category, seriesName]] : []), [[x.label, x.format(row[x.key])], [y.label, y.format(row[y.key])]]);
+  return jsxs("div", {
+    className: "rounded-md border border-line bg-surface px-3 py-2 text-xs text-foreground shadow-md",
+    "data-chart-tooltip": "",
+    children: [heading && jsxs("p", {
+      className: "mb-1 flex items-center gap-2 font-medium",
+      children: [seriesName && jsx("span", {
+        className: swatch("h-2 w-2"),
+        style: {
+          "--dt-chart-color": colorFor[seriesName]
+        },
+        "aria-hidden": "true"
+      }), jsx("span", {
+        children: heading
+      })]
+    }), jsx("ul", {
+      className: "space-y-0.5",
+      children: lines.map(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 2),
+          name = _ref3[0],
+          value = _ref3[1];
+        return jsxs("li", {
+          className: "flex items-center gap-2",
+          children: [jsx("span", {
+            className: "text-muted",
+            children: name
+          }), jsx("span", {
+            className: "ml-auto pl-3 font-medium tabular-nums",
+            children: value
+          })]
+        }, name);
+      })
+    })]
+  });
+}
+
+export { ScatterTooltipContent as default };

package/dist/esm/components/charts/scatterData.js

@@ -0,0 +1,43 @@
+import { toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+
+// Internal to the charts entry point: data shaping for ScatterChart.
+var isFiniteNumber = function isFiniteNumber(v) {
+  return typeof v === "number" && Number.isFinite(v);
+};
+var textOf = function textOf(v) {
+  return v == null ? "" : String(v);
+};
+/**
+ * Axis domain. recharts draws a zero-width scale for a single distinct value, so
+ * pad around it; otherwise let recharts pick nice bounds.
+ */
+function scatterDomain(values) {
+  if (!values.length) return ["auto", "auto"];
+  var min = Math.min.apply(Math, _toConsumableArray(values));
+  var max = Math.max.apply(Math, _toConsumableArray(values));
+  if (min !== max) return ["auto", "auto"];
+  var pad = Math.abs(min) / 2 || 1;
+  return [min - pad, max + pad];
+}
+/** Rows with a numeric x and y, split into series by the `category` key (first-seen order). */
+function groupScatter(data, _ref) {
+  var x = _ref.x,
+    y = _ref.y,
+    category = _ref.category;
+  var rows = (Array.isArray(data) ? data : []).filter(function (row) {
+    return isFiniteNumber(row === null || row === void 0 ? void 0 : row[x]) && isFiniteNumber(row === null || row === void 0 ? void 0 : row[y]);
+  });
+  var groups = new Map();
+  rows.forEach(function (row) {
+    var name = category ? textOf(row[category]) : y;
+    if (!groups.has(name)) groups.set(name, []);
+    groups.get(name).push(row);
+  });
+  return {
+    rows: rows,
+    names: _toConsumableArray(groups.keys()),
+    groups: groups
+  };
+}
+
+export { groupScatter, scatterDomain, textOf };

package/dist/esm/components/utility/Sortable.js

@@ -3,47 +3,35 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { cn } from '../../utils/cn.js';
-import { DEFAULT_SORTABLE_MESSAGES, useSortableKeyboard, useSortablePointer } from '../../hooks/useSortable.js';
+import { setRefs } from '../../utils/position.js';
+import { DEFAULT_SORTABLE_MESSAGES, useSortableKeyboard, useSortablePointer, defaultGetKey, arrayMove, defaultGetItemLabel } from '../../hooks/useSortable.js';
+import { useSortableGroupMember } from '../../hooks/useSortableGroup.js';
+import { SortablePlaceholder } from './SortableGroup.js';
 
 var _excluded = ["items", "onReorder", "renderItem", "getKey", "getItemLabel", "disabled", "handle", "orientation", "as", "itemClassName", "messages", "className"];
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-var defaultGetKey = function defaultGetKey(item, index) {
-  var _ref, _item$id;
-  return (_ref = (_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : item === null || item === void 0 ? void 0 : item.key) !== null && _ref !== void 0 ? _ref : index;
-};
-var defaultGetItemLabel = function defaultGetItemLabel(item, index) {
-  var _ref2, _ref3, _item$label;
-  return typeof item === "string" || typeof item === "number" ? String(item) : (_ref2 = (_ref3 = (_item$label = item === null || item === void 0 ? void 0 : item.label) !== null && _item$label !== void 0 ? _item$label : item === null || item === void 0 ? void 0 : item.title) !== null && _ref3 !== void 0 ? _ref3 : item === null || item === void 0 ? void 0 : item.name) !== null && _ref2 !== void 0 ? _ref2 : "Item ".concat(index + 1);
-};
-function arrayMove(list, from, to) {
-  var next = list.slice();
-  var _next$splice = next.splice(from, 1),
-    _next$splice2 = _slicedToArray(_next$splice, 1),
-    moved = _next$splice2[0];
-  next.splice(to, 0, moved);
-  return next;
-}
-var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var _ref4$items = _ref4.items,
-    items = _ref4$items === void 0 ? [] : _ref4$items,
-    onReorder = _ref4.onReorder,
-    renderItem = _ref4.renderItem,
-    _ref4$getKey = _ref4.getKey,
-    getKey = _ref4$getKey === void 0 ? defaultGetKey : _ref4$getKey,
-    _ref4$getItemLabel = _ref4.getItemLabel,
-    getItemLabel = _ref4$getItemLabel === void 0 ? defaultGetItemLabel : _ref4$getItemLabel,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-    _ref4$handle = _ref4.handle,
-    handle = _ref4$handle === void 0 ? false : _ref4$handle,
-    _ref4$orientation = _ref4.orientation,
-    orientation = _ref4$orientation === void 0 ? "vertical" : _ref4$orientation,
-    _ref4$as = _ref4.as,
-    List = _ref4$as === void 0 ? "ul" : _ref4$as,
-    itemClassName = _ref4.itemClassName,
-    messages = _ref4.messages,
-    className = _ref4.className,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var Sortable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _rest$ariaLabel;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    onReorder = _ref.onReorder,
+    renderItem = _ref.renderItem,
+    _ref$getKey = _ref.getKey,
+    getKey = _ref$getKey === void 0 ? defaultGetKey : _ref$getKey,
+    _ref$getItemLabel = _ref.getItemLabel,
+    getItemLabel = _ref$getItemLabel === void 0 ? defaultGetItemLabel : _ref$getItemLabel,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$handle = _ref.handle,
+    handle = _ref$handle === void 0 ? false : _ref$handle,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
+    _ref$as = _ref.as,
+    List = _ref$as === void 0 ? "ul" : _ref$as,
+    itemClassName = _ref.itemClassName,
+    messages = _ref.messages,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var instructionsId = "sortable-instructions-".concat(useId());
   var text = useMemo(function () {
     return _objectSpread2(_objectSpread2({}, DEFAULT_SORTABLE_MESSAGES), messages);
@@ -58,6 +46,10 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     announcement = _useState4[0],
     setAnnouncement = _useState4[1];
   var nodes = useRef(new Map());
+  var listRef = useRef(null);
+  var setListRef = useCallback(function (node) {
+    return setRefs(node, listRef, ref);
+  }, [ref]);
   var itemKeys = items.map(function (item, i) {
     return getKey(item, i);
   });
@@ -91,13 +83,32 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var nodeFor = useCallback(function (key) {
     return nodes.current.get(key);
   }, []);
+  // Inside a <SortableGroup>, `id` names this list; `cross` handles moves to other lists.
+  var _useSortableGroupMemb = useSortableGroupMember({
+      listId: rest.id,
+      label: (_rest$ariaLabel = rest["aria-label"]) !== null && _rest$ariaLabel !== void 0 ? _rest$ariaLabel : String(rest.id),
+      items: items,
+      itemKeys: itemKeys,
+      keys: keys,
+      getKey: getKey,
+      nodeFor: nodeFor,
+      listRef: listRef,
+      orientation: axis,
+      setDraft: setDraft,
+      announce: announce,
+      labelFor: labelFor
+    }),
+    cross = _useSortableGroupMemb.cross,
+    incoming = _useSortableGroupMemb.incoming,
+    outgoing = _useSortableGroupMemb.outgoing;
   var keyboard = useSortableKeyboard({
     keys: keys,
     setDraft: setDraft,
     commit: commit,
     announce: announce,
     labelFor: labelFor,
-    orientation: axis
+    orientation: axis,
+    cross: cross
   });
   var pointer = useSortablePointer({
     keys: keys,
@@ -105,7 +116,8 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     commit: commit,
     nodeFor: nodeFor,
     orientation: axis,
-    disabled: disabled
+    disabled: disabled,
+    cross: cross
   });
   // Moving DOM nodes can drop focus; keep it on the item being carried.
   useIsomorphicLayoutEffect(function () {
@@ -124,24 +136,30 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var isNativeList = List === "ul" || List === "ol";
   var ItemTag = isNativeList ? "li" : "div";
   return jsxs(Fragment, {
-    children: [jsx(List, _objectSpread2(_objectSpread2({
-      ref: ref,
+    children: [jsxs(List, _objectSpread2(_objectSpread2({
+      ref: setListRef,
       className: cn("flex", axis === "horizontal" ? "flex-row gap-2" : "flex-col gap-2", className),
       "data-orientation": axis,
+      "data-drop-target": incoming ? incoming.allowed ? "allowed" : "refused" : undefined,
       role: isNativeList ? undefined : "list"
     }, rest), {}, {
-      children: keys.map(function (key, index) {
+      children: [keys.flatMap(function (key, index) {
         var _byKey$get = byKey.get(key),
           item = _byKey$get.item,
           originalIndex = _byKey$get.index;
         var isGrabbed = keyboard.grabbed === key;
         var isDragging = pointer.dragging === key;
+        var isLeaving = outgoing !== null && (isGrabbed || isDragging);
         var startDrag = disabled ? undefined : pointer.startFor(key);
         // Whole-item drags wait for a long-press on touch so the page still scrolls.
         var startItemDrag = disabled || handle ? undefined : pointer.startFor(key, {
           longPress: true
         });
-        return jsx(ItemTag, {
+        var placeholder = (incoming === null || incoming === void 0 ? void 0 : incoming.index) === index ? [jsx(SortablePlaceholder, {
+          as: ItemTag,
+          allowed: incoming.allowed
+        }, "dt-sortable-placeholder")] : [];
+        return placeholder.concat(jsx(ItemTag, {
           ref: function ref(node) {
             if (node) nodes.current.set(key, node);else nodes.current["delete"](key);
           },
@@ -151,12 +169,13 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
           role: isNativeList ? undefined : "listitem",
           "data-dragging": isDragging || undefined,
           "data-grabbed": isGrabbed || undefined,
+          "data-leaving": isLeaving ? outgoing.allowed ? "allowed" : "refused" : undefined,
           onKeyDown: disabled ? undefined : keyboard.keyDownFor(key),
           onBlur: function onBlur(e) {
             if (isGrabbed && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget)) keyboard.cancel();
           },
           onPointerDown: startItemDrag,
-          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab select-none [-webkit-touch-callout:none]", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", itemClassName),
+          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab select-none [-webkit-touch-callout:none]", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", isLeaving && (outgoing.allowed ? "opacity-50" : "cursor-not-allowed ring-error-500 opacity-50"), itemClassName),
           children: renderItem ? renderItem(item, {
             index: index,
             originalIndex: originalIndex,
@@ -174,12 +193,15 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
               return moveBy(originalIndex, 1);
             }
           }) : labelFor(key)
-        }, key);
-      })
+        }, key));
+      }), incoming && incoming.index >= keys.length && jsx(SortablePlaceholder, {
+        as: ItemTag,
+        allowed: incoming.allowed
+      })]
     })), jsx("span", {
       id: instructionsId,
       className: "sr-only",
-      children: text.instructions
+      children: cross ? "".concat(text.instructions, " ").concat(text.groupInstructions) : text.instructions
     }), jsx("span", {
       role: "status",
       "aria-live": "assertive",

package/dist/esm/components/utility/SortableGroup.js

@@ -0,0 +1,48 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useSortableGroupState, SortableGroupContext } from '../../hooks/useSortableGroup.js';
+
+var _excluded = ["onMove", "canDrop", "className", "children"];
+/**
+ * Connects several `<Sortable id="…">` lists so items can move between them
+ * (pointer drag, or the cross-axis arrow keys while an item is picked up).
+ * `canDrop(item, target, from)` is asked before a target is shown as droppable;
+ * a refused target is marked as such and dropping there does nothing.
+ */
+var SortableGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onMove = _ref.onMove,
+    canDrop = _ref.canDrop,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var value = useSortableGroupState({
+    onMove: onMove,
+    canDrop: canDrop
+  });
+  return jsx(SortableGroupContext.Provider, {
+    value: value,
+    children: jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn(className),
+      "data-sortable-group": ""
+    }, rest), {}, {
+      children: children
+    }))
+  });
+});
+SortableGroup.displayName = "SortableGroup";
+/** Where an item from another list would land; styled by whether `canDrop` allows it. */
+function SortablePlaceholder(_ref2) {
+  var Tag = _ref2.as,
+    allowed = _ref2.allowed;
+  return jsx(Tag, {
+    "aria-hidden": "true",
+    "data-sortable-placeholder": allowed ? "allowed" : "refused",
+    className: cn("min-h-10 rounded-md border-2 border-dashed", allowed ? "border-primary-500 bg-primary-50 dark:bg-primary-950/40" : "cursor-not-allowed border-error-500 bg-error-50 opacity-60 dark:bg-error-950/40")
+  });
+}
+
+export { SortablePlaceholder, SortableGroup as default };