Button Group

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3 
4export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
5  orientation?: 'horizontal' | 'vertical'
6}
7 
8/**
9 * Visually joins a row (or column) of Buttons into a single bordered unit:
10 * shared borders collapse, individual shadows/press animations are neutralized,
11 * and the group carries one hard neubrutalism shadow.
12 */
13const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
14  ({ className, orientation = 'horizontal', ...props }, ref) => (
15    <div
16      ref={ref}
17      role="group"
18      className={cn(
19        'inline-flex shadow-[4px_4px_0px_hsl(var(--shadow-color))]',
20        // neutralize each child's own shadow + press-translate so the group reads as one block
21        '[&>*]:shadow-none [&>*]:hover:translate-x-0 [&>*]:hover:translate-y-0 [&>*]:active:translate-x-0 [&>*]:active:translate-y-0',
22        orientation === 'horizontal'
23          ? '[&>*:not(:first-child)]:ml-[-3px]'
24          : 'flex-col [&>*:not(:first-child)]:mt-[-3px]',
25        className
26      )}
27      {...props}
28    />
29  )
30)
31ButtonGroup.displayName = 'ButtonGroup'
32 
33export { ButtonGroup }