Button Group

1import { ButtonGroup, ButtonGroupText, ButtonGroupSeparator } from "@/components/ui/button-group";
2
3<ButtonGroup />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { tv, type VariantProps } from "tailwind-variants";
5import { cn } from "@/lib/utils";
6import { Separator } from "@/registry/react/components/separator";
7
8const buttonGroupVariants = tv({
9  base: [
10    "flex w-fit items-stretch",
11    "*:not([class*='w-']):w-fit",
12    "*:not([class*='flex-']):flex-1",
13    "*:focus-visible:relative *:focus-visible:z-10",
14    "has-[>[data-slot=button-group]]:gap-2",
15    "has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-md",
16  ],
17  variants: {
18    orientation: {
19      horizontal: [
20        "[&>*:not(:first-child)]:rounded-l-none",
21        "[&>*:not(:first-child)]:border-s-0",
22        "[&>*:not(:last-child)]:rounded-e-none",
23      ],
24      vertical: [
25        "flex-col",
26        "[&>*:not(:first-child)]:rounded-t-none",
27        "[&>*:not(:first-child)]:border-t-0",
28        "[&>*:not(:last-child)]:rounded-b-none [&>*:not(:last-child)]:shadow-none",