Button Group

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3
4import { cn } from "@/lib/utils";
5import { Separator } from "@/registry/default/separator/separator";
6
7const buttonGroupVariants = cva(
8  "flex w-fit items-stretch [&>*:focus-visible]:z-10 [&>*:focus-visible]:relative [&>*[data-popup-open]]:z-10 [&>*[data-popup-open]]: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-lg has-[>[data-slot=button-group]]:gap-2 [&>input]:bg-card",
9  {
10    variants: {
11      orientation: {
12        // Border rules come in pairs: a root rule for children with real
13        // borders (inputs, select triggers) and a `before:` twin for
14        // button-recipe children, whose border lives on their paint
15        // pseudo-element. The before: twins are scoped to button/a tags and
16        // exclude select triggers — Tailwind's before: variant generates a
17        // pseudo box on any matched element, which would otherwise add a
18        // phantom flex item (and gap) inside non-recipe children. Radius
19        // rules only need the root — the pseudo uses rounded-[inherit].
20        horizontal:
21          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>button:not(:first-child):not([data-slot=select-trigger])]:before:border-l-0 [&>a:not(:first-child)]:before:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>*:has(+[data-slot=button-group-separator])]:border-r-0 [&>button:has(+[data-slot=button-group-separator]):not([data-slot=select-trigger])]:before:border-r-0 [&>a:has(+[data-slot=button-group-separator])]:before:border-r-0 [&>button:first-of-type:not(:only-of-type)]:rounded-l-lg [&>button:first-of-type:not(:only-of-type):not([data-slot=select-trigger])]:before:border-l [&>[data-slot=select-trigger]:first-of-type:not(:only-of-type)]:border-l [&>a:first-of-type:not(:only-of-type)]:rounded-l-lg [&>a:first-of-type:not(:only-of-type)]:before:border-l [&>button:last-of-type:not(:only-of-type)]:rounded-r-lg [&>a:last-of-type:not(:only-of-type)]:rounded-r-lg",
22        vertical:
23// … truncated