material-you-react/src/primitive-components/radio/radio.tsx

'use client';

import { RadioProps } from './radio.types';
import { RippleArea } from '../ripple/ripple-area';
import { forwardRef, useRef, useState } from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import { CheckBoxLayout } from '../checkbox-layout/check-box-layout';
import { bool, oneOf, string } from 'prop-types';
import { LabelPlacement } from '../checkbox-layout/checkbox-layout.types';

/**
 * Radio component
 ** description
 */

export const Radio = forwardRef<HTMLInputElement, RadioProps & LabelPlacement>(
    ({ centralRipple, children, labelPlacement = 'right', ...props }, ref) => {
        const [isActive, setIsActive] = useState<boolean>(false),
            ripplesRef = useRef(null),
            events = useRippleEffect(ripplesRef, setIsActive);

        const classes =
            `m3 m3-radio ${isActive === true ? 'visible' : ''}`.trimEnd();

        return (
            <div {...events} className={classes}>
                {children && labelPlacement === 'left' && (
                    <label htmlFor={props.id}>{children}</label>
                )}
                <span>
                    <CheckBoxLayout {...props} ref={ref} type={'radio'} />
                    <span className={'m3 m3-radio-state-layer'} />
                    <svg height={'20px'} viewBox={'0 0 20 20'} width={'20px'}>
                        <circle
                            className={'m3-radio-outline'}
                            cx={'50%'}
                            cy={'50%'}
                        />
                        <circle
                            className={'m3-radio-state'}
                            cx={'50%'}
                            cy={'50%'}
                        />
                    </svg>
                    <RippleArea
                        callback={setIsActive}
                        central={centralRipple}
                        className={'m3-checkbox-ripple-layer'}
                        ref={ripplesRef}
                    />
                </span>
                {children && labelPlacement === 'right' && (
                    <label htmlFor={props.id}>{children}</label>
                )}
            </div>
        );
    },
);

Radio.propTypes = {
    children: string,
    centralRipple: bool,
    labelPlacement: oneOf(['left', 'right']),
};