Button Group

1"use client";23import { cva, type VariantProps } from "class-variance-authority";4import { cn } from "@/lib/utils";5import { Separator } from "@/components/ui/separator";6import { sprawlify } from "@sprawlify/react";78const buttonGroupVariants = cva(9  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",10  {11    variants: {12      orientation: {13        horizontal:14          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",15        vertical:16          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",17      },18    },19    defaultVariants: {20      orientation: "horizontal",21    },22  },23);2425function ButtonGroup({26  className,27  orientation,28  ...props29}: React.ComponentProps<typeof sprawlify.div> & VariantProps<typeof buttonGroupVariants>) {30  return (31    <sprawlify.div32      data-scope="button-group"33      data-part="root"34      role="group"35      data-slot="button-group"36      data-orientation={orientation}37      className={cn(buttonGroupVariants({ orientation, className }))}38      {...props}39    />40  );41}4243function ButtonGroupText({ className, ...props }: React.ComponentProps<typeof sprawlify.div>) {44  return (45    <sprawlify.div46      className={cn(47        "bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none",48        className,49      )}50      {...props}51    />52  );53}5455function ButtonGroupSeparator({56  className,57  orientation = "vertical",58  ...props59}: React.ComponentProps<typeof Separator>) {60  return (61    <Separator62      data-scope="button-group"63      data-part="separator"64      data-slot="button-group-separator"65      orientation={orientation}66      className={cn(67        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",68        className,69      )}70      {...props}71    />72  );73}7475export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants };76