@dnotrever2/super-kit 0.1.28 → 0.1.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +121 -10
  2. package/dist/super-kit.cjs +1 -1
  3. package/dist/super-kit.css +1 -1
  4. package/dist/super-kit.js +541 -541
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -436,6 +436,105 @@ Forwards a `ref` to the underlying `<a>`. Accepts native anchor attributes such
436
436
 
437
437
  ---
438
438
 
439
+ ### List
440
+
441
+ Grouped list of items with optional collapsible title, selection, and pointer-based drag and drop (including dragging between lists).
442
+
443
+ ```tsx
444
+ import { List } from "@dnotrever2/super-kit";
445
+
446
+ // Selectable, collapsible group
447
+ <List
448
+ title="Services"
449
+ collapsible
450
+ selectable
451
+ defaultSelectedValue="api"
452
+ onSelectedValueChange={(value, item) => setActive(value)}
453
+ items={[
454
+ { value: "api", label: "API gateway", description: "Routes public traffic" },
455
+ { value: "worker", label: "Background worker", meta: <Badge variant="green2" pill>live</Badge> },
456
+ { value: "archive", label: "Archive store", disabled: true }
457
+ ]}
458
+ />
459
+
460
+ // Drag and drop within a list
461
+ const [items, setItems] = useState(initialItems);
462
+
463
+ <List
464
+ title="Pipeline"
465
+ draggable
466
+ items={items}
467
+ onItemDrop={({ item, targetItem, position }) => {
468
+ setItems((prev) => reorder(prev, item, targetItem, position));
469
+ }}
470
+ />
471
+
472
+ // Drag between two lists in the same group
473
+ <List title="Available" draggable dragGroup="stages" listId="available" items={available} onItemDrop={handleDrop} />
474
+ <List title="Selected" draggable dragGroup="stages" listId="selected" items={selected} onItemDrop={handleDrop} />
475
+ ```
476
+
477
+ | Prop | Type | Default |
478
+ | ------------------------- | ------------------------------------------ | ------------ |
479
+ | `items` | `ListItem[]` | required |
480
+ | `title` | `ReactNode` | — |
481
+ | `showTitle` | `boolean` | `true` |
482
+ | `collapsible` | `boolean` | `false` |
483
+ | `collapsed` | `boolean` | — controlled |
484
+ | `defaultCollapsed` | `boolean` | `false` |
485
+ | `onCollapsedChange` | `(collapsed: boolean) => void` | — |
486
+ | `emptyLabel` | `ReactNode` | `"No items"` |
487
+ | `selectable` | `boolean` | `false` |
488
+ | `selectedValue` | `string \| null` | — controlled |
489
+ | `defaultSelectedValue` | `string \| null` | `null` |
490
+ | `onSelectedValueChange` | `(value: string, item: ListItem) => void` | — |
491
+ | `spacing` | `"sm" \| "md" \| "lg"` | `"sm"` |
492
+ | `fullWidthBackgroup` | `boolean` | `false` |
493
+ | `titleHover` | `boolean` | `false` |
494
+ | `ariaLabel` | `string` | — |
495
+ | `itemClassName` | `string` | — |
496
+ | `headerProps` | `ButtonHTMLAttributes<HTMLButtonElement>` | — |
497
+ | `listProps` | `HTMLAttributes<HTMLUListElement>` | — |
498
+ | `draggable` | `boolean` | `false` |
499
+ | `dragGroup` | `string` | internal |
500
+ | `listId` | `string` | auto |
501
+ | `isItemDraggable` | `(item: ListItem) => boolean` | — |
502
+ | `onItemDrop` | `(event: ListItemDropEvent) => void` | — |
503
+ | `dragGhost` | `(item: ListItem) => ReactNode` | item content |
504
+ | `dropOutsideListId` | `string` | — |
505
+ | `dropOutsideBeforeListId` | `string` | — |
506
+ | `dropOutsideAfterListId` | `string` | — |
507
+
508
+ **ListItem fields**
509
+
510
+ | Field | Type |
511
+ | ------------- | ------------------------------------------------------------------- |
512
+ | `value` | `string` |
513
+ | `label` | `ReactNode` |
514
+ | `description` | `ReactNode` |
515
+ | `meta` | `ReactNode` |
516
+ | `icon` | `ReactNode` |
517
+ | `active` | `boolean` |
518
+ | `disabled` | `boolean` |
519
+ | `className` | `string` |
520
+ | `itemProps` | `HTMLAttributes<HTMLLIElement>` |
521
+ | `buttonProps` | `ButtonHTMLAttributes<HTMLButtonElement>` |
522
+ | `onClick` | `(event, item: ListItem) => void` |
523
+
524
+ **ListItemDropEvent fields**
525
+
526
+ | Field | Type |
527
+ | -------------- | --------------------------------- |
528
+ | `item` | `ListItem` — the dragged item |
529
+ | `sourceListId` | `string` |
530
+ | `targetListId` | `string` |
531
+ | `targetItem` | `ListItem` — undefined when dropped on empty space |
532
+ | `position` | `"before" \| "after" \| "inside"` |
533
+
534
+ Provide a `title` to render a header; set `collapsible` to make it toggle. Use `selectable` for single-selection highlight, or per-item `active`/`onClick` for custom behavior. Set `draggable` to enable reordering — lists that share a `dragGroup` can exchange items, and each list resolves drops through its own `onItemDrop`. The `dropOutsideListId` family redirects drops that land outside any list (e.g. back into a source pool). `value` must be unique within a list — it is the React key and the drag identity.
535
+
536
+ ---
537
+
439
538
  ### Markers
440
539
 
441
540
  Form selection primitives: Checkbox, Radio, and Switch.
@@ -1093,24 +1192,36 @@ All tokens are CSS custom properties defined in `src/styles/index.css` and avail
1093
1192
  | Token | Value |
1094
1193
  | -------- | -------------------------------- |
1095
1194
  | `--bg-0` | `#0a0b0e` — deepest background |
1096
- | `--bg-input` | `#101319` — input surface |
1195
+ | `--bg-input` | `#11151c` — input surface |
1097
1196
  | `--bg-1` | `#15181f` — card surface |
1098
- | `--bg-disabled` | `#15181f` — disabled input surface |
1197
+ | `--bg-disabled` | `#161b24` — disabled input surface |
1099
1198
  | `--bg-2` | `#1f242c` — hover state |
1100
1199
  | `--bg-3` | `#2a2f38` — popover / selected |
1200
+ | `--bg-4` | `#343b46` — elevated highlight |
1101
1201
 
1102
1202
  ### App Surfaces
1103
1203
 
1104
1204
  | Token | Value |
1105
1205
  | ---------------------------------- | ----------- |
1106
- | `--surface-topbar` | `#253047` |
1107
- | `--surface-sidebar` | `#1b2838` |
1108
- | `--surface-sidebar-hover` | `#253044` |
1109
- | `--surface-sidebar-selected` | `#303c50` |
1110
- | `--surface-sidebar-selected-hover` | `#3d4a60` |
1111
- | `--surface-content` | `#2c3b52` |
1112
- | `--surface-modal` | `#242d3d` |
1113
- | `--surface-modal-dialog` | `#2a3345` |
1206
+ | `--surface-topbar` | `#222731` |
1207
+ | `--surface-sidebar` | `#1a2028` |
1208
+ | `--surface-tabs-default` | `#1d252e` |
1209
+ | `--surface-tabs-hover` | `#29313b` |
1210
+ | `--surface-tabs-selected` | `#333c47` |
1211
+ | `--surface-tabs-selected-hover` | `#3d4754` |
1212
+ | `--surface-push-button-default` | `#252b34` |
1213
+ | `--surface-push-button-hover` | `#2d3540` |
1214
+ | `--surface-push-button-selected` | `#36404d` |
1215
+ | `--surface-push-button-selected-hover` | `#404b59` |
1216
+ | `--surface-list-row-hover` | `rgba(255, 255, 255, 0.045)` |
1217
+ | `--surface-list-row-selected` | `#354254` |
1218
+ | `--surface-list-row-selected-hover` | `#405068` |
1219
+ | `--surface-content` | `#252d37` |
1220
+ | `--surface-content-header` | `#2a333e` |
1221
+ | `--surface-content-toolbar` | `#303946` |
1222
+ | `--surface-content-footer` | `#2a333e` |
1223
+ | `--surface-modal` | `#1f2731` |
1224
+ | `--surface-modal-dialog` | `#29313b` |
1114
1225
 
1115
1226
  `Modal` uses `--surface-modal` by default. Apps can use `--surface-modal-dialog` in their own dialog class when they need the dialog-specific background.
1116
1227