1import * as React from "react"
 2import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
 3import { VariantProps } from "class-variance-authority"
 4
 5import { cn } from "@marzneshin/utils"
 6import { toggleVariants } from "@marzneshin/components/ui/toggle"
 7
 8const ToggleGroupContext = React.createContext<
 9  VariantProps<typeof toggleVariants>
10>({
11  size: "default",
12  variant: "default",
13})
14
15const ToggleGroup = React.forwardRef<
16  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
17  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
18    VariantProps<typeof toggleVariants>
19>(({ className, variant, size, children, ...props }, ref) => (
20  <ToggleGroupPrimitive.Root
21    ref={ref}
22    className={cn("flex items-center justify-center gap-1", className)}
23    {...props}
24  >
25    <ToggleGroupContext.Provider value={{ variant, size }}>
26      {children}
27    </ToggleGroupContext.Provider>
28  </ToggleGroupPrimitive.Root>
29))
30
31ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
32
33const ToggleGroupItem = React.forwardRef<
34  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
35  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
36    VariantProps<typeof toggleVariants>
37>(({ className, children, variant, size, ...props }, ref) => {
38  const context = React.useContext(ToggleGroupContext)
39
40  return (
41    <ToggleGroupPrimitive.Item
42      ref={ref}
43      className={cn(
44        toggleVariants({
45          variant: context.variant || variant,
46          size: context.size || size,
47        }),
48        className
49      )}
50      {...props}
51    >
52      {children}
53    </ToggleGroupPrimitive.Item>
54  )
55})
56
57ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
58
59export { ToggleGroup, ToggleGroupItem }