toggle-group

1"use client"
2 
3import { toggleVariants } from "@/components/ui/toggle"
4import { cn } from "@/lib/utils"
5import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
6import { type VariantProps } from "class-variance-authority"
7import * as React from "react"
8 
9const ToggleGroupContext = React.createContext<
10  VariantProps<typeof toggleVariants>
11>({
12  size: "default",
13  variant: "default",
14})
15 
16function ToggleGroup({
17  className,
18  variant,
19  size,
20  children,
21  ...props
22}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
23  VariantProps<typeof toggleVariants>) {
24  return (
25    <ToggleGroupPrimitive.Root
26      data-slot="toggle-group"
27      data-variant={variant}
28      data-size={size}
29      className={cn(
30        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
31        className,
32      )}
33      {...props}
34    >
35      <ToggleGroupContext.Provider value={{ variant, size }}>
36        {children}
37      </ToggleGroupContext.Provider>
38    </ToggleGroupPrimitive.Root>
39  )
40}
41 
42function ToggleGroupItem({
43  className,
44  children,
45  variant,
46  size,
47  ...props
48}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
49  VariantProps<typeof toggleVariants>) {
50  const context = React.useContext(ToggleGroupContext)
51 
52  return (
53    <ToggleGroupPrimitive.Item
54      data-slot="toggle-group-item"
55      data-variant={context.variant || variant}
56      data-size={context.size || size}
57      className={cn(
58        toggleVariants({
59          variant: context.variant || variant,
60          size: context.size || size,
61        }),
62        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
63        className,
64      )}
65      {...props}
66    >
67      {children}
68    </ToggleGroupPrimitive.Item>
69  )
70}
71 
72export { ToggleGroup, ToggleGroupItem }