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/common/utils"
 6import { toggleVariants } from "@marzneshin/common/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 }