{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:ui",
  "title": "Button group",
  "description": "Related actions as one cluster of keys in a sunk tray, each pressing on its own; a split button adds a chevron key that opens a menu of the other ways to do the main action.",
  "dependencies": [],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/button-group/button-group.tsx",
      "type": "registry:ui",
      "target": "components/metalui/button-group/button-group.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { Menu } from '../menu/menu';\nimport { buttonClasses } from '../button/button';\n\n/* ─────────────────────────────────────────────────────────\n * BUTTON GROUP and SPLIT BUTTON, related actions as one cluster of keys\n *\n *   group     button caps side by side in a sunk tray (the switch track's well); the inner corners\n *             tighten so they read as one set; each key presses on its own (the button's 1 press)\n *             and its neighbours stay still\n *   split     the main action and a chevron key; the chevron opens a menu of the other ways\n *   open      the chevron turns over on the part spring while the menu is open, and back after\n *   focus     each key is its own tab stop with the green ring\n * Reduce Motion: the chevron turns at once.\n * The caps are the button recipe; the button-group recipe adds the tray and the chevron.\n * ───────────────────────────────────────────────────────── */\n\nconst TRAY = 'mu-button-group inline-flex items-center gap-button-group-tray-gap p-button-group-tray-pad rounded-pill recipe-switch [&>.mu-button]:rounded-button-group-key-radius [&>.mu-button:first-child]:rounded-l-pill [&>.mu-button:last-child]:rounded-r-pill';\nconst CHEVRON_KEY = `${buttonClasses('standard')} mu-button w-button-group-chevron-width px-0!`;\nconst CHEVRON = 'mu-button-group-chevron size-button-group-chevron-glyph button-group-chevron reduced-motion:transition-none';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** What the actions act on, for assistive tech: \"Text alignment\". */\n  'aria-label': string;\n}\n\n/** Related actions set together. Put Buttons inside. */\nexport function ButtonGroup({ className, ...props }: ButtonGroupProps) {\n  return <div role=\"group\" className={className ? `${TRAY} ${className}` : TRAY} {...props} />;\n}\n\nexport interface SplitButtonProps {\n  /** The main action's cap: a Button. */\n  children: React.ReactElement;\n  /** The other ways to do it: MenuItem and MenuSeparator. */\n  menu: React.ReactNode;\n  /** Names the chevron: \"More export options\". */\n  menuLabel: string;\n  /** A heading engraved over the menu's rows. */\n  heading?: string;\n  disabled?: boolean;\n}\n\n/** The main action, and a chevron that opens the other ways to do it. */\nexport function SplitButton({ children, menu, menuLabel, heading, disabled }: SplitButtonProps) {\n  return (\n    <div role=\"group\" aria-label={menuLabel} className={TRAY}>\n      {children}\n      <Menu\n        heading={heading}\n        align=\"end\"\n        trigger={(\n          <button type=\"button\" aria-label={menuLabel} disabled={disabled} className={CHEVRON_KEY}>\n            <svg aria-hidden viewBox=\"0 0 12 12\" className={CHEVRON} fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} strokeLinecap=\"round\" strokeLinejoin=\"round\">\n              <path d=\"M3 4.5 6 7.5l3-3\" />\n            </svg>\n          </button>\n        )}\n      >\n        {menu}\n      </Menu>\n    </div>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/button-group.md. SwiftUI: MetalButtonGroup in the MetalUI Swift package."
}