@datalayer/core/lib/components/progress/ProgressRing.js

**Datalayer Core**

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const PROGRESS_SEGMENTS = 44;
/**
 * Progress ring segment
 */
function Item(props) {
    return (_jsx("circle", { className: "determinate", style: {
            stroke: props.color ?? 'var(--fgColor-accent)',
            fill: 'none',
            strokeWidth: '2px',
            strokeLinecap: 'butt',
            transformOrigin: '50% 50%',
            transform: 'rotate(-90deg)',
            transition: 'all 0.2s ease-in-out',
            strokeDasharray: `${(PROGRESS_SEGMENTS * props.progress) / 100}px ${PROGRESS_SEGMENTS}px`
        }, cx: "8px", cy: "8px", r: "7px" }));
}
/**
 * Progress ring component
 *
 * Children {@link Item} must be order in decreasing progress order.
 */
export function ProgressRing(props) {
    const { children, progress, color, title, ...others } = props;
    return (_jsxs("svg", { className: "dla-progress-ring", viewBox: "0 0 16 16", role: "progressbar", "aria-valuenow": props.progress, "aria-valuemin": 0, "aria-valuemax": 100, ...others, children: [title && _jsx("title", { children: title }), _jsx("circle", { className: "background", cx: "8px", cy: "8px", r: "7px", style: {
                    stroke: 'var(--control-bgColor-rest)',
                    fill: 'none',
                    strokeWidth: '2px'
                } }), children ?? _jsx(Item, { progress: progress, color: color })] }));
}
ProgressRing.Item = Item;