Animated Checkbox

1"use client";
2 
3import { motion } from "motion/react";
4import { useState } from "react";
5import { cn } from "@/lib/utils";
6 
7interface AnimatedCheckboxProps {
8  title?: string;
9  defaultChecked?: boolean;
10  className?: string;
11  onCheckedChange?: (checked: boolean) => void;
12}
13 
14const springTransition = {
15  type: "spring" as const,
16  duration: 0.4,
17  bounce: 0.2,
18};
19 
20export function AnimatedCheckbox({
21  title = "Implement Checkbox",
22  defaultChecked = false,
23  className,
24  onCheckedChange,
25}: AnimatedCheckboxProps) {
26  const [checked, setChecked] = useState(defaultChecked);
27 
28  const handleClick = () => {
29    const newChecked = !checked;
30    setChecked(newChecked);
31    onCheckedChange?.(newChecked);
32  };
33 
34  return (
35    <div
36      className={cn("flex items-center gap-3 cursor-pointer select-none", className)}
37      onClick={handleClick}
38    >
39      <div
40        className={cn(
41          "size-4.5 rounded-[6px] flex items-center justify-center border-[1.5px] transition-colors duration-200",
42          checked
43            ? "bg-foreground border-transparent"
44            : "bg-transparent border-muted-foreground/40 hover:border-muted-foreground/60"
45        )}
46      >
47        <svg viewBox="0 0 20 20" className="size-full text-background">
48          <motion.path
49            d="M 0 4.5 L 3.182 8 L 10 0"
50            fill="transparent"
51            stroke="currentColor"
52            strokeWidth={1.5}
53            strokeLinecap="round"
54            strokeLinejoin="round"
55            transform="translate(5 6)"
56            initial={{ pathLength: defaultChecked ? 1 : 0, opacity: defaultChecked ? 1 : 0 }}
57            animate={{
58              pathLength: checked ? 1 : 0,
59              opacity: checked ? 1 : 0
60            }}
61            transition={{
62              pathLength: { ease: "easeOut", duration: 0.3 },
63              opacity: { duration: 0 }
64            }}
65          />
66        </svg>
67      </div>
68      <div className="relative">
69        <span
70          className={cn(
71            "text-base font-medium transition-colors duration-200",
72            checked ? "text-muted-foreground" : "text-foreground"
73          )}
74        >
75          {title}
76        </span>
77        <motion.div
78          className="absolute left-0 top-1/2 h-[1.5px] bg-muted-foreground -translate-y-1/2"
79          initial={{ width: defaultChecked ? "100%" : 0, opacity: defaultChecked ? 1 : 0 }}
80          animate={{
81            width: checked ? "100%" : 0,
82            opacity: checked ? 1 : 0,
83          }}
84// … truncated