@stratakit/bricks/dist/DEV/Kbd.js

Small, modular components for StrataKit

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { Role } from "@ariakit/react/role";
import { forwardRef } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { useInit } from "./~utils.useInit.js";
import { predefinedSymbols } from "./Kbd.internal.js";
import VisuallyHidden from "./VisuallyHidden.js";
const Kbd = forwardRef((props, forwardedRef) => {
  useInit();
  const { variant = "solid", symbol, children, ...rest } = props;
  DEV: {
    if (symbol && !(symbol in predefinedSymbols)) {
      console.error(
        `Kbd: Invalid symbol "${symbol}". Must be one of: ${Object.keys(predefinedSymbols).join(", ")}`
      );
    }
  }
  let content = children;
  if (symbol) {
    content = /* @__PURE__ */ jsxs(Fragment, { children: [
      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: predefinedSymbols[symbol] }),
      children || /* @__PURE__ */ jsx(VisuallyHidden, { children: symbol })
    ] });
  }
  return /* @__PURE__ */ jsx(
    Role,
    {
      ...rest,
      "data-_sk-variant": variant,
      className: cx("\u{1F95D}Kbd", props.className),
      render: props.render || /* @__PURE__ */ jsx("kbd", {}),
      ref: forwardedRef,
      children: content
    }
  );
});
DEV: Kbd.displayName = "Kbd";
var Kbd_default = Kbd;
export {
  Kbd_default as default
};