{
  "name": "kanban-dynamic-overlay-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-dynamic-overlay-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  description?: string;\n  assignee?: string;\n  dueDate?: string;\n}\n\nconst COLUMN_TITLES: Record<string, string> = {\n  backlog: \"Backlog\",\n  inProgress: \"In Progress\",\n  review: \"Review\",\n  done: \"Done\",\n};\n\nexport default function KanbanDynamicOverlayDemo() {\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 grid-cols-3\">\n        {Object.entries(columns).map(([columnValue, tasks]) => (\n          <TaskColumn key={columnValue} value={columnValue} tasks={tasks} />\n        ))}\n      </KanbanBoard>\n      <KanbanOverlay>\n        {({ value, variant }) => {\n          if (variant === \"column\") {\n            const tasks = columns[value] ?? [];\n\n            return <TaskColumn value={value} tasks={tasks} />;\n          }\n\n          const task = Object.values(columns)\n            .flat()\n            .find((task) => task.id === value);\n\n          if (!task) return null;\n\n          return <TaskCard task={task} />;\n        }}\n      </KanbanOverlay>\n    </Kanban>\n  );\n}\n\ninterface TaskCardProps extends Omit<\n  React.ComponentProps<typeof KanbanItem>,\n  \"value\"\n> {\n  task: Task;\n}\n\nfunction TaskCard({ task, ...props }: TaskCardProps) {\n  return (\n    <KanbanItem key={task.id} value={task.id} asChild {...props}>\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\">{task.assignee}</span>\n              </div>\n            )}\n            {task.dueDate && (\n              <time className=\"text-[10px] tabular-nums\">{task.dueDate}</time>\n            )}\n          </div>\n        </div>\n      </div>\n    </KanbanItem>\n  );\n}\n\ninterface TaskColumnProps extends Omit<\n  React.ComponentProps<typeof KanbanColumn>,\n  \"children\"\n> {\n  tasks: Task[];\n}\n\nfunction TaskColumn({ value, tasks, ...props }: TaskColumnProps) {\n  return (\n    <KanbanColumn value={value} {...props}>\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2\">\n          <span className=\"text-sm font-semibold\">{COLUMN_TITLES[value]}</span>\n          <Badge variant=\"secondary\" className=\"pointer-events-none rounded-sm\">\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          <TaskCard key={task.id} task={task} asHandle />\n        ))}\n      </div>\n    </KanbanColumn>\n  );\n}\n",
      "target": ""
    }
  ]
}