{
  "name": "kanban-demo",
  "type": "registry:example",
  "dependencies": [
    "@dnd-kit/core",
    "@dnd-kit/modifiers",
    "@dnd-kit/sortable",
    "@dnd-kit/utilities",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "button",
    "kanban"
  ],
  "files": [
    {
      "path": "examples/kanban-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { GripVertical } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Badge } from \"@/registry/bases/radix/ui/badge\";\nimport { Button } from \"@/registry/bases/radix/ui/button\";\nimport {\n  Kanban,\n  KanbanBoard,\n  KanbanColumn,\n  KanbanColumnHandle,\n  KanbanItem,\n  KanbanOverlay,\n} from \"@/registry/bases/radix/ui/kanban\";\n\ninterface Task {\n  id: string;\n  title: string;\n  priority: \"low\" | \"medium\" | \"high\";\n  assignee?: string;\n  dueDate?: string;\n}\n\nconst COLUMN_TITLES: Record<string, string> = {\n  backlog: \"Backlog\",\n  inProgress: \"In Progress\",\n  done: \"Done\",\n};\n\nexport default function KanbanDemo() {\n  const [columns, setColumns] = React.useState<Record<string, Task[]>>({\n    backlog: [\n      {\n        id: \"1\",\n        title: \"Add authentication\",\n        priority: \"high\",\n        assignee: \"John Doe\",\n        dueDate: \"2024-04-01\",\n      },\n      {\n        id: \"2\",\n        title: \"Create API endpoints\",\n        priority: \"medium\",\n        assignee: \"Jane Smith\",\n        dueDate: \"2024-04-05\",\n      },\n      {\n        id: \"3\",\n        title: \"Write documentation\",\n        priority: \"low\",\n        assignee: \"Bob Johnson\",\n        dueDate: \"2024-04-10\",\n      },\n    ],\n    inProgress: [\n      {\n        id: \"4\",\n        title: \"Design system updates\",\n        priority: \"high\",\n        assignee: \"Alice Brown\",\n        dueDate: \"2024-03-28\",\n      },\n      {\n        id: \"5\",\n        title: \"Implement dark mode\",\n        priority: \"medium\",\n        assignee: \"Charlie Wilson\",\n        dueDate: \"2024-04-02\",\n      },\n    ],\n    done: [\n      {\n        id: \"7\",\n        title: \"Setup project\",\n        priority: \"high\",\n        assignee: \"Eve Davis\",\n        dueDate: \"2024-03-25\",\n      },\n      {\n        id: \"8\",\n        title: \"Initial commit\",\n        priority: \"low\",\n        assignee: \"Frank White\",\n        dueDate: \"2024-03-24\",\n      },\n    ],\n  });\n\n  return (\n    <Kanban\n      value={columns}\n      onValueChange={setColumns}\n      getItemValue={(item) => item.id}\n    >\n      <KanbanBoard className=\"grid auto-rows-fr sm:grid-cols-3\">\n        {Object.entries(columns).map(([columnValue, tasks]) => (\n          <KanbanColumn key={columnValue} value={columnValue}>\n            <div className=\"flex items-center justify-between\">\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-sm font-semibold\">\n                  {COLUMN_TITLES[columnValue]}\n                </span>\n                <Badge\n                  variant=\"secondary\"\n                  className=\"pointer-events-none rounded-sm\"\n                >\n                  {tasks.length}\n                </Badge>\n              </div>\n              <KanbanColumnHandle asChild>\n                <Button variant=\"ghost\" size=\"icon\">\n                  <GripVertical className=\"h-4 w-4\" />\n                </Button>\n              </KanbanColumnHandle>\n            </div>\n            <div className=\"flex flex-col gap-2 p-0.5\">\n              {tasks.map((task) => (\n                <KanbanItem key={task.id} value={task.id} asHandle asChild>\n                  <div className=\"rounded-md border bg-card p-3 shadow-xs\">\n                    <div className=\"flex flex-col gap-2\">\n                      <div className=\"flex items-center justify-between gap-2\">\n                        <span className=\"line-clamp-1 text-sm font-medium\">\n                          {task.title}\n                        </span>\n                        <Badge\n                          variant={\n                            task.priority === \"high\"\n                              ? \"destructive\"\n                              : task.priority === \"medium\"\n                                ? \"default\"\n                                : \"secondary\"\n                          }\n                          className=\"pointer-events-none h-5 rounded-sm px-1.5 text-[11px] capitalize\"\n                        >\n                          {task.priority}\n                        </Badge>\n                      </div>\n                      <div className=\"flex items-center justify-between text-xs text-muted-foreground\">\n                        {task.assignee && (\n                          <div className=\"flex items-center gap-1\">\n                            <div className=\"size-2 rounded-full bg-primary/20\" />\n                            <span className=\"line-clamp-1\">\n                              {task.assignee}\n                            </span>\n                          </div>\n                        )}\n                        {task.dueDate && (\n                          <time className=\"text-[10px] tabular-nums\">\n                            {task.dueDate}\n                          </time>\n                        )}\n                      </div>\n                    </div>\n                  </div>\n                </KanbanItem>\n              ))}\n            </div>\n          </KanbanColumn>\n        ))}\n      </KanbanBoard>\n      <KanbanOverlay>\n        <div className=\"size-full rounded-md bg-primary/10\" />\n      </KanbanOverlay>\n    </Kanban>\n  );\n}\n",
      "target": ""
    }
  ]
}