{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:component",
  "title": "Button group",
  "description": "Keeps related actions together as joined buttons with 1px dividers and one outer frame.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/button.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/button-group.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\nimport type { ButtonProps } from \"./button\";\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst styles = stylex.create({\n  group: {\n    boxSizing: \"border-box\",\n    display: {\n      default: \"inline-flex\",\n      [mq.phone]: \"flex\",\n    },\n    alignItems: \"stretch\",\n    minHeight: `calc(${vlak.hit} + 2 * ${vlak.hairline})`,\n    width: {\n      default: null,\n      [mq.phone]: \"100%\",\n    },\n    borderWidth: vlak.hairline,\n    borderStyle: \"solid\",\n    borderColor: vlak.divider,\n    borderRadius: {\n      default: vlak.radiusSm,\n      [mq.phone]: vlak.radiusSm,\n    },\n    backgroundColor: vlak.divider,\n    gap: vlak.hairline,\n    overflow: \"hidden\",\n  },\n});\n\n/** Flush joined actions. One hairline between. Group owns the outer stroke. */\nexport const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(function ButtonGroup(\n  { className, style, children, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-btn-group\", className], styles.group);\n  return (\n    <div ref={ref} role=\"group\" {...props} className={sx.className} style={{ ...sx.style, ...style }}>\n      {React.Children.map(children, (child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(child as React.ReactElement<ButtonProps>, { grouped: true })\n          : child,\n      )}\n    </div>\n  );\n});\n",
      "type": "registry:component",
      "target": "components/vlak/button-group.tsx"
    },
    {
      "path": "vlak/styles/button-group.css",
      "content": "/* ── button-group: generated from packages/react/src/components/button-group.tsx ── */\n.rs-btn-group{box-sizing:border-box;display:inline-flex;align-items:stretch;min-height:calc(var(--hit) + 2 * 1px);border-width:1px;border-style:solid;border-color:var(--divider);border-radius:var(--radius-sm);background-color:var(--divider);gap:1px;overflow:hidden}\n@media (max-width: 640px){.rs-btn-group{display:flex;width:100%;border-radius:var(--radius-sm)}}\n",
      "type": "registry:file",
      "target": "styles/vlak/button-group.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "actions",
      "classes": [
        "rs-btn-group"
      ],
      "snippet": "<div class=\"rs-btn-group\"><button class=\"rs-btn-ghost\">Left</button><button class=\"rs-btn-ghost\">Center</button><button class=\"rs-btn-ghost\">Right</button></div>",
      "cssOnly": false,
      "registryDependencies": [
        "button",
        "vlak-lib"
      ],
      "aliases": [
        "Button group",
        "Segmented buttons",
        "Joined buttons"
      ],
      "example": "import { Button, ButtonGroup } from \"@noorddev/vlak-react\";\n\n<ButtonGroup aria-label=\"Alignment\">\n  <Button variant=\"ghost\">Left</Button>\n  <Button variant=\"ghost\">Center</Button>\n  <Button variant=\"ghost\">Right</Button>\n</ButtonGroup>",
      "usage": {
        "use": [
          "Two to four related actions that read as one control.",
          "Ghost or subtle buttons; the group owns the outer stroke and the seams.",
          "For application-owned selection, give each subtle Button aria-pressed and update the selection from its onClick handler."
        ],
        "avoid": [
          "Expecting the group to manage selection automatically; use ToggleGroup when it should own that behavior.",
          "Unrelated actions in one row; space them instead."
        ]
      },
      "keyboard": [
        {
          "keys": "Tab",
          "does": "Moves between the buttons"
        },
        {
          "keys": "Enter, Space",
          "does": "Activates the focused button"
        }
      ],
      "a11y": [
        "Renders role=\"group\"; pass aria-label to name it.",
        "Children get grouped, so each Button keeps its own name and focus ring."
      ]
    }
  }
}