@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 3.81 kB
Source Map (JSON)
{"version":3,"file":"Flex.cjs","names":["polymorphicFactory","useProps","useStyles","useMantineTheme","useRandomClassName","parseStyleProps","FLEX_STYLE_PROPS_DATA","InlineStyles","Box","filterProps","classes"],"sources":["../../../src/components/Flex/Flex.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n ElementProps,\n filterProps,\n InlineStyles,\n MantineSpacing,\n parseStyleProps,\n polymorphicFactory,\n PolymorphicFactory,\n StyleProp,\n StylesApiProps,\n useMantineTheme,\n useProps,\n useRandomClassName,\n useStyles,\n} from '../../core';\nimport { FLEX_STYLE_PROPS_DATA } from './flex-props';\nimport classes from './Flex.module.css';\n\nexport type FlexStylesNames = 'root';\n\nexport interface FlexProps extends BoxProps, StylesApiProps<FlexFactory>, ElementProps<'div'> {\n /** `gap` CSS property */\n gap?: StyleProp<MantineSpacing>;\n\n /** `row-gap` CSS property */\n rowGap?: StyleProp<MantineSpacing>;\n\n /** `column-gap` CSS property */\n columnGap?: StyleProp<MantineSpacing>;\n\n /** `align-items` CSS property */\n align?: StyleProp<React.CSSProperties['alignItems']>;\n\n /** `justify-content` CSS property */\n justify?: StyleProp<React.CSSProperties['justifyContent']>;\n\n /** `flex-wrap` CSS property */\n wrap?: StyleProp<React.CSSProperties['flexWrap']>;\n\n /** `flex-direction` CSS property */\n direction?: StyleProp<React.CSSProperties['flexDirection']>;\n}\n\nexport type FlexFactory = PolymorphicFactory<{\n props: FlexProps;\n defaultRef: HTMLDivElement;\n defaultComponent: 'div';\n stylesNames: FlexStylesNames;\n}>;\n\nexport const Flex = polymorphicFactory<FlexFactory>((_props) => {\n const props = useProps('Flex', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n gap,\n rowGap,\n columnGap,\n align,\n justify,\n wrap,\n direction,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<FlexFactory>({\n name: 'Flex',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n });\n\n const theme = useMantineTheme();\n const responsiveClassName = useRandomClassName();\n const parsedStyleProps = parseStyleProps({\n styleProps: { gap, rowGap, columnGap, align, justify, wrap, direction },\n theme,\n data: FLEX_STYLE_PROPS_DATA,\n });\n\n return (\n <>\n {parsedStyleProps.hasResponsiveStyles && (\n <InlineStyles\n selector={`.${responsiveClassName}`}\n styles={parsedStyleProps.styles}\n media={parsedStyleProps.media}\n />\n )}\n <Box\n {...getStyles('root', {\n className: responsiveClassName,\n style: filterProps(parsedStyleProps.inlineStyles),\n })}\n {...others}\n />\n </>\n );\n});\n\nFlex.classes = classes;\nFlex.displayName = '@mantine/core/Flex';\n"],"mappings":";;;;;;;;;;;;;;;AAoDA,MAAa,OAAOA,4BAAAA,oBAAiC,WAAW;CAC9D,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,MAAM,OAAO;CAC5C,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,KACA,QACA,WACA,OACA,SACA,MACA,WACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,QAAQC,6BAAAA,iBAAiB;CAC/B,MAAM,sBAAsBC,6BAAAA,oBAAoB;CAChD,MAAM,mBAAmBC,0BAAAA,gBAAgB;EACvC,YAAY;GAAE;GAAK;GAAQ;GAAW;GAAO;GAAS;GAAM;GAAW;EACvE;EACA,MAAMC,mBAAAA;EACP,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,CAAA,EAEJ,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,QAAQ;GACpB,WAAW;GACX,OAAOC,qBAAAA,YAAY,iBAAiB,aAAa;GAClD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,cAAc"}