/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-e694c50 | Cube Dev Team */
import { extractStyles } from "../../../utils/styles.js";
import { _Text } from "../Text.js";
import { useKeySymbols } from "../../../utils/react/useKeySymbols.js";
import { Space } from "../../layout/Space.js";
import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
import { Fragment, forwardRef } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/content/HotKeys/HotKeys.tsx
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 /* @__PURE__ */ jsx(StyledHotKeys, {
		qa: "HotKeys",
		...filterBaseProps(otherProps, {
			eventProps: true,
			labelable: true
		}),
		ref,
		styles,
		children: parsedKeys.map((keyGroup, groupIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [groupIndex > 0 && /* @__PURE__ */ jsx(_Text, {
			color: "#dark-03",
			role: "separator",
			"aria-hidden": "true",
			children: "or"
		}), /* @__PURE__ */ jsx(Space, {
			flow: "row",
			gap: "0.25x",
			role: "group",
			"aria-label": `Key combination ${groupIndex + 1}`,
			children: keyGroup.map((key, keyIndex) => /* @__PURE__ */ jsx(KeyElement, {
				"data-type": type,
				as: "kbd",
				role: "text",
				"aria-label": `Key ${key}`,
				children: key
			}, keyIndex))
		})] }, groupIndex))
	});
}
const _HotKeys = forwardRef(HotKeys);
_HotKeys.displayName = "HotKeys";

//#endregion
export { _HotKeys };
//# sourceMappingURL=HotKeys.js.map