Glass Checkbox

1'use client'
2 
3import * as React from 'react'
4import { Checkbox as CheckboxPrimitive } from 'radix-ui'
5import { Check } from 'lucide-react'
6 
7import { cn } from '@/lib/utils'
8 
9const GlassCheckbox = React.forwardRef<
10  React.ComponentRef<typeof CheckboxPrimitive.Root>,
11  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
12>(({ className, ...props }, ref) => (
13  <CheckboxPrimitive.Root
14    ref={ref}
15    className={cn(
16      'peer size-4.5 shrink-0 rounded-md border border-glass-edge bg-glass backdrop-blur 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 data-[state=checked]:bg-ruri data-[state=checked]:border-ruri data-[state=checked]:text-white dark:data-[state=checked]:bg-ruri-soft dark:data-[state=checked]:border-ruri-soft dark:data-[state=checked]:text-deep',
17      className,
18    )}
19    {...props}
20  >
21    <CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
22      <Check className="size-3.5" />
23    </CheckboxPrimitive.Indicator>
24  </CheckboxPrimitive.Root>
25))
26GlassCheckbox.displayName = CheckboxPrimitive.Root.displayName
27 
28export { GlassCheckbox }