nice-ui/lib/1-inline/Key/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Key = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const styles_1 = require("../../styles");
const keyClass = (0, nano_theme_1.rule)({
    ...styles_1.fonts.get('mono', 'bold'),
    mar: '0 .1em',
    pad: '.3em calc(.7em - 2px) .3em .7em',
    bg: nano_theme_1.theme.g(0.2),
    bdt: `1px solid ${nano_theme_1.theme.g(0.3)}`,
    bdb: `2px solid ${nano_theme_1.theme.g(0)}`,
    bdr: `2px solid ${nano_theme_1.theme.g(0.1)}`,
    bdrad: '.25em',
    lh: '1em',
    fz: '.7em',
    ws: 'nowrap',
    bxsh: '0 0 .125em rgba(0,0,0,.5),0 .065em .19em rgba(0,0,0,.5),.065em 0 .125em rgba(0,0,0,.2)',
    col: '#fff',
});
const Key = ({ children }) => {
    const theme = (0, nano_theme_1.useTheme)();
    const style = {};
    if (!theme.isLight) {
        style.boxShadow = `0 0 0 1px ${theme.g(0.1, 0.16)}`;
    }
    return (React.createElement("kbd", { className: keyClass, style: style }, children));
};
exports.Key = Key;