import { CSSProperties, ReactNode } from 'react';
import { TSizeAll } from '../../types';

export type TValidateRadio = {
    /**
     * validation, set the input as required
     */
    required?: boolean;
};
export type TRadioOption = {
    /**
     * radio group option is not selectable
     */
    disabled?: boolean;
    /**
     * radio group options need an ID to return
     */
    id: string;
    /**
     * radio group options need a label to read
     */
    label: string | ReactNode;
    /**
     * each option has a content slot before and after
     */
    slots?: {
        before?: ReactNode | JSX.Element;
        after?: ReactNode | JSX.Element;
    };
};
export interface IRadioProps extends TValidateRadio {
    /**
     * disable the radio group so the user cannot interact with it
     * @default false
     */
    disabled?: boolean;
    /**
     * set a flex direction for the radio group
     * @default 'column'
     */
    direction?: CSSProperties['flexDirection'];
    /**
     * radio options with a border and padding to make them more clickable
     */
    hasBorder?: boolean;
    /**
     * radio group is in error state
     */
    hasError?: boolean;
    /**
     * radio groups needs an ID so it can relate to its label
     */
    id: string;
    /**
     * label text for radio group accessibility
     */
    label?: string | ReactNode;
    /**
     * name text for radio group accessibility
     */
    name?: string;
    /**
     * standard onBlur event
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * standard onChange event
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
    /**
     * standard onFocus event
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * radio group options are needed to render the components
     */
    options: TRadioOption[];
    /**
     * Size, padding, spacing of the element
     * @default md
     */
    size?: TSizeAll;
    /**
     * a content slot before and after
     */
    slots?: {
        before?: ReactNode | JSX.Element;
        after?: ReactNode | JSX.Element;
    };
    /**
     * apply custom CSS
     */
    style?: React.CSSProperties;
    /**
     * value of the radio group
     */
    value?: string;
    /**
     * default value of the radio group
     */
    defaultValue?: string;
    /**
     * make the radio group read-only
     */
    readonly?: boolean;
}
//# sourceMappingURL=types.d.ts.map