Checkbox Pro

1'use client';
2import * as React from 'react';
3import { CheckIcon, MinusIcon } from 'lucide-react';
4import { motion } from 'motion/react';
5import { cn } from '@/lib/utils';
6 
7type CheckedState = boolean | 'indeterminate';
8 
9interface CheckboxProProps {
10  className?: string;
11  onCheckedChange?: (checked: CheckedState) => void;
12  disabled?: boolean;
13  defaultChecked?: CheckedState;
14  checked?: CheckedState;
15  id?: string;
16  name?: string;
17  value?: string;
18  required?: boolean;
19  asChild?: boolean;
20  forceMount?: boolean;
21  'aria-label'?: string;
22  'aria-labelledby'?: string;
23  'aria-describedby'?: string;
24}
25 
26function AsChild({
27  asChild,
28  children,
29  ...props
30}: {
31  asChild?: boolean;
32  children: React.ReactElement;
33} & React.HTMLAttributes<HTMLElement>) {
34  if (asChild && React.isValidElement(children)) {
35    return React.cloneElement(children, {
36      ...(children.props as Record<string, unknown>),
37      ...props,
38      className: cn(
39        (children.props as { className?: string }).className,
40        props.className,
41      ),
42    } as React.HTMLAttributes<HTMLElement>);
43  }
44  return children;
45}
46 
47function CheckboxPro({
48  className,
49  onCheckedChange,
50  disabled = false,
51  defaultChecked = false,
52  checked: checkedProp,
53  id,
54  name,
55  value,
56  required = false,
57  asChild = false,
58  forceMount = false,
59  'aria-label': ariaLabel,
60  'aria-labelledby': ariaLabelledby,
61  'aria-describedby': ariaDescribedby,
62  children,
63  ...props
64}: CheckboxProProps &
65  React.HTMLAttributes<HTMLButtonElement> & { children?: React.ReactElement }) {
66  const [animationKey, setAnimationKey] = React.useState(0);
67  const [internalChecked, setInternalChecked] =
68    React.useState<CheckedState>(defaultChecked);
69  const [isKeyboardUser, setIsKeyboardUser] = React.useState(false);
70  const buttonRef = React.useRef<HTMLButtonElement>(null);
71 
72  const isControlled = checkedProp !== undefined;
73  const checked = isControlled ? checkedProp : internalChecked;
74  const isIndeterminate = checked === 'indeterminate';
75  const isChecked = checked === true;
76 
77  const getDataState = (
78    checked: CheckedState,
79  ): 'checked' | 'unchecked' | 'indeterminate' => {
80    if (checked === 'indeterminate') return 'indeterminate';
81    return checked ? 'checked' : 'unchecked';
82  };
83 
84  const handleToggle = React.useCallback(() => {
85    if (disabled) return;
86 
87    let newChecked: CheckedState;
88 
89    if (isIndeterminate) {
90      newChecked = false;
91    } else {
92      newChecked = !isChecked;
93    }
94 
95// … truncated