{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-story",
  "title": "Button Group Story",
  "author": "Lloyd Richards <lloyd.d.richards@gmail.com>",
  "description": "Interactive Storybook stories demonstrating button group component usage and variants",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "button-group",
    "dropdown-menu",
    "input",
    "input-group",
    "popover",
    "select",
    "separator",
    "textarea",
    "tooltip"
  ],
  "files": [
    {
      "path": "registry/ui/button-group-story/button-group-base.stories.tsx",
      "content": "// Replace nextjs-vite with the name of your framework\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport {\n  ArrowLeftIcon,\n  ArrowRightIcon,\n  AudioLinesIcon,\n  BotIcon,\n  ChevronDownIcon,\n  MoreHorizontalIcon,\n  PlusIcon,\n  SearchIcon,\n} from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n} from \"@/components/ui/button-group\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\";\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\";\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n} from \"@/components/ui/select\";\nimport { Separator } from \"@/components/ui/separator\";\nimport { Textarea } from \"@/components/ui/textarea\";\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from \"@/components/ui/tooltip\";\n\n/**\n * A container that groups related buttons together with consistent styling.\n */\nconst meta: Meta<typeof ButtonGroup> = {\n  title: \"ui/base/ButtonGroup\",\n  component: ButtonGroup,\n  tags: [\"autodocs\"],\n  argTypes: {\n    orientation: {\n      control: \"select\",\n      options: [\"horizontal\", \"vertical\"],\n    },\n  },\n  parameters: {\n    layout: \"centered\",\n  },\n  args: {\n    orientation: \"horizontal\",\n  },\n} satisfies Meta<typeof ButtonGroup>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\n/**\n * The default horizontal button group with related action buttons.\n */\nexport const Default: Story = {\n  render: (args) => (\n    <ButtonGroup {...args}>\n      <Button variant=\"outline\">Copy</Button>\n      <Button variant=\"outline\">Paste</Button>\n      <Button variant=\"outline\">Cut</Button>\n    </ButtonGroup>\n  ),\n};\n\n/**\n * Vertical orientation stacks buttons in a column layout.\n */\nexport const Orientation: Story = {\n  render: (args) => (\n    <ButtonGroup {...args}>\n      <Button variant=\"outline\" size=\"icon\">\n        <PlusIcon />\n      </Button>\n      <Button variant=\"outline\" size=\"icon\">\n        <MoreHorizontalIcon />\n      </Button>\n    </ButtonGroup>\n  ),\n  args: {\n    orientation: \"vertical\",\n  },\n};\n\n/**\n * Nest ButtonGroup components to create button groups with spacing.\n */\nexport const Nested: Story = {\n  render: () => (\n    <ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"sm\">\n          1\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          2\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          3\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          4\n        </Button>\n        <Button variant=\"outline\" size=\"sm\">\n          5\n        </Button>\n      </ButtonGroup>\n      <ButtonGroup>\n        <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Previous\">\n          <ArrowLeftIcon />\n        </Button>\n        <Button variant=\"outline\" size=\"icon-sm\" aria-label=\"Next\">\n          <ArrowRightIcon />\n        </Button>\n      </ButtonGroup>\n    </ButtonGroup>\n  ),\n};\n\n/**\n * Button group with separators to visually divide related button sections.\n */\nexport const WithSeparator: Story = {\n  render: () => (\n    <ButtonGroup>\n      <Button variant=\"secondary\" size=\"sm\">\n        Copy\n      </Button>\n      <ButtonGroupSeparator />\n      <Button variant=\"secondary\" size=\"sm\">\n        Paste\n      </Button>\n    </ButtonGroup>\n  ),\n};\n\n/**\n * Create a split button group by adding two buttons separated by a separator.\n */\nexport const Split: Story = {\n  render: () => (\n    <ButtonGroup>\n      <Button variant=\"secondary\">Button</Button>\n      <ButtonGroupSeparator />\n      <Button size=\"icon\" variant=\"secondary\">\n        <PlusIcon />\n      </Button>\n    </ButtonGroup>\n  ),\n};\n\n/**\n * Wrap an Input component with buttons.\n */\nexport const WithInput: Story = {\n  render: () => (\n    <ButtonGroup>\n      <Input placeholder=\"Search...\" />\n      <Button variant=\"outline\" aria-label=\"Search\">\n        <SearchIcon />\n      </Button>\n    </ButtonGroup>\n  ),\n};\n\n/**\n * Wrap an InputGroup component to create complex input layouts.\n */\nexport const WithInputGroup: Story = {\n  render: () => {\n    const [voiceEnabled, setVoiceEnabled] = React.useState(false);\n\n    return (\n      <TooltipProvider>\n        <ButtonGroup className=\"[--radius:9999rem]\">\n          <ButtonGroup>\n            <Button variant=\"outline\" size=\"icon\">\n              <PlusIcon />\n            </Button>\n          </ButtonGroup>\n          <ButtonGroup>\n            <InputGroup>\n              <InputGroupInput\n                placeholder={\n                  voiceEnabled\n                    ? \"Record and send audio...\"\n                    : \"Send a message...\"\n                }\n                disabled={voiceEnabled}\n              />\n              <InputGroupAddon align=\"inline-end\">\n                <Tooltip>\n                  <InputGroupButton\n                    render={<TooltipTrigger />}\n                    onClick={() => setVoiceEnabled(!voiceEnabled)}\n                    size=\"icon-xs\"\n                    data-active={voiceEnabled}\n                    className=\"data-[active=true]:bg-orange-100 data-[active=true]:text-orange-700 dark:data-[active=true]:bg-orange-800 dark:data-[active=true]:text-orange-100\"\n                    aria-pressed={voiceEnabled}\n                  >\n                    <AudioLinesIcon />\n                  </InputGroupButton>\n                  <TooltipContent>Voice Mode</TooltipContent>\n                </Tooltip>\n              </InputGroupAddon>\n            </InputGroup>\n          </ButtonGroup>\n        </ButtonGroup>\n      </TooltipProvider>\n    );\n  },\n};\n\n/**\n * Create a split button group with a DropdownMenu component.\n */\nexport const WithDropdownMenu: Story = {\n  render: () => (\n    <ButtonGroup>\n      <Button variant=\"outline\">Follow</Button>\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"!pl-2\" />}\n        >\n          <ChevronDownIcon />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"[--radius:1rem]\">\n          <DropdownMenuItem>Mute Conversation</DropdownMenuItem>\n          <DropdownMenuItem>Mark as Read</DropdownMenuItem>\n          <DropdownMenuItem>Report Conversation</DropdownMenuItem>\n          <DropdownMenuItem>Block User</DropdownMenuItem>\n          <DropdownMenuItem>Share Conversation</DropdownMenuItem>\n          <DropdownMenuItem>Copy Conversation</DropdownMenuItem>\n          <DropdownMenuItem className=\"text-destructive focus:text-destructive\">\n            Delete Conversation\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </ButtonGroup>\n  ),\n};\n\n/**\n * Pair with a Select component.\n */\nexport const WithSelect: Story = {\n  render: () => {\n    const [currency, setCurrency] = React.useState(\"$\");\n\n    const CURRENCIES = [\n      { value: \"$\", label: \"US Dollar\" },\n      { value: \"€\", label: \"Euro\" },\n      { value: \"£\", label: \"British Pound\" },\n    ];\n\n    return (\n      <ButtonGroup>\n        <ButtonGroup>\n          <Select\n            value={currency}\n            onValueChange={(nextValue) => setCurrency(nextValue ?? \"$\")}\n          >\n            <SelectTrigger className=\"font-mono\">{currency}</SelectTrigger>\n            <SelectContent className=\"min-w-24\">\n              {CURRENCIES.map((currency) => (\n                <SelectItem key={currency.value} value={currency.value}>\n                  {currency.value}{\" \"}\n                  <span className=\"text-muted-foreground\">\n                    {currency.label}\n                  </span>\n                </SelectItem>\n              ))}\n            </SelectContent>\n          </Select>\n          <Input placeholder=\"10.00\" pattern=\"[0-9]*\" />\n        </ButtonGroup>\n        <ButtonGroup>\n          <Button aria-label=\"Send\" size=\"icon\" variant=\"outline\">\n            <ArrowRightIcon />\n          </Button>\n        </ButtonGroup>\n      </ButtonGroup>\n    );\n  },\n};\n\n/**\n * Use with a Popover component.\n */\nexport const WithPopover: Story = {\n  render: () => (\n    <ButtonGroup>\n      <Button variant=\"outline\">\n        <BotIcon /> Copilot\n      </Button>\n      <Popover>\n        <PopoverTrigger\n          render={\n            <Button variant=\"outline\" size=\"icon\" aria-label=\"Open Popover\" />\n          }\n        >\n          <ChevronDownIcon />\n        </PopoverTrigger>\n        <PopoverContent align=\"end\" className=\"rounded-xl p-0 text-sm\">\n          <div className=\"px-4 py-3\">\n            <div className=\"text-sm font-medium\">Agent Tasks</div>\n          </div>\n          <Separator />\n          <div className=\"p-4 text-sm *:[p:not(:last-child)]:mb-2\">\n            <Textarea\n              placeholder=\"Describe your task in natural language.\"\n              className=\"mb-4 resize-none\"\n            />\n            <p className=\"font-medium\">Start a new task with Copilot</p>\n            <p className=\"text-muted-foreground\">\n              Describe your task in natural language. Copilot will work in the\n              background and open a pull request for your review.\n            </p>\n          </div>\n        </PopoverContent>\n      </Popover>\n    </ButtonGroup>\n  ),\n};\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "ui",
    "storybook",
    "button-group",
    "layout"
  ],
  "type": "registry:component"
}