{"version":3,"sources":["../src/stack/stack.tsx"],"sourcesContent":["import { getValidChildren } from \"@chakra-ui/react-children-utils\"\nimport { cx } from \"@chakra-ui/shared-utils\"\nimport {\n  chakra,\n  forwardRef,\n  HTMLChakraProps,\n  SystemProps,\n} from \"@chakra-ui/system\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\n\nimport { StackItem } from \"./stack-item\"\nimport type { StackDirection } from \"./stack.utils\"\nimport { getDividerStyles } from \"./stack.utils\"\n\nexport type { StackDirection }\n\ninterface StackOptions {\n  /**\n   * Shorthand for `alignItems` style prop\n   * @type SystemProps[\"alignItems\"]\n   */\n  align?: SystemProps[\"alignItems\"]\n  /**\n   * Shorthand for `justifyContent` style prop\n   * @type SystemProps[\"justifyContent\"]\n   */\n  justify?: SystemProps[\"justifyContent\"]\n  /**\n   * Shorthand for `flexWrap` style prop\n   * @type SystemProps[\"flexWrap\"]\n   */\n  wrap?: SystemProps[\"flexWrap\"]\n  /**\n   * The space between each stack item\n   * @type SystemProps[\"margin\"]\n   * @default \"0.5rem\"\n   */\n  spacing?: SystemProps[\"margin\"]\n  /**\n   * The direction to stack the items.\n   * @default \"column\"\n   */\n  direction?: StackDirection\n  /**\n   * If `true`, each stack item will show a divider\n   * @type React.ReactElement\n   */\n  divider?: React.ReactElement\n  /**\n   * If `true`, the children will be wrapped in a `Box` with\n   * `display: inline-block`, and the `Box` will take the spacing props\n   *\n   * @default false\n   */\n  shouldWrapChildren?: boolean\n  /**\n   * If `true` the items will be stacked horizontally.\n   *\n   * @default false\n   *\n   * @deprecated - Use `direction=\"row\"` or `HStack` instead\n   */\n  isInline?: boolean\n}\n\nexport interface StackProps extends HTMLChakraProps<\"div\">, StackOptions {}\n\n/**\n * Stacks help you easily create flexible and automatically distributed layouts\n *\n * You can stack elements in the horizontal or vertical direction,\n * and apply a space or/and divider between each element.\n *\n * It uses `display: flex` internally and renders a `div`.\n *\n * @see Docs https://chakra-ui.com/stack\n *\n */\nexport const Stack = forwardRef<StackProps, \"div\">((props, ref) => {\n  const {\n    isInline,\n    direction: directionProp,\n    align,\n    justify,\n    spacing = \"0.5rem\",\n    wrap,\n    children,\n    divider,\n    className,\n    shouldWrapChildren,\n    ...rest\n  } = props\n\n  const direction = isInline ? \"row\" : directionProp ?? \"column\"\n\n  const dividerStyle = useMemo(\n    () => getDividerStyles({ spacing, direction }),\n    [spacing, direction],\n  )\n\n  const hasDivider = !!divider\n  const shouldUseChildren = !shouldWrapChildren && !hasDivider\n\n  const clones = useMemo(() => {\n    const validChildren = getValidChildren(children)\n    return shouldUseChildren\n      ? validChildren\n      : validChildren.map((child, index) => {\n          // Prefer provided child key, fallback to index\n          const key = typeof child.key !== \"undefined\" ? child.key : index\n          const isLast = index + 1 === validChildren.length\n          const wrappedChild = <StackItem key={key}>{child}</StackItem>\n          const _child = shouldWrapChildren ? wrappedChild : child\n\n          if (!hasDivider) return _child\n\n          const clonedDivider = cloneElement(\n            divider as React.ReactElement<any>,\n            {\n              __css: dividerStyle,\n            },\n          )\n\n          const _divider = isLast ? null : clonedDivider\n\n          return (\n            <Fragment key={key}>\n              {_child}\n              {_divider}\n            </Fragment>\n          )\n        })\n  }, [\n    divider,\n    dividerStyle,\n    hasDivider,\n    shouldUseChildren,\n    shouldWrapChildren,\n    children,\n  ])\n\n  const _className = cx(\"chakra-stack\", className)\n\n  return (\n    <chakra.div\n      ref={ref}\n      display=\"flex\"\n      alignItems={align}\n      justifyContent={justify}\n      flexDirection={direction}\n      flexWrap={wrap}\n      gap={hasDivider ? undefined : spacing}\n      className={_className}\n      {...rest}\n    >\n      {clones}\n    </chakra.div>\n  )\n})\n\nStack.displayName = \"Stack\"\n"],"mappings":";;;;;;;;;AAAA,SAAS,wBAAwB;AACjC,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,OAGK;AACP,SAAS,cAAc,UAAU,eAAe;AAuGjB,cAenB,YAfmB;AAjCxB,IAAM,QAAQ,WAA8B,CAAC,OAAO,QAAQ;AACjE,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAEJ,QAAM,YAAY,WAAW,QAAQ,wCAAiB;AAEtD,QAAM,eAAe;AAAA,IACnB,MAAM,iBAAiB,EAAE,SAAS,UAAU,CAAC;AAAA,IAC7C,CAAC,SAAS,SAAS;AAAA,EACrB;AAEA,QAAM,aAAa,CAAC,CAAC;AACrB,QAAM,oBAAoB,CAAC,sBAAsB,CAAC;AAElD,QAAM,SAAS,QAAQ,MAAM;AAC3B,UAAM,gBAAgB,iBAAiB,QAAQ;AAC/C,WAAO,oBACH,gBACA,cAAc,IAAI,CAAC,OAAO,UAAU;AAElC,YAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;AAC3D,YAAM,SAAS,QAAQ,MAAM,cAAc;AAC3C,YAAM,eAAe,oBAAC,aAAqB,mBAAN,GAAY;AACjD,YAAM,SAAS,qBAAqB,eAAe;AAEnD,UAAI,CAAC;AAAY,eAAO;AAExB,YAAM,gBAAgB;AAAA,QACpB;AAAA,QACA;AAAA,UACE,OAAO;AAAA,QACT;AAAA,MACF;AAEA,YAAM,WAAW,SAAS,OAAO;AAEjC,aACE,qBAAC,YACE;AAAA;AAAA,QACA;AAAA,WAFY,GAGf;AAAA,IAEJ,CAAC;AAAA,EACP,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,aAAa,GAAG,gBAAgB,SAAS;AAE/C,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA,SAAQ;AAAA,MACR,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,KAAK,aAAa,SAAY;AAAA,MAC9B,WAAW;AAAA,MACV,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,MAAM,cAAc;","names":[]}