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

Progress bar component for Chakra UI

{"version":3,"sources":["../src/progress.tsx"],"sourcesContent":["import {\n  chakra,\n  Interpolation,\n  omitThemingProps,\n  SystemStyleObject,\n  ThemingProps,\n  useMultiStyleConfig,\n  HTMLChakraProps,\n  forwardRef,\n} from \"@chakra-ui/system\"\nimport { createContext } from \"@chakra-ui/react-context\"\nimport {\n  getProgressProps,\n  GetProgressPropsOptions,\n  progress,\n  stripe,\n} from \"./progress.utils\"\n\nconst [ProgressStylesProvider, useProgressStyles] = createContext<\n  Record<string, SystemStyleObject>\n>({\n  name: `ProgressStylesContext`,\n  errorMessage: `useProgressStyles returned is 'undefined'. Seems you forgot to wrap the components in \"<Progress />\" `,\n})\n\nexport { useProgressStyles }\n\nexport interface ProgressFilledTrackProps\n  extends HTMLChakraProps<\"div\">,\n    GetProgressPropsOptions {}\n\n/**\n * ProgressFilledTrack (Linear)\n *\n * The progress component that visually indicates the current level of the progress bar.\n * It applies `background-color` and changes its width.\n *\n * @see Docs https://chakra-ui.com/progress\n */\nconst ProgressFilledTrack = forwardRef<ProgressFilledTrackProps, \"div\">(\n  (props, ref) => {\n    const { min, max, value, isIndeterminate, role, ...rest } = props\n    const progress = getProgressProps({\n      value,\n      min,\n      max,\n      isIndeterminate,\n      role,\n    })\n\n    const styles = useProgressStyles()\n    const trackStyles = {\n      height: \"100%\",\n      ...styles.filledTrack,\n    }\n\n    return (\n      <chakra.div\n        ref={ref}\n        style={{ width: `${progress.percent}%`, ...rest.style }}\n        {...progress.bind}\n        {...rest}\n        __css={trackStyles}\n      />\n    )\n  },\n)\n\nexport interface ProgressTrackProps extends HTMLChakraProps<\"div\"> {}\n\ninterface ProgressOptions {\n  /**\n   * The `value` of the progress indicator.\n   * If `undefined` the progress bar will be in `indeterminate` state\n   */\n  value?: number\n  /**\n   * The minimum value of the progress\n   * @default 0\n   */\n  min?: number\n  /**\n   * The maximum value of the progress\n   * @default 100\n   */\n  max?: number\n  /**\n   * If `true`, the progress bar will show stripe\n   *\n   * @default false\n   */\n  hasStripe?: boolean\n  /**\n   * If `true`, and hasStripe is `true`, the stripes will be animated\n   *\n   * @default false\n   */\n  isAnimated?: boolean\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 ProgressProps\n  extends ProgressOptions,\n    ThemingProps<\"Progress\">,\n    HTMLChakraProps<\"div\"> {}\n\n/**\n * Progress (Linear)\n *\n * Progress is used to display the progress status for a task that takes a long\n * time or consists of several steps.\n *\n * It includes accessible attributes to help assistive technologies understand\n * and speak the progress values.\n *\n * @see Docs https://chakra-ui.com/progress\n */\nexport const Progress = forwardRef<ProgressProps, \"div\">((props, ref) => {\n  const {\n    value,\n    min = 0,\n    max = 100,\n    hasStripe,\n    isAnimated,\n    children,\n    borderRadius: propBorderRadius,\n    isIndeterminate,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-valuetext\": ariaValueText,\n    title,\n    role,\n    ...rest\n  } = omitThemingProps(props)\n\n  const styles = useMultiStyleConfig(\"Progress\", props)\n\n  const borderRadius =\n    propBorderRadius ??\n    (styles.track?.borderRadius as string | number | undefined)\n\n  const stripeAnimation = { animation: `${stripe} 1s linear infinite` }\n\n  /**\n   * We should not use stripe if it is `indeterminate`\n   */\n  const shouldAddStripe = !isIndeterminate && hasStripe\n\n  const shouldAnimateStripe = shouldAddStripe && isAnimated\n\n  /**\n   * Generate styles for stripe and stripe animation\n   */\n  const css: Interpolation<any> = {\n    ...(shouldAnimateStripe && stripeAnimation),\n    ...(isIndeterminate && {\n      position: \"absolute\",\n      willChange: \"left\",\n      minWidth: \"50%\",\n      animation: `${progress} 1s ease infinite normal none running`,\n    }),\n  }\n\n  const trackStyles: SystemStyleObject = {\n    overflow: \"hidden\",\n    position: \"relative\",\n    ...styles.track,\n  }\n\n  return (\n    <chakra.div\n      ref={ref}\n      borderRadius={borderRadius}\n      __css={trackStyles}\n      {...rest}\n    >\n      <ProgressStylesProvider value={styles}>\n        <ProgressFilledTrack\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledBy}\n          aria-valuetext={ariaValueText}\n          min={min}\n          max={max}\n          value={value}\n          isIndeterminate={isIndeterminate}\n          css={css}\n          borderRadius={borderRadius}\n          title={title}\n          role={role}\n        />\n        {children}\n      </ProgressStylesProvider>\n    </chakra.div>\n  )\n})\n\nProgress.displayName = \"Progress\"\n"],"mappings":";;;;;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EAGA;AAAA,EAEA;AAAA,OACK;AACP,SAAS,qBAAqB;AA+CxB,cA6HA,YA7HA;AAvCN,IAAM,CAAC,wBAAwB,iBAAiB,IAAI,cAElD;AAAA,EACA,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAgBD,IAAM,sBAAsB;AAAA,EAC1B,CAAC,OAAO,QAAQ;AACd,UAAM,EAAE,KAAK,KAAK,OAAO,iBAAiB,MAAM,GAAG,KAAK,IAAI;AAC5D,UAAMA,YAAW,iBAAiB;AAAA,MAChC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,UAAM,SAAS,kBAAkB;AACjC,UAAM,cAAc;AAAA,MAClB,QAAQ;AAAA,MACR,GAAG,OAAO;AAAA,IACZ;AAEA,WACE;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACC;AAAA,QACA,OAAO,EAAE,OAAO,GAAGA,UAAS,YAAY,GAAG,KAAK,MAAM;AAAA,QACrD,GAAGA,UAAS;AAAA,QACZ,GAAG;AAAA,QACJ,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAyDO,IAAM,WAAW,WAAiC,CAAC,OAAO,QAAQ;AA3HzE;AA4HE,QAAM;AAAA,IACJ;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI,iBAAiB,KAAK;AAE1B,QAAM,SAAS,oBAAoB,YAAY,KAAK;AAEpD,QAAM,eACJ,+CACC,YAAO,UAAP,mBAAc;AAEjB,QAAM,kBAAkB,EAAE,WAAW,GAAG,4BAA4B;AAKpE,QAAM,kBAAkB,CAAC,mBAAmB;AAE5C,QAAM,sBAAsB,mBAAmB;AAK/C,QAAM,MAA0B;AAAA,IAC9B,GAAI,uBAAuB;AAAA,IAC3B,GAAI,mBAAmB;AAAA,MACrB,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,UAAU;AAAA,MACV,WAAW,GAAG;AAAA,IAChB;AAAA,EACF;AAEA,QAAM,cAAiC;AAAA,IACrC,UAAU;AAAA,IACV,UAAU;AAAA,IACV,GAAG,OAAO;AAAA,EACZ;AAEA,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEJ,+BAAC,0BAAuB,OAAO,QAC7B;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,cAAY;AAAA,YACZ,mBAAiB;AAAA,YACjB,kBAAgB;AAAA,YAChB;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC;AAAA,SACH;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;","names":["progress"]}