Checkbox

1"use client";
2// beui.dev/components/motion/checkbox
3 
4import { AnimatePresence, motion, useReducedMotion } from "motion/react";
5import { useId } from "react";
6import { EASE_OUT, SPRING_PRESS } from "@/lib/ease";
7import { cn } from "@/lib/utils";
8 
9const CHECK_PATH = "M5 13l4 4L19 7";
10const INDETERMINATE_PATH = "M6 12h12";
11 
12export interface CheckboxProps {
13  checked: boolean;
14  onCheckedChange: (checked: boolean) => void;
15  disabled?: boolean;
16  indeterminate?: boolean;
17  label?: string;
18  className?: string;
19  id?: string;
20  "aria-label"?: string;
21  /** Associates an external message (e.g. a form error) with the control. */
22  "aria-describedby"?: string;
23}
24 
25export function Checkbox({
26  checked,
27  onCheckedChange,
28  disabled,
29  indeterminate,
30  label,
31  className,
32  id: idProp,
33  "aria-label": ariaLabel,
34  "aria-describedby": ariaDescribedBy,
35}: CheckboxProps) {
36  const autoId = useId();
37  const id = idProp ?? autoId;
38  const reduce = useReducedMotion();
39  const showMark = checked || indeterminate;
40  const path = indeterminate ? INDETERMINATE_PATH : CHECK_PATH;
41 
42  return (
43    <label
44      htmlFor={id}
45      className={cn(
46        "inline-flex items-center gap-3",
47        disabled ? "cursor-not-allowed" : "cursor-pointer",
48        className,
49      )}
50    >
51      <motion.button
52        id={id}
53        type="button"
54        role="checkbox"
55        aria-checked={indeterminate ? "mixed" : checked}
56        aria-label={ariaLabel}
57        aria-describedby={ariaDescribedBy}
58        disabled={disabled}
59        onClick={() => !disabled && onCheckedChange(!checked)}
60        whileTap={reduce || disabled ? undefined : { scale: 0.92 }}
61        transition={SPRING_PRESS}
62        data-state={
63          checked ? "checked" : indeterminate ? "indeterminate" : "unchecked"
64        }
65        className={cn(
66          "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border-2 outline-none transition-colors duration-200",
67          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
68          "disabled:cursor-not-allowed disabled:opacity-60",
69          showMark
70            ? "border-primary bg-primary text-primary-foreground"
71            : "border-muted-foreground/50 bg-background hover:border-muted-foreground",
72        )}
73      >
74        <AnimatePresence initial={false}>
75          {showMark ? (
76            <motion.svg
77              key={indeterminate ? "indeterminate" : "checked"}
78// … truncated