UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 2.96 kB
{"version":3,"file":"Container.cjs","names":["createVarsResolver","getSize","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Container/Container.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Container.module.css';\n\nexport type ContainerStylesNames = 'root';\nexport type ContainerCssVariables = {\n root: '--container-size';\n};\n\nexport interface ContainerProps\n extends BoxProps, StylesApiProps<ContainerFactory>, ElementProps<'div'> {\n /** `max-width` of the container, value is not responsive – it is the same for all screen sizes. Numbers are converted to rem. Ignored when `fluid` prop is set. @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** If set, the container takes 100% width of its parent and `size` prop is ignored. @default false */\n fluid?: boolean;\n\n /** Centering strategy @default 'block' */\n strategy?: 'block' | 'grid';\n}\n\nexport type ContainerFactory = Factory<{\n props: ContainerProps;\n ref: HTMLDivElement;\n stylesNames: ContainerStylesNames;\n vars: ContainerCssVariables;\n}>;\n\nconst defaultProps = {\n strategy: 'block',\n} satisfies Partial<ContainerProps>;\n\nconst varsResolver = createVarsResolver<ContainerFactory>((_, { size, fluid }) => ({\n root: {\n '--container-size': fluid ? undefined : getSize(size, 'container-size'),\n },\n}));\n\nexport const Container = factory<ContainerFactory>((_props) => {\n const props = useProps('Container', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n fluid,\n mod,\n attributes,\n strategy,\n ...others\n } = props;\n\n const getStyles = useStyles<ContainerFactory>({\n name: 'Container',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box mod={[{ fluid, strategy }, mod]} {...getStyles('root')} {...others} />;\n});\n\nContainer.classes = classes;\nContainer.varsResolver = varsResolver;\nContainer.displayName = '@mantine/core/Container';\n"],"mappings":";;;;;;;;;;;AAuCA,MAAM,eAAe,EACnB,UAAU,SACX;AAED,MAAM,eAAeA,6BAAAA,oBAAsC,GAAG,EAAE,MAAM,aAAa,EACjF,MAAM,EACJ,oBAAoB,QAAQ,KAAA,IAAYC,iBAAAA,QAAQ,MAAM,iBAAiB,EACxE,EACF,EAAE;AAEH,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,KACA,YACA,UACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QAAO,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EAAK,KAAK,CAAC;GAAE;GAAO;GAAU,EAAE,IAAI;EAAE,GAAI,UAAU,OAAO;EAAE,GAAI;EAAU,CAAA;EAClF;AAEF,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}