button-group

1import { Slot } from '@radix-ui/react-slot';
2import { cva, type VariantProps } from 'class-variance-authority';
3 
4import { cn } from '@/registry/lib/utils';
5import { Separator } from '@/registry/ui/separator';
6 
7const buttonGroupVariants = cva(
8  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 *:focus-visible:relative *:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-(--radius) [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
9  {
10    variants: {
11      orientation: {
12        horizontal:
13          '*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-dynamic! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0',
14        vertical:
15          'flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-dynamic! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0',
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 : 'div';
48 
49  return (
50    <Comp
51      className={cn(
52        "bg-active flex items-center gap-2 rounded-dynamic border border-line-ui px-3 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
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        'relative self-stretch bg-line-subtle [[data-variant=solid]+&]:bg-gray-950/85 [&:has(+[data-variant=solid])]:bg-gray-800 data-[orientation=vertical]:my-0! data-[orientation=vertical]:ml-px data-[orientation=vertical]:h-auto data-[orientation=horizontal]:mx-0! data-[orientation=horizontal]:mt-px data-[orientation=horizontal]:w-auto',
71        className
72      )}
73// … truncated