json-joy
Version:
Collection of libraries for building collaborative editing apps.
39 lines (38 loc) • 1.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Kbd = void 0;
const tslib_1 = require("tslib");
// biome-ignore lint: React is used for JSX
const React = tslib_1.__importStar(require("react"));
const nano_theme_1 = require("nano-theme");
const blockClass = (0, nano_theme_1.rule)({
...nano_theme_1.theme.font.mono.mid,
mrt: '-.3em',
pdt: '.3em',
pdb: '.3em',
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)}`,
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 startClass = (0, nano_theme_1.rule)({
pdl: '.7em',
borderTopLeftRadius: '.3em',
borderBottomLeftRadius: '.3em',
});
const endClass = (0, nano_theme_1.rule)({
pdr: 'calc(.7em - 2px)',
borderTopRightRadius: '.3em',
borderBottomRightRadius: '.3em',
bdr: `2px solid ${nano_theme_1.theme.g(0.1)}`,
});
const Kbd = (props) => {
const { attr, children } = props;
const className = blockClass + (attr.isStart() ? startClass : '') + (attr.isEnd() ? endClass : '');
return React.createElement("kbd", { className: className }, children);
};
exports.Kbd = Kbd;