Toggle Group

1"use client"
2 
3import * as React from "react"
4import { ToggleGroup as BaseToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
5import { cn } from "@/lib/utils"
6 
7type BaseToggleGroupProps = React.ComponentProps<typeof BaseToggleGroup>
8 
9export type ToggleGroupProps = Omit<BaseToggleGroupProps, "variant" | "className"> & {
10  glow?: boolean
11  variant?: "default" | "glass"
12  className?: string
13}
14 
15/**
16 * Glass UI Toggle Group - Enhanced toggle group with glassy effects
17 */
18export const ToggleGroup = React.forwardRef<
19  React.ElementRef<typeof BaseToggleGroup>,
20  ToggleGroupProps
21>(({ className, variant = "glass", glow = false, ...props }, ref) => {
22  return (
23    <BaseToggleGroup
24      ref={ref}
25      variant={variant}
26      className={cn(
27        glow && "shadow-md shadow-purple-500/20",
28        className
29      )}
30      {...(props as BaseToggleGroupProps)}
31    />
32  )
33})
34ToggleGroup.displayName = "ToggleGroup"
35 
36export {
37  ToggleGroupItem,
38}
39