| "use client" |
|
|
| import * as React from "react" |
| import { type VariantProps } from "class-variance-authority" |
| import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui" |
|
|
| import { cn } from "@/lib/utils" |
| import { toggleVariants } from "@/components/ui/toggle" |
|
|
| const ToggleGroupContext = React.createContext< |
| VariantProps<typeof toggleVariants> & { |
| spacing?: number |
| orientation?: "horizontal" | "vertical" |
| } |
| >({ |
| size: "default", |
| variant: "default", |
| spacing: 0, |
| orientation: "horizontal", |
| }) |
|
|
| function ToggleGroup({ |
| className, |
| variant, |
| size, |
| spacing = 0, |
| orientation = "horizontal", |
| children, |
| ...props |
| }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & |
| VariantProps<typeof toggleVariants> & { |
| spacing?: number |
| orientation?: "horizontal" | "vertical" |
| }) { |
| return ( |
| <ToggleGroupPrimitive.Root |
| data-slot="toggle-group" |
| data-variant={variant} |
| data-size={size} |
| data-spacing={spacing} |
| data-orientation={orientation} |
| style={{ "--gap": spacing } as React.CSSProperties} |
| className={cn( |
| "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-3xl data-vertical:flex-col data-vertical:items-stretch", |
| className |
| )} |
| {...props} |
| > |
| <ToggleGroupContext.Provider |
| value={{ variant, size, spacing, orientation }} |
| > |
| {children} |
| </ToggleGroupContext.Provider> |
| </ToggleGroupPrimitive.Root> |
| ) |
| } |
|
|
| function ToggleGroupItem({ |
| className, |
| children, |
| variant = "default", |
| size = "default", |
| ...props |
| }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & |
| VariantProps<typeof toggleVariants>) { |
| const context = React.useContext(ToggleGroupContext) |
|
|
| return ( |
| <ToggleGroupPrimitive.Item |
| data-slot="toggle-group-item" |
| data-variant={context.variant || variant} |
| data-size={context.size || size} |
| data-spacing={context.spacing} |
| className={cn( |
| "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-end]:pr-2.5 group-data-[spacing=0]/toggle-group:has-data-[icon=inline-start]:pl-2.5 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-3xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-3xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-3xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-3xl data-[state=on]:bg-muted group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", |
| toggleVariants({ |
| variant: context.variant || variant, |
| size: context.size || size, |
| }), |
| className |
| )} |
| {...props} |
| > |
| {children} |
| </ToggleGroupPrimitive.Item> |
| ) |
| } |
|
|
| export { ToggleGroup, ToggleGroupItem } |
|
|
