Checkbox

1'use client'
2 
3import {
4  cloneElement,
5  forwardRef,
6  isValidElement,
7  useCallback,
8  useId,
9  useState,
10  type ReactNode,
11} from 'react'
12import { motion, useReducedMotion } from 'motion/react'
13import { cn } from '@/lib/utils'
14import { springs } from '@/lib/motion-tokens'
15 
16export type CheckedState = boolean | 'indeterminate'
17 
18export interface CheckboxProps {
19  id?: string
20  checked?: CheckedState
21  defaultChecked?: boolean
22  onCheckedChange?: (checked: CheckedState) => void
23  name?: string
24  disabled?: boolean
25  required?: boolean
26  'aria-invalid'?: boolean | 'true' | 'false' | 'grammar' | 'spelling'
27  'aria-label'?: string
28  'aria-labelledby'?: string
29  'aria-describedby'?: string
30  className?: string
31  value?: string
32}
33 
34export interface CheckboxFieldProps {
35  label: string
36  description?: string
37  strikeThrough?: boolean
38  className?: string
39  children: ReactNode
40}
41 
42function useControlledChecked(
43  controlledValue: CheckedState | undefined,
44  defaultValue: boolean | undefined,
45  onChange: ((checked: CheckedState) => void) | undefined,
46): [CheckedState, (next: CheckedState) => void] {
47  const [internal, setInternal] = useState<CheckedState>(defaultValue ?? false)
48  const isControlled = controlledValue !== undefined
49  const value = isControlled ? controlledValue : internal
50 
51  const setValue = useCallback(
52    (next: CheckedState) => {
53      if (!isControlled) setInternal(next)
54      onChange?.(next)
55    },
56    [isControlled, onChange],
57  )
58 
59  return [value, setValue]
60}
61 
62const CHECK_PATH = 'M3.5 8.5L7 12L12.5 5.5'
63const DASH_PATH = 'M4 8L12 8'
64 
65function CheckGlyph({ state, animate }: { state: CheckedState; animate: boolean }) {
66  const reduceMotion = useReducedMotion()
67  const isChecked = state === true
68  const isIndeterminate = state === 'indeterminate'
69  const shouldShow = isChecked || isIndeterminate
70 
71  if (!shouldShow) return null
72 
73  const path = isIndeterminate ? DASH_PATH : CHECK_PATH
74  const shouldAnimate = animate && !reduceMotion
75 
76  return (
77    <svg viewBox="0 0 16 16" fill="none" className="absolute inset-0 size-full" aria-hidden="true">
78      <motion.path
79        d={path}
80        stroke="currentColor"
81        strokeWidth={2}
82        strokeLinecap="round"
83        strokeLinejoin="round"
84        initial={shouldAnimate ? { pathLength: 0, opacity: 0 } : { pathLength: 1, opacity: 1 }}
85        animate={{ pathLength: 1, opacity: 1 }}
86        exit={shouldAnimate ? { pathLength: 0, opacity: 0 } : undefined}
87// … truncated