import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useMemo, useState } from 'react';
import { styled, vui } from '../core';
import { cs, filterUndefined } from '../utils';
import { RadioGroupProvider } from './context';
export const RadioGroupBase = styled.divBox `
  display: flex;
  flex-direction: column;
  gap: 1;
`;
/**
 * Organizes layout and display of multiple radio buttons as a row or column.
 * Exposes some props to the children via context.
 */
export const RadioGroup = vui((props, ref) => {
    const { className, defaultValue, disabled, isRow, name, onBlur, onChange, onFocus, size, value, variant, ...rest } = props;
    const [isChecked, setIsChecked] = useState(value ?? defaultValue);
    const handleOnChange = useCallback((e) => {
        setIsChecked(e.target.value);
        onChange?.(e);
    }, [onChange]);
    const context = useMemo(() => filterUndefined({
        defaultValue,
        disabled,
        isChecked,
        name,
        onBlur,
        onChange: handleOnChange,
        onFocus,
        size,
        value,
        variant,
    }), [defaultValue, disabled, handleOnChange, isChecked, name, onBlur, onFocus, size, value, variant]);
    const aliasedProps = filterUndefined({
        flexDirection: isRow ? 'row' : undefined,
    });
    return (_jsx(RadioGroupProvider, { value: context, children: _jsx(RadioGroupBase, { className: cs('vui-radioGroup', className), ref: ref, ...aliasedProps, ...rest }) }));
});
RadioGroup.displayName = 'RadioGroup';
export default RadioGroup;
//# sourceMappingURL=radioGroup.js.map