Glass Checkbox

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