diff --git a/app/components/RadioGroup.tsx b/app/components/RadioGroup.tsx new file mode 100644 index 0000000..e649d44 --- /dev/null +++ b/app/components/RadioGroup.tsx @@ -0,0 +1,67 @@ +import React, { createContext, useContext, useRef } from 'react'; +import { + AriaRadioGroupProps, + AriaRadioProps, + VisuallyHidden, + useFocusRing, +} from 'react-aria'; +import { RadioGroupState } from 'react-stately'; +import cn from '~/utils/cn'; + +import { useRadio, useRadioGroup } from 'react-aria'; +import { useRadioGroupState } from 'react-stately'; + +interface RadioGroupProps extends AriaRadioGroupProps { + children: React.ReactElement[]; + className?: string; +} + +const RadioContext = createContext(null); + +function RadioGroup({ children, label, className, ...props }: RadioGroupProps) { + const state = useRadioGroupState(props); + const { radioGroupProps, labelProps } = useRadioGroup(props, state); + + return ( +
+ + {label} + + {children} +
+ ); +} + +interface RadioProps extends AriaRadioProps { + className?: string; +} + +function Radio({ children, className, ...props }: RadioProps) { + const state = useContext(RadioContext); + const ref = useRef(null); + const { inputProps, isSelected, isDisabled } = useRadio(props, state!, ref); + const { isFocusVisible, focusProps } = useFocusRing(); + + return ( +