@etsoo/materialui/lib/mjs/PercentCircularProgress.js

TypeScript Material-UI Implementation

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Box from "@mui/material/Box";
import CircularProgress from "@mui/material/CircularProgress";
import Typography from "@mui/material/Typography";
export function PercentCircularProgress(props) {
    // Destruct
    const { textProps, valueUnit = "%", ...rest } = props;
    // Component
    return (_jsxs(Box, { sx: { position: "relative", display: "inline-flex" }, children: [_jsx(CircularProgress, { variant: "determinate", ...rest }), _jsx(Box, { sx: {
                    top: 0,
                    left: 0,
                    bottom: 0,
                    right: 0,
                    position: "absolute",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center"
                }, children: _jsx(Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps, children: `${Math.round(props.value)}${valueUnit}` }) })] }));
}