Glass Radio Group

1'use client'
2 
3import * as React from 'react'
4import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
5 
6import { cn } from '@/lib/utils'
7 
8const GlassRadioGroup = React.forwardRef<
9  React.ComponentRef<typeof RadioGroupPrimitive.Root>,
10  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
11>(({ className, ...props }, ref) => (
12  <RadioGroupPrimitive.Root className={cn('grid gap-2.5', className)} {...props} ref={ref} />
13))
14GlassRadioGroup.displayName = RadioGroupPrimitive.Root.displayName
15 
16const GlassRadioGroupItem = React.forwardRef<
17  React.ComponentRef<typeof RadioGroupPrimitive.Item>,
18  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
19>(({ className, ...props }, ref) => (
20  <RadioGroupPrimitive.Item
21    ref={ref}
22    className={cn(
23      'peer aspect-square size-4.5 rounded-full border border-glass-edge bg-glass focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50',
24      className,
25    )}
26    {...props}
27  >
28    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
29      <span className="size-2 rounded-full bg-ruri dark:bg-ruri-soft" />
30    </RadioGroupPrimitive.Indicator>
31  </RadioGroupPrimitive.Item>
32))
33GlassRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
34 
35export { GlassRadioGroup, GlassRadioGroupItem }