{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-orientation-demo",
  "type": "registry:example",
  "registryDependencies": [
    "button-group"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/examples/button-group/button-group-orientation-demo.tsx",
      "content": "import { MinusIcon, PlusIcon, ZoomInIcon, ZoomOutIcon } from \"lucide-react\";\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 ButtonGroupOrientationDemo() {\r\n  return (\r\n    <div className=\"flex gap-3\">\r\n      <ButtonGroup\r\n        orientation=\"vertical\"\r\n        aria-label=\"Media controls\"\r\n        className=\"h-fit\"\r\n      >\r\n        <Button variant=\"outline\" size=\"icon\">\r\n          <PlusIcon />\r\n        </Button>\r\n        <Button variant=\"outline\" size=\"icon\">\r\n          <MinusIcon />\r\n        </Button>\r\n      </ButtonGroup>\r\n\r\n      <ButtonGroup aria-label=\"Zoom controls\" orientation=\"vertical\">\r\n        <Button aria-label=\"Zoom in\" size=\"icon\" variant=\"outline\">\r\n          <ZoomInIcon />\r\n        </Button>\r\n        <Button aria-label=\"Zoom Out\" size=\"icon\" variant=\"outline\">\r\n          <ZoomOutIcon />\r\n        </Button>\r\n      </ButtonGroup>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:example"
    }
  ]
}