{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "p-popover-4",
  "description": "Split button with popover to confirm multiple occurrences",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "@coss/badge",
    "@coss/button",
    "@coss/checkbox",
    "@coss/checkbox-group",
    "@coss/group",
    "@coss/label",
    "@coss/popover"
  ],
  "files": [
    {
      "path": "registry/default/particles/p-popover-4.tsx",
      "content": "\"use client\";\n\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Badge } from \"@/registry/default/ui/badge\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Group, GroupSeparator } from \"@/registry/default/ui/group\";\nimport { Label } from \"@/registry/default/ui/label\";\nimport {\n  Popover,\n  PopoverClose,\n  PopoverDescription,\n  PopoverPopup,\n  PopoverTitle,\n  PopoverTrigger,\n} from \"@/registry/default/ui/popover\";\n\nconst occurrences = [\n  { date: \"Wed, Jul 15\", id: \"occurrence-1\", time: \"9:00 – 9:30am\" },\n  { date: \"Wed, Jul 15\", id: \"occurrence-2\", time: \"10:00 – 10:30am\" },\n  { date: \"Wed, Jul 15\", id: \"occurrence-3\", time: \"11:00 – 11:30am\" },\n];\n\nexport default function Particle() {\n  const [selected, setSelected] = useState(\n    occurrences.map((occurrence) => occurrence.id),\n  );\n\n  return (\n    <div className=\"flex gap-2\">\n      <Button size=\"xs\" variant=\"outline\">\n        Reject\n      </Button>\n      <Group aria-label=\"Confirm booking\">\n        <Button size=\"xs\">Confirm all</Button>\n        <GroupSeparator className=\"bg-primary/72\" />\n        <Popover>\n          <PopoverTrigger\n            render={\n              <Button\n                aria-label=\"Choose occurrences to confirm\"\n                size=\"icon-xs\"\n              />\n            }\n          >\n            <ChevronDownIcon aria-hidden=\"true\" />\n          </PopoverTrigger>\n          <PopoverPopup align=\"end\" className=\"w-84\">\n            <div className=\"mb-3\">\n              <PopoverTitle className=\"text-sm\">\n                Confirm occurrences\n              </PopoverTitle>\n              <PopoverDescription className=\"text-xs\">\n                {occurrences.length} pending for this booking\n              </PopoverDescription>\n            </div>\n            <CheckboxGroup\n              aria-label=\"Occurrences to confirm\"\n              className=\"gap-0 self-stretch\"\n              onValueChange={setSelected}\n              value={selected}\n            >\n              {occurrences.map((occurrence) => (\n                <Label className=\"flex w-full gap-2 py-1.5\" key={occurrence.id}>\n                  <Checkbox value={occurrence.id} />\n                  <span className=\"tabular-nums\">{occurrence.time}</span>\n                  <span className=\"ms-auto font-normal text-muted-foreground\">\n                    {occurrence.date}\n                  </span>\n                </Label>\n              ))}\n            </CheckboxGroup>\n            <div className=\"mt-3 flex justify-end gap-2\">\n              <PopoverClose\n                disabled={selected.length === 0}\n                render={<Button size=\"xs\" variant=\"ghost\" />}\n              >\n                Reject selected\n              </PopoverClose>\n              <PopoverClose\n                disabled={selected.length === 0}\n                render={<Button size=\"xs\" />}\n              >\n                Confirm selected\n                <Badge className=\"-me-1 text-primary-foreground/60\">\n                  {selected.length}\n                </Badge>\n              </PopoverClose>\n            </div>\n          </PopoverPopup>\n        </Popover>\n      </Group>\n    </div>\n  );\n}\n",
      "type": "registry:block"
    }
  ],
  "categories": [
    "button",
    "checkbox",
    "checkbox group",
    "group",
    "popover"
  ],
  "type": "registry:block"
}