Glass Radio Group

1"use client"
2 
3import * as React from "react"
4import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
5import { motion, Variants } from "framer-motion"
6import { cn } from "@/lib/utils"
7 
8const indicatorVariants = {
9  initial: { scale: 0, opacity: 0 },
10  checked: {
11    scale: 1,
12    opacity: 1,
13    transition: {
14      type: "spring",
15      visualDuration: 0.2,
16      bounce: 0.5,
17    },
18  },
19}
20 
21const GlassRadioGroup = React.forwardRef<
22  React.ElementRef<typeof RadioGroupPrimitive.Root>,
23  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
24>(({ className, ...props }, ref) => {
25  return <RadioGroupPrimitive.Root className={cn("grid gap-3", className)} {...props} ref={ref} />
26})
27GlassRadioGroup.displayName = RadioGroupPrimitive.Root.displayName
28 
29export interface GlassRadioGroupItemProps extends React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item> {
30  label?: string
31}
32 
33const GlassRadioGroupItem = React.forwardRef<
34  React.ElementRef<typeof RadioGroupPrimitive.Item>,
35  GlassRadioGroupItemProps
36>(({ className, label, id, ...props }, ref) => {
37  const radioId = id || `glass-radio-${props.value}`
38 
39  return (
40    <div className="flex items-center gap-3">
41      <RadioGroupPrimitive.Item
42        ref={ref}
43        id={radioId}
44        className={cn(
45          "aspect-square h-5 w-5 rounded-full",
46          "bg-white/10 backdrop-blur-xl border border-white/30",
47          "shadow-[0_2px_8px_rgba(0,0,0,0.2)]",
48          "transition-all duration-200",
49          "focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400/50 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
50          "disabled:cursor-not-allowed disabled:opacity-50",
51          "data-[state=checked]:border-cyan-400/60",
52          className,
53        )}
54        {...props}
55      >
56        <RadioGroupPrimitive.Indicator className="flex w-full h-full items-center justify-center">
57          <motion.div
58            className="h-2.5 w-2.5 rounded-full bg-linear-to-r from-cyan-400 to-blue-400"
59            initial="initial"
60            animate="checked"
61            variants={indicatorVariants as Variants}
62            transition={{
63              type: "spring",
64              visualDuration: 0.2,
65              bounce: 0.5,
66            }}
67          />
68        </RadioGroupPrimitive.Indicator>
69      </RadioGroupPrimitive.Item>
70      {label && (
71        <label htmlFor={radioId} className="text-sm font-medium text-white/80 cursor-pointer select-none">
72// … truncated