klun-ui 0.4.0 → 0.4.1

package/dist/index.d.cts

@@ -818,7 +818,7 @@ interface KanbanColumn {
 }
 interface KanbanProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
     columns: KanbanColumn[];
-    /** Fired when a card is dropped in another position/column. */
+    /** Fired when a card lands in another position/column. */
     onMove?: (cardId: string, fromColumn: string, toColumn: string, toIndex: number) => void;
     onCardClick?: (card: KanbanCard, columnId: string) => void;
     /** Replace the default card body. */
@@ -829,9 +829,12 @@ interface KanbanProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
     style?: CSSProperties;
 }
 /**
- * Kanban — dependency-free drag & drop board. Columns hold cards; dropping a
- * card calls `onMove(cardId, fromColumn, toColumn, toIndex)` so the parent owns
- * the data. Native HTML5 DnD, keyboard-clickable cards.
+ * Kanban — drag & drop board (dnd-kit: mouse, touch and keyboard). Columns hold
+ * cards; dropping a card calls `onMove(cardId, fromColumn, toColumn, toIndex)`
+ * so the parent owns the data. `toIndex` is the position in the target column
+ * **after** the card is removed from its old slot, so consumers can simply
+ * `splice(toIndex, 0, card)`. Dropping on the lower half of a card lands after
+ * it, on the upper half before it; dropping on empty column space appends.
  */
 declare const Kanban: react.ForwardRefExoticComponent<KanbanProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1244,7 +1247,7 @@ interface TableProps<Row = any> extends Omit<HTMLAttributes<HTMLDivElement>, "st
     defaultExpandedRowKeys?: Array<string | number>;
     /** Show a toolbar "Columns" menu to toggle column visibility. */
     columnSettings?: boolean;
-    /** Enable drag-to-reorder rows (native HTML5 DnD; disabled in tree mode). */
+    /** Enable drag-to-reorder rows (dnd-kit: pointer + keyboard; disabled in tree mode). */
     rowDraggable?: boolean;
     /** Called with the reordered rows after a drop. */
     onReorder?: (rows: Row[], from: number, to: number) => void;

package/dist/index.d.ts

@@ -818,7 +818,7 @@ interface KanbanColumn {
 }
 interface KanbanProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
     columns: KanbanColumn[];
-    /** Fired when a card is dropped in another position/column. */
+    /** Fired when a card lands in another position/column. */
     onMove?: (cardId: string, fromColumn: string, toColumn: string, toIndex: number) => void;
     onCardClick?: (card: KanbanCard, columnId: string) => void;
     /** Replace the default card body. */
@@ -829,9 +829,12 @@ interface KanbanProps extends Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> {
     style?: CSSProperties;
 }
 /**
- * Kanban — dependency-free drag & drop board. Columns hold cards; dropping a
- * card calls `onMove(cardId, fromColumn, toColumn, toIndex)` so the parent owns
- * the data. Native HTML5 DnD, keyboard-clickable cards.
+ * Kanban — drag & drop board (dnd-kit: mouse, touch and keyboard). Columns hold
+ * cards; dropping a card calls `onMove(cardId, fromColumn, toColumn, toIndex)`
+ * so the parent owns the data. `toIndex` is the position in the target column
+ * **after** the card is removed from its old slot, so consumers can simply
+ * `splice(toIndex, 0, card)`. Dropping on the lower half of a card lands after
+ * it, on the upper half before it; dropping on empty column space appends.
  */
 declare const Kanban: react.ForwardRefExoticComponent<KanbanProps & react.RefAttributes<HTMLDivElement>>;
 
@@ -1244,7 +1247,7 @@ interface TableProps<Row = any> extends Omit<HTMLAttributes<HTMLDivElement>, "st
     defaultExpandedRowKeys?: Array<string | number>;
     /** Show a toolbar "Columns" menu to toggle column visibility. */
     columnSettings?: boolean;
-    /** Enable drag-to-reorder rows (native HTML5 DnD; disabled in tree mode). */
+    /** Enable drag-to-reorder rows (dnd-kit: pointer + keyboard; disabled in tree mode). */
     rowDraggable?: boolean;
     /** Called with the reordered rows after a drop. */
     onReorder?: (rows: Row[], from: number, to: number) => void;

package/dist/index.js

@@ -1,4 +1,4 @@
-export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kanban, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner, Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, VirtualTable, Wizard, arSA, deDE, describeCron, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW } from './chunk-TREMQLWT.js';
+export { Accordion, Alert, AutoComplete, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, BulkAction, BulkActionBar, Button, ButtonGroup, CRON_PRESETS, Card, Carousel, Cascader, CharacterCounter, ChartLegend, ChartTooltip, Checkbox, CheckboxCard, CheckboxGroup, Chip, CircularProgress, CodeViewer, Col, Collapse, ColorDot, ColorPicker, ColorSlider, CommandMenu, CompactSelect, CompactSelectForInput, ConfigProvider, Confirm, ContentLabel, ContextMenu, CopyButton, CounterInput, CronEditor, CrossRefBadge, DatePicker, DateRangePicker, DateTimePicker, Descriptions, DiffViewer, DigitInput, Divider, Drawer, Dropdown, EmptyState, ExpiryCountdown, FileUpload, Flex, Form, FormItem, FormList, Format, GaugeBar, Grid, Hint, HorizontalFilter, ImageUpload, ImageViewer, InlineInput, InlineSelect, Input, Kanban, Kbd, KeyIcon, Label, Layout, LayoutContent, LayoutFooter, LayoutHeader, LayoutSider, List, ListItem, LiveDot, LogViewer, Markdown, Masonry, Menu, Message, Modal, Money, Notification, PageHeader, Pagination, PasswordStrength, Popconfirm, Popover, ProgressBar, Radio, RadioCard, RangeSlider, Rating, RelativeTime, Result, RichEditor, RichEditorToolbar, Row, SegmentedControl, SegmentedProgress, Select, SelectMenu, Skeleton, Slider, Space, Spinner, Splitter, SplitterPanel, StatCard, Statistic, StatusBadge, StatusDot, StepIndicator, Switch, Table, Tabs, Tag, Textarea, TimePicker, Timeline, Toast, Toaster, Tooltip, Tree, VirtualTable, Wizard, arSA, deDE, describeCron, enUS, esES, fmt, frFR, idID, itIT, jaJP, koKR, locales, nlNL, parsePatch, plPL, primaryColorVars, ptBR, renderMarkdown, ruRU, toast, trTR, useBreakpoint, useConfig, useContextMenu, useForm, useLocale, useMappedSize, useMessage, useNotification, useSize, viVN, zhCN, zhTW } from './chunk-MBL2CDDG.js';
 export { cx } from './chunk-T225J6LV.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/styles.css

@@ -3236,6 +3236,7 @@ body {
   box-shadow: var(--klun-shadow-xs, 0 1px 2px rgba(14, 18, 27, 0.06)), inset 0 0 0 1px var(--klun-stroke-soft-200);
   cursor: grab;
   transition: transform var(--klun-duration-fast, 0.15s) var(--klun-ease-out, ease);
+  touch-action: none;
 }
 .klun-kanban__card:hover {
   transform: translateY(-1px);
@@ -4135,6 +4136,12 @@ body {
 }
 .klun-table__td--util {
   width: 40px;
+  cursor: grab;
+  user-select: none;
+  touch-action: none;
+}
+.klun-table__td--util:active {
+  cursor: grabbing;
 }
 .klun-table__td--nowrap {
   white-space: nowrap;
@@ -4170,13 +4177,10 @@ body {
   cursor: pointer;
 }
 .klun-table__row--dragging {
-  opacity: 0.5;
-}
-.klun-table__row--dropover {
-  box-shadow: inset 0 2px 0 var(--klun-primary-base);
-}
-.klun-table__row--dropover-after {
-  box-shadow: inset 0 -2px 0 var(--klun-primary-base);
+  position: relative;
+  z-index: 2;
+  background: var(--klun-bg-white-0);
+  box-shadow: var(--klun-shadow-lg);
 }
 .klun-table__row--status-success {
   background: var(--klun-state-success-lighter, var(--klun-green-50));