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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Divider.cjs","names":["createVarsResolver","getThemeColor","getSize","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport classes from './Divider.module.css';\n\nexport type DividerStylesNames = 'root' | 'label';\nexport type DividerVariant = 'solid' | 'dashed' | 'dotted';\nexport type DividerCssVariables = {\n  root: '--divider-color' | '--divider-border-style' | '--divider-size';\n};\n\nexport interface DividerProps\n  extends BoxProps, StylesApiProps<DividerFactory>, ElementProps<'div'> {\n  /** Key of `theme.colors` or any valid CSS color value */\n  color?: MantineColor;\n\n  /** Controls width/height (depends on orientation) @default 'xs' */\n  size?: MantineSize | number | (string & {});\n\n  /** Divider label, visible only with `orientation=\"horizontal\"` */\n  label?: React.ReactNode;\n\n  /** Label position @default 'center' */\n  labelPosition?: 'left' | 'center' | 'right';\n\n  /** Divider orientation @default 'horizontal' */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport type DividerFactory = Factory<{\n  props: DividerProps;\n  ref: HTMLDivElement;\n  stylesNames: DividerStylesNames;\n  vars: DividerCssVariables;\n  variant: DividerVariant;\n}>;\n\nconst defaultProps = {\n  orientation: 'horizontal',\n} satisfies Partial<DividerProps>;\n\nconst varsResolver = createVarsResolver<DividerFactory>((theme, { color, variant, size }) => ({\n  root: {\n    '--divider-color': color ? getThemeColor(color, theme) : undefined,\n    '--divider-border-style': variant,\n    '--divider-size': getSize(size, 'divider-size'),\n  },\n}));\n\nexport const Divider = factory<DividerFactory>((_props) => {\n  const props = useProps('Divider', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    color,\n    orientation,\n    label,\n    labelPosition,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<DividerFactory>({\n    name: 'Divider',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <Box\n      mod={[{ orientation, withLabel: !!label }, mod]}\n      role=\"separator\"\n      {...getStyles('root')}\n      {...others}\n    >\n      {label && (\n        <Box component=\"span\" mod={{ position: labelPosition }} {...getStyles('label')}>\n          {label}\n        </Box>\n      )}\n    </Box>\n  );\n});\n\nDivider.classes = classes;\nDivider.varsResolver = varsResolver;\nDivider.displayName = '@mantine/core/Divider';\n"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,eAAe,EACnB,aAAa,cACd;AAED,MAAM,eAAeA,6BAAAA,oBAAoC,OAAO,EAAE,OAAO,SAAS,YAAY,EAC5F,MAAM;CACJ,mBAAmB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CACzD,0BAA0B;CAC1B,kBAAkBC,iBAAAA,QAAQ,MAAM,eAAe;CAChD,EACF,EAAE;AAEH,MAAa,UAAUC,gBAAAA,SAAyB,WAAW;CACzD,MAAM,QAAQC,kBAAAA,SAAS,WAAW,cAAc,OAAO;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,aACA,OACA,eACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA0B;EAC1C,MAAM;EACN,SAAA,uBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,KAAK,CAAC;GAAE;GAAa,WAAW,CAAC,CAAC;GAAO,EAAE,IAAI;EAC/C,MAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;YAEH,SACC,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GAAK,WAAU;GAAO,KAAK,EAAE,UAAU,eAAe;GAAE,GAAI,UAAU,QAAQ;aAC3E;GACG,CAAA;EAEJ,CAAA;EAER;AAEF,QAAQ,UAAUC,uBAAAA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}