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

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Code = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const context_1 = require("../../styles/context");
const blockClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.lightTheme.font.mono.bold,
    d: 'inline-block',
    pad: '.1em .2em',
    bdrad: '.25em',
    col: nano_theme_1.lightTheme.color.sem.blue[0],
    fz: '.9em',
});
const blockAltClass = (0, nano_theme_1.rule)({
    ...nano_theme_1.lightTheme.font.mono.mid,
});
const Code = ({ col = ['neutral'], gray, noBg, size, alt, border, nowrap, spacious, roundest, children, onMouseDown, }) => {
    const styles = (0, context_1.useStyles)();
    const style = {
        // background: theme.g(0, 0.04),
        color: styles.col.col(col) + '',
        // background: styles.col.g('bg-2'),
        background: styles.g(0.1, 0.04),
    };
    if (size) {
        style.fontSize = `${0.9 + size / 10}em`;
    }
    if (gray) {
        style.color = styles.g(0, 0.7);
        style.background = styles.g(0, 0.04);
    }
    if (noBg) {
        style.background = 'transparent';
    }
    if (border) {
        style.border = `1px solid ${styles.g(0, 0.06)}`;
    }
    if (nowrap) {
        style.whiteSpace = 'nowrap';
    }
    if (spacious) {
        style.padding = '.175em .6em .125em';
    }
    if (roundest) {
        style.borderRadius = '1em';
    }
    return (React.createElement("code", { className: blockClass + (alt ? blockAltClass : ''), style: style, onMouseDown: onMouseDown }, children));
};
exports.Code = Code;