{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:ui",
  "title": "ButtonGroup",
  "description": "Semantic action grouping with attached or separated horizontal and vertical layouts while preserving each child's native behavior.",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json",
    "https://components.dethink.co.uk/r/button.json",
    "https://components.dethink.co.uk/r/icon-button.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/button-group/button-group.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/button-group/button-group.tsx",
      "content": "import { forwardRef, type HTMLAttributes } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type ButtonGroupMode = \"attached\" | \"separated\";\nexport type ButtonGroupOrientation = \"horizontal\" | \"vertical\";\nexport type ButtonGroupSeparatorOrientation = \"horizontal\" | \"vertical\";\n\nexport interface ButtonGroupProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"role\"\n> {\n  \"data-slot\"?: string;\n  mode?: ButtonGroupMode;\n  orientation?: ButtonGroupOrientation;\n}\n\nexport type ButtonGroupSeparatorProps = Omit<\n  HTMLAttributes<HTMLSpanElement>,\n  \"aria-hidden\" | \"children\" | \"role\"\n>;\n\nconst buttonGroupBaseClasses =\n  \"isolate inline-flex w-fit max-w-full items-stretch\";\n\nconst buttonGroupModeClasses: Record<ButtonGroupMode, string> = {\n  attached: \"gap-0 [--dt-control-press-scale:1]\",\n  separated: \"gap-density-gap\",\n};\n\nconst buttonGroupOrientationClasses: Record<ButtonGroupOrientation, string> = {\n  horizontal: cn(\n    \"flex-row\",\n    \"[&>:is(button,[data-slot=button],[data-slot=icon-button])]:relative\",\n    \"[&>:is(button,[data-slot=button],[data-slot=icon-button]):focus-visible]:z-10\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button])]:rounded-none\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button]):first-child]:rounded-s-md\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button]):last-child]:rounded-e-md\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button]):not(:first-child)]:-ms-px\",\n    \"[&>[data-slot=button-group-separator]]:h-auto\",\n    \"[&>[data-slot=button-group-separator]]:w-px\",\n  ),\n  vertical: cn(\n    \"flex-col\",\n    \"[&>:is(button,[data-slot=button],[data-slot=icon-button])]:relative\",\n    \"[&>:is(button,[data-slot=button],[data-slot=icon-button]):focus-visible]:z-10\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button])]:rounded-none\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button]):first-child]:rounded-t-md\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button]):last-child]:rounded-b-md\",\n    \"[&[data-mode=attached]>:is(button,[data-slot=button],[data-slot=icon-button]):not(:first-child)]:-mt-px\",\n    \"[&>[data-slot=button-group-separator]]:h-px\",\n    \"[&>[data-slot=button-group-separator]]:w-auto\",\n  ),\n};\n\nconst buttonGroupSeparatorOrientationClasses: Record<\n  ButtonGroupSeparatorOrientation,\n  string\n> = {\n  horizontal: \"h-px w-auto self-stretch\",\n  vertical: \"h-auto w-px self-stretch\",\n};\n\nexport function buttonGroupClassNames({\n  className,\n  mode = \"attached\",\n  orientation = \"horizontal\",\n}: Pick<ButtonGroupProps, \"className\" | \"mode\" | \"orientation\"> = {}) {\n  return cn(\n    buttonGroupBaseClasses,\n    buttonGroupModeClasses[mode],\n    buttonGroupOrientationClasses[orientation],\n    className,\n  );\n}\n\nexport function buttonGroupSeparatorClassNames({\n  className,\n  orientation = \"vertical\",\n}: {\n  className?: string;\n  orientation?: ButtonGroupSeparatorOrientation;\n} = {}) {\n  return cn(\n    \"pointer-events-none relative z-10 shrink-0 bg-border forced-colors:bg-[CanvasText]\",\n    buttonGroupSeparatorOrientationClasses[orientation],\n    className,\n  );\n}\n\nexport const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      \"data-slot\": dataSlot = \"button-group\",\n      children,\n      className,\n      mode = \"attached\",\n      orientation = \"horizontal\",\n      ...props\n    },\n    ref,\n  ) => (\n    <div\n      {...props}\n      ref={ref}\n      role=\"group\"\n      data-slot={dataSlot}\n      data-mode={mode}\n      data-orientation={orientation}\n      className={buttonGroupClassNames({ className, mode, orientation })}\n    >\n      {children}\n    </div>\n  ),\n);\n\nButtonGroup.displayName = \"ButtonGroup\";\n\nexport const ButtonGroupSeparator = forwardRef<\n  HTMLSpanElement,\n  ButtonGroupSeparatorProps\n>(({ className, ...props }, ref) => {\n  return (\n    <span\n      {...props}\n      ref={ref}\n      aria-hidden=\"true\"\n      role=\"presentation\"\n      data-slot=\"button-group-separator\"\n      className={buttonGroupSeparatorClassNames({ className })}\n    />\n  );\n});\n\nButtonGroupSeparator.displayName = \"ButtonGroupSeparator\";\n"
    },
    {
      "path": "packages/components/src/components/button-group/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/button-group/index.ts",
      "content": "export {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  buttonGroupClassNames,\n  buttonGroupSeparatorClassNames,\n  type ButtonGroupMode,\n  type ButtonGroupOrientation,\n  type ButtonGroupProps,\n  type ButtonGroupSeparatorOrientation,\n  type ButtonGroupSeparatorProps,\n} from \"./button-group\";\n"
    },
    {
      "path": "packages/components/src/utils/cn.ts",
      "type": "registry:file",
      "target": "~/components/dethink/utils/cn.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    }
  ]
}