Toggle Group

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