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