toggle-group

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