nice-ui/lib/3-list-item/Progress/index.js

React design system, components, and utilities

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Progress = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const h = React.createElement;
const glowColor = nano_theme_1.theme.color.sem.positive[0];
const blockClass = (0, nano_theme_1.rule)({
    h: '2px',
    pos: 'relative',
    bg: nano_theme_1.theme.green(0.65),
    trs: 'width 0.3s',
    transitionTimingFunction: 'cubic-bezier(.08,.91,.26,1)',
});
const glowClass = (0, nano_theme_1.rule)({
    pos: 'absolute',
    right: 0,
    w: '100px',
    h: '2px',
    boxShadow: `0 0 10px ${glowColor}, 0 0 5px ${glowColor}, 0 0 5px ${glowColor}`,
    transform: 'rotate(3deg) translate(0px, -4px)',
});
const Progress = ({ value = 0, glow }) => h('div', {
    className: blockClass,
    style: {
        width: Math.min(1, Math.max(0, value)) * 100 + '%',
    },
}, !!glow && h('div', { className: glowClass }));
exports.Progress = Progress;