import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useEffect } from 'react';
import { Kbd as BaseKbd } from '@chakra-ui/react';
import { Type } from '@sinclair/typebox';
import { createComponent } from '@meta-ui/core';
import Text, { TextPropertySchema } from '../_internal/Text';
const Kbd = ({ text, mergeState, }) => {
    useEffect(() => {
        mergeState({ value: text.raw });
    }, [text.raw]);
    return (_jsx(BaseKbd, { children: _jsx(Text, { value: text }, void 0) }, void 0));
};
const StateSchema = Type.Object({
    value: Type.String(),
});
const PropsSchema = Type.Object({
    text: TextPropertySchema,
});
export default Object.assign(Object.assign({}, createComponent({
    version: 'chakra_ui/v1',
    metadata: {
        name: 'kbd',
        displayName: 'Kbd',
        description: 'chakra-ui keyboard',
        isDraggable: true,
        isResizable: true,
        exampleProperties: {
            text: {
                raw: 'enter',
                format: 'plain',
            },
        },
        exampleSize: [2, 1],
    },
    spec: {
        properties: PropsSchema,
        state: StateSchema,
        methods: [],
        slots: [],
        styleSlots: [],
        events: [],
    },
})), { impl: Kbd });
//# sourceMappingURL=Kbd.js.map