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 '@/registry/lib/utils';
9import { toggleVariants } from '@/registry/ui/toggle';
10 
11const ToggleGroupContext = React.createContext<
12  VariantProps<typeof toggleVariants> & {
13    spacing?: number;
14    orientation?: 'horizontal' | 'vertical';
15  }
16>({
17  size: 'md',
18  variant: 'soft',
19  spacing: 0,
20  orientation: 'horizontal',
21});
22 
23function ToggleGroup({
24  className,
25  variant,
26  size,
27  spacing = 0,
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))] data-[spacing=0]:data-[variant=outline]:rounded-md data-vertical:flex-col data-vertical:items-stretch',
46        className
47      )}
48      {...props}
49    >
50      <ToggleGroupContext.Provider value={{ variant, size, spacing, orientation }}>
51        {children}
52      </ToggleGroupContext.Provider>
53    </ToggleGroupPrimitive>
54  );
55}
56 
57function ToggleGroupItem({
58  className,
59  children,
60  variant = 'soft',
61  size = 'md',
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