Aurora Checkbox & Radio

1"use client"
2 
3import * as React from "react"
4import { Check, Minus } from "lucide-react"
5import { cn } from "@/lib/utils"
6import { Input } from "./input"
7 
8export interface CheckboxProps
9  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "children" | "onChange" | "size" | "type"> {
10  checked?: boolean
11  defaultChecked?: boolean
12  /** Tri-state: render a dash instead of a tick (e.g. a partially-selected group). Visually overrides `checked`. */
13  indeterminate?: boolean
14  onChange?: React.ChangeEventHandler<HTMLInputElement>
15  onCheckedChange?: (checked: boolean) => void
16  /** Label content rendered next to the box. */
17  children?: React.ReactNode
18}
19 
20function Checkbox({
21  ref,
22  checked,
23  defaultChecked = false,
24  indeterminate = false,
25  onCheckedChange,
26  children,
27  className,
28  disabled,
29  id,
30  style,
31  onFocus,
32  onBlur,
33  onChange,
34  ...props
35}: CheckboxProps & { ref?: React.Ref<HTMLInputElement> }) {
36  const generatedId = React.useId()
37  const resolvedId = id ?? generatedId
38  const isControlled = checked !== undefined
39  const [internalChecked, setInternalChecked] = React.useState(defaultChecked)
40  const [focused, setFocused] = React.useState(false)
41  const inputRef = React.useRef<HTMLInputElement | null>(null)
42 
43  const setRefs = React.useCallback(
44    (node: HTMLInputElement | null) => {
45      inputRef.current = node
46      if (typeof ref === "function") {
47        ref(node)
48      } else if (ref) {
49        ;(ref as React.MutableRefObject<HTMLInputElement | null>).current = node
50      }
51    },
52    [ref]
53  )
54 
55  const currentChecked = Boolean(isControlled ? checked : internalChecked)
56  const state = indeterminate ? "indeterminate" : currentChecked ? "checked" : "unchecked"
57 
58  React.useEffect(() => {
59    if (inputRef.current) {
60      inputRef.current.indeterminate = indeterminate
61    }
62  }, [indeterminate])
63 
64  const input = (
65    <Input
66      {...props}
67      id={resolvedId}
68      ref={setRefs}
69      unstyled
70      type="checkbox"
71      disabled={disabled}
72      className="sr-only"
73      checked={isControlled ? currentChecked : undefined}
74      defaultChecked={isControlled ? undefined : defaultChecked}
75      onChange={(event) => {
76        if (!isControlled) {
77          setInternalChecked(event.target.checked)
78        }
79        onCheckedChange?.(event.target.checked)
80        onChange?.(event)
81      }}
82      onFocus={(event) => {
83        setFocused(true)
84        onFocus?.(event)
85      }}
86      onBlur={(event) => {
87        setFocused(false)
88// … truncated