{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "Join buttons into one control: split buttons, toolbars, steppers.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/button-group.tsx",
      "content": "import * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Joins buttons into one control (split buttons, toolbars, pagination): inner corners square off, borders merge,\n * and the focused button rises above its neighbours so its ring is never clipped.\n */\nfunction ButtonGroup({ className, orientation = \"horizontal\", ...props }: React.ComponentProps<\"div\"> & { orientation?: \"horizontal\" | \"vertical\" }) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(\n        \"isolate inline-flex w-fit *:focus-visible:z-10\",\n        orientation === \"horizontal\"\n          ? \"*:not-first:rounded-s-none *:not-last:rounded-e-none *:not-first:-ms-px\"\n          : \"flex-col *:not-first:rounded-t-none *:not-last:rounded-b-none *:not-first:-mt-px\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** A thin rule between grouped buttons. */\nfunction ButtonGroupSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div role=\"separator\" data-slot=\"button-group-separator\" className={cn(\"z-10 w-px self-stretch bg-current/15\", className)} {...props} />;\n}\n\nexport { ButtonGroup, ButtonGroupSeparator };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/button-group",
  "categories": [
    "actions"
  ],
  "type": "registry:ui"
}