@geezee/react-ui/esm/keyboard/keyboard.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React, { useMemo } from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
var defaultProps = {
  command: false,
  shift: false,
  option: false,
  ctrl: false,
  small: false,
  className: ''
};

var getLayout = function getLayout(small, theme) {
  if (small) return {
    padding: 0,
    fontSize: '.75rem',
    minWidth: theme.layout.gap
  };
  return {
    padding: theme.layout.gapQuarter,
    fontSize: '0.875rem',
    minWidth: "calc(1.5 * ".concat(theme.layout.gap, ")")
  };
};

var Keyboard = function Keyboard(_ref) {
  var command = _ref.command,
      shift = _ref.shift,
      option = _ref.option,
      ctrl = _ref.ctrl,
      small = _ref.small,
      children = _ref.children,
      className = _ref.className,
      props = _objectWithoutProperties(_ref, ["command", "shift", "option", "ctrl", "small", "children", "className"]);

  var theme = useTheme();

  var _useMemo = useMemo(function () {
    return getLayout(small, theme);
  }, [small, theme]),
      padding = _useMemo.padding,
      fontSize = _useMemo.fontSize,
      minWidth = _useMemo.minWidth;

  return /*#__PURE__*/React.createElement("kbd", _extends({}, props, {
    className: _JSXStyle.dynamic([["1381686475", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]]]) + " " + (props && props.className != null && props.className || className || "")
  }), command && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1381686475", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]]])
  }, "\u2318"), shift && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1381686475", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]]])
  }, "\u21E7"), option && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1381686475", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]]])
  }, "\u2325"), ctrl && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1381686475", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]]])
  }, "\u2303"), children && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["1381686475", [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]]])
  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "1381686475",
    dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.font.sans, theme.expressiveness.R2, theme.palette.accents_2, padding, minWidth, fontSize, theme.layout.gapQuarter, theme.layout.gapQuarter]
  }, "kbd.__jsx-style-dynamic-selector{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;line-height:2em;text-align:center;display:inline-block;color:".concat(theme.palette.accents_5, ";background-color:").concat(theme.palette.accents_1, ";font-family:").concat(theme.font.sans, ";border-radius:").concat(theme.expressiveness.R2, ";border:1px solid ").concat(theme.palette.accents_2, ";padding:0 ").concat(padding, ";min-width:").concat(minWidth, ";font-size:").concat(fontSize, ";}kbd.__jsx-style-dynamic-selector+kbd.__jsx-style-dynamic-selector{margin-left:").concat(theme.layout.gapQuarter, ";}span.__jsx-style-dynamic-selector{line-height:2em;font-size:0.875rem;text-align:center;}span.__jsx-style-dynamic-selector+span.__jsx-style-dynamic-selector{margin-left:").concat(theme.layout.gapQuarter, ";}")));
};

var MemoKeyboard = React.memo(Keyboard);
export default withDefaults(MemoKeyboard, defaultProps);