@yamada-ui/react/dist/esm/components/progress/progress.js

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

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { mergeCSS } from "../../core/css/merge-css.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { progressStyle } from "./progress.style.js";
import { useProgress } from "./use-progress.js";
import { jsx } from "react/jsx-runtime";

//#region src/components/progress/progress.tsx
const { PropsContext: ProgressPropsContext, usePropsContext: useProgressPropsContext, withContext, withProvider } = createSlotComponent("progress", progressStyle);
/**
* `Progress` is a component for visually indicating progress.
*
* @see https://yamada-ui.com/docs/components/progress
*/
const Progress = withProvider(({ css, max, min, rangeColor, trackColor, value, rangeProps,...rest }) => {
	const { percent, getRangeProps, getRootProps } = useProgress({
		max,
		min,
		value
	});
	return /* @__PURE__ */ jsx(styled.div, {
		css: mergeCSS(css, { "--width": `${percent}%` }),
		bg: trackColor,
		...getRootProps(rest),
		children: /* @__PURE__ */ jsx(ProgressRange, {
			bg: rangeColor,
			...getRangeProps(rangeProps)
		})
	});
}, "root")(void 0, ({ duration,...rest }) => ({
	"--duration": (0, utils_exports.isNumber)(duration) ? `${duration}s` : duration,
	...rest
}));
const ProgressRange = withContext("div", "range")();

//#endregion
export { Progress, ProgressPropsContext, useProgressPropsContext };
//# sourceMappingURL=progress.js.map