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

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

"use client";


import { useFindChild, useValidChildren } from "../../utils/children.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { CheckIcon } from "../icon/icons/check-icon.js";
import { useValue } from "../../hooks/use-value/index.js";
import { stepsStyle } from "./steps.style.js";
import { useLazyMount } from "../../hooks/use-lazy-mount/index.js";
import { StepsContext, StepsDescendantsContext, StepsItemContext, useSteps, useStepsContext, useStepsItem, useStepsItemContext } from "./use-steps.js";
import { Children, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/steps/steps.tsx
const { ComponentContext, PropsContext: StepsPropsContext, useComponentContext, usePropsContext: useStepsPropsContext, withContext, withProvider } = createSlotComponent("steps", 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 = useValue(orientationProp);
	const stepsList = useFindChild(useValidChildren(children), StepsList);
	const { id, count, descendants, getStatus, index, orientation, setIndex, getContentProps, getListProps, getNextTriggerProps, getPrevTriggerProps, getRootProps, onNext, onPrev } = useSteps({
		count: items.length || Children.count(stepsList?.props.children),
		orientation: computedOrientation,
		...rest
	});
	const componentContext = useMemo(() => ({
		items,
		lazy,
		lazyBehavior
	}), [
		items,
		lazy,
		lazyBehavior
	]);
	return /* @__PURE__ */ jsx(StepsDescendantsContext, {
		value: descendants,
		children: /* @__PURE__ */ jsx(StepsContext, {
			value: 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__ */ jsx(ComponentContext, {
				value: componentContext,
				children: /* @__PURE__ */ jsx(styled.div, {
					...getRootProps(),
					children
				})
			})
		})
	});
}, "root", { transferProps: ["orientation"] })();
const StepsList = withContext(({ children,...rest }) => {
	const { items } = useComponentContext();
	const { getListProps } = useStepsContext();
	const computedChildren = 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__ */ jsxs(StepsItem, {
			index,
			title,
			...rest$1,
			children: [
				/* @__PURE__ */ jsx(StepsIndicator, {
					complete,
					current,
					incomplete,
					...indicatorProps
				}),
				/* @__PURE__ */ jsxs(styled.div, { children: [title ? /* @__PURE__ */ jsx(StepsTitle, {
					...titleProps,
					children: title
				}) : null, description ? /* @__PURE__ */ jsx(StepsDescription, {
					...descriptionProps,
					children: description
				}) : null] }),
				hasSeparator ? /* @__PURE__ */ jsx(StepsSeparator, { ...separatorProps }) : null
			]
		}, index));
	}, [children, items]);
	return /* @__PURE__ */ jsx(styled.ol, {
		...getListProps(rest),
		children: computedChildren
	});
}, "list")();
const StepsItem = withContext((props) => {
	const { first, index, last, status, getDescriptionProps, getIndicatorProps, getRootProps, getSeparatorProps, getTitleProps } = useStepsItem(props);
	return /* @__PURE__ */ jsx(StepsItemContext, {
		value: useMemo(() => ({
			first,
			index,
			last,
			status,
			getDescriptionProps,
			getIndicatorProps,
			getSeparatorProps,
			getTitleProps
		}), [
			first,
			index,
			last,
			status,
			getTitleProps,
			getDescriptionProps,
			getSeparatorProps,
			getIndicatorProps
		]),
		children: /* @__PURE__ */ jsx(styled.li, { ...getRootProps() })
	});
}, "item")();
const StepsIndicator = withContext(({ complete = /* @__PURE__ */ jsx(CheckIcon, {}), current = /* @__PURE__ */ jsx(StepsNumber, {}), incomplete = /* @__PURE__ */ jsx(StepsNumber, {}),...rest }) => {
	const { status, getIndicatorProps } = useStepsItemContext();
	const components = useMemo(() => ({
		complete,
		current,
		incomplete
	}), [
		complete,
		current,
		incomplete
	]);
	return /* @__PURE__ */ jsx(styled.div, {
		...getIndicatorProps(rest),
		children: components[status]
	});
}, "indicator")();
const StepsNumber = withContext("span", "number")(void 0, ({ children,...rest }) => {
	const { index } = useStepsItemContext();
	return {
		...rest,
		children: children ?? index + 1
	};
});
const StepsTitle = withContext("h3", "title")(void 0, (props) => {
	const { getTitleProps } = useStepsItemContext();
	return getTitleProps(props);
});
const StepsDescription = withContext("p", "description")(void 0, (props) => {
	const { getDescriptionProps } = useStepsItemContext();
	return getDescriptionProps(props);
});
const StepsSeparator = withContext("div", "separator")(void 0, (props) => {
	const { getSeparatorProps } = useStepsItemContext();
	return getSeparatorProps(props);
});
const StepsContents = ({ children }) => {
	const { items } = useComponentContext();
	return useMemo(() => {
		if (children) return children;
		else return items?.map(({ content, contentProps }, index) => (0, utils_exports.isUndefined)(content) || (0, utils_exports.isNull)(content) ? null : /* @__PURE__ */ 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 } = useStepsContext();
	const children = 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 } = useStepsContext();
	const children = 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 } = useStepsContext();
	return {
		asChild: true,
		...getPrevTriggerProps(props)
	};
});
const StepsNextTrigger = withContext("button", {
	name: "NextTrigger",
	slot: ["trigger", "next"]
})((props) => {
	const { getNextTriggerProps } = useStepsContext();
	return {
		asChild: true,
		...getNextTriggerProps(props)
	};
});

//#endregion
export { StepsCompletedContent, StepsContent, StepsContents, StepsDescription, StepsIndicator, StepsItem, StepsList, StepsNextTrigger, StepsNumber, StepsPrevTrigger, StepsPropsContext, StepsRoot, StepsSeparator, StepsTitle, useStepsPropsContext };
//# sourceMappingURL=steps.js.map