Task check
A native checkbox with a quiet completion animation and supporting detail.
Implementation
1"use client";2 3import { useId, useState, type InputHTMLAttributes } from "react";4import { Check } from "lucide-react";5 6export type TaskCheckProps = Omit<7 InputHTMLAttributes<HTMLInputElement>,8 "type" | "onChange" | "children"9> & {10 label: string;11 detail?: string;12 onCheckedChange?: (checked: boolean) => void;13};14 15/** Native checkbox with a deliberate completion response. */16export function TaskCheck({17 label,18 detail,19 checked,20 defaultChecked = false,21 onCheckedChange,22 id,23 className = "",24 ...inputProps25}: TaskCheckProps) {26 const generatedId = useId();27 const inputId = id ?? generatedId;28 const [internalChecked, setInternalChecked] = useState(