@yamada-ui/react/dist/cjs/components/steps/steps.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_children = require('../../utils/children.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_check_icon = require('../icon/icons/check-icon.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_steps_style = require('./steps.style.cjs');
const require_hooks_use_lazy_mount_index = require('../../hooks/use-lazy-mount/index.cjs');
const require_use_steps = require('./use-steps.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/steps/steps.tsx
const { ComponentContext, PropsContext: StepsPropsContext, useComponentContext, usePropsContext: useStepsPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("steps", require_steps_style.stepsStyle);
/**
* `Steps` is a component that displays the progress of a multi-step process.
*
* @see https://yamada-ui.com/docs/components/steps
*/
const StepsRoot = withProvider(({ children, items = [], lazy, lazyBehavior, orientation: orientationProp,...rest }) => {
	const computedOrientation = require_hooks_use_value_index.useValue(orientationProp);
	const stepsList = require_children.useFindChild(require_children.useValidChildren(children), StepsList);
	const { id, count, descendants, getStatus, index, orientation, setIndex, getContentProps, getListProps, getNextTriggerProps, getPrevTriggerProps, getRootProps, onNext, onPrev } = require_use_steps.useSteps({
		count: items.length || react.Children.count(stepsList?.props.children),
		orientation: computedOrientation,
		...rest
	});
	const componentContext = (0, react.useMemo)(() => ({
		items,
		lazy,
		lazyBehavior
	}), [
		items,
		lazy,
		lazyBehavior
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_steps.StepsDescendantsContext, {
		value: descendants,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_steps.StepsContext, {
			value: (0, react.useMemo)(() => ({
				id,
				count,
				getStatus,
				index,
				orientation,
				setIndex,
				getContentProps,
				getListProps,
				getNextTriggerProps,
				getPrevTriggerProps,
				onNext,
				onPrev
			}), [
				id,
				count,
				index,
				orientation,
				setIndex,
				getStatus,
				onNext,
				onPrev,
				getListProps,
				getNextTriggerProps,
				getPrevTriggerProps,
				getContentProps
			]),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
				value: componentContext,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
					...getRootProps(),
					children
				})
			})
		})
	});
}, "root", { transferProps: ["orientation"] })();
const StepsList = withContext(({ children,...rest }) => {
	const { items } = useComponentContext();
	const { getListProps } = require_use_steps.useStepsContext();
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		else return items?.map(({ complete, content: _content, current, description, hasSeparator = true, incomplete, title, contentProps: _contentProps, descriptionProps, indicatorProps, separatorProps, titleProps,...rest$1 }, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StepsItem, {
			index,
			title,
			...rest$1,
			children: [
				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsIndicator, {
					complete,
					current,
					incomplete,
					...indicatorProps
				}),
				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, { children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsTitle, {
					...titleProps,
					children: title
				}) : null, description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsDescription, {
					...descriptionProps,
					children: description
				}) : null] }),
				hasSeparator ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsSeparator, { ...separatorProps }) : null
			]
		}, index));
	}, [children, items]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ol, {
		...getListProps(rest),
		children: computedChildren
	});
}, "list")();
const StepsItem = withContext((props) => {
	const { first, index, last, status, getDescriptionProps, getIndicatorProps, getRootProps, getSeparatorProps, getTitleProps } = require_use_steps.useStepsItem(props);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_steps.StepsItemContext, {
		value: (0, react.useMemo)(() => ({
			first,
			index,
			last,
			status,
			getDescriptionProps,
			getIndicatorProps,
			getSeparatorProps,
			getTitleProps
		}), [
			first,
			index,
			last,
			status,
			getTitleProps,
			getDescriptionProps,
			getSeparatorProps,
			getIndicatorProps
		]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.li, { ...getRootProps() })
	});
}, "item")();
const StepsIndicator = withContext(({ complete = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_check_icon.CheckIcon, {}), current = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsNumber, {}), incomplete = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsNumber, {}),...rest }) => {
	const { status, getIndicatorProps } = require_use_steps.useStepsItemContext();
	const components = (0, react.useMemo)(() => ({
		complete,
		current,
		incomplete
	}), [
		complete,
		current,
		incomplete
	]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
		...getIndicatorProps(rest),
		children: components[status]
	});
}, "indicator")();
const StepsNumber = withContext("span", "number")(void 0, ({ children,...rest }) => {
	const { index } = require_use_steps.useStepsItemContext();
	return {
		...rest,
		children: children ?? index + 1
	};
});
const StepsTitle = withContext("h3", "title")(void 0, (props) => {
	const { getTitleProps } = require_use_steps.useStepsItemContext();
	return getTitleProps(props);
});
const StepsDescription = withContext("p", "description")(void 0, (props) => {
	const { getDescriptionProps } = require_use_steps.useStepsItemContext();
	return getDescriptionProps(props);
});
const StepsSeparator = withContext("div", "separator")(void 0, (props) => {
	const { getSeparatorProps } = require_use_steps.useStepsItemContext();
	return getSeparatorProps(props);
});
const StepsContents = ({ children }) => {
	const { items } = useComponentContext();
	return (0, react.useMemo)(() => {
		if (children) return children;
		else return items?.map(({ content, contentProps }, index) => (0, require_utils_index.utils_exports.isUndefined)(content) || (0, require_utils_index.utils_exports.isNull)(content) ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StepsContent, {
			index,
			...contentProps,
			children: content
		}, index));
	}, [children, items]);
};
const StepsContent = withContext("div", "content")(void 0, ({ index,...rest }) => {
	const { lazy, lazyBehavior } = useComponentContext();
	const { index: selectedIndex, getContentProps } = require_use_steps.useStepsContext();
	const children = require_hooks_use_lazy_mount_index.useLazyMount({
		lazy,
		lazyBehavior,
		mounted: index === selectedIndex,
		...rest
	});
	return {
		...getContentProps({
			index,
			...rest
		}),
		children
	};
});
const StepsCompletedContent = withContext("div", {
	name: "CompletedContent",
	slot: ["content", "completed"]
})(void 0, (props) => {
	const { lazy, lazyBehavior } = useComponentContext();
	const { count, index: selectedIndex, getContentProps } = require_use_steps.useStepsContext();
	const children = require_hooks_use_lazy_mount_index.useLazyMount({
		lazy,
		lazyBehavior,
		mounted: count !== 0 && count === selectedIndex,
		...props
	});
	return {
		...getContentProps(props),
		children
	};
});
const StepsPrevTrigger = withContext("button", {
	name: "PrevTrigger",
	slot: ["trigger", "prev"]
})((props) => {
	const { getPrevTriggerProps } = require_use_steps.useStepsContext();
	return {
		asChild: true,
		...getPrevTriggerProps(props)
	};
});
const StepsNextTrigger = withContext("button", {
	name: "NextTrigger",
	slot: ["trigger", "next"]
})((props) => {
	const { getNextTriggerProps } = require_use_steps.useStepsContext();
	return {
		asChild: true,
		...getNextTriggerProps(props)
	};
});

//#endregion
exports.StepsCompletedContent = StepsCompletedContent;
exports.StepsContent = StepsContent;
exports.StepsContents = StepsContents;
exports.StepsDescription = StepsDescription;
exports.StepsIndicator = StepsIndicator;
exports.StepsItem = StepsItem;
exports.StepsList = StepsList;
exports.StepsNextTrigger = StepsNextTrigger;
exports.StepsNumber = StepsNumber;
exports.StepsPrevTrigger = StepsPrevTrigger;
exports.StepsPropsContext = StepsPropsContext;
exports.StepsRoot = StepsRoot;
exports.StepsSeparator = StepsSeparator;
exports.StepsTitle = StepsTitle;
exports.useStepsPropsContext = useStepsPropsContext;
//# sourceMappingURL=steps.cjs.map