{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"list","type":"registry:ui","title":"list","description":"List views are a great way to show a list of tasks grouped by status and ranked by priority.","author":"Hayden Bleasel <hello@haydenbleasel.com>","dependencies":["@dnd-kit/core","@dnd-kit/modifiers"],"devDependencies":[],"registryDependencies":[],"files":[{"type":"registry:ui","path":"index.tsx","content":"\"use client\";\n\nimport {\n  DndContext,\n  type DragEndEvent,\n  rectIntersection,\n  useDraggable,\n  useDroppable,\n} from \"@dnd-kit/core\";\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\";\nimport type { ReactNode } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport type { DragEndEvent } from \"@dnd-kit/core\";\n\ntype Status = {\n  id: string;\n  name: string;\n  color: string;\n};\n\ntype Feature = {\n  id: string;\n  name: string;\n  startAt: Date;\n  endAt: Date;\n  status: Status;\n};\n\nexport type ListItemsProps = {\n  children: ReactNode;\n  className?: string;\n};\n\nexport const ListItems = ({ children, className }: ListItemsProps) => (\n  <div className={cn(\"flex flex-1 flex-col gap-2 p-3\", className)}>\n    {children}\n  </div>\n);\n\nexport type ListHeaderProps =\n  | {\n      children: ReactNode;\n    }\n  | {\n      name: Status[\"name\"];\n      color: Status[\"color\"];\n      className?: string;\n    };\n\nexport const ListHeader = (props: ListHeaderProps) =>\n  \"children\" in props ? (\n    props.children\n  ) : (\n    <div\n      className={cn(\n        \"flex shrink-0 items-center gap-2 bg-foreground/5 p-3\",\n        props.className\n      )}\n    >\n      <div\n        className=\"h-2 w-2 rounded-full\"\n        style={{ backgroundColor: props.color }}\n      />\n      <p className=\"m-0 font-semibold text-sm\">{props.name}</p>\n    </div>\n  );\n\nexport type ListGroupProps = {\n  id: Status[\"id\"];\n  children: ReactNode;\n  className?: string;\n};\n\nexport const ListGroup = ({ id, children, className }: ListGroupProps) => {\n  const { setNodeRef, isOver } = useDroppable({ id });\n\n  return (\n    <div\n      className={cn(\n        \"bg-secondary transition-colors\",\n        isOver && \"bg-foreground/10\",\n        className\n      )}\n      ref={setNodeRef}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport type ListItemProps = Pick<Feature, \"id\" | \"name\"> & {\n  readonly index: number;\n  readonly parent: string;\n  readonly children?: ReactNode;\n  readonly className?: string;\n};\n\nexport const ListItem = ({\n  id,\n  name,\n  index,\n  parent,\n  children,\n  className,\n}: ListItemProps) => {\n  const { attributes, listeners, setNodeRef, transform, isDragging } =\n    useDraggable({\n      id,\n      data: { index, parent },\n    });\n\n  return (\n    <div\n      className={cn(\n        \"flex cursor-grab items-center gap-2 rounded-md border bg-background p-2 shadow-sm\",\n        isDragging && \"cursor-grabbing\",\n        className\n      )}\n      style={{\n        transform: transform\n          ? `translateX(${transform.x}px) translateY(${transform.y}px)`\n          : \"none\",\n      }}\n      {...listeners}\n      {...attributes}\n      ref={setNodeRef}\n    >\n      {children ?? <p className=\"m-0 font-medium text-sm\">{name}</p>}\n    </div>\n  );\n};\n\nexport type ListProviderProps = {\n  children: ReactNode;\n  onDragEnd: (event: DragEndEvent) => void;\n  className?: string;\n};\n\nexport const ListProvider = ({\n  children,\n  onDragEnd,\n  className,\n}: ListProviderProps) => (\n  <DndContext\n    collisionDetection={rectIntersection}\n    modifiers={[restrictToVerticalAxis]}\n    onDragEnd={onDragEnd}\n  >\n    <div className={cn(\"flex size-full flex-col\", className)}>{children}</div>\n  </DndContext>\n);\n","target":"components/kibo-ui/list/index.tsx"}],"css":{}}