/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-e980ce7
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, Fragment } from 'react';
import { CONTAINER_STYLES, extractStyles, filterBaseProps, tasty, } from '../../../tasty/index.js';
import { useKeySymbols } from '../../../utils/react/useKeySymbols.js';
import { Space } from '../../layout/Space.js';
import { Text } from '../Text.js';
const StyledHotKeys = tasty(Space, {
    qa: 'HotKeys',
    role: 'group',
    'aria-label': 'Keyboard shortcuts',
    styles: {
        display: 'inline-flex',
        flow: 'row',
        gap: '1x',
        placeSelf: 'center',
    },
});
const KeyElement = tasty({
    as: 'kbd',
    role: 'text',
    styles: {
        display: 'inline-flex',
        placeContent: 'center',
        placeItems: 'center start',
        radius: '1r',
        preset: 'tag',
        boxSizing: 'border-box',
        width: '2.5x max-content max-content',
        height: 'min-content',
        textAlign: 'left',
        whiteSpace: 'nowrap',
        padding: '0 (.5x - 1bw)',
        color: {
            '': '#dark.65',
            'type=primary': '#white',
            'type=inherit': 'currentColor',
        },
        fill: {
            '': '#dark.04',
            'type=primary | type=inherit': '#clear',
        },
        border: {
            '': true,
            'type=primary': '#white',
            'type=inherit': 'currentColor',
        },
    },
});
function HotKeys(props, ref) {
    const { children: keys, type, ...otherProps } = props;
    const parsedKeys = useKeySymbols(keys);
    const styles = extractStyles(otherProps, CONTAINER_STYLES);
    return (_jsx(StyledHotKeys, { qa: "HotKeys", ...filterBaseProps(otherProps, { eventProps: true, labelable: true }), ref: ref, styles: styles, children: parsedKeys.map((keyGroup, groupIndex) => (_jsxs(Fragment, { children: [groupIndex > 0 && (_jsx(Text, { color: "#dark-03", role: "separator", "aria-hidden": "true", children: "or" })), _jsx(Space, { flow: "row", gap: "0.25x", role: "group", "aria-label": `Key combination ${groupIndex + 1}`, children: keyGroup.map((key, keyIndex) => (_jsx(KeyElement, { "data-type": type, as: "kbd", role: "text", "aria-label": `Key ${key}`, children: key }, keyIndex))) })] }, groupIndex))) }));
}
const _HotKeys = forwardRef(HotKeys);
_HotKeys.displayName = 'HotKeys';
export { _HotKeys as HotKeys };

        