@vimeo/iris/components/Progress/Progress.esm.js

Vimeo Design System

import { a as __makeTemplateObject, b as __rest, c as __assign } from '../../tslib.es6-7f0e734f.js';
import React__default, { useRef } from 'react';
import styled from 'styled-components';
import { Ribbon } from '../Ribbon/Ribbon.esm.js';
import { withIris } from '../../utils/HOCs/withIris.esm.js';
import { geometry } from '../../utils/DOM/geometry.esm.js';
import '../Ribbon/Ribbon.style.esm.js';
import 'polished';
import '../../color/colors.esm.js';

var Progress = withIris(ProgressComponent);
function ProgressComponent(_a) {
    var _b;
    var animate = _a.animate, value = _a.value, forwardRef = _a.forwardRef, _c = _a.variant, variant = _c === void 0 ? 'rainbow' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, style = _a.style, props = __rest(_a, ["animate", "value", "forwardRef", "variant", "size", "style"]);
    var ref = useRef(null);
    var width = ((_b = geometry(ref.current)) !== null && _b !== void 0 ? _b : {}).width;
    var background = (style !== null && style !== void 0 ? style : {}).background;
    var ARIAprops = {
        'aria-valuenow': value,
        'aria-valuemin': 0,
        'aria-valuemax': 100,
    };
    return (React__default.createElement(Background, __assign({ ref: ref, style: __assign({}, style) }, props),
        React__default.createElement(Boundary, { style: { width: value + '%' } },
            React__default.createElement(Ribbon, __assign({ animate: animate, ref: forwardRef, role: "progressbar", size: size, style: { width: width, background: background }, variant: variant }, ARIAprops)))));
}
var bgGradient = function (_a) {
    var theme = _a.theme;
    return theme.name === 'dark'
        ? 'linear-gradient(to right, #322f33, #45484c)'
        : 'linear-gradient(to right, #908994, #adb4be)';
};
var Background = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  border-radius: 0.5rem;\n  background: ", ";\n"], ["\n  position: relative;\n  border-radius: 0.5rem;\n  background: ", ";\n"])), bgGradient);
var Boundary = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  overflow: hidden;\n  border-radius: 0.5rem;\n  transition: 30ms linear;\n"], ["\n  overflow: hidden;\n  border-radius: 0.5rem;\n  transition: 30ms linear;\n"])));
var templateObject_1, templateObject_2;

export { Progress };