@yamada-ui/react/dist/cjs/components/circle-progress/circle-progress.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_merge_css = require('../../core/css/merge-css.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_circle_progress_style = require('./circle-progress.style.cjs');
const require_use_progress = require('../progress/use-progress.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/circle-progress/circle-progress.tsx
const { PropsContext: CircleProgressPropsContext, usePropsContext: useCircleProgressPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("circle-progress", require_circle_progress_style.circleProgressStyle);
/**
* `CircleProgress` is a component that displays progress in a circular progress bar.
*
* @see https://yamada-ui.com/docs/components/circle-progress
*/
const CircleProgressRoot = withProvider(({ css, children, max, min, rangeColor, trackColor, value, circleProps, rangeProps, trackProps,...rest }) => {
	const { percent, getRangeProps, getRootProps, getTrackProps } = require_use_progress.useProgress({
		max,
		min,
		value
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
		css: require_merge_css.mergeCSS(css, { "--percent": percent }),
		...rest,
		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CircleProgressCircle, {
			...getRootProps(circleProps),
			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleProgressTrack, {
				stroke: trackColor,
				...getTrackProps(trackProps)
			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CircleProgressRange, {
				stroke: rangeColor,
				...getRangeProps(rangeProps)
			})]
		}), children]
	});
}, "root")(({ boxSize, duration, thickness,...rest }) => ({
	"--duration": (0, require_utils_index.utils_exports.isNumber)(duration) ? `${duration}s` : duration,
	"--size": require_var.varAttr(boxSize, "sizes"),
	"--thickness": require_var.varAttr(thickness, "sizes"),
	...rest
}));
const CircleProgressCircle = withContext("svg", "circle")();
const CircleProgressTrack = withContext("circle", "track")();
const CircleProgressRange = withContext("circle", "range")();
const CircleProgressLabel = withContext("span", "label")();

//#endregion
exports.CircleProgressLabel = CircleProgressLabel;
exports.CircleProgressPropsContext = CircleProgressPropsContext;
exports.CircleProgressRoot = CircleProgressRoot;
exports.useCircleProgressPropsContext = useCircleProgressPropsContext;
//# sourceMappingURL=circle-progress.cjs.map