shelving/ui/form/Progress.js

Toolkit for using data in JavaScript.

import { jsx as _jsx } from "react/jsx-runtime";
import { getClass } from "../util/css.js";
import styles from "./Progress.module.css";
/** Show progress as a single continuous horizontal bar. */
export function Progress({ value, success, warning, danger }) {
    const clamped = Number.isFinite(value) ? Math.min(1, Math.max(0, value)) : 0;
    const progressStyle = { ["--progress-value"]: `${clamped * 100}%` };
    return (_jsx("div", { className: getClass(styles.track, success && styles.success, warning && styles.warning, danger && styles.danger), style: progressStyle, children: _jsx("span", { className: styles.fill }) }));
}
/** Show step progress as a horizontal bar of `total` segments, of which `current + 1` are filled. */
export function SegmentedProgress({ total, current, success, warning, danger }) {
    if (total <= 0)
        return null;
    const progressStyle = { ["--progress-steps"]: total };
    return (_jsx("div", { className: getClass(styles.segmented, success && styles.success, warning && styles.warning, danger && styles.danger), style: progressStyle, children: Array.from({ length: total }, (_, i) => (_jsx("span", { className: getClass(styles.item, i <= current && styles.active) }, i.toString()))) }));
}