{"_id":"@edux-design/kanban-board","name":"@edux-design/kanban-board","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.1":{"name":"@edux-design/kanban-board","version":"0.1.1","private":false,"sideEffects":["**/*.css"],"types":"./dist/index.d.ts","exports":{".":{"import":"./dist/index.mjs","require":"./dist/index.js","types":"./dist/index.d.ts"}},"scripts":{"lint":"eslint . --max-warnings 0","build":"tsup src/index.js --format esm,cjs --dts --external react,react-dom","dev":"tsup src/index.js --watch --format esm,cjs --dts --external react,react-dom","check-types":"tsc --noEmit"},"dependencies":{"@dnd-kit/core":"6.3.1","@dnd-kit/sortable":"^8.0.0","@dnd-kit/utilities":"^3.2.2","@edux-design/avatars":"*","@edux-design/chips":"*","@edux-design/tags":"*","@edux-design/typography":"*","@edux-design/utils":"*"},"peerDependencies":{"react":">=18","react-dom":">=18"},"devDependencies":{"tsup":"^8.5.0","typescript":"^5.9.2"},"_id":"@edux-design/kanban-board@0.1.1","gitHead":"d4c365e8f08f116f7a56f852764edaf1d4285781","description":"Kanban board primitives with token-based cards, columns, and drag-and-drop ordering. The package is controlled: you own the column/card data and receive updates when cards move.","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-71dPemLhhB1Ft7QjG7GbJf2Q/jGEA+6/M4fQjzI2ozgBaYmY5ycFCuWJ8TvS9ADzYCAJYALipbaFg20jXrH8yA==","shasum":"6fb15c45e8ea3ccb11c5a410d9536160303b8256","tarball":"https://registry.npmjs.org/@edux-design/kanban-board/-/kanban-board-0.1.1.tgz","fileCount":6,"unpackedSize":54079,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHQs26A2JlN/CXiIBo7ameOX8DiAjnI6aCsF9SZm8+c9AiAEGkSvvryucPQ69MYXVPPrQJS30PpAwmqyikXDATPIdQ=="}]},"_npmUser":{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"},"directories":{},"maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/kanban-board_0.1.1_1779771346937_0.4365176439973346"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-26T04:55:46.801Z","0.1.1":"2026-05-26T04:55:47.093Z","modified":"2026-05-26T04:55:47.487Z"},"maintainers":[{"name":"vjdalsanto26","email":"viraj.gunawardana@cambridge.org"}],"description":"Kanban board primitives with token-based cards, columns, and drag-and-drop ordering. The package is controlled: you own the column/card data and receive updates when cards move.","readme":"# @edux-design/kanban-board\n\nKanban board primitives with token-based cards, columns, and drag-and-drop ordering. The package is controlled: you own the column/card data and receive updates when cards move.\n\n---\n\n## Installation\n\n```bash\npnpm add @edux-design/kanban-board\n# or\nnpm install @edux-design/kanban-board\n```\n\nPeer deps include `react` and `react-dom`. Drag-and-drop dependencies are bundled through the package.\n\n---\n\n## Data shape\n\n```js\nconst columns = [\n  {\n    id: \"column-backlog\",\n    title: \"Backlog\",\n    cardIds: [\"card-1\", \"card-2\"],\n  },\n  {\n    id: \"column-progress\",\n    title: \"In progress\",\n    cardIds: [\"card-3\"],\n  },\n];\n\nconst cardsById = {\n  \"card-1\": {\n    id: \"card-1\",\n    label: \"Discovery\",\n    title: \"Shape the brief\",\n    summary: \"Write the temporary feature framing.\",\n    priority: \"High\",\n    assignee: \"VG\",\n    dueText: \"Today\",\n  },\n};\n```\n\n---\n\n## Usage\n\n```jsx\nimport { useState } from \"react\";\nimport { KanbanBoard } from \"@edux-design/kanban-board\";\n\nexport function Example() {\n  const [columns, setColumns] = useState(initialColumns);\n\n  return (\n    <KanbanBoard\n      columns={columns}\n      cardsById={initialCardsById}\n      onColumnsChange={setColumns}\n    />\n  );\n}\n```\n\n---\n\n## Props\n\n### `KanbanBoard`\n\n- `columns` (required): array of column objects with `id`, `title`, and `cardIds`.\n- `cardsById` (required): map of card id to card model.\n- `onColumnsChange` (required): called with the next ordered columns after a drag interaction.\n- `className`: optional wrapper classes for the board row.\n- `columnWidth`: optional width class/string applied to each column wrapper. Defaults to `w-[320px]`.\n- `showColumnTitle`: optional boolean. Defaults to `true`.\n- `showColumnCardCount`: optional boolean. Defaults to `true`.\n- `allowMultiSelectDrag`: optional boolean. Defaults to `false`. Enables same-column multi-select with CMD/CTRL toggle, SHIFT range selection, and group drag.\n- `deselectOnBlur`: optional boolean. Defaults to `true`. Clears selected cards when focus leaves the board.\n\n### `KanbanColumn`\n\n- `column` (required): column model.\n- `cards` (required): resolved array of cards for the column.\n- `totalCards`: optional numeric count. Defaults to `cards.length`.\n- `widthClassName`: optional width class for the column surface.\n- `showTitle`: optional boolean. Defaults to `true`.\n- `showCardCount`: optional boolean. Defaults to `true`.\n\n### `KanbanCard`\n\n- `card` (required): card model with `label`, `title`, `summary`, `priority`, `assignee`, and `dueText`.\n- `columnId` (required): owning column id for sortable metadata.\n- `isOverlay`: internal drag overlay mode.\n\n---\n\n## Notes\n\n- The board supports moving cards within a column and across columns.\n- When `allowMultiSelectDrag` is enabled, users can select multiple cards in the same column and move them together while preserving their order.\n- While dragging, the source card becomes a neutral placeholder so layout stays stable.\n- Assignee avatars use deterministic colors derived from the assignee name.\n","readmeFilename":"README.md","_rev":"1-4216597238752e0ae1f6202539cbb74a"}