Toggle Group

1import * as React from 'react';
2import { type VariantProps } from 'class-variance-authority';
3 
4import {
5  ToggleGroup as ToggleGroupPrimitive,
6  Toggle as TogglePrimitive,
7  ToggleGroupHighlight as ToggleGroupHighlightPrimitive,
8  ToggleHighlight as ToggleHighlightPrimitive,
9  useToggleGroup as useToggleGroupPrimitive,
10  type ToggleGroupProps as ToggleGroupPrimitiveProps,
11  type ToggleProps as TogglePrimitiveProps,
12} from '@/components/animate-ui/primitives/base/toggle-group';
13import { toggleVariants } from '@/components/animate-ui/components/base/toggle';
14import { cn } from '@/lib/utils';
15import { getStrictContext } from '@/lib/get-strict-context';
16 
17const [ToggleGroupProvider, useToggleGroup] =
18  getStrictContext<VariantProps<typeof toggleVariants>>('ToggleGroupContext');
19 
20type ToggleGroupProps = ToggleGroupPrimitiveProps &
21  VariantProps<typeof toggleVariants>;
22 
23function ToggleGroup({
24  className,
25  variant,
26  size,
27  children,
28  multiple,
29  ...props
30}: ToggleGroupProps) {
31  return (
32    <ToggleGroupPrimitive
33      data-variant={variant}
34      data-size={size}
35      className={cn(
36        'group/toggle-group flex gap-0.5 w-fit items-center rounded-lg data-[variant=outline]:shadow-xs data-[variant=outline]:border data-[variant=outline]:p-0.5',
37        className,
38      )}
39      multiple={multiple}
40      {...props}
41    >
42      <ToggleGroupProvider value={{ variant, size }}>
43        {!multiple ? (
44          <ToggleGroupHighlightPrimitive className="bg-accent rounded-md">
45            {children}
46          </ToggleGroupHighlightPrimitive>
47        ) : (
48          children
49        )}
50      </ToggleGroupProvider>
51    </ToggleGroupPrimitive>
52  );
53}
54 
55type ToggleProps = TogglePrimitiveProps & VariantProps<typeof toggleVariants>;
56 
57function Toggle({ className, children, variant, size, ...props }: ToggleProps) {
58  const { variant: contextVariant, size: contextSize } = useToggleGroup();
59  const { multiple } = useToggleGroupPrimitive();
60 
61  return (
62    <ToggleHighlightPrimitive
63      value={props.value?.toString()}
64      className={cn(multiple && 'bg-accent rounded-md')}
65    >
66      <TogglePrimitive
67        data-variant={contextVariant || variant}
68        data-size={contextSize || size}
69        className={cn(
70          toggleVariants({
71            variant: contextVariant || variant,
72            size: contextSize || size,
73          }),
74          'min-w-0 border-0 flex-1 shrink-0 shadow-none rounded-md focus:z-10 focus-visible:z-10',
75          className,
76        )}
77// … truncated