{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group",
  "type": "registry:ui",
  "title": "Button Group",
  "description": "A customizable button group component",
  "dependencies": [
    "tailwind-variants",
    "clsx",
    "tailwind-merge",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "separator",
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/button-group/index.tsx",
      "content": "import { mergeProps } from \"@base-ui/react/merge-props\";\r\nimport { useRender } from \"@base-ui/react/use-render\";\r\nimport { tv, VariantProps } from \"tailwind-variants\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\nimport { Separator } from \"@/registry/pure-ui/ui/separator\";\r\n\r\nconst buttonGroupVariants = tv({\r\n  base: `flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2 [&_[data-slot=button]]:active:scale-100 [&_button]:active:scale-100`,\r\n  variants: {\r\n    orientation: {\r\n      horizontal:\r\n        \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 *:not-nth-last-[1_of_:not([aria-hidden],span[data-base-ui-inert],span[data-base-ui-focus-guard],span[aria-owns])]:rounded-r-none *:not-first:rounded-s-none\",\r\n      vertical:\r\n        \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    orientation: \"horizontal\",\r\n  },\r\n});\r\n\r\ninterface ButtonGroupProps\r\n  extends React.ComponentProps<\"div\">,\r\n    VariantProps<typeof buttonGroupVariants> {}\r\n\r\nfunction ButtonGroup({\r\n  className,\r\n  orientation = \"horizontal\",\r\n  ...props\r\n}: ButtonGroupProps) {\r\n  return (\r\n    <div\r\n      role=\"group\"\r\n      data-slot=\"button-group\"\r\n      data-orientation={orientation}\r\n      className={cn(buttonGroupVariants({ orientation }), className)}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nfunction ButtonGroupText({\r\n  className,\r\n  render,\r\n  ...props\r\n}: useRender.ComponentProps<\"div\">) {\r\n  const defaultProps = {\r\n    \"data-slot\": \"button-group-text\",\r\n    className: cn(\r\n      \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\r\n      className\r\n    ),\r\n  };\r\n\r\n  return useRender({\r\n    defaultTagName: \"div\",\r\n    props: mergeProps(defaultProps, props),\r\n    render,\r\n  });\r\n}\r\n\r\nfunction ButtonGroupSeparator({\r\n  className,\r\n  orientation = \"horizontal\",\r\n  ...props\r\n}: React.ComponentProps<typeof Separator>) {\r\n  return (\r\n    <Separator\r\n      data-slot=\"button-group-separator\"\r\n      orientation={orientation}\r\n      className={cn(\r\n        \"bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto\",\r\n        className\r\n      )}\r\n      {...props}\r\n    />\r\n  );\r\n}\r\n\r\nexport {\r\n  ButtonGroup,\r\n  ButtonGroupSeparator,\r\n  ButtonGroupText,\r\n  buttonGroupVariants,\r\n};\r\n",
      "type": "registry:ui",
      "target": "components/ui/button-group.tsx"
    }
  ]
}