UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

mantine.dev

mantinedev/mantine

1 lines • 4.02 kB
1
{"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\nexport namespace Divider {\n export type Props = DividerProps;\n export type StylesNames = DividerStylesNames;\n export type CssVariables = DividerCssVariables;\n export type Factory = DividerFactory;\n export type Variant = DividerVariant;\n}\n"],"mappings":";;;;;;;;;;;;AAiDA,MAAM,eAAe,EACnB,aAAa,aACf;AAEA,MAAM,eAAeA,6BAAAA,oBAAoC,OAAO,EAAE,OAAO,SAAS,YAAY,EAC5F,MAAM;CACJ,mBAAmB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACzD,0BAA0B;CAC1B,kBAAkBC,iBAAAA,QAAQ,MAAM,cAAc;AAChD,EACF,EAAE;AAEF,MAAa,UAAUC,gBAAAA,SAAyB,WAAW;CACzD,MAAM,QAAQC,kBAAAA,SAAS,WAAW,cAAc,MAAM;CACtD,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;CACF,CAAC;CAED,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,KAAK,CAAC;GAAE;GAAa,WAAW,CAAC,CAAC;EAAM,GAAG,GAAG;EAC9C,MAAK;EACL,GAAI,UAAU,MAAM;EACpB,GAAI;YAEH,SACC,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GAAK,WAAU;GAAO,KAAK,EAAE,UAAU,cAAc;GAAG,GAAI,UAAU,OAAO;aAC1E;EACE,CAAA;CAEJ,CAAA;AAET,CAAC;AAED,QAAQ,UAAUC,uBAAAA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc"}