"use client"; import { useState } from "react"; import { AnimatePresence, motion, MotionConfig, useReducedMotion, } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { Mail01Icon, Notification03Icon, TaskDaily01Icon, } from "@hugeicons/core-free-icons"; import clsx from "clsx"; const ON_GREEN = "#34C759"; const boxSpring = { type: "spring" as const, stiffness: 520, damping: 26, mass: 0.65, }; const drawTween = { type: "tween" as const, duration: 0.28, ease: [0.22, 1, 0.36, 1] as [number, number, number, number], }; type BoxSize = "md" | "lg"; const SIZE: Record< BoxSize, { box: number; stroke: number; radius: number; pad: number } > = { md: { box: 24, stroke: 2.6, radius: 7, pad: 3 }, lg: { box: 30, stroke: 2.8, radius: 9, pad: 4 }, }; /** Check path — always remounts on check so pathLength never sticks. */ function CheckMark({ checked, size, reduce, delay = 0.06, }: { checked: boolean; size: BoxSize; reduce: boolean; delay?: number; }) { const s = SIZE[size]; return ( ); } /** Expanding ring flash when turning on. */ function PopRing({ active, radius, reduce, }: { active: boolean; radius: number; reduce: boolean; }) { if (reduce) return null; return ( {active ? ( ) : null} ); } type SoftCheckboxProps = { checked: boolean; onCheckedChange: (next: boolean) => void; size?: BoxSize; "aria-label"?: string; }; /** Fill scales from center; check remounts and draws every time. */ export function SoftCheckbox({ checked, onCheckedChange, size = "md", "aria-label": ariaLabel, }: SoftCheckboxProps) { const reduce = useReducedMotion() ?? false; const s = SIZE[size]; return ( onCheckedChange(!checked)} whileTap={reduce ? undefined : { scale: 0.88 }} className={clsx( "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-visible border outline-none", "focus-visible:ring-2 focus-visible:ring-ring", checked ? "border-transparent" : "border-border bg-background", )} style={{ width: s.box, height: s.box, borderRadius: s.radius, borderWidth: 1.5, backgroundColor: checked ? ON_GREEN : undefined, }} initial={false} > ); } type CircleCheckboxProps = { checked: boolean; onCheckedChange: (next: boolean) => void; size?: BoxSize; "aria-label"?: string; }; /** Ring sweeps closed, then fill + check. */ export function CircleCheckbox({ checked, onCheckedChange, size = "md", "aria-label": ariaLabel, }: CircleCheckboxProps) { const reduce = useReducedMotion() ?? false; const s = SIZE[size]; const r = 10; const c = 2 * Math.PI * r; return ( onCheckedChange(!checked)} whileTap={reduce ? undefined : { scale: 0.88 }} className={clsx( "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-visible border outline-none", "focus-visible:ring-2 focus-visible:ring-ring", checked ? "border-transparent" : "border-border bg-background", )} style={{ width: s.box, height: s.box, borderRadius: 999, borderWidth: 1.5, backgroundColor: checked ? ON_GREEN : undefined, }} initial={false} > ); } type BurstCheckboxProps = { checked: boolean; onCheckedChange: (next: boolean) => void; size?: BoxSize; "aria-label"?: string; }; /** Squash + spark dashes, then check. */ export function BounceCheckbox({ checked, onCheckedChange, size = "md", "aria-label": ariaLabel, }: BurstCheckboxProps) { const reduce = useReducedMotion() ?? false; const s = SIZE[size]; const sparks = [0, 60, 120, 180, 240, 300]; return ( onCheckedChange(!checked)} whileTap={reduce ? undefined : { scale: 0.86 }} className={clsx( "relative inline-flex shrink-0 cursor-pointer items-center justify-center overflow-visible border outline-none", "focus-visible:ring-2 focus-visible:ring-ring", checked ? "border-transparent" : "border-border bg-muted/40", )} style={{ width: s.box, height: s.box, borderRadius: s.radius, borderWidth: 1.5, backgroundColor: checked ? ON_GREEN : undefined, }} initial={false} animate={ reduce ? undefined : { scale: checked ? [0.72, 1.16, 1] : 1, rotate: checked ? [0, -8, 0] : 0, } } transition={ reduce ? { duration: 0.1 } : { duration: 0.42, ease: [0.22, 1, 0.36, 1], times: checked ? [0, 0.45, 1] : undefined, } } > {!reduce && checked ? sparks.map((deg) => ( )) : null} ); } type TaskRowProps = { title: string; description: string; icon: typeof TaskDaily01Icon; checked: boolean; onCheckedChange: (next: boolean) => void; variant?: "soft" | "circle" | "bounce"; }; function TaskRow({ title, description, icon, checked, onCheckedChange, variant = "soft", }: TaskRowProps) { const Box = variant === "circle" ? CircleCheckbox : variant === "bounce" ? BounceCheckbox : SoftCheckbox; return (

); } export default function AnimatedCheckboxes() { const [tasks, setTasks] = useState({ mail: true, notify: false, daily: false, }); const [circle, setCircle] = useState(true); const [bounce, setBounce] = useState(false); const [soft, setSoft] = useState(true); function setTask(key: keyof typeof tasks, next: boolean) { setTasks((prev) => ({ ...prev, [key]: next })); } return (

setTask("mail", v)} variant="soft" /> setTask("notify", v)} variant="circle" /> setTask("daily", v)} variant="bounce" />

نرم

حلقه

جرقه

); }