@chakra-ui/progress/dist/chunk-Q6Q7I7E5.mjs.map

Progress bar component for Chakra UI

{"version":3,"sources":["../src/circular-progress.tsx"],"sourcesContent":["import {\n  chakra,\n  SystemStyleObject,\n  HTMLChakraProps,\n  forwardRef,\n} from \"@chakra-ui/system\"\n\nimport { getProgressProps, spin } from \"./progress.utils\"\nimport { Shape } from \"./shape\"\nimport { Circle } from \"./circle\"\n\ninterface CircularProgressOptions {\n  /**\n   * The size of the circular progress in CSS units\n   */\n  size?: string | number\n  /**\n   * Maximum value defining 100% progress made (must be higher than 'min')\n   * @default 100\n   */\n  max?: number\n  /**\n   * Minimum value defining 'no progress' (must be lower than 'max')\n   * @default 0\n   */\n  min?: number\n  /**\n   * This defines the stroke width of the svg circle.\n   * @default \"10px\"\n   */\n  thickness?: string | number\n  /**\n   * Current progress (must be between min/max)\n   */\n  value?: number\n  /**\n   * If `true`, the cap of the progress indicator will be rounded.\n   *\n   * @default false\n   */\n  capIsRound?: boolean\n  /**\n   * The content of the circular progress bar. If passed, the content will be inside and centered in the progress bar.\n   */\n  children?: React.ReactNode\n  /**\n   * The color name of the progress track. Use a color key in the theme object\n   */\n  trackColor?: string\n  /**\n   * The color of the progress indicator. Use a color key in the theme object\n   */\n  color?: string\n  /**\n   * The desired valueText to use in place of the value\n   */\n  valueText?: string\n  /**\n   * A function that returns the desired valueText to use in place of the value\n   */\n  getValueText?(value: number, percent: number): string\n  /**\n   * If `true`, the progress will be indeterminate and the `value`\n   * prop will be ignored\n   *\n   * @default false\n   */\n  isIndeterminate?: boolean\n}\n\nexport interface CircularProgressProps\n  extends Omit<HTMLChakraProps<\"div\">, \"color\">,\n    CircularProgressOptions {}\n\n/**\n * CircularProgress is used to indicate the progress of an activity.\n * It is built using `svg` and `circle` components with support for\n * theming and `indeterminate` state\n *\n * @see Docs https://chakra-ui.com/circularprogress\n * @todo add theming support for circular progress\n */\nexport const CircularProgress = forwardRef<CircularProgressProps, \"div\">(\n  (props, ref) => {\n    const {\n      size = \"48px\",\n      max = 100,\n      min = 0,\n      valueText,\n      getValueText,\n      value,\n      capIsRound,\n      children,\n      thickness = \"10px\",\n      color = \"#0078d4\",\n      trackColor = \"#edebe9\",\n      isIndeterminate,\n      ...rest\n    } = props\n\n    const progress = getProgressProps({\n      min,\n      max,\n      value,\n      valueText,\n      getValueText,\n      isIndeterminate,\n    })\n\n    const determinant = isIndeterminate\n      ? undefined\n      : (progress.percent ?? 0) * 2.64\n\n    const strokeDasharray =\n      determinant == null ? undefined : `${determinant} ${264 - determinant}`\n\n    const indicatorProps = isIndeterminate\n      ? {\n          css: { animation: `${spin} 1.5s linear infinite` },\n        }\n      : {\n          strokeDashoffset: 66,\n          strokeDasharray,\n          transitionProperty: \"stroke-dasharray, stroke\",\n          transitionDuration: \"0.6s\",\n          transitionTimingFunction: \"ease\",\n        }\n\n    const rootStyles: SystemStyleObject = {\n      display: \"inline-block\",\n      position: \"relative\",\n      verticalAlign: \"middle\",\n      fontSize: size,\n    }\n\n    return (\n      <chakra.div\n        ref={ref}\n        className=\"chakra-progress\"\n        {...progress.bind}\n        {...rest}\n        __css={rootStyles}\n      >\n        <Shape size={size} isIndeterminate={isIndeterminate}>\n          <Circle\n            stroke={trackColor}\n            strokeWidth={thickness}\n            className=\"chakra-progress__track\"\n          />\n          <Circle\n            stroke={color}\n            strokeWidth={thickness}\n            className=\"chakra-progress__indicator\"\n            strokeLinecap={capIsRound ? \"round\" : undefined}\n            /**\n             * fix issue in Safari where indicator still shows when value is 0\n             * @see Issue https://github.com/chakra-ui/chakra-ui/issues/3754\n             */\n            opacity={progress.value === 0 && !isIndeterminate ? 0 : undefined}\n            {...indicatorProps}\n          />\n        </Shape>\n        {children}\n      </chakra.div>\n    )\n  },\n)\n\nCircularProgress.displayName = \"CircularProgress\"\n"],"mappings":";;;;;;;;;;;;;AAAA;AAAA,EACE;AAAA,EAGA;AAAA,OACK;AA0IC,SACE,KADF;AA7DD,IAAM,mBAAmB;AAAA,EAC9B,CAAC,OAAO,QAAQ;AAnFlB;AAoFI,UAAM;AAAA,MACJ,OAAO;AAAA,MACP,MAAM;AAAA,MACN,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,QAAQ;AAAA,MACR,aAAa;AAAA,MACb;AAAA,MACA,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,WAAW,iBAAiB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,cAAc,kBAChB,WACC,cAAS,YAAT,YAAoB,KAAK;AAE9B,UAAM,kBACJ,eAAe,OAAO,SAAY,GAAG,eAAe,MAAM;AAE5D,UAAM,iBAAiB,kBACnB;AAAA,MACE,KAAK,EAAE,WAAW,GAAG,4BAA4B;AAAA,IACnD,IACA;AAAA,MACE,kBAAkB;AAAA,MAClB;AAAA,MACA,oBAAoB;AAAA,MACpB,oBAAoB;AAAA,MACpB,0BAA0B;AAAA,IAC5B;AAEJ,UAAM,aAAgC;AAAA,MACpC,SAAS;AAAA,MACT,UAAU;AAAA,MACV,eAAe;AAAA,MACf,UAAU;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACT,GAAG,SAAS;AAAA,QACZ,GAAG;AAAA,QACJ,OAAO;AAAA,QAEP;AAAA,+BAAC,SAAM,MAAY,iBACjB;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,WAAU;AAAA;AAAA,YACZ;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,WAAU;AAAA,gBACV,eAAe,aAAa,UAAU;AAAA,gBAKtC,SAAS,SAAS,UAAU,KAAK,CAAC,kBAAkB,IAAI;AAAA,gBACvD,GAAG;AAAA;AAAA,YACN;AAAA,aACF;AAAA,UACC;AAAA;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}