import React, { forwardRef } from "react";
import { base as viewCSS } from "./variations/_view/base";
import { base as sizeCSS } from "./variations/_size/base";
import { base, StyledSVG, StyledBackgroundCircle, StyledProgressCircle, StyledContent } from "./ProgressBarCircular.styles";
import { classes } from "./ProgressBarCircular.tokens";
export const progressBarCircularRoot = (Root)=>/*#__PURE__*/ forwardRef((props, ref)=>{
        const { value = 0, maxValue = 100, size, view, children, className, strokeSize, hasTrack = true, reverse, ...rest } = props;
        const clampedValue = Math.min(Math.max(value, 0), maxValue);
        const percentage = clampedValue / maxValue * 100;
        const center = 50;
        return /*#__PURE__*/ React.createElement(Root, {
            ref: ref,
            view: view,
            size: size,
            className: className,
            ...rest
        }, /*#__PURE__*/ React.createElement(StyledSVG, {
            width: "100%",
            height: "100%",
            viewBox: "0 0 100 100",
            className: classes.svg
        }, hasTrack && /*#__PURE__*/ React.createElement(StyledBackgroundCircle, {
            customStrokeWidth: strokeSize,
            cx: center,
            cy: center,
            className: classes.backgroundCircle
        }), /*#__PURE__*/ React.createElement(StyledProgressCircle, {
            cx: center,
            cy: center,
            customStrokeWidth: strokeSize,
            className: classes.progressCircle,
            percent: percentage,
            reverse: reverse,
            transform: "rotate(-90 50 50)"
        })), children && /*#__PURE__*/ React.createElement(StyledContent, {
            className: classes.content
        }, children));
    });
export const progressBarCircularConfig = {
    name: 'ProgressBarCircular',
    tag: 'div',
    layout: progressBarCircularRoot,
    base,
    variations: {
        view: {
            css: viewCSS
        },
        size: {
            css: sizeCSS
        }
    },
    defaults: {
        view: 'primary',
        size: 'm'
    }
};
