{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button-group"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/examples/button-group/button-group-demo.tsx",
      "content": "\"use client\";\r\n\r\nimport { useState } from \"react\";\r\nimport {\r\n  ArchiveIcon,\r\n  ArrowLeftIcon,\r\n  CalendarPlusIcon,\r\n  ClockIcon,\r\n  ListFilterPlusIcon,\r\n  MailCheckIcon,\r\n  MoreHorizontalIcon,\r\n  TagIcon,\r\n  Trash2Icon,\r\n} from \"lucide-react\";\r\n\r\nimport {\r\n  Menu,\r\n  MenuGroup,\r\n  MenuItem,\r\n  MenuPopup,\r\n  MenuRadioGroup,\r\n  MenuRadioItem,\r\n  MenuSeparator,\r\n  MenuSub,\r\n  MenuSubPopup,\r\n  MenuSubTrigger,\r\n  MenuTrigger,\r\n} from \"@/registry/pure-ui/ui/menu\";\r\n\r\nimport { Button } from \"@/registry/pure-ui/ui/button\";\r\nimport { ButtonGroup } from \"@/registry/pure-ui/ui/button-group\";\r\n\r\nexport function ButtonGroupDemo() {\r\n  const [label, setLabel] = useState(\"personal\");\r\n\r\n  return (\r\n    <ButtonGroup>\r\n      <ButtonGroup className=\"hidden sm:flex\">\r\n        <Button variant=\"outline\" size=\"icon\" aria-label=\"Go Back\">\r\n          <ArrowLeftIcon />\r\n        </Button>\r\n      </ButtonGroup>\r\n\r\n      <ButtonGroup>\r\n        <Button variant=\"outline\">Archive</Button>\r\n        <Button variant=\"outline\">Report</Button>\r\n      </ButtonGroup>\r\n\r\n      <ButtonGroup>\r\n        <Button variant=\"outline\">Snooze</Button>\r\n\r\n        <Menu>\r\n          <MenuTrigger\r\n            render={\r\n              <Button variant=\"outline\" size=\"icon\" aria-label=\"More Options\" />\r\n            }\r\n          >\r\n            <MoreHorizontalIcon />\r\n          </MenuTrigger>\r\n          <MenuPopup align=\"end\" className=\"w-52\">\r\n            <MenuGroup>\r\n              <MenuItem>\r\n                <MailCheckIcon />\r\n                Mark as Read\r\n              </MenuItem>\r\n              <MenuItem>\r\n                <ArchiveIcon />\r\n                Archive\r\n              </MenuItem>\r\n            </MenuGroup>\r\n            <MenuSeparator />\r\n            <MenuGroup>\r\n              <MenuItem>\r\n                <ClockIcon />\r\n                Snooze\r\n              </MenuItem>\r\n              <MenuItem>\r\n                <CalendarPlusIcon />\r\n                Add to Calendar\r\n              </MenuItem>\r\n              <MenuItem>\r\n                <ListFilterPlusIcon />\r\n                Add to List\r\n              </MenuItem>\r\n              <MenuSub>\r\n                <MenuSubTrigger>\r\n                  <TagIcon />\r\n                  Label As...\r\n                </MenuSubTrigger>\r\n                <MenuSubPopup>\r\n                  <MenuRadioGroup value={label} onValueChange={setLabel}>\r\n                    <MenuRadioItem value=\"personal\">Personal</MenuRadioItem>\r\n                    <MenuRadioItem value=\"work\">Work</MenuRadioItem>\r\n                    <MenuRadioItem value=\"other\">Other</MenuRadioItem>\r\n                  </MenuRadioGroup>\r\n                </MenuSubPopup>\r\n              </MenuSub>\r\n            </MenuGroup>\r\n            <MenuSeparator />\r\n            <MenuGroup>\r\n              <MenuItem className=\"text-destructive hover:text-destructive\">\r\n                <Trash2Icon />\r\n                Trash\r\n              </MenuItem>\r\n            </MenuGroup>\r\n          </MenuPopup>\r\n        </Menu>\r\n      </ButtonGroup>\r\n    </ButtonGroup>\r\n  );\r\n}\r\n",
      "type": "registry:example"
    }
  ]
}