@cube-dev/ui-kit 0.0.0-canary-4ba0ca0 → 0.0.0-canary-c22ced9

package/docs/components/navigation/Tabs.md

@@ -38,7 +38,6 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`renderPanel`** `(key: string) => ReactNode` — Render function for lazy panel content
 - **`panelCacheKeys`** `Record<string, any>` — Cache keys for `renderPanel` content
 - **`isReorderable`** `boolean` (default: `false`) — Enable drag-and-drop tab reordering
-- **`isPickerReorderable`** `boolean` (default: `false`) — Enable drag-and-drop reordering in the tab picker dropdown
 - **`keyOrder`** `string[]` — Controlled tab display order
 - **`onReorder`** `(newOrder: string[]) => void` — Callback when tabs are reordered
 - **`showTabPicker`** `boolean | 'auto'` (default: `false`) — Show dropdown tab picker
@@ -170,7 +169,9 @@ Optional wrapper for tabs when using explicit panel placement.
 Explicit panel definition for advanced layout control.
 
 ```jsx
-<Tabs.Panel key="tab1">Panel 1 content</Tabs.Panel>
+<Tabs.Panel key="tab1">
+  Panel 1 content
+</Tabs.Panel>
 ```
 
 ### Tabs.Action
@@ -186,9 +187,7 @@ Action button designed for the Tabs prefix/suffix slots. Styled with sharp edges
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content</Tab>
 </Tabs>
 ```
 
@@ -244,22 +243,16 @@ Control the active tab externally with `activeKey` and `onChange`.
 const [activeKey, setActiveKey] = useState('tab1');
 
 <Tabs activeKey={activeKey} onChange={setActiveKey}>
-  <Tab key="tab1" title="Tab 1">
-    Content 1
-  </Tab>
-  <Tab key="tab2" title="Tab 2">
-    Content 2
-  </Tab>
-</Tabs>;
+  <Tab key="tab1" title="Tab 1">Content 1</Tab>
+  <Tab key="tab2" title="Tab 2">Content 2</Tab>
+</Tabs>
 ```
 
 ### Disabled Tab
 
 ```jsx
 <Tabs defaultActiveKey="tab1">
-  <Tab key="tab1" title="Active Tab">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Active Tab">Content</Tab>
   <Tab key="tab2" title="Disabled Tab" isDisabled>
     Inaccessible content
   </Tab>
@@ -276,12 +269,8 @@ Add buttons or other elements before or after the tab list.
   prefix={<Button size="small">Menu</Button>}
   suffix={<Button size="small">Add New</Button>}
 >
-  <Tab key="items" title="Items">
-    Item list
-  </Tab>
-  <Tab key="archived" title="Archived">
-    Archived items
-  </Tab>
+  <Tab key="items" title="Items">Item list</Tab>
+  <Tab key="archived" title="Archived">Archived items</Tab>
 </Tabs>
 ```
 
@@ -297,17 +286,21 @@ const [tabs, setTabs] = useState([
 
 <Tabs
   defaultActiveKey="tab1"
-  onDelete={(key) => setTabs(tabs.filter((t) => t.key !== key))}
+  onDelete={(key) => setTabs(tabs.filter(t => t.key !== key))}
   suffix={
-    <Tabs.Action icon={<PlusIcon />} aria-label="Add tab" onPress={handleAdd} />
+    <Tabs.Action
+      icon={<PlusIcon />}
+      aria-label="Add tab"
+      onPress={handleAdd}
+    />
   }
 >
-  {tabs.map((tab) => (
+  {tabs.map(tab => (
     <Tab key={tab.key} title={tab.title}>
       Content for {tab.title}
     </Tab>
   ))}
-</Tabs>;
+</Tabs>
 ```
 
 ### Tab Menus
@@ -328,9 +321,7 @@ Add dropdown menus to tabs using the `menu` prop. This replaces the need for man
     // 'delete' is handled automatically via onDelete
   }}
 >
-  <Tab key="tab1" title="Tab 1">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content</Tab>
 </Tabs>
 ```
 
@@ -364,9 +355,7 @@ Combine editable tabs with a menu for rename, duplicate, and delete actions.
     // 'delete' triggers onDelete automatically
   }}
 >
-  <Tab key="tab1" title="Tab 1">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content</Tab>
 </Tabs>
 ```
 
@@ -384,9 +373,7 @@ Enable right-click context menus with the `contextMenu` prop. Uses the same menu
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content</Tab>
 </Tabs>
 ```
 
@@ -401,9 +388,7 @@ Enable right-click context menus with the `contextMenu` prop. Uses the same menu
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content</Tab>
 </Tabs>
 ```
 
@@ -420,11 +405,9 @@ Override or disable menus on individual tabs.
     </>
   }
 >
-  <Tab key="tab1" title="Uses Default Menu">
-    Content
-  </Tab>
-  <Tab
-    key="tab2"
+  <Tab key="tab1" title="Uses Default Menu">Content</Tab>
+  <Tab 
+    key="tab2" 
     title="Custom Menu"
     menu={
       <>
@@ -434,9 +417,7 @@ Override or disable menus on individual tabs.
   >
     Content
   </Tab>
-  <Tab key="tab3" title="No Menu" menu={null}>
-    Content
-  </Tab>
+  <Tab key="tab3" title="No Menu" menu={null}>Content</Tab>
 </Tabs>
 ```
 
@@ -456,9 +437,7 @@ Use `Menu.Section` for organized menus.
     </>
   }
 >
-  <Tab key="tab1" title="Tab 1">
-    Content
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content</Tab>
 </Tabs>
 ```
 
@@ -474,16 +453,10 @@ const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
   keyOrder={keyOrder}
   onReorder={(newOrder) => setKeyOrder(newOrder)}
 >
-  <Tab key="tab1" title="Tab 1">
-    Content 1
-  </Tab>
-  <Tab key="tab2" title="Tab 2">
-    Content 2
-  </Tab>
-  <Tab key="tab3" title="Tab 3">
-    Content 3
-  </Tab>
-</Tabs>;
+  <Tab key="tab1" title="Tab 1">Content 1</Tab>
+  <Tab key="tab2" title="Tab 2">Content 2</Tab>
+  <Tab key="tab3" title="Tab 3">Content 3</Tab>
+</Tabs>
 ```
 
 **Key features:**
@@ -521,33 +494,6 @@ const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
 </Tabs>
 ```
 
-### Reorderable Tab Picker
-
-Use `isPickerReorderable` to enable drag-and-drop reordering in the tab picker dropdown. This is controlled independently from `isReorderable` (horizontal tabs). Items in the dropdown display a grip handle and can be dragged to reorder. The same `onReorder` callback is shared between the horizontal tab bar and the vertical tab picker.
-
-```jsx
-const [keyOrder, setKeyOrder] = useState(['tab1', 'tab2', 'tab3']);
-
-<Tabs
-  isReorderable
-  isPickerReorderable
-  showTabPicker
-  type="file"
-  keyOrder={keyOrder}
-  onReorder={(newOrder) => setKeyOrder(newOrder)}
->
-  <Tab key="tab1" title="Tab 1">
-    Content 1
-  </Tab>
-  <Tab key="tab2" title="Tab 2">
-    Content 2
-  </Tab>
-  <Tab key="tab3" title="Tab 3">
-    Content 3
-  </Tab>
-</Tabs>;
-```
-
 ### Scroll Arrows
 
 Add left/right navigation arrows to scroll overflowed tabs. Use `showScrollArrows` with `true`, `false`, or `'auto'` (shows only when tabs overflow).
@@ -558,7 +504,7 @@ Add left/right navigation arrows to scroll overflowed tabs. Use `showScrollArrow
   showScrollArrows="auto"
   styles={{ width: '500px' }}
 >
-  {tabs.map((tab) => (
+  {tabs.map(tab => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -575,7 +521,7 @@ Combine with `showTabPicker` for both scroll arrows and a dropdown picker:
   showTabPicker="auto"
   type="file"
 >
-  {tabs.map((tab) => (
+  {tabs.map(tab => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -597,7 +543,7 @@ By default, scroll arrows and the tab picker appear in the suffix (after the tab
   type="file"
   styles={{ width: '500px' }}
 >
-  {tabs.map((tab) => (
+  {tabs.map(tab => (
     <Tab key={tab.id} title={tab.title}>
       {tab.content}
     </Tab>
@@ -606,7 +552,6 @@ By default, scroll arrows and the tab picker appear in the suffix (after the tab
 ```
 
 When both are in the same slot:
-
 - In **prefix**: TabPicker appears first (left), then scroll arrows (right)
 - In **suffix**: Scroll arrows appear first (left), then TabPicker (right)
 
@@ -620,14 +565,10 @@ const [view, setView] = useState('overview');
 <Tabs activeKey={view} onChange={setView}>
   <Tab key="overview" title="Overview" />
   <Tab key="settings" title="Settings" />
-</Tabs>;
-
-{
-  view === 'overview' && <OverviewPage />;
-}
-{
-  view === 'settings' && <SettingsPage />;
-}
+</Tabs>
+
+{view === 'overview' && <OverviewPage />}
+{view === 'settings' && <SettingsPage />}
 ```
 
 ### Explicit Panels
@@ -651,12 +592,8 @@ Render all panels immediately but keep inactive ones hidden.
 
 ```jsx
 <Tabs defaultActiveKey="tab1" prerender>
-  <Tab key="tab1" title="Tab 1">
-    Content 1
-  </Tab>
-  <Tab key="tab2" title="Tab 2">
-    Content 2
-  </Tab>
+  <Tab key="tab1" title="Tab 1">Content 1</Tab>
+  <Tab key="tab2" title="Tab 2">Content 2</Tab>
 </Tabs>
 ```
 
@@ -685,12 +622,8 @@ Override per-tab/panel:
 
 ```jsx
 <Tabs prerender>
-  <Tab key="tab1" title="Prerendered">
-    Always in DOM
-  </Tab>
-  <Tab key="tab2" title="Lazy" prerender={false}>
-    Lazy loaded
-  </Tab>
+  <Tab key="tab1" title="Prerendered">Always in DOM</Tab>
+  <Tab key="tab2" title="Lazy" prerender={false}>Lazy loaded</Tab>
 </Tabs>
 ```
 
@@ -705,14 +638,10 @@ content is computed, while inactive tabs use cached content.
   defaultActiveKey="tab1"
   renderPanel={(key) => {
     switch (key) {
-      case 'tab1':
-        return <ExpensiveChart data={chartData} />;
-      case 'tab2':
-        return <LargeTable rows={tableRows} />;
-      case 'tab3':
-        return <ComplexForm fields={formFields} />;
-      default:
-        return null;
+      case 'tab1': return <ExpensiveChart data={chartData} />;
+      case 'tab2': return <LargeTable rows={tableRows} />;
+      case 'tab3': return <ComplexForm fields={formFields} />;
+      default: return null;
     }
   }}
 >
@@ -733,8 +662,8 @@ content is computed, while inactive tabs use cached content.
 <Tabs
   renderPanel={(key) => <Panel data={data[key]} />}
   panelCacheKeys={{
-    tab1: data.tab1.version, // Cached, re-renders when version changes
-    tab2: data.tab2.version, // Cached, re-renders when version changes
+    tab1: data.tab1.version,  // Cached, re-renders when version changes
+    tab2: data.tab2.version,  // Cached, re-renders when version changes
     // tab3 has no cache key - re-renders on every Tabs render
   }}
 >
@@ -743,7 +672,6 @@ content is computed, while inactive tabs use cached content.
 ```
 
 This approach is ideal for:
-
 - Tabs with complex visualizations or charts
 - Large data tables that are expensive to render
 - Forms with many fields
@@ -778,7 +706,6 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 ```
 
 **How it works:**
-
 - The tab bar has fixed height and doesn't grow
 - Tab panels use `display: contents`, allowing children to participate in parent flex layout
 - Nested Layout components with `flexGrow: 1` (default) stretch to fill remaining space
@@ -795,7 +722,6 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 - `Shift+F10` - Open tab menu (when menu is present)
 - `Delete` - Delete focused tab (when deletable)
 - `F2` - Start editing tab title (when editable)
-- `Alt+ArrowLeft` / `Alt+ArrowRight` - Reorder the focused tab (when `isReorderable`)
 
 ### Screen Reader Support
 
@@ -818,17 +744,13 @@ Tabs work seamlessly inside Layout components. When placed in a `Layout` or `Lay
 1. **Do**: Use clear, descriptive tab titles
 
    ```jsx
-   <Tab key="billing" title="Billing & Payments">
-     ...
-   </Tab>
+   <Tab key="billing" title="Billing & Payments">...</Tab>
    ```
 
 2. **Don't**: Use vague or single-letter titles
 
    ```jsx
-   <Tab key="b" title="B">
-     ...
-   </Tab>
+   <Tab key="b" title="B">...</Tab>
    ```
 
 3. **Do**: Provide meaningful accessible labels

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.0.0-canary-4ba0ca0",
+  "version": "0.0.0-canary-c22ced9",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/fields/ListBox/DraggableListBox.js

@@ -1,24 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ba0ca0 | Cube Dev Team */
-import { DraggableCollection } from "../../shared/DraggableCollection.js";
-import { jsx } from "react/jsx-runtime";
-
-//#region src/components/fields/ListBox/DraggableListBox.tsx
-/**
-* Wrapper that enables drag-and-drop reordering for a vertical ListBox.
-*
-* Thin wrapper around DraggableCollection with vertical orientation.
-*/
-function DraggableListBox({ state, listRef, orderedKeys, onReorder, children }) {
-	return /* @__PURE__ */ jsx(DraggableCollection, {
-		state,
-		listRef,
-		orderedKeys,
-		orientation: "vertical",
-		onReorder,
-		children
-	});
-}
-
-//#endregion
-export { DraggableListBox };
-//# sourceMappingURL=DraggableListBox.js.map

package/dist/components/fields/ListBox/DraggableListBox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableListBox.js","names":[],"sources":["../../../../src/components/fields/ListBox/DraggableListBox.tsx"],"sourcesContent":["import { ReactNode, RefObject } from 'react';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  ListState,\n} from 'react-stately';\n\nimport { DraggableCollection } from '../../shared/DraggableCollection';\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableListBoxProps {\n  /** List state from React Stately (useListState) */\n  state: Pick<\n    ListState<any>,\n    'collection' | 'selectionManager' | 'disabledKeys'\n  >;\n  /** Ref to the list container element */\n  listRef: RefObject<HTMLElement | null>;\n  /** Current ordered keys */\n  orderedKeys: string[];\n  /** Callback when items are reordered */\n  onReorder?: (newOrder: string[]) => void;\n  /** Render function that receives drag/drop states */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Wrapper that enables drag-and-drop reordering for a vertical ListBox.\n *\n * Thin wrapper around DraggableCollection with vertical orientation.\n */\nexport function DraggableListBox({\n  state,\n  listRef,\n  orderedKeys,\n  onReorder,\n  children,\n}: DraggableListBoxProps) {\n  return (\n    <DraggableCollection\n      state={state}\n      listRef={listRef}\n      orderedKeys={orderedKeys}\n      orientation=\"vertical\"\n      onReorder={onReorder}\n    >\n      {children}\n    </DraggableCollection>\n  );\n}\n"],"mappings":";;;;;;;;;;AA0CA,SAAgB,iBAAiB,EAC/B,OACA,SACA,aACA,WACA,YACwB;AACxB,QACE,oBAAC;EACQ;EACE;EACI;EACb,aAAY;EACD;EAEV;GACmB"}

package/dist/components/shared/DraggableCollection.js

@@ -1,134 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ba0ca0 | Cube Dev Team */
-import { useEvent } from "../../_internal/hooks/use-event.js";
-import { useCallback, useEffect, useMemo, useRef } from "react";
-import { ListDropTargetDelegate, ListKeyboardDelegate, mergeProps, useDraggableCollection, useDroppableCollection } from "react-aria";
-import { useDraggableCollectionState, useDroppableCollectionState } from "react-stately";
-
-//#region src/components/shared/DraggableCollection.tsx
-const getAllowedDropOperations = () => ["move"];
-/**
-* Creates a no-op mock of DraggableCollectionState.
-* Used to satisfy useDraggableItem when drag is disabled (Rules of Hooks).
-*/
-function createMockDragState(collection, selectionManager) {
-	return {
-		collection,
-		selectionManager,
-		isDragging: () => false,
-		getKeysForDrag: () => /* @__PURE__ */ new Set(),
-		draggedKey: null,
-		draggingKeys: /* @__PURE__ */ new Set(),
-		getAllowedDropOperations: () => [],
-		preview: null,
-		isDisabled: false,
-		startDrag: () => {},
-		endDrag: () => {}
-	};
-}
-/**
-* Generic wrapper that enables drag-and-drop reordering for a collection.
-*
-* Used by both DraggableTabList (horizontal) and DraggableListBox (vertical).
-* Encapsulates all drag/drop hook calls so they are only invoked when
-* reordering is actually enabled.
-*/
-function DraggableCollection({ state, listRef, orderedKeys, orientation, onReorder, children }) {
-	const handleReorder = useEvent((e) => {
-		if (!onReorder) return;
-		const { target, keys: movableKeys } = e;
-		const { dropPosition, key: targetKey } = target;
-		const movableKey = [...movableKeys][0];
-		const movableIndex = orderedKeys.indexOf(movableKey);
-		const targetIndex = orderedKeys.indexOf(String(targetKey));
-		if (movableIndex === -1 || targetIndex === -1) return;
-		onReorder(movableIndex !== targetIndex ? orderedKeys.reduce((arr, key, i) => {
-			if (i === movableIndex) return arr;
-			if (i === targetIndex) if (dropPosition === "before") {
-				arr.push(movableKey);
-				arr.push(key);
-			} else {
-				arr.push(key);
-				arr.push(movableKey);
-			}
-			else arr.push(key);
-			return arr;
-		}, []) : orderedKeys);
-	});
-	const getItems = useCallback((keys) => {
-		return [...keys].map((key) => {
-			const item = state.collection.getItem(key);
-			return { "text/plain": item?.textValue || String(key) };
-		});
-	}, [state.collection]);
-	const dragSelectionManager = useMemo(() => new Proxy(state.selectionManager, { get(target, prop) {
-		if (prop === "selectedKeys") return /* @__PURE__ */ new Set();
-		if (prop === "isSelected") return () => false;
-		const value = Reflect.get(target, prop);
-		return typeof value === "function" ? value.bind(target) : value;
-	} }), [state.selectionManager]);
-	const dragState = useDraggableCollectionState({
-		collection: state.collection,
-		selectionManager: dragSelectionManager,
-		getItems,
-		getAllowedDropOperations
-	});
-	useDraggableCollection({
-		getItems,
-		getAllowedDropOperations
-	}, dragState, listRef);
-	const dropState = useDroppableCollectionState({
-		collection: state.collection,
-		selectionManager: state.selectionManager,
-		onReorder: handleReorder
-	});
-	const { collectionProps } = useDroppableCollection({
-		keyboardDelegate: useMemo(() => new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef), [
-			state.collection,
-			state.disabledKeys,
-			listRef
-		]),
-		dropTargetDelegate: useMemo(() => new ListDropTargetDelegate(state.collection, listRef, { orientation }), [
-			state.collection,
-			listRef,
-			orientation
-		]),
-		onReorder: handleReorder
-	}, dropState, listRef);
-	const isDragActive = dragState.draggingKeys.size > 0;
-	const endDragRef = useRef(dragState.endDrag);
-	endDragRef.current = dragState.endDrag;
-	useEffect(() => {
-		if (!isDragActive) return;
-		const handleEscape = (e) => {
-			if (e.key === "Escape") endDragRef.current();
-		};
-		document.addEventListener("keydown", handleEscape, true);
-		return () => document.removeEventListener("keydown", handleEscape, true);
-	}, [isDragActive]);
-	return children(dragState, dropState, mergeProps(collectionProps, { onKeyDownCapture: useEvent((e) => {
-		if (!e.altKey || !onReorder) return;
-		const moveKeys = orientation === "vertical" ? {
-			backward: "ArrowUp",
-			forward: "ArrowDown"
-		} : {
-			backward: "ArrowLeft",
-			forward: "ArrowRight"
-		};
-		const direction = e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;
-		if (direction === 0) return;
-		e.preventDefault();
-		e.stopPropagation();
-		const focusedKey = String(state.selectionManager.focusedKey);
-		const idx = orderedKeys.indexOf(focusedKey);
-		if (idx === -1) return;
-		const targetIdx = idx + direction;
-		if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;
-		const newKeys = [...orderedKeys];
-		[newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];
-		onReorder(newKeys);
-	}) }));
-}
-
-//#endregion
-export { DraggableCollection, createMockDragState };
-//# sourceMappingURL=DraggableCollection.js.map

package/dist/components/shared/DraggableCollection.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DraggableCollection.js","names":[],"sources":["../../../src/components/shared/DraggableCollection.tsx"],"sourcesContent":["import {\n  KeyboardEvent,\n  ReactNode,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\nimport {\n  DragItem,\n  DroppableCollectionReorderEvent,\n  ListDropTargetDelegate,\n  ListKeyboardDelegate,\n  mergeProps,\n  useDraggableCollection,\n  useDroppableCollection,\n} from 'react-aria';\nimport {\n  DraggableCollectionState,\n  DroppableCollectionState,\n  useDraggableCollectionState,\n  useDroppableCollectionState,\n} from 'react-stately';\n\nimport { useEvent } from '../../_internal/hooks';\n\nimport type { Collection, DropOperation, Key, Node } from '@react-types/shared';\n\nconst getAllowedDropOperations = (): DropOperation[] => ['move'];\n\n/**\n * Creates a no-op mock of DraggableCollectionState.\n * Used to satisfy useDraggableItem when drag is disabled (Rules of Hooks).\n */\nexport function createMockDragState(\n  collection: Collection<Node<any>>,\n  selectionManager: Record<string, any>,\n): DraggableCollectionState {\n  return {\n    collection,\n    selectionManager,\n    isDragging: () => false,\n    getKeysForDrag: () => new Set<Key>(),\n    draggedKey: null,\n    draggingKeys: new Set<Key>(),\n    getAllowedDropOperations: () => [],\n    preview: null,\n    isDisabled: false,\n    startDrag: () => {},\n    endDrag: () => {},\n  } as DraggableCollectionState;\n}\n\n// =============================================================================\n// Types\n// =============================================================================\n\nexport interface DraggableCollectionProps {\n  state: {\n    collection: Collection<Node<any>>;\n    selectionManager: { selectedKeys: Set<Key> } & Record<string, any>;\n    disabledKeys: Set<Key>;\n  };\n  listRef: RefObject<HTMLElement | null>;\n  orderedKeys: string[];\n  orientation: 'horizontal' | 'vertical';\n  onReorder?: (newOrder: string[]) => void;\n  /** Render function receiving drag/drop states and merged collection+keyboard props */\n  children: (\n    dragState: DraggableCollectionState,\n    dropState: DroppableCollectionState,\n    collectionProps: Record<string, unknown>,\n  ) => ReactNode;\n}\n\n// =============================================================================\n// Component\n// =============================================================================\n\n/**\n * Generic wrapper that enables drag-and-drop reordering for a collection.\n *\n * Used by both DraggableTabList (horizontal) and DraggableListBox (vertical).\n * Encapsulates all drag/drop hook calls so they are only invoked when\n * reordering is actually enabled.\n */\nexport function DraggableCollection({\n  state,\n  listRef,\n  orderedKeys,\n  orientation,\n  onReorder,\n  children,\n}: DraggableCollectionProps) {\n  const handleReorder = useEvent((e: DroppableCollectionReorderEvent) => {\n    if (!onReorder) return;\n\n    const { target, keys: movableKeys } = e;\n    const { dropPosition, key: targetKey } = target;\n    const movableKey = [...movableKeys][0] as string;\n\n    const movableIndex = orderedKeys.indexOf(movableKey);\n    const targetIndex = orderedKeys.indexOf(String(targetKey));\n\n    if (movableIndex === -1 || targetIndex === -1) return;\n\n    const newKeys =\n      movableIndex !== targetIndex\n        ? orderedKeys.reduce((arr, key, i) => {\n            if (i === movableIndex) {\n              return arr;\n            }\n\n            if (i === targetIndex) {\n              if (dropPosition === 'before') {\n                arr.push(movableKey);\n                arr.push(key);\n              } else {\n                arr.push(key);\n                arr.push(movableKey);\n              }\n            } else {\n              arr.push(key);\n            }\n\n            return arr;\n          }, [] as string[])\n        : orderedKeys;\n\n    onReorder(newKeys);\n  });\n\n  const getItems = useCallback(\n    (keys: Set<Key>): DragItem[] => {\n      return [...keys].map((key) => {\n        const item = state.collection.getItem(key);\n        return {\n          'text/plain': item?.textValue || String(key),\n        };\n      });\n    },\n    [state.collection],\n  );\n\n  // Proxy selectionManager to hide selection from react-aria's drag logic.\n  // Without this, react-aria drags ALL selected items when any selected item\n  // is grabbed (hardcoded in useDraggableCollectionState → internal getKeys).\n  // The proxy intercepts `selectedKeys` and `isSelected` so every item looks\n  // unselected for drag, while all other methods (isDisabled, setFocusedKey, …)\n  // delegate to the real manager. `bind(target)` preserves `this` for methods\n  // that live on the prototype chain.\n  const dragSelectionManager = useMemo(\n    () =>\n      new Proxy(state.selectionManager, {\n        get(target, prop) {\n          if (prop === 'selectedKeys') return new Set<Key>();\n          if (prop === 'isSelected') return () => false;\n          const value = Reflect.get(target, prop);\n          return typeof value === 'function' ? value.bind(target) : value;\n        },\n      }),\n    [state.selectionManager],\n  );\n\n  const dragState = useDraggableCollectionState({\n    collection: state.collection,\n    selectionManager: dragSelectionManager,\n    getItems,\n    getAllowedDropOperations,\n  });\n\n  useDraggableCollection(\n    {\n      getItems,\n      getAllowedDropOperations,\n    },\n    dragState,\n    listRef,\n  );\n\n  const dropState = useDroppableCollectionState({\n    collection: state.collection,\n    selectionManager: state.selectionManager,\n    onReorder: handleReorder,\n  });\n\n  const keyboardDelegate = useMemo(\n    () =>\n      new ListKeyboardDelegate(state.collection, state.disabledKeys, listRef),\n    [state.collection, state.disabledKeys, listRef],\n  );\n\n  const dropTargetDelegate = useMemo(\n    () =>\n      new ListDropTargetDelegate(state.collection, listRef, {\n        orientation,\n      }),\n    [state.collection, listRef, orientation],\n  );\n\n  const { collectionProps } = useDroppableCollection(\n    {\n      keyboardDelegate,\n      dropTargetDelegate,\n      onReorder: handleReorder,\n    },\n    dropState,\n    listRef,\n  );\n\n  // Force-cancel drag on Escape. Native HTML5 drag cancels visually, but some\n  // browsers (Safari) don't fire `dragend` synchronously, leaving react-aria's\n  // `isDragging` stale until a second keypress.\n  const isDragActive = dragState.draggingKeys.size > 0;\n  const endDragRef = useRef(dragState.endDrag);\n  endDragRef.current = dragState.endDrag;\n\n  useEffect(() => {\n    if (!isDragActive) return;\n\n    const handleEscape = (e: globalThis.KeyboardEvent) => {\n      if (e.key === 'Escape') {\n        endDragRef.current();\n      }\n    };\n\n    document.addEventListener('keydown', handleEscape, true);\n\n    return () => document.removeEventListener('keydown', handleEscape, true);\n  }, [isDragActive]);\n\n  // Alt+Arrow keyboard shortcut for reordering.\n  // Uses capture phase so we read focusedKey BEFORE react-aria moves focus.\n  const handleKeyDownCapture = useEvent((e: KeyboardEvent) => {\n    if (!e.altKey || !onReorder) return;\n\n    const moveKeys =\n      orientation === 'vertical'\n        ? { backward: 'ArrowUp', forward: 'ArrowDown' }\n        : { backward: 'ArrowLeft', forward: 'ArrowRight' };\n\n    const direction =\n      e.key === moveKeys.backward ? -1 : e.key === moveKeys.forward ? 1 : 0;\n\n    if (direction === 0) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n\n    const focusedKey = String(state.selectionManager.focusedKey);\n    const idx = orderedKeys.indexOf(focusedKey);\n\n    if (idx === -1) return;\n\n    const targetIdx = idx + direction;\n\n    if (targetIdx < 0 || targetIdx >= orderedKeys.length) return;\n\n    const newKeys = [...orderedKeys];\n    [newKeys[idx], newKeys[targetIdx]] = [newKeys[targetIdx], newKeys[idx]];\n    onReorder(newKeys);\n  });\n\n  return children(\n    dragState,\n    dropState,\n    mergeProps(collectionProps, { onKeyDownCapture: handleKeyDownCapture }),\n  );\n}\n"],"mappings":"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"}

package/dist/icons/GripVerticalIcon.d.ts

@@ -1,12 +0,0 @@
-
-import { CubeIconProps } from "./Icon.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-
-//#region src/icons/GripVerticalIcon.d.ts
-declare const GripVerticalIcon: {
-  (props: CubeIconProps): react_jsx_runtime0.JSX.Element;
-  displayName: string;
-};
-//#endregion
-export { GripVerticalIcon };
-//# sourceMappingURL=GripVerticalIcon.d.ts.map

package/dist/icons/GripVerticalIcon.js

@@ -1,11 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-4ba0ca0 | Cube Dev Team */
-import { wrapIcon } from "./wrap-icon.js";
-import { jsx } from "react/jsx-runtime";
-import { IconGripVertical } from "@tabler/icons-react";
-
-//#region src/icons/GripVerticalIcon.tsx
-const GripVerticalIcon = wrapIcon("GripVerticalIcon", /* @__PURE__ */ jsx(IconGripVertical, {}));
-
-//#endregion
-export { GripVerticalIcon };
-//# sourceMappingURL=GripVerticalIcon.js.map

package/dist/icons/GripVerticalIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GripVerticalIcon.js","names":[],"sources":["../../src/icons/GripVerticalIcon.tsx"],"sourcesContent":["import { IconGripVertical } from '@tabler/icons-react';\n\nimport { wrapIcon } from './wrap-icon';\n\nexport const GripVerticalIcon = wrapIcon(\n  'GripVerticalIcon',\n  <IconGripVertical />,\n);\n"],"mappings":";;;;;;AAIA,MAAa,mBAAmB,SAC9B,oBACA,oBAAC,qBAAmB,CACrB"}