@stratakit/react
Version:
A React component library for StrataKit
68 lines (67 loc) • 2.91 kB
JavaScript
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Kbd as SkKbd, VisuallyHidden } from "@stratakit/bricks";
import { useCompatProps } from "./~utils.js";
const Kbd = React.forwardRef((props, forwardedRef) => {
const { children, ...rest } = useCompatProps(props);
return /* @__PURE__ */ jsx(SkKbd, { ...rest, ref: forwardedRef, children });
});
DEV: Kbd.displayName = "Kbd";
const KbdKeys = {
Command: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2318 Cmd" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Command" })
] }),
Shift: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u21E7" }),
" Shift"
] }),
Backspace: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u232B" }),
" Backspace"
] }),
Enter: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u21B5" }),
" Enter"
] }),
Eject: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u23CF" }),
" Eject"
] }),
Control: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Ctrl" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Control" })
] }),
Windows: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u229E Win" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Windows" })
] }),
Apple: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\uF8FF" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Apple" })
] }),
Option: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2325" }),
" Option"
] }),
Left: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2190" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Left" })
] }),
Up: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2191" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Up" })
] }),
Right: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2192" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Right" })
] }),
Down: /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\u2193" }),
/* @__PURE__ */ jsx(VisuallyHidden, { children: "Down" })
] })
};
export {
Kbd,
KbdKeys
};