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

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"Indicator.cjs","names":["createVarsResolver","getThemeColor","getAutoContrastValue","getContrastColor","rem","getRadius","getPositionVariables","factory","useProps","useStyles","Box","classes"],"sources":["../../../src/components/Indicator/Indicator.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { getPositionVariables } from './get-position-variables/get-position-variables';\nimport { IndicatorPosition } from './Indicator.types';\nimport classes from './Indicator.module.css';\n\nexport type IndicatorPositionVariables =\n  | '--indicator-top'\n  | '--indicator-bottom'\n  | '--indicator-left'\n  | '--indicator-right'\n  | '--indicator-translate-x'\n  | '--indicator-translate-y';\n\nexport type IndicatorStylesNames = 'root' | 'indicator';\nexport type IndicatorCssVariables = {\n  root:\n    | '--indicator-color'\n    | '--indicator-text-color'\n    | '--indicator-size'\n    | '--indicator-radius'\n    | '--indicator-z-index'\n    | IndicatorPositionVariables;\n};\n\nexport interface IndicatorProps\n  extends BoxProps, StylesApiProps<IndicatorFactory>, ElementProps<'div'> {\n  /** Indicator position relative to the target element @default 'top-end' */\n  position?: IndicatorPosition;\n\n  /** Distance in pixels to offset the indicator from its default position, useful for elements with border-radius. Can be a number for uniform offset or an object with `x` and `y` properties for separate horizontal and vertical offsets @default 0 */\n  offset?: number | { x: number; y: number };\n\n  /** Changes container display from block to inline-block, use when wrapping elements with fixed width @default false */\n  inline?: boolean;\n\n  /** Indicator width and height @default 10 */\n  size?: number | string;\n\n  /** Label displayed inside the indicator, for example, notification count */\n  label?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default 100 */\n  radius?: MantineRadius;\n\n  /** Key of `theme.colors` or any valid CSS color value @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Adds border to the root element */\n  withBorder?: boolean;\n\n  /** Hides the indicator when set */\n  disabled?: boolean;\n\n  /** If set, the indicator has processing animation @default false */\n  processing?: boolean;\n\n  /** Indicator z-index @default 200 */\n  zIndex?: string | number;\n\n  /** If set, adjusts text color based on background color */\n  autoContrast?: boolean;\n\n  /** Maximum value to display. If label is a number greater than this value, it will be displayed as `{maxValue}+` */\n  maxValue?: number;\n\n  /** Determines whether indicator with label `0` should be displayed @default true */\n  showZero?: boolean;\n}\n\nexport type IndicatorFactory = Factory<{\n  props: IndicatorProps;\n  ref: HTMLDivElement;\n  stylesNames: IndicatorStylesNames;\n  vars: IndicatorCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'top-end',\n  offset: 0,\n  showZero: true,\n} satisfies Partial<IndicatorProps>;\n\nconst varsResolver = createVarsResolver<IndicatorFactory>(\n  (theme, { color, position, offset, size, radius, zIndex, autoContrast }) => ({\n    root: {\n      '--indicator-color': color ? getThemeColor(color, theme) : undefined,\n      '--indicator-text-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n      '--indicator-size': rem(size),\n      '--indicator-radius': radius === undefined ? undefined : getRadius(radius),\n      '--indicator-z-index': zIndex?.toString(),\n      ...getPositionVariables(position, offset),\n    },\n  })\n);\n\nexport const Indicator = factory<IndicatorFactory>((_props) => {\n  const props = useProps('Indicator', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    position,\n    offset,\n    inline,\n    label,\n    radius,\n    color,\n    withBorder,\n    disabled,\n    processing,\n    zIndex,\n    autoContrast,\n    maxValue,\n    showZero,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<IndicatorFactory>({\n    name: 'Indicator',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const shouldHideZero = !showZero && (label === 0 || label === '0');\n  const formattedLabel =\n    maxValue !== undefined && typeof label === 'number' && label > maxValue\n      ? `${maxValue}+`\n      : label;\n\n  return (\n    <Box {...getStyles('root')} mod={[{ inline }, mod]} {...others}>\n      {!disabled && !shouldHideZero && (\n        <Box\n          mod={{ 'with-label': !!label, 'with-border': withBorder, processing }}\n          {...getStyles('indicator')}\n        >\n          {formattedLabel}\n        </Box>\n      )}\n      {children}\n    </Box>\n  );\n});\n\nIndicator.classes = classes;\nIndicator.varsResolver = varsResolver;\nIndicator.displayName = '@mantine/core/Indicator';\n"],"mappings":";;;;;;;;;;;;;;;;AA6FA,MAAM,eAAe;CACnB,UAAU;CACV,QAAQ;CACR,UAAU;CACX;AAED,MAAM,eAAeA,6BAAAA,oBAClB,OAAO,EAAE,OAAO,UAAU,QAAQ,MAAM,QAAQ,QAAQ,oBAAoB,EAC3E,MAAM;CACJ,qBAAqB,QAAQC,wBAAAA,cAAc,OAAO,MAAM,GAAG,KAAA;CAC3D,0BAA0BC,gCAAAA,qBAAqB,cAAc,MAAM,GAC/DC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACJ,oBAAoBC,YAAAA,IAAI,KAAK;CAC7B,sBAAsB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,OAAO;CAC1E,uBAAuB,QAAQ,UAAU;CACzC,GAAGC,+BAAAA,qBAAqB,UAAU,OAAO;CAC1C,EACF,EACF;AAED,MAAa,YAAYC,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,cAAc,OAAO;CACzD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,UACA,QACA,QACA,OACA,QACA,OACA,YACA,UACA,YACA,QACA,cACA,UACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA4B;EAC5C,MAAM;EACN,SAAA,yBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAM,iBAAiB,CAAC,aAAa,UAAU,KAAK,UAAU;CAC9D,MAAM,iBACJ,aAAa,KAAA,KAAa,OAAO,UAAU,YAAY,QAAQ,WAC3D,GAAG,SAAS,KACZ;AAEN,QACE,iBAAA,GAAA,kBAAA,MAACC,YAAAA,KAAD;EAAK,GAAI,UAAU,OAAO;EAAE,KAAK,CAAC,EAAE,QAAQ,EAAE,IAAI;EAAE,GAAI;YAAxD,CACG,CAAC,YAAY,CAAC,kBACb,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;GACE,KAAK;IAAE,cAAc,CAAC,CAAC;IAAO,eAAe;IAAY;IAAY;GACrE,GAAI,UAAU,YAAY;aAEzB;GACG,CAAA,EAEP,SACG;;EAER;AAEF,UAAU,UAAUC,yBAAAA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}