@dreamtree-org/twreact-ui 2.0.4 → 2.0.6

package/dist/esm/components/core/Select.js

@@ -505,7 +505,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         className: "flex flex-wrap gap-1",
         children: selectedOptions.map(function (opt) {
           return jsxs("div", {
-            className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+            className: "flex items-center gap-1 rounded-full bg-line/60 px-2 py-0.5 text-xs",
             children: [jsx("span", {
               className: "truncate max-w-[8rem]",
               children: opt.label
@@ -534,7 +534,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           className: "flex flex-wrap gap-1",
           children: selectedOptions.slice(0, maxTagCount).map(function (opt) {
             return jsx("div", {
-              className: "flex items-center gap-1 rounded-full bg-gray-100 px-2 py-0.5 text-xs",
+              className: "flex items-center gap-1 rounded-full bg-line/60 px-2 py-0.5 text-xs",
               children: jsx("span", {
                 className: "truncate max-w-[6rem]",
                 children: opt.label
@@ -572,7 +572,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
               "aria-expanded": !collapsed,
               "aria-controls": collapsed ? undefined : groupOptionsId,
               "aria-label": "".concat(collapsed ? "Expand" : "Collapse", " ").concat(groupName),
-              className: "text-xs border border-slate-200 p-0.5 rounded-md cursor-pointer hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500",
+              className: "text-xs border border-line p-0.5 rounded-md cursor-pointer hover:bg-line/50 focus:outline-none focus:ring-2 focus:ring-primary-500",
               onClick: function onClick() {
                 return setCollapsedGroups(function (prev) {
                   return _objectSpread2(_objectSpread2({}, prev), {}, _defineProperty({}, group.label, !prev[group.label]));
@@ -599,16 +599,16 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
                 onClick: function onClick() {
                   return handleSelect(option);
                 },
-                className: cn("flex items-center hover:bg-gray-100 cursor-pointer", rowClass, {
+                className: cn("flex items-center hover:bg-line/50 cursor-pointer", rowClass, {
                   "opacity-50 cursor-not-allowed": option.disabled,
-                  "bg-primary-50 text-primary-600": focusedIndex === index
+                  "bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": focusedIndex === index
                 }),
                 children: [multiSelect && jsx("div", {
                   className: "mr-2",
                   children: selectedValues.includes(option.value) ? jsx(Check, {
                     className: "h-4 w-4 text-primary-600"
                   }) : jsx("div", {
-                    className: "h-4 w-4 rounded border border-gray-300"
+                    className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
                   })
                 }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
                   className: "ml-auto h-4 w-4 text-primary-600"
@@ -637,17 +637,17 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           onClick: function onClick() {
             return handleSelect(option);
           },
-          className: cn("flex items-center hover:bg-gray-100 cursor-pointer", ROW_CLASSES[isSheet ? "sheet" : "popover"], {
+          className: cn("flex items-center hover:bg-line/50 cursor-pointer", ROW_CLASSES[isSheet ? "sheet" : "popover"], {
             "opacity-50 cursor-not-allowed": option.disabled,
-            "bg-primary-50 text-primary-600": focusedIndex === index,
-            "bg-primary-100": multiSelect && selectedValues.includes(option.value)
+            "bg-primary-50 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": focusedIndex === index,
+            "bg-primary-100 dark:bg-primary-900/60": multiSelect && selectedValues.includes(option.value)
           }),
           children: [multiSelect && jsx("div", {
             className: "mr-2",
             children: selectedValues.includes(option.value) ? jsx(Check, {
               className: "h-4 w-4 text-primary-600"
             }) : jsx("div", {
-              className: "h-4 w-4 rounded border border-gray-300"
+              className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
             })
           }), onMenuItemRender ? onMenuItemRender(option) : highlight(option.label, searchTerm), !multiSelect && selectedValues === option.value && jsx(Check, {
             className: "ml-auto h-4 w-4 text-primary-600"
@@ -659,7 +659,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         children: jsxs("button", {
           type: "button",
           onClick: handleCreate,
-          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-100 focus:outline-none focus:bg-gray-100",
+          className: "flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-line/50 focus:outline-none focus:bg-line/50",
           children: [jsx(Plus, {
             className: "h-4 w-4",
             "aria-hidden": "true"
@@ -687,7 +687,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
               className: "h-4 w-4 text-primary-600",
               "aria-hidden": "true"
             }) : jsx("div", {
-              className: "h-4 w-4 rounded border border-gray-300"
+              className: "h-4 w-4 rounded border border-gray-300 dark:border-gray-600"
             })
           });
         }()
@@ -752,7 +752,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         "aria-labelledby": label ? "".concat(labelId, " ").concat(valueId) : valueId,
         "aria-describedby": describedBy,
         "aria-invalid": error ? true : undefined,
-        className: cn("flex w-full items-center justify-between rounded-md border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES[size] || SIZE_CLASSES.md, {
+        className: cn("flex w-full items-center justify-between rounded-md border border-line bg-surface text-foreground focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50", SIZE_CLASSES[size] || SIZE_CLASSES.md, {
           "border-error-500 focus:ring-error-500": error,
           // Empty: the placeholder reads muted, like Input's
           // ::placeholder (#159). `className` still merges last.
@@ -788,7 +788,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         type: "button",
         onClick: handleClear,
         "aria-label": "Clear selection",
-        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
+        className: cn("absolute right-8 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded p-1 text-primary-500 hover:bg-line/50 focus:outline-none focus:ring-2 focus:ring-primary-500", TOUCH_TARGET),
         children: jsx(X, {
           className: "h-4 w-4",
           "aria-hidden": "true"
@@ -811,7 +811,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
         value: selectedValues !== null && selectedValues !== void 0 ? selectedValues : ""
       })), isOpen && !isSheet && typeof document !== "undefined" && /*#__PURE__*/createPortal(jsxs("div", {
         ref: popoverRef,
-        className: "fixed z-popover overflow-auto rounded-md border border-gray-300 bg-white shadow-lg",
+        className: "fixed z-popover overflow-auto rounded-md border border-line bg-surface text-foreground shadow-lg",
         role: "dialog",
         "data-placement": floatingPlacement.split("-")[0],
         // Portaled to document.body with position:fixed so the menu
@@ -823,7 +823,7 @@ var Select = /*#__PURE__*/React.forwardRef(function (_ref, forwardedRef) {
           opacity: 0
         }),
         children: [searchable && jsx("div", {
-          className: "border-b border-gray-200 p-2",
+          className: "border-b border-line p-2",
           children: renderSearch()
         }), renderListbox()]
       }), document.body)]

package/dist/esm/components/core/Table/Table.js

@@ -1225,7 +1225,7 @@ var Table = /*#__PURE__*/forwardRef(function Table(_ref, ref) {
             type: "button",
             "aria-label": "Reload",
             title: "Reload",
-            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors",
+            className: "px-4 py-2 bg-primary-100 flex items-center gap-2 rounded-lg md:rounded text-primary-700 hover:bg-primary-200 transition-colors dark:bg-primary-900/40 dark:text-primary-300 dark:hover:bg-primary-900/60",
             onClick: onReload,
             children: [jsx(RefreshCcw, {
               className: "size-4",

package/dist/esm/components/core/internal/Calendar.js

@@ -305,8 +305,8 @@ function Calendar(_ref3) {
               className: cn("mx-auto rounded-md text-sm transition-colors motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-1", sheet ? "h-11 w-full min-w-0 text-base" : "h-9 w-full max-w-9", {
                 "text-primary-400": !currentMonth,
                 "bg-primary-600 text-primary-50": state.edge,
-                "bg-primary-200": state.inRange && !state.edge,
-                "bg-primary-100 text-primary-600": todayDate && !state.edge && !state.inRange,
+                "bg-primary-200 dark:bg-primary-900/60": state.inRange && !state.edge,
+                "bg-primary-100 text-primary-600 dark:bg-primary-900/40 dark:text-primary-300": todayDate && !state.edge && !state.inRange,
                 "hover:bg-background": currentMonth && !state.edge && !state.inRange && !disabled,
                 "cursor-not-allowed opacity-50": disabled
               }),

package/dist/esm/components/feedback/Drawer.js

@@ -70,7 +70,7 @@ var DrawerTitleBar = function DrawerTitleBar(_ref2) {
     dragProps = _useGrabZone.dragProps,
     grabClass = _useGrabZone.grabClass;
   return jsx("div", _objectSpread2(_objectSpread2({}, dragProps), {}, {
-    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className),
+    className: cn("flex shrink-0 items-start justify-between gap-4 border-b border-line px-6 py-4", grabClass, className),
     children: children
   }));
 };
@@ -145,7 +145,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     idPrefix: "drawer",
     testIdPrefix: "drawer",
     handleBarClassName: "bg-gray-300 dark:bg-gray-600",
-    panelClassName: cn("border-gray-200 bg-white text-gray-900 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
+    panelClassName: cn("border-line bg-surface text-foreground", PLACEMENT_CLASSES[side], sizes[size] || sizes.md),
     renderHeader: renderHeader
   }, props), {}, {
     children: composed ? children : jsxs(Fragment, {
@@ -153,7 +153,7 @@ var Drawer = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
         className: "min-h-0 flex-1 overflow-y-auto overscroll-contain px-6 py-4",
         children: children
       }), footer && jsx("div", {
-        className: "flex shrink-0 items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700",
+        className: "flex shrink-0 items-center justify-end gap-3 border-t border-line px-6 py-4",
         children: footer
       })]
     })
@@ -169,7 +169,7 @@ var DrawerHeader = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
   return jsx("div", _objectSpread2(_objectSpread2(_objectSpread2({
     ref: ref
   }, props), dragProps), {}, {
-    className: cn("border-b border-gray-200 px-6 py-4 dark:border-gray-700", grabClass, className)
+    className: cn("border-b border-line px-6 py-4", grabClass, className)
   }));
 });
 var DrawerBody = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
@@ -185,7 +185,7 @@ var DrawerFooter = /*#__PURE__*/React.forwardRef(function (_ref7, ref) {
     props = _objectWithoutProperties(_ref7, _excluded4);
   return jsx("div", _objectSpread2({
     ref: ref,
-    className: cn("flex items-center justify-end gap-3 border-t border-gray-200 px-6 py-4 dark:border-gray-700", className)
+    className: cn("flex items-center justify-end gap-3 border-t border-line px-6 py-4", className)
   }, props));
 });
 DrawerHeader.displayName = "Drawer.Header";

package/dist/esm/components/feedback/Tour.js

@@ -221,7 +221,7 @@ var Tour = /*#__PURE__*/forwardRef(function (_ref, _ref2) {
       onKeyDown: handleKeyDown,
       "data-placement": placementAttr,
       "data-presentation": docked ? "sheet" : "popover",
-      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border border-gray-200 bg-white text-gray-900 shadow-xl focus:outline-none", "dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
+      className: cn("fixed overflow-y-auto overscroll-contain rounded-lg border border-line bg-surface text-foreground shadow-xl focus:outline-none", "transition-opacity duration-200 motion-reduce:transition-none", docked ? "inset-x-4 bottom-4 max-h-[60dvh] pb-safe touch-pan-y" : "w-[min(22rem,calc(100vw-2rem))] max-h-[calc(100dvh-2rem)]", !docked && !rect && "left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2", ready ? "opacity-100" : "pointer-events-none opacity-0", className),
       style: anchored ? _objectSpread2(_objectSpread2({}, floatingStyles), style) : style
     }, swipeHandlers), rest), {}, {
       children: [jsxs("div", {

package/dist/esm/components/rich-text/RichTextEditor.js

@@ -12,7 +12,7 @@ import { selectToolbarState, DEFAULT_TOOLBAR, RichTextToolbar } from './RichText
 var _excluded = ["id", "className", "editorClassName", "label", "error", "helperText", "required", "disabled", "readOnly", "placeholder", "value", "defaultValue", "onChange", "outputFormat", "onFocus", "onBlur", "toolbar", "toolbarLabel", "stickyToolbar", "minHeight", "maxHeight", "autoFocus", "extensions", "aria-label", "aria-describedby"];
 // Tailwind's preflight strips list bullets, heading sizes, etc. These arbitrary
 // variants restore readable defaults inside the editable area only.
-var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-gray-900 focus:outline-none dark:text-gray-100", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
+var CONTENT_CLASSES = cn("px-3 py-2 text-sm text-foreground focus:outline-none", "[&_p]:my-1 [&_h1]:my-2 [&_h1]:text-2xl [&_h1]:font-bold [&_h2]:my-2 [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:my-1.5 [&_h3]:text-lg [&_h3]:font-semibold", "[&_ul]:list-disc [&_ul]:pl-6 [&_ol]:list-decimal [&_ol]:pl-6 [&_li]:my-0.5", "[&_blockquote]:my-2 [&_blockquote]:border-l-4 [&_blockquote]:border-gray-300 [&_blockquote]:pl-3 [&_blockquote]:text-gray-600 dark:[&_blockquote]:border-gray-600 dark:[&_blockquote]:text-gray-300", "[&_code]:rounded [&_code]:bg-gray-100 [&_code]:px-1 [&_code]:font-mono [&_code]:text-[0.85em] dark:[&_code]:bg-gray-800", "[&_pre]:my-2 [&_pre]:rounded-md [&_pre]:bg-gray-100 [&_pre]:p-3 dark:[&_pre]:bg-gray-800 [&_pre_code]:bg-transparent [&_pre_code]:p-0", "[&_a]:text-primary-600 [&_a]:underline dark:[&_a]:text-primary-400 [&_hr]:my-3 [&_hr]:border-gray-200 dark:[&_hr]:border-gray-700");
 var toCss = function toCss(v) {
   return typeof v === "number" ? "".concat(v, "px") : v;
 };
@@ -201,7 +201,7 @@ var RichTextEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cn(
       // overflow-clip (not hidden) keeps the rounded corners without
       // creating a scroll container, so a sticky toolbar can stick to the page.
-      stickyToolbar ? "overflow-clip" : "overflow-hidden", "rounded-md border bg-white dark:bg-gray-900", error ? "border-error-500" : "border-gray-300 dark:border-gray-600", disabled && "cursor-not-allowed opacity-50"),
+      stickyToolbar ? "overflow-clip" : "overflow-hidden", "rounded-md border bg-surface", error ? "border-error-500" : "border-line", disabled && "cursor-not-allowed opacity-50"),
       children: [showToolbar && jsx(RichTextToolbar, {
         editor: editor,
         state: state,

package/dist/esm/components/rich-text/RichTextToolbar.js

@@ -262,7 +262,7 @@ function LinkForm(_ref) {
           close();
         }
       },
-      className: cn("h-8 min-w-0 flex-1 rounded-md border bg-white px-2 text-sm text-gray-900 placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-900 dark:text-gray-100 dark:placeholder-gray-500", invalid ? "border-error-500" : "border-gray-300 dark:border-gray-600")
+      className: cn("h-8 min-w-0 flex-1 rounded-md border bg-surface px-2 text-sm text-foreground placeholder-gray-400", "focus:outline-none focus:ring-2 focus:ring-primary-500 dark:placeholder-gray-500", invalid ? "border-error-500" : "border-line")
     }), jsx("button", {
       type: "button",
       onClick: apply,

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

@@ -9,7 +9,7 @@ import { ChevronLeft, ChevronRight } from 'lucide-react';
 var _excluded = ["currentPage", "totalPages", "onPageChange", "showFirstLast", "showPrevNext", "maxVisiblePages", "className"];
 // Shared button chrome: dark-safe surface, focus-visible ring, 44px target on coarse pointers.
 var BUTTON_BASE = cn('inline-flex items-center justify-center rounded-md border px-3 py-2 text-sm font-medium', 'transition-colors duration-fast motion-reduce:transition-none', 'outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-gray-900', TOUCH_TARGET);
-var BUTTON_IDLE = 'border-gray-300 bg-white hover:bg-gray-50 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-gray-800';
+var BUTTON_IDLE = 'border-line bg-surface text-foreground hover:bg-background dark:hover:bg-gray-800';
 var BUTTON_ACTIVE = 'border-primary-500 bg-primary-50 text-primary-600 dark:bg-primary-950 dark:text-primary-300';
 var DISABLED = 'disabled:opacity-50 disabled:cursor-not-allowed';
 var Pagination = /*#__PURE__*/React.forwardRef(function (_ref, ref) {

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 };