Initial commit

docs/components/drag-selectable.md

@@ -0,0 +1,82 @@
+- Home
+- Components
+- Drag Selectable
+
+# Drag Selectable
+
+A React component system that enables drag selection over a vertical list of items with toggle-based multi-select behavior.
+
+## Live Example
+
+Try the drag selection below:
+
+- Normal drag: Toggle selection
+- Ctrl/Cmd + drag: Replace selection
+- Escape: Clear all selections
+
+```
+import React from 'react';
+import { Card, Badge, useDragSelect } from '@vuer-ai/vuer-uikit';
+
+const TODOS = [
+  { key: "1", title: "Learn React hooks" },
+  { key: "2", title: "Build a todo app" },
+  { key: "3", title: "Implement drag selection" },
+  // ... more items
+];
+
+export default function DragSelectExample() {
+  const { selectedItems, getItemProps, clearSelection } = useDragSelect();
+
+  return (
+    <div>
+      <button onClick={clearSelection}>
+        Clear ({selectedItems.size} selected)
+      </button>
+      
+      {TODOS.map(todo => (
+        <TodoItem
+          key={todo.key}
+          title={todo.title}
+          checked={selectedItems.has(todo.key)}
+          {...getItemProps(todo.key)}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+## Simple API
+
+The useDragSelect() hook provides everything you need for drag selection:
+
+Returns:
+
+- selectedItems: Set<string> - Currently selected item IDs
+- getItemProps(id: string) - Props to spread on selectable items
+- clearSelection() - Function to clear all selections
+- isSelected(id: string) - Check if item is selected
+
+Usage: Just import the hook, call it, and spread getItemProps(id) on your items. The hook handles all the complex state management, event handling, and keyboard shortcuts automatically.
+
+## Features
+
+- Automatic Event Handling - Mouse and keyboard events handled internally
+- Modifier Key Support - Ctrl/Cmd for replace mode, default toggle mode
+- Global Events - Mouse up and Escape key work anywhere on page
+- TypeScript Support - Fully typed hook and props
+- Zero Dependencies - Pure React implementation
+
+## Selection Modes
+
+- Toggle (default): Items flip their selection state during drag
+- Replace (Ctrl/Cmd + drag): Clear existing selection, start new selection range
+
+## Accessibility
+
+- Semantic HTML structure
+- Keyboard navigation support
+- Screen reader friendly markup
+- Clear visual feedback for selection states
+