nice-ui/lib/2-inline-block/NotchedOutline/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.NotchedOutline = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const styles_1 = require("../../styles");
const context_1 = require("../../styles/context");
const blockClass = (0, nano_theme_1.drule)({
    d: 'block',
    pos: 'relative',
    bdrad: '6px',
    bxz: 'border-box',
    mr: 0,
});
const legendClass = (0, nano_theme_1.drule)({
    ...styles_1.fonts.get('ui', 'mid', 2),
    pad: '0 5px',
    fz: '12px',
});
const NotchedOutline = ({ className = '', style, label, active, disabled, children, }) => {
    const styles = (0, context_1.useStyles)();
    const Comp = label ? 'fieldset' : 'div';
    return (React.createElement(Comp, { className: className +
            blockClass({
                bd: disabled
                    ? `1px dotted ${styles.g(0.8)}`
                    : active
                        ? `1px solid ${styles.col.get('success', 'border-1')}`
                        : `1px solid ${styles.col.get('neutral', 'border-1')}`,
                bxsh: active && !disabled ? `0 0 0 1px ${styles.col.get('success', 'border-3')}` : 'none',
                pd: !label ? '5px 8px' : '0 8px 6px',
                '& *': {
                    op: disabled ? 0.5 : 1,
                },
                '&:hover': {
                    bd: disabled
                        ? `1px solid ${styles.g(0.8)}`
                        : active
                            ? `1px solid ${styles.col.get('success', 'border-2')}`
                            : `1px solid ${styles.col.get('neutral', 'border-2')}`,
                    bxsh: active && !disabled ? `0 0 0 2px ${styles.col.get('success', 'border-2')}` : 'none',
                    '& *': {
                        op: 1,
                    },
                },
            }), style: style },
        !!label && (React.createElement("legend", { className: legendClass({
                bg: active ? styles.col.map('bg') : 'transparent',
                col: disabled ? styles.g(0.6) : active ? styles.g(0.3) : styles.g(0.5),
                'fieldset:hover &': {
                    col: disabled ? styles.g(0.6) : active ? styles.g(0.1) : styles.g(0.5),
                },
            }), style: {
                padding: label ? undefined : 0,
            } }, label || '\uFEFF')),
        children));
};
exports.NotchedOutline = NotchedOutline;