web/packages/design-system/lib/components/Switch/index.tsx

"use client"

import { Switch as AriaSwitch } from "react-aria-components"
import { RegisterOptions, useController, useFormContext } from "react-hook-form"

import styles from "./switch.module.css"
import { MaterialIcon } from "../Icons/MaterialIcon"
import { Typography } from "../Typography"

interface SwitchProps extends React.InputHTMLAttributes<HTMLInputElement> {
  name: string
  registerOptions?: RegisterOptions
}

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

  return (
    <AriaSwitch
      className={`${styles.container} ${className}`}
      isSelected={field.value}
      onChange={field.onChange}
      data-testid={name}
      isDisabled={registerOptions?.disabled}
      excludeFromTabOrder
    >
      {children}
      <span className={styles.switch} tabIndex={0}></span>
      {fieldState.error ? (
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>
            <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
            {fieldState.error.message}
          </p>
        </Typography>
      ) : null}
    </AriaSwitch>
  )
}