import { Radio as $Radio, RadioGroup as $RadioGroup, type RadioGroupProps as $RadioGroupProps, type RadioProps as $RadioProps, } from "@mantine/core"; import { type FieldValues, type UseControllerProps, useController } from "react-hook-form"; export type RadioProps = UseControllerProps & Omit<$RadioProps, "value" | "defaultValue">; export function MantineRadio({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: RadioProps) { const { field: { value, onChange: fieldOnChange, ...field }, } = useController({ name, control, defaultValue, rules, shouldUnregister, }); return ( <$Radio value={value} onChange={(e) => { fieldOnChange(e); onChange?.(e); }} {...field} {...props} /> ); } export type RadioGroupProps = UseControllerProps & Omit<$RadioGroupProps, "value" | "defaultValue">; function RadioGroup({ name, control, defaultValue, rules, shouldUnregister, onChange, ...props }: RadioGroupProps) { const { field: { value, onChange: fieldOnChange, ...field }, fieldState, } = useController({ name, control, defaultValue, rules, shouldUnregister, }); return ( <$RadioGroup value={value} onChange={(e) => { fieldOnChange(e); onChange?.(e); }} error={fieldState.error?.message} {...field} {...props} /> ); } MantineRadio.Group = RadioGroup; MantineRadio.Item = $Radio;