web/components/TempDesignSystem/Checkbox/index.tsx

import { Checkbox as AriaCheckbox } from "react-aria-components"
import { useController, useFormContext } from "react-hook-form"

import { InfoCircleIcon } from "@/components/Icons"
import CheckIcon from "@/components/Icons/Check"
import Caption from "@/components/TempDesignSystem/Text/Caption"

import { CheckboxProps } from "./checkbox"

import styles from "./checkbox.module.css"

export default function Checkbox({
  name,
  children,
  registerOptions,
}: React.PropsWithChildren<CheckboxProps>) {
  const { control } = useFormContext()
  const { field, fieldState } = useController({
    control,
    name,
    rules: registerOptions,
  })

  return (
    <AriaCheckbox
      className={styles.container}
      isSelected={field.value}
      onChange={field.onChange}
      data-testid={name}
    >
      {({ isSelected }) => (
        <>
          <div className={styles.checkboxContainer}>
            <div className={styles.checkbox}>
              {isSelected && <CheckIcon color="white" />}
            </div>
            {children}
          </div>
          {children && fieldState.error ? (
            <Caption className={styles.error}>
              <InfoCircleIcon color="red" />
              {fieldState.error.message}
            </Caption>
          ) : null}
        </>
      )}
    </AriaCheckbox>
  )
}