import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useState, useEffect } from 'react';
import { createComponent } from '@meta-ui/core';
import { Type } from '@sinclair/typebox';
import { CheckboxGroup as BaseCheckboxGroup } from '@chakra-ui/react';
import Slot from '../_internal/Slot';
import { SizePropertySchema, IsDisabledSchema } from './Checkbox';
const DefaultValueSchema = Type.Optional(Type.Array(Type.Union([Type.String(), Type.Number()])));
const StateSchema = Type.Object({
    value: Type.String(),
});
const CheckboxGroup = ({ size, defaultValue, isDisabled, slotsMap, mergeState, }) => {
    const [value, setValue] = useState(defaultValue);
    useEffect(() => {
        mergeState({ value });
    }, [value]);
    return (_jsx(BaseCheckboxGroup, Object.assign({ size: size, defaultValue: defaultValue, isDisabled: isDisabled, onChange: val => setValue(val) }, { children: _jsx(Slot, { slotsMap: slotsMap, slot: "content" }, void 0) }), void 0));
};
const PropsSchema = Type.Object({
    size: SizePropertySchema,
    isDisabled: IsDisabledSchema,
    defaultValue: DefaultValueSchema,
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'checkbox_group',
        displayName: 'Checkbox Group',
        description: 'chakra-ui checkbox group',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            defaultValue: [],
        },
        exampleSize: [3, 3],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [],
        slots: ['content'],
        styleSlots: [],
        events: [],
    },
})), { impl: CheckboxGroup });
//# sourceMappingURL=CheckboxGroup.js.map