{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "title": "Button Group",
  "description": "Buttons and fields joined into one control, like the + and − buttons under a list.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/separator"
  ],
  "files": [
    {
      "path": "registry/macos/ui/button-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Separator } from \"@/registry/macos/ui/separator\"\n\n// Buttons and fields joined into one control, like the + and − buttons\n// under a macOS list. Inner corners are square; a hairline separates them.\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"gap-px *:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-[6px]! [&>[data-slot]~[data-slot]]:rounded-l-none\",\n        vertical:\n          \"flex-col gap-px *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-[6px]! [&>[data-slot]~[data-slot]]:rounded-t-none\",\n      },\n    },\n    defaultVariants: { orientation: \"horizontal\" },\n  }\n)\n\nfunction ButtonGroup({ className, orientation, ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation ?? \"horizontal\"}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({ className, render, ...props }: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex items-center gap-1.5 rounded-[6px] bg-mac-fill-tertiary px-2.5 text-mac-body font-medium text-mac-label-secondary [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: { slot: \"button-group-text\" },\n  })\n}\n\nfunction ButtonGroupSeparator({ className, orientation = \"vertical\", ...props }: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\"relative self-stretch bg-mac-grid data-[orientation=vertical]:my-1 data-[orientation=vertical]:h-auto data-[orientation=horizontal]:mx-1 data-[orientation=horizontal]:w-auto\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}