Checkbox

"use client";

import { useId, useRef, useState, type MouseEvent, type ReactNode } from "react";
import { MotionConfig, motion } from "motion/react";
import { cn } from "@/lib/utils";

// Checkbox and checkbox group. Ticking fills the box and draws the check on
// stroke by stroke; a box that's partly ticked shows a dash, and the check
// morphs into the dash and back rather than swapping. Unticking runs the
// stroke backwards before the fill lets go.
//
// The group can carry a "select all" box that goes indeterminate when only
// some are ticked. Shift-click ticks (or unticks) every box between the last
// one you clicked and this one, like a mail client.

export type CheckedState = boolean | "indeterminate";

const SIZES = {
  sm: { box: 16, radius: 4.5, text: "text-[13px]", gap: "gap-2.5" },
  md: { box: 18, radius: 5, text: "text-sm", gap: "gap-3" },
  lg: { box: 20, radius: 6, text: "text-[15px]", gap: "gap-3" },
} as const;

// Both marks have three points, so the path can morph between them.