import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useEffect } from 'react';
import { createComponent } from '@meta-ui/core';
import { Type } from '@sinclair/typebox';
import { Radio as BaseRadio } from '@chakra-ui/react';
import Text, { TextPropertySchema } from '../_internal/Text';
import { ColorSchemePropertySchema } from './Types/ColorScheme';
const StateSchema = Type.Object({
    value: Type.String(),
});
const Radio = ({ text, value, isDisabled, isFocusable, isInValid, isReadOnly, isRequired, name, size, spacing, colorScheme, mergeState, }) => {
    useEffect(() => {
        mergeState({ text: text.raw });
    }, [text.raw]);
    useEffect(() => {
        mergeState({ value });
    }, [value]);
    return (_jsx(BaseRadio, Object.assign({ height: "10", value: value, isDisabled: isDisabled, isFocusable: isFocusable, isInvalid: isInValid, isReadOnly: isReadOnly, isRequired: isRequired, name: name, size: size, spacing: spacing, colorScheme: colorScheme }, { children: _jsx(Text, { value: text }, void 0) }), void 0));
};
const PropsSchema = Type.Object({
    text: TextPropertySchema,
    value: Type.Union([Type.String(), Type.Number()]),
    isDisabled: Type.Optional(Type.Boolean()),
    isFocusable: Type.Optional(Type.Boolean()),
    isInValid: Type.Optional(Type.Boolean()),
    isReadOnly: Type.Optional(Type.Boolean()),
    isRequired: Type.Optional(Type.Boolean()),
    name: Type.Optional(Type.String()),
    size: Type.KeyOf(Type.Object({
        sm: Type.String(),
        md: Type.String(),
        lg: Type.String(),
    })),
    spacing: Type.Optional(Type.String()),
    colorScheme: ColorSchemePropertySchema,
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'radio',
        displayName: 'Radio',
        description: 'chakra-ui radio',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            text: {
                raw: 'Radio',
                format: 'plain',
            },
            value: 'Radio 1',
            isDisabled: false,
            size: 'md',
        },
        exampleSize: [3, 1],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [],
        slots: [],
        styleSlots: [],
        events: [],
    },
})), { impl: Radio });
//# sourceMappingURL=Radio.js.map