@mantine/core/cjs/components/Grid/GridCol/GridCol.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"GridCol.cjs","names":["factory","useProps","useGridContext","useRandomClassName","GridColVariables","Box","classes"],"sources":["../../../../src/components/Grid/GridCol/GridCol.tsx"],"sourcesContent":["import cx from 'clsx';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  StyleProp,\n  useProps,\n  useRandomClassName,\n} from '../../../core';\nimport { useGridContext } from '../Grid.context';\nimport { GridColVariables } from './GridColVariables';\nimport classes from '../Grid.module.css';\n\nexport type GridColStylesNames = 'col';\nexport type ColSpan = number | 'auto' | 'content';\n\nexport interface GridColProps\n  extends BoxProps, CompoundStylesApiProps<GridColFactory>, ElementProps<'div'> {\n  /** Column span @default 12 */\n  span?: StyleProp<ColSpan>;\n\n  /** Column order, use to reorder columns at different viewport sizes */\n  order?: StyleProp<number>;\n\n  /** Column start offset – number of empty columns before this column */\n  offset?: StyleProp<number>;\n\n  /** Vertical alignment of the column, controls `align-self` CSS property */\n  align?: StyleProp<React.CSSProperties['alignSelf']>;\n}\n\nexport type GridColFactory = Factory<{\n  props: GridColProps;\n  ref: HTMLDivElement;\n  stylesNames: GridColStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  span: 12,\n} satisfies Partial<GridColProps>;\n\nexport const GridCol = factory<GridColFactory>((_props) => {\n  const props = useProps('GridCol', defaultProps, _props);\n  const { classNames, className, style, styles, vars, span, order, offset, align, ...others } =\n    props;\n  const ctx = useGridContext();\n  const responsiveClassName = useRandomClassName();\n  return (\n    <>\n      <GridColVariables\n        selector={`.${responsiveClassName}`}\n        span={span}\n        order={order}\n        offset={offset}\n        align={align}\n      />\n\n      <Box\n        {...ctx.getStyles('col', {\n          className: cx(className, responsiveClassName),\n          style,\n          classNames,\n          styles,\n        })}\n        {...others}\n      />\n    </>\n  );\n});\n\nGridCol.classes = classes;\nGridCol.displayName = '@mantine/core/GridCol';\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,eAAe,EACnB,MAAM,IACP;AAED,MAAa,UAAUA,gBAAAA,SAAyB,WAAW;CAEzD,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,MAAM,OAAO,QAAQ,OAAO,GAAG,WADrEC,kBAAAA,SAAS,WAAW,cAAc,OAAO;CAGvD,MAAM,MAAMC,qBAAAA,gBAAgB;CAC5B,MAAM,sBAAsBC,6BAAAA,oBAAoB;AAChD,QACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;EACE,UAAU,IAAI;EACR;EACC;EACC;EACD;EACP,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,OAAO;GACvB,YAAA,GAAA,KAAA,SAAc,WAAW,oBAAoB;GAC7C;GACA;GACA;GACD,CAAC;EACF,GAAI;EACJ,CAAA,CACD,EAAA,CAAA;EAEL;AAEF,QAAQ,UAAUC,oBAAAA;AAClB,QAAQ,cAAc"}