@yamada-ui/react/dist/cjs/components/stack/stack.cjs.map

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

{"version":3,"file":"stack.cjs","names":["createComponent","stackStyle","useValidChildren","Fragment","styled"],"sources":["../../../../src/components/stack/stack.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { CSSProps, HTMLStyledProps } from \"../../core\"\nimport type { StackStyle } from \"./stack.style\"\nimport { cloneElement, Fragment, useMemo } from \"react\"\nimport { createComponent, styled } from \"../../core\"\nimport { replaceObject, useValidChildren } from \"../../utils\"\nimport { stackStyle } from \"./stack.style\"\n\nexport interface StackProps extends Omit<HTMLStyledProps, \"direction\"> {\n  /**\n   * The CSS `align-items` property.\n   */\n  align?: CSSProps[\"alignItems\"]\n  /**\n   * The CSS `flex-direction` property.\n   */\n  direction?: CSSProps[\"flexDirection\"]\n  /**\n   * The CSS `justify-content` property.\n   */\n  justify?: CSSProps[\"justifyContent\"]\n  /**\n   * If `true`, each stack item will show a separator.\n   */\n  separator?: ReactElement\n  /**\n   * The CSS `flex-wrap` property.\n   */\n  wrap?: CSSProps[\"flexWrap\"]\n}\n\nconst {\n  PropsContext: StackPropsContext,\n  usePropsContext: useStackPropsContext,\n  withContext,\n} = createComponent<StackProps, StackStyle>(\"stack\", stackStyle)\n\nexport { StackPropsContext, useStackPropsContext }\n\n/**\n * `Stack` is a component that groups elements and provides space between child elements.\n *\n * @see https://yamada-ui.com/docs/components/stack\n */\nexport const Stack = withContext<\"div\", StackProps>(\n  ({\n    align: alignItems,\n    children,\n    direction: flexDirection = \"column\",\n    justify: justifyContent,\n    separator,\n    wrap: flexWrap,\n    ...rest\n  }) => {\n    const isColumn = (value: any) =>\n      value === \"column\" || value === \"column-reverse\"\n\n    const validChildren = useValidChildren(children)\n    const cloneChildren = useMemo(\n      () =>\n        separator\n          ? validChildren.map((child, index) => {\n              const key = typeof child.key !== \"undefined\" ? child.key : index\n\n              const cloneSeparator = cloneElement<any>(separator, {\n                borderWidth: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"0 0 1px 0\" : \"0 0 0 1px\",\n                ),\n                h: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"fit-content\" : \"100%\",\n                ),\n                w: replaceObject(flexDirection, (value) =>\n                  isColumn(value) ? \"100%\" : \"fit-content\",\n                ),\n              })\n\n              return (\n                <Fragment key={key}>\n                  {!!index ? cloneSeparator : null}\n                  {child}\n                </Fragment>\n              )\n            })\n          : validChildren,\n      [separator, flexDirection, validChildren],\n    )\n\n    return (\n      <styled.div\n        alignItems={alignItems}\n        flexDirection={flexDirection}\n        flexWrap={flexWrap}\n        justifyContent={justifyContent}\n        {...rest}\n      >\n        {cloneChildren}\n      </styled.div>\n    )\n  },\n)()\n"],"mappings":";;;;;;;;;;;;;;;AAiCA,MAAM,EACJ,cAAc,mBACd,iBAAiB,sBACjB,gBACEA,yCAAwC,SAASC,+BAAW;;;;;;AAShE,MAAa,QAAQ,aAClB,EACC,OAAO,YACP,UACA,WAAW,gBAAgB,UAC3B,SAAS,gBACT,WACA,MAAM,SACN,GAAG,WACC;CACJ,MAAM,YAAY,UAChB,UAAU,YAAY,UAAU;CAElC,MAAM,gBAAgBC,kCAAiB,SAAS;CAChD,MAAM,yCAEF,YACI,cAAc,KAAK,OAAO,UAAU;EAClC,MAAM,MAAM,OAAO,MAAM,QAAQ,cAAc,MAAM,MAAM;EAE3D,MAAM,yCAAmC,WAAW;GAClD,kEAA2B,gBAAgB,UACzC,SAAS,MAAM,GAAG,cAAc,YACjC;GACD,wDAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,gBAAgB,OACnC;GACD,wDAAiB,gBAAgB,UAC/B,SAAS,MAAM,GAAG,SAAS,cAC5B;GACF,CAAC;AAEF,SACE,4CAACC,6BACE,CAAC,CAAC,QAAQ,iBAAiB,MAC3B,UAFY,IAGJ;GAEb,GACF,eACN;EAAC;EAAW;EAAe;EAAc,CAC1C;AAED,QACE,2CAACC,uBAAO;EACM;EACG;EACL;EACM;EAChB,GAAI;YAEH;GACU;EAGlB,EAAE"}