Button Group

1"use client";
2 
3import "./button-group.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { Button, type ButtonProps } from "../button";
8import { ButtonGroupContext, useButtonGroupContext } from "./button-group.context";
9import { buttonGroupVariants, type ButtonGroupVariants } from "./button-group.variants";
10 
11export type ButtonGroupProps = {
12  size?: "sm" | "md" | "lg";
13  variant?: "primary" | "secondary" | "destructive" | "outline" | "ghost";
14} & ButtonGroupVariants & React.ComponentProps<"div">;
15 
16export const ButtonGroupRoot = ({
17  children,
18  className,
19  orientation = "horizontal",
20  size,
21  variant,
22  ...props
23}: ButtonGroupProps) => {
24  const slots = buttonGroupVariants({ orientation });
25 
26  return (
27    <ButtonGroupContext.Provider value={{ slots, size, variant }}>
28      <div
29        role="group"
30        className={cn(slots.root(), className)}
31        {...props}
32      >
33        {children}
34      </div>
35    </ButtonGroupContext.Provider>
36  );
37};
38 
39export const ButtonGroupItem = ({ size, variant, ...props }: ButtonProps) => {
40  const context = useButtonGroupContext();
41  return (
42    <Button
43      size={size ?? context.size}
44      variant={variant ?? context.variant}
45      {...props}
46    />
47  );
48};
49 
50export const ButtonGroup = ButtonGroupRoot;