@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
52 lines (48 loc) • 2.51 kB
JavaScript
"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_stack_style = require('./stack.style.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/stack/stack.tsx
const { PropsContext: StackPropsContext, usePropsContext: useStackPropsContext, withContext } = require_create_component.createComponent("stack", require_stack_style.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 = require_children.useValidChildren(children);
const cloneChildren = (0, react.useMemo)(() => separator ? validChildren.map((child, index) => {
const key = typeof child.key !== "undefined" ? child.key : index;
const cloneSeparator = (0, react.cloneElement)(separator, {
borderWidth: (0, require_utils_index.utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "0 0 1px 0" : "0 0 0 1px"),
h: (0, require_utils_index.utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "fit-content" : "100%"),
w: (0, require_utils_index.utils_exports.replaceObject)(flexDirection, (value) => isColumn(value) ? "100%" : "fit-content")
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [!!index ? cloneSeparator : null, child] }, key);
}) : validChildren, [
separator,
flexDirection,
validChildren
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
alignItems,
flexDirection,
flexWrap,
justifyContent,
...rest,
children: cloneChildren
});
})();
//#endregion
exports.Stack = Stack;
exports.StackPropsContext = StackPropsContext;
exports.useStackPropsContext = useStackPropsContext;
//# sourceMappingURL=stack.cjs.map