@mantine/core/cjs/components/Progress/ProgressSection/ProgressSection.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ProgressSection.cjs","names":["factory","useProps","useProgressContext","useMantineTheme","Box","getThemeColor","getAutoContrastValue","getContrastColor","classes"],"sources":["../../../../src/components/Progress/ProgressSection/ProgressSection.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getThemeColor,\n  MantineColor,\n  useMantineTheme,\n  useProps,\n} from '../../../core';\nimport { useProgressContext } from '../Progress.context';\nimport classes from '../Progress.module.css';\n\nexport type ProgressSectionStylesNames = 'section';\n\nexport interface ProgressSectionProps\n  extends BoxProps, CompoundStylesApiProps<ProgressSectionFactory>, ElementProps<'div'> {\n  /** Value of the section in 0–100 range */\n  value: number;\n\n  /** Determines whether `aria-*` props should be added to the root element @default true */\n  withAria?: boolean;\n\n  /** Key of `theme.colors` or any valid CSS value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** If set, the section has stripes @default false */\n  striped?: boolean;\n\n  /** If set, the sections stripes are animated, `striped` prop is ignored @default false */\n  animated?: boolean;\n}\n\nexport type ProgressSectionFactory = Factory<{\n  props: ProgressSectionProps;\n  ref: HTMLDivElement;\n  stylesNames: ProgressSectionStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  withAria: true,\n} satisfies Partial<ProgressSectionProps>;\n\nexport const ProgressSection = factory<ProgressSectionFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    value,\n    withAria,\n    color,\n    striped,\n    animated,\n    mod,\n    ...others\n  } = useProps('ProgressSection', defaultProps, props);\n\n  const ctx = useProgressContext();\n  const theme = useMantineTheme();\n\n  const ariaAttributes = withAria\n    ? {\n        role: 'progressbar',\n        'aria-valuemax': 100,\n        'aria-valuemin': 0,\n        'aria-valuenow': value,\n        'aria-valuetext': `${value}%`,\n      }\n    : {};\n\n  return (\n    <Box\n      {...ctx.getStyles('section', { className, classNames, styles, style })}\n      {...others}\n      {...ariaAttributes}\n      mod={[{ striped: striped || animated, animated }, mod]}\n      __vars={{\n        '--progress-section-size': `${value}%`,\n        '--progress-section-color': getThemeColor(color, theme),\n        '--progress-label-color': getAutoContrastValue(ctx.autoContrast, theme)\n          ? getContrastColor({ color, theme, autoContrast: ctx.autoContrast })\n          : undefined,\n      }}\n    />\n  );\n});\n\nProgressSection.classes = classes;\nProgressSection.displayName = '@mantine/core/ProgressSection';\n"],"mappings":";;;;;;;;;;;;;AA4CA,MAAM,eAAe,EACnB,UAAU,MACX;AAED,MAAa,kBAAkBA,gBAAAA,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,OACA,SACA,UACA,KACA,GAAG,WACDC,kBAAAA,SAAS,mBAAmB,cAAc,MAAM;CAEpD,MAAM,MAAMC,yBAAAA,oBAAoB;CAChC,MAAM,QAAQC,6BAAAA,iBAAiB;CAE/B,MAAM,iBAAiB,WACnB;EACE,MAAM;EACN,iBAAiB;EACjB,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB,GAAG,MAAM;EAC5B,GACD,EAAE;AAEN,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,WAAW;GAAE;GAAW;GAAY;GAAQ;GAAO,CAAC;EACtE,GAAI;EACJ,GAAI;EACJ,KAAK,CAAC;GAAE,SAAS,WAAW;GAAU;GAAU,EAAE,IAAI;EACtD,QAAQ;GACN,2BAA2B,GAAG,MAAM;GACpC,4BAA4BC,wBAAAA,cAAc,OAAO,MAAM;GACvD,0BAA0BC,gCAAAA,qBAAqB,IAAI,cAAc,MAAM,GACnEC,2BAAAA,iBAAiB;IAAE;IAAO;IAAO,cAAc,IAAI;IAAc,CAAC,GAClE,KAAA;GACL;EACD,CAAA;EAEJ;AAEF,gBAAgB,UAAUC,wBAAAA;AAC1B,gBAAgB,cAAc"}