button-group

1import { cva, type VariantProps } from "class-variance-authority"
2import { Slot } from "radix-ui"
3 
4import { cn } from "@/registry/radix-sera/lib/utils"
5import { Separator } from "@/registry/radix-sera/ui/separator"
6 
7const buttonGroupVariants = cva(
8  "group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring",
9  {
10    variants: {
11      orientation: {
12        horizontal:
13          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!",
14        vertical:
15          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-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        "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
53// … truncated