Toggle Group

1import * as React from "react"
2import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
3import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group"
4import { type VariantProps } from "class-variance-authority"
5 
6import { cn } from "@/lib/utils"
7import { toggleVariants } from "@/components/ui/toggle"
8 
9const ToggleGroupContext = React.createContext<
10  VariantProps<typeof toggleVariants> & {
11    spacing?: number
12    orientation?: "horizontal" | "vertical"
13  }
14>({
15  size: "default",
16  variant: "default",
17  spacing: 0,
18  orientation: "horizontal",
19})
20 
21function ToggleGroup({
22  className,
23  variant,
24  size,
25  spacing = 0,
26  orientation = "horizontal",
27  children,
28  ...props
29}: ToggleGroupPrimitive.Props &
30  VariantProps<typeof toggleVariants> & {
31    spacing?: number
32    orientation?: "horizontal" | "vertical"
33  }) {
34  return (
35    <ToggleGroupPrimitive
36      data-slot="toggle-group"
37      data-variant={variant}
38      data-size={size}
39      data-spacing={spacing}
40      data-orientation={orientation}
41      style={{ "--gap": spacing } as React.CSSProperties}
42      className={cn(
43        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-vertical:flex-col data-vertical:items-stretch",
44        className
45      )}
46      {...props}
47    >
48      <ToggleGroupContext.Provider
49        value={{ variant, size, spacing, orientation }}
50      >
51        {children}
52      </ToggleGroupContext.Provider>
53    </ToggleGroupPrimitive>
54  )
55}
56 
57function ToggleGroupItem({
58  className,
59  children,
60  variant = "default",
61  size = "default",
62  ...props
63}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
64  const context = React.useContext(ToggleGroupContext)
65 
66  return (
67    <TogglePrimitive
68      data-slot="toggle-group-item"
69      data-variant={context.variant || variant}
70      data-size={context.size || size}
71      data-spacing={context.spacing}
72      className={cn(
73// … truncated