function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from "react";
import { getKeys } from "../../../theme/utils/type-helpers";
import { useStyleProps } from "../../../hooks/useStyleProps";
import Box from "../box/box";
import { positionStyleFunction } from "../../../theme/src/style-functions";
/**
 * Stack is a layout component that makes it easy to stack elements together and apply a space between them.
 */
const Stack = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  direction = "vertical",
  spacing = "2",
  ...rest
}, ref) => {
  const arrayChildren = React.Children.toArray(children);

  /**
   * Renders the children of the stack.
   *
   * @returns The rendered children.
   */
  const renderChildren = React.useMemo(() => {
    return arrayChildren.map((child, index) => {
      const isLast = index === arrayChildren.length - 1;
      return /*#__PURE__*/React.createElement(Box, {
        key: index,
        flexDirection: direction === "horizontal" ? "row" : "column",
        mr: !isLast ? direction === "horizontal" ? spacing : undefined : undefined,
        mb: !isLast ? direction === "vertical" ? spacing : undefined : undefined
      }, /*#__PURE__*/React.cloneElement(child), rest.divider && !isLast && /*#__PURE__*/React.cloneElement(rest.divider, {
        orientation: direction === "horizontal" ? "vertical" : "horizontal",
        ml: direction === "horizontal" ? spacing : undefined,
        mt: direction === "vertical" ? spacing : undefined
      }));
    });
  }, [arrayChildren, direction, spacing, rest.divider]);
  return /*#__PURE__*/React.createElement(Box, _extends({}, rest, {
    flexDirection: direction === "horizontal" ? "row" : "column",
    flexWrap: direction === "horizontal" ? "wrap" : "nowrap",
    ref: ref
  }), renderChildren);
}));

/**
 * HStack is a layout component that stacks elements horizontally and apply a space between them.
 */
export const HStack = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  ...rest
}, ref) => {
  return /*#__PURE__*/React.createElement(Stack, _extends({}, rest, {
    direction: "horizontal",
    ref: ref
  }), children);
}));

/**
 * VStack is a layout component that stacks elements vertically and apply a space between them.
 */
export const VStack = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  ...rest
}, ref) => {
  return /*#__PURE__*/React.createElement(Stack, _extends({}, rest, {
    direction: "vertical",
    ref: ref
  }), children);
}));

/**
 * ZStack is a layout component that stacks elements on top of each other.
 */
export const ZStack = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(({
  children,
  reversed = false,
  spacing = "2",
  ...rest
}, ref) => {
  const arrayChildren = React.Children.toArray(children);

  /**
   * Renders the children of the stack.
   *
   * @returns The rendered children.
   */
  const renderChildren = arrayChildren.map((child, index) => {
    const isOverridenZIndexProvided = child.props && getKeys(child.props).includes("zIndex");
    const computedZIndex = useStyleProps(child.props, [...positionStyleFunction]);
    return /*#__PURE__*/React.cloneElement(child, {
      ...child.props,
      style: {
        position: index === 0 ? "relative" : "absolute",
        marginLeft: index * Number(spacing),
        zIndex: isOverridenZIndexProvided ? computedZIndex.style.zIndex : reversed ? arrayChildren.length - index : index,
        ...child.props.style
      }
    });
  });
  return /*#__PURE__*/React.createElement(Box, _extends({
    alignSelf: "flex-start"
  }, rest, {
    ref: ref
  }), renderChildren);
}));
Stack.displayName = "Stack";
HStack.displayName = "HStack";
VStack.displayName = "VStack";
ZStack.displayName = "ZStack";
export default Stack;
//# sourceMappingURL=stack.js.map