UNPKG

@mantine/core

Version:

React components library focused on usability, accessibility and developer experience

1 lines 3.85 kB
{"version":3,"file":"ProgressRoot.cjs","names":["createVarsResolver","getSize","getRadius","factory","useProps","useStyles","ProgressProvider","Box","classes"],"sources":["../../../../src/components/Progress/ProgressRoot/ProgressRoot.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport { ProgressProvider } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressRootStylesNames = 'root' | 'section' | 'label';\nexport type ProgressRootCssVariables = {\n root: '--progress-size' | '--progress-radius' | '--progress-transition-duration';\n};\n\nexport interface __ProgressRootProps extends BoxProps, ElementProps<'div'> {\n /** Controls track height @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n radius?: MantineRadius;\n\n /** If set, adjusts label text color based on section background color for readability */\n autoContrast?: boolean;\n\n /** Controls sections width transition duration, value is specified in ms @default 100 */\n transitionDuration?: number;\n\n /** Controls orientation @default 'horizontal' */\n orientation?: 'horizontal' | 'vertical';\n}\n\nexport interface ProgressRootProps\n extends __ProgressRootProps, StylesApiProps<ProgressRootFactory> {}\n\nexport type ProgressRootFactory = Factory<{\n props: ProgressRootProps;\n ref: HTMLDivElement;\n stylesNames: ProgressRootStylesNames;\n vars: ProgressRootCssVariables;\n}>;\n\nconst varsResolver = createVarsResolver<ProgressRootFactory>(\n (_, { size, radius, transitionDuration }) => ({\n root: {\n '--progress-size': getSize(size, 'progress-size'),\n '--progress-radius': radius === undefined ? undefined : getRadius(radius),\n '--progress-transition-duration':\n typeof transitionDuration === 'number' ? `${transitionDuration}ms` : undefined,\n },\n })\n);\n\nexport const ProgressRoot = factory<ProgressRootFactory>((_props) => {\n const props = useProps('ProgressRoot', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n autoContrast,\n transitionDuration,\n orientation,\n attributes,\n mod,\n ...others\n } = props;\n\n const getStyles = useStyles<ProgressRootFactory>({\n name: 'Progress',\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 <ProgressProvider value={{ getStyles, autoContrast }}>\n <Box mod={[{ orientation }, mod]} {...getStyles('root')} {...others} />\n </ProgressProvider>\n );\n});\n\nProgressRoot.classes = classes;\nProgressRoot.varsResolver = varsResolver;\nProgressRoot.displayName = '@mantine/core/ProgressRoot';\n"],"mappings":";;;;;;;;;;;;AAkDA,MAAM,eAAeA,6BAAAA,oBAClB,GAAG,EAAE,MAAM,QAAQ,0BAA0B,EAC5C,MAAM;CACJ,mBAAmBC,iBAAAA,QAAQ,MAAM,gBAAgB;CACjD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CACzE,kCACE,OAAO,uBAAuB,WAAW,GAAG,mBAAmB,MAAM,KAAA;CACxE,EACF,EACF;AAED,MAAa,eAAeC,gBAAAA,SAA8B,WAAW;CACnE,MAAM,QAAQC,kBAAAA,SAAS,gBAAgB,MAAM,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,oBACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA+B;EAC/C,MAAM;EACN,SAAA,wBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,yBAAAA,kBAAD;EAAkB,OAAO;GAAE;GAAW;GAAc;YAClD,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GAAK,KAAK,CAAC,EAAE,aAAa,EAAE,IAAI;GAAE,GAAI,UAAU,OAAO;GAAE,GAAI;GAAU,CAAA;EACtD,CAAA;EAErB;AAEF,aAAa,UAAUC,wBAAAA;AACvB,aAAa,eAAe;AAC5B,aAAa,cAAc"}