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

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

"use client";


import { useValidChildren } from "../../utils/children.js";
import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createComponent } from "../../core/components/create-component.js";
import { stackStyle } from "./stack.style.js";
import { Fragment, cloneElement, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/stack/stack.tsx
const { PropsContext: StackPropsContext, usePropsContext: useStackPropsContext, withContext } = createComponent("stack", stackStyle);
/**
* `Stack` is a component that groups elements and provides space between child elements.
*
* @see https://yamada-ui.com/docs/components/stack
*/
const Stack = withContext(({ align: alignItems, children, direction: flexDirection = "column", justify: justifyContent, separator, wrap: flexWrap,...rest }) => {
	const isColumn = (value) => value === "column" || value === "column-reverse";
	const validChildren = useValidChildren(children);
	const cloneChildren = useMemo(() => separator ? validChildren.map((child, index) => {
		const key = typeof child.key !== "undefined" ? child.key : index;
		const cloneSeparator = cloneElement(separator, {
			borderWidth: (0, utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "0 0 1px 0" : "0 0 0 1px"),
			h: (0, utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "fit-content" : "100%"),
			w: (0, utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "100%" : "fit-content")
		});
		return /* @__PURE__ */ jsxs(Fragment, { children: [!!index ? cloneSeparator : null, child] }, key);
	}) : validChildren, [
		separator,
		flexDirection,
		validChildren
	]);
	return /* @__PURE__ */ jsx(styled.div, {
		alignItems,
		flexDirection,
		flexWrap,
		justifyContent,
		...rest,
		children: cloneChildren
	});
})();

//#endregion
export { Stack, StackPropsContext, useStackPropsContext };
//# sourceMappingURL=stack.js.map