@mantine/core/cjs/components/Title/Title.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Title.cjs","names":["createVarsResolver","getTitleSize","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  MantineFontSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getTitleSize } from './get-title-size';\nimport classes from './Title.module.css';\n\nexport type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;\nexport type TitleSize = `h${TitleOrder}` | React.CSSProperties['fontSize'] | MantineFontSize;\n\nexport type TitleStylesNames = 'root';\nexport type TitleCssVariables = {\n  root: '--title-fw' | '--title-lh' | '--title-fz' | '--title-line-clamp' | '--title-text-wrap';\n};\n\nexport interface TitleProps\n  extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1', 'color'> {\n  /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default 1 */\n  order?: TitleOrder;\n\n  /** Changes title size, if not set, then size is controlled by `order` prop */\n  size?: TitleSize;\n\n  /** Number of lines after which heading will be truncated */\n  lineClamp?: number;\n\n  /** Heading `text-wrap` CSS property @default 'wrap' */\n  textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';\n}\n\nexport type TitleFactory = Factory<{\n  props: TitleProps;\n  ref: HTMLHeadingElement;\n  stylesNames: TitleStylesNames;\n  vars: TitleCssVariables;\n}>;\n\nconst defaultProps = {\n  order: 1,\n} satisfies Partial<TitleProps>;\n\nconst varsResolver = createVarsResolver<TitleFactory>((_, { order, size, lineClamp, textWrap }) => {\n  const sizeVariables = getTitleSize(order || 1, size);\n  return {\n    root: {\n      '--title-fw': sizeVariables.fontWeight,\n      '--title-lh': sizeVariables.lineHeight,\n      '--title-fz': sizeVariables.fontSize,\n      '--title-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n      '--title-text-wrap': textWrap,\n    },\n  };\n});\n\nexport const Title = factory<TitleFactory>((_props) => {\n  const props = useProps('Title', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    order,\n    vars,\n    size,\n    variant,\n    lineClamp,\n    textWrap,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<TitleFactory>({\n    name: 'Title',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  if (![1, 2, 3, 4, 5, 6].includes(order)) {\n    return null;\n  }\n\n  return (\n    <Box\n      {...getStyles('root')}\n      component={`h${order}`}\n      variant={variant}\n      mod={[{ order, 'data-line-clamp': typeof lineClamp === 'number' }, mod]}\n      size={size}\n      {...others}\n    />\n  );\n});\n\nTitle.classes = classes;\nTitle.varsResolver = varsResolver;\nTitle.displayName = '@mantine/core/Title';\n"],"mappings":";;;;;;;;;;;AA6CA,MAAM,eAAe,EACnB,OAAO,GACR;AAED,MAAM,eAAeA,6BAAAA,oBAAkC,GAAG,EAAE,OAAO,MAAM,WAAW,eAAe;CACjG,MAAM,gBAAgBC,uBAAAA,aAAa,SAAS,GAAG,KAAK;AACpD,QAAO,EACL,MAAM;EACJ,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,sBAAsB,OAAO,cAAc,WAAW,UAAU,UAAU,GAAG,KAAA;EAC7E,qBAAqB;EACtB,EACF;EACD;AAEF,MAAa,QAAQC,gBAAAA,SAAuB,WAAW;CACrD,MAAM,QAAQC,kBAAAA,SAAS,SAAS,cAAc,OAAO;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,OACA,MACA,MACA,SACA,WACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAAwB;EACxC,MAAM;EACN;EACA,SAAA,qBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC;EAAC;EAAG;EAAG;EAAG;EAAG;EAAG;EAAE,CAAC,SAAS,MAAM,CACrC,QAAO;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,UAAU,OAAO;EACrB,WAAW,IAAI;EACN;EACT,KAAK,CAAC;GAAE;GAAO,mBAAmB,OAAO,cAAc;GAAU,EAAE,IAAI;EACjE;EACN,GAAI;EACJ,CAAA;EAEJ;AAEF,MAAM,UAAUC,qBAAAA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}