import {
  Icon
} from "./chunk-OLJIJYB5.js";
import {
  colors
} from "./chunk-JF3P66JF.js";

// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
import styled, { css } from "styled-components";

// src/components/keyboard-shortcut/types.ts
var KEYBOARD_SHORTCUT_VARIANTS = {
  /** Outlined keys with a subtle border + light glyph — for dark surfaces / app chrome. Default. */
  OUTLINED: "outlined",
  /** Filled keys with a solid background — for emphasis. */
  FILLED: "filled"
};

// src/components/keyboard-shortcut/keyboard-shortcut-styles.ts
var variantStyles = {
  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`
    border: 1px solid ${colors["white-alpha-40"]};
    color: ${colors["brown-10"]};
  `,
  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`
    background: ${colors["brown-80"]};
    color: ${colors["brown-10"]};
  `
};
var adaptiveStyles = {
  [KEYBOARD_SHORTCUT_VARIANTS.OUTLINED]: css`
    border: 1px solid color-mix(in oklch, currentColor 40%, transparent);
    color: currentColor;
  `,
  [KEYBOARD_SHORTCUT_VARIANTS.FILLED]: css`
    background: color-mix(in oklch, currentColor 12%, transparent);
    color: currentColor;
  `
};
var Wrapper = styled.div`
  display: inline-flex;
  align-items: center;
  gap: 2px;
`;
var Key = styled.kbd`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border-radius: 6px;
  ${({ $variant, $adaptive }) => ($adaptive ? adaptiveStyles : variantStyles)[$variant]};
`;

// src/components/keyboard-shortcut/keyboard-shortcut.tsx
import { jsx } from "react/jsx-runtime";
function KeyboardShortcut({
  keys,
  variant = KEYBOARD_SHORTCUT_VARIANTS.OUTLINED,
  adaptive = false,
  className
}) {
  return /* @__PURE__ */ jsx(Wrapper, { className, children: keys.map((KeyComponent, index) => /* @__PURE__ */ jsx(Key, { $variant: variant, $adaptive: adaptive, children: /* @__PURE__ */ jsx(Icon, { icon: KeyComponent, size: 12 }) }, index)) });
}

// src/components/keyboard-shortcut/icons/icon-ctrl.tsx
import { jsx as jsx2 } from "react/jsx-runtime";
function IconCtrl(props) {
  const { width = 24, height = 24, ...rest } = props;
  return /* @__PURE__ */ jsx2("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width, height, fill: "none", ...rest, children: /* @__PURE__ */ jsx2(
    "text",
    {
      x: "50%",
      y: "50%",
      dominantBaseline: "central",
      textAnchor: "middle",
      fill: "currentColor",
      fontFamily: "Geist, sans-serif",
      fontWeight: 300,
      fontSize: 14,
      children: "Ctrl"
    }
  ) });
}

export {
  KEYBOARD_SHORTCUT_VARIANTS,
  KeyboardShortcut,
  IconCtrl
};
//# sourceMappingURL=chunk-PGR2MDDU.js.map