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