Button Group

1"use client";
2 
3import { cva, type VariantProps } from "class-variance-authority";
4import { Slot as SlotPrimitive } from "radix-ui";
5import type * as React from "react";
6 
7import { type HoverEffect, hoverEffects } from "@/lib/hover-effects";
8import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
9import { cn } from "@/lib/utils";
10import { Separator } from "./separator";
11 
12const buttonGroupVariants = cva(
13  "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-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
14  {
15    variants: {
16      orientation: {
17        horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
18        vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
19      },
20    },
21    defaultVariants: {
22      orientation: "horizontal",
23    },
24  },
25);
26 
27interface ButtonGroupProps extends React.ComponentProps<"div">, VariantProps<typeof buttonGroupVariants>, MaterialAxisProps {
28  variant?: "default" | "glass";
29  /** Hover effect (folded from the glass wrapper). */
30  effect?: HoverEffect;
31}
32 
33/* Role: borderless adaptive glass. */
34const ROLE = {};
35 
36function ButtonGroup({ className, orientation = "horizontal", variant = "glass", effect, ...props }: ButtonGroupProps) {
37  const [axes, rest] = splitAxisProps(props);
38  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
39  const getVariantClass = () => (variant === "default" ? "" : "rounded-md");
40 
41  const m = materialSurface(variant === "default" ? null : ROLE, axes);
42 
43  return (
44    <div
45      role="group"
46      data-slot="button-group"
47      data-orientation={orientation}
48      data-material={m?.["data-material"]}
49      className={cn(
50        m?.className,
51        buttonGroupVariants({
52          orientation,
53        }),
54        getVariantClass(),
55        effect &&
56          hoverEffects({
57            hover: effect,
58          }),
59        className,
60      )}
61      {...rest}
62    />
63  );
64}
65 
66function ButtonGroupText({
67  className,
68  asChild = false,
69  ...props
70}: React.ComponentProps<"div"> & {
71  asChild?: boolean;
72}) {
73  const Comp = asChild ? SlotPrimitive.Slot : "div";
74 
75  return (
76    <Comp
77      className={cn(
78// … truncated