Button Group

1import { cva, type VariantProps } from "class-variance-authority"
2import { Slot } from "radix-ui"
3 
4import { cn } from "@/lib/utils"
5import { Separator } from "@/components/ui/separator"
6 
7const buttonGroupVariants = cva(
8  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
9  {
10    variants: {
11      orientation: {
12        horizontal:
13          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
14        vertical:
15          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
16      },
17    },
18    defaultVariants: {
19      orientation: "horizontal",
20    },
21  }
22)
23 
24function ButtonGroup({
25  className,
26  orientation,
27  ...props
28}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
29  return (
30    <div
31      role="group"
32      data-slot="button-group"
33      data-orientation={orientation}
34      className={cn(buttonGroupVariants({ orientation }), className)}
35      {...props}
36    />
37  )
38}
39 
40function ButtonGroupText({
41  className,
42  asChild = false,
43  ...props
44}: React.ComponentProps<"div"> & {
45  asChild?: boolean
46}) {
47  const Comp = asChild ? Slot.Root : "div"
48 
49  return (
50    <Comp
51      className={cn(
52        "bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",
53        className
54      )}
55      {...props}
56    />
57  )
58}
59 
60function ButtonGroupSeparator({
61  className,
62  orientation = "vertical",
63  ...props
64}: React.ComponentProps<typeof Separator>) {
65  return (
66    <Separator
67      data-slot="button-group-separator"
68      orientation={orientation}
69      className={cn(
70        "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
71        className
72      )}
73      {...props}
74    />
75  )
76}
77 
78export {
79  ButtonGroup,
80  ButtonGroupSeparator,
81  ButtonGroupText,
82  buttonGroupVariants,
83}