{
  "name": "action-bar-demo",
  "type": "registry:example",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "action-bar",
    "checkbox"
  ],
  "files": [
    {
      "path": "examples/action-bar-demo.tsx",
      "type": "registry:example",
      "content": "\"use client\";\n\nimport { Copy, Trash2, X } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport {\n  ActionBar,\n  ActionBarClose,\n  ActionBarGroup,\n  ActionBarItem,\n  ActionBarSelection,\n  ActionBarSeparator,\n} from \"@/registry/bases/base/ui/action-bar\";\nimport { Checkbox } from \"@/registry/bases/base/ui/checkbox\";\nimport { Label } from \"@/registry/bases/base/ui/label\";\n\ninterface Task {\n  id: string;\n  name: string;\n}\n\nexport default function ActionBarDemo() {\n  const [tasks, setTasks] = React.useState<Task[]>([\n    { id: crypto.randomUUID(), name: \"Weekly Status Report\" },\n    { id: crypto.randomUUID(), name: \"Client Invoice Review\" },\n    { id: crypto.randomUUID(), name: \"Product Roadmap\" },\n    { id: crypto.randomUUID(), name: \"Team Standup Notes\" },\n  ]);\n  const [selectedTaskIds, setSelectedTaskIds] = React.useState<Set<string>>(\n    new Set(),\n  );\n\n  const open = selectedTaskIds.size > 0;\n\n  const onOpenChange = React.useCallback((open: boolean) => {\n    if (!open) {\n      setSelectedTaskIds(new Set());\n    }\n  }, []);\n\n  const onItemSelect = React.useCallback(\n    (id: string, checked: boolean) => {\n      const newSelected = new Set(selectedTaskIds);\n      if (checked) {\n        newSelected.add(id);\n      } else {\n        newSelected.delete(id);\n      }\n      setSelectedTaskIds(newSelected);\n    },\n    [selectedTaskIds],\n  );\n\n  const onDuplicate = React.useCallback(() => {\n    const selectedItems = tasks.filter((task) => selectedTaskIds.has(task.id));\n    const duplicates = selectedItems.map((task) => ({\n      ...task,\n      id: crypto.randomUUID(),\n      name: `${task.name} (copy)`,\n    }));\n    setTasks([...tasks, ...duplicates]);\n    setSelectedTaskIds(new Set());\n  }, [tasks, selectedTaskIds]);\n\n  const onDelete = React.useCallback(() => {\n    setTasks(tasks.filter((task) => !selectedTaskIds.has(task.id)));\n    setSelectedTaskIds(new Set());\n  }, [tasks, selectedTaskIds]);\n\n  return (\n    <div className=\"flex w-full flex-col gap-2.5\">\n      <h3 className=\"font-semibold text-lg\">Tasks</h3>\n      <div className=\"flex max-h-72 flex-col gap-1.5 overflow-y-auto\">\n        {tasks.map((task) => (\n          <Label\n            key={task.id}\n            className={cn(\n              \"flex cursor-pointer items-center gap-2.5 rounded-md border bg-card/70 px-3 py-2.5 transition-colors hover:bg-accent/70\",\n              selectedTaskIds.has(task.id) && \"bg-accent/70\",\n            )}\n          >\n            <Checkbox\n              checked={selectedTaskIds.has(task.id)}\n              onCheckedChange={(checked) =>\n                onItemSelect(task.id, checked === true)\n              }\n            />\n            <span className=\"truncate font-medium text-sm\">{task.name}</span>\n          </Label>\n        ))}\n      </div>\n\n      <ActionBar open={open} onOpenChange={onOpenChange}>\n        <ActionBarSelection>\n          {selectedTaskIds.size} selected\n          <ActionBarSeparator />\n          <ActionBarClose>\n            <X />\n          </ActionBarClose>\n        </ActionBarSelection>\n        <ActionBarSeparator />\n        <ActionBarGroup>\n          <ActionBarItem onSelect={onDuplicate}>\n            <Copy />\n            Duplicate\n          </ActionBarItem>\n          <ActionBarItem variant=\"destructive\" onSelect={onDelete}>\n            <Trash2 />\n            Delete\n          </ActionBarItem>\n        </ActionBarGroup>\n      </ActionBar>\n    </div>\n  );\n}\n",
      "target": ""
    }
  ]
}