{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "task",
  "title": "Task",
  "description": "A to-do list the agent works through, with progress.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json",
    "https://ui.cuelark.com/r/collapsible.json",
    "https://ui.cuelark.com/r/motion.json",
    "https://ui.cuelark.com/r/progress.json",
    "https://ui.cuelark.com/r/text-shimmer.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/task.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { CheckIcon, ChevronDownIcon, CircleDashedIcon } from \"lucide-react\";\n\nimport { pop } from \"@/lib/motion\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"@/registry/cuelark/ui/collapsible\";\nimport { Progress } from \"@/registry/cuelark/ui/progress\";\nimport { TextShimmer } from \"@/registry/cuelark/ui/text-shimmer\";\nimport { cn } from \"@/lib/utils\";\n\ntype TaskItem = { label: string; status: \"done\" | \"active\" | \"todo\" };\n\n/** A to-do list the agent works through: a progress bar, the active item shimmering, finished ones checked off. */\nfunction Task({ title, items, className, defaultOpen = true, ...props }: Omit<React.ComponentProps<typeof Collapsible>, \"title\"> & { title: React.ReactNode; items: TaskItem[] }) {\n  const done = items.filter((i) => i.status === \"done\").length;\n  const list = React.useRef<HTMLUListElement>(null);\n  const prev = React.useRef(items.map((i) => i.status));\n  React.useLayoutEffect(() => {\n    items.forEach((it, i) => {\n      if (it.status === \"done\" && prev.current[i] !== \"done\") pop(list.current?.children[i]?.firstElementChild ?? null);\n    });\n    prev.current = items.map((i) => i.status);\n  }, [items]);\n  return (\n    <Collapsible data-slot=\"task\" defaultOpen={defaultOpen} className={cn(\"group/task grid gap-2 rounded-xl border border-border bg-card p-3\", className)} {...props}>\n      <CollapsibleTrigger className=\"flex items-center gap-2.5 rounded-md text-left text-sm outline-none focus-visible:ring-3 focus-visible:ring-ring/50\">\n        <span className=\"flex-1 font-medium\">{title}</span>\n        <span className=\"font-mono text-xs text-muted-foreground tabular-nums\">\n          {done}/{items.length}\n        </span>\n        <ChevronDownIcon className=\"size-4 text-muted-foreground transition-transform duration-200 ease-cue group-data-[state=open]/task:rotate-180\" />\n      </CollapsibleTrigger>\n      <Progress value={(done / Math.max(1, items.length)) * 100} size=\"sm\" aria-label=\"Task progress\" />\n      <CollapsibleContent>\n        <ul ref={list} className=\"grid gap-1.5 pt-1\">\n          {items.map((it) => (\n            <li key={it.label} className=\"flex items-center gap-2.5 text-sm\">\n              {it.status === \"done\" ? (\n                <span className=\"grid size-4 place-items-center rounded-full bg-foreground text-background\">\n                  <CheckIcon className=\"size-2.5\" strokeWidth={3.5} />\n                </span>\n              ) : it.status === \"active\" ? (\n                <span className=\"size-4 rounded-full border-2 border-signal bg-signal/20\" />\n              ) : (\n                <CircleDashedIcon className=\"size-4 text-muted-foreground/60\" />\n              )}\n              <span className={cn(it.status === \"done\" && \"text-muted-foreground line-through decoration-border\", it.status === \"todo\" && \"text-muted-foreground\")}>\n                {it.status === \"active\" ? <TextShimmer>{it.label}</TextShimmer> : it.label}\n              </span>\n            </li>\n          ))}\n        </ul>\n      </CollapsibleContent>\n    </Collapsible>\n  );\n}\n\nexport { Task };\nexport type { TaskItem };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/task",
  "categories": [
    "agents"
  ],
  "type": "registry:ui"
}