nice-ui
Version:
React design system, components, and utilities
65 lines (64 loc) • 2.22 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FontStyleButton = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const Ripple_1 = require("../../misc/Ripple");
const blockClass = (0, nano_theme_1.drule)({
d: 'inline-flex',
jc: 'space-around',
ai: 'center',
bdrad: '16%',
cur: 'default',
lh: '1.5em',
out: 0,
bd: 0,
bxz: 'border-box',
us: 'none',
});
const verticalClass = (0, nano_theme_1.drule)({
d: 'inline-flex',
fld: 'column',
jc: 'space-around',
ai: 'center',
});
const displayClass = (0, nano_theme_1.drule)({
d: 'inline-flex',
jc: 'space-around',
ai: 'center',
cur: 'default',
pdt: '.25em',
});
const childrenClass = (0, nano_theme_1.drule)({
fz: '.65em',
pdt: '.35em',
op: 0.5,
});
const FontStyleButton = ({ kind, size = 64, display = 'Ag', active, children, ...rest }) => {
const theme = (0, nano_theme_1.useTheme)();
const className = (rest.className ?? '') +
blockClass({
w: size + 'px',
h: size + 'px',
bg: theme.g(0, active ? 0.02 : 0.01),
'&:hover': {
bg: theme.g(0, 0.04),
},
});
const classNameText = displayClass({
ff: kind === 'serif'
? theme.font.serif.mid.ff
: kind === 'sans'
? theme.font.sans.mid.ff
: kind === 'slab'
? theme.font.slab.mid.ff
: theme.font.mono.mid.ff,
fz: size * 0.4 + 'px',
});
return (React.createElement(Ripple_1.Ripple, { ms: 1000 },
React.createElement("button", { ...rest, type: "button", className: className },
React.createElement("span", { className: verticalClass() },
React.createElement("span", { className: classNameText, style: { color: active ? theme.color.sem.accent[0] : void 0 } }, display),
size > 32 && (React.createElement("span", { className: childrenClass() }, children ?? (kind === 'serif' ? 'Serif' : kind === 'sans' ? 'Sans' : kind === 'slab' ? 'Slab' : 'Mono')))))));
};
exports.FontStyleButton = FontStyleButton;