{"version":3,"file":"Progress.cjs","names":[],"sources":["../../../src/components/Progress/Progress.tsx"],"sourcesContent":["/*\nCopyright 2024 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport React, { forwardRef, useId } from \"react\";\nimport classNames from \"classnames\";\n\nimport styles from \"./Progress.module.css\";\n\nimport { Root, Indicator } from \"@radix-ui/react-progress\";\nimport type { Size } from \"../../utils/size\";\n\ntype ProgressProps = {\n  /** The size variant of the progress bar */\n  size: Size & (\"sm\" | \"lg\");\n\n  /**\n   * The colour variant to use for the progress bar indicator\n   * If not set, the progress bar will be rendered with a gray tone, which should only be used when the progress bar is empty\n   */\n  tint?: \"red\" | \"orange\" | \"lime\" | \"green\";\n\n  /** The CSS class name forwarded to the root element */\n  className?: string;\n\n  /** The value of the progress bar. Defaults to max if not provided */\n  value?: number | null;\n\n  /** The maximum value of the progress bar. Defaults to 1 if not provided */\n  max?: number;\n\n  /**\n   * A function to get the text label to display in the progress bar.\n   * If set, it will display a label on top of the progress bar\n   */\n  getValueLabel?: (value: number, max: number) => string;\n} & Omit<React.ComponentProps<\"div\">, \"children\">;\n\n/**\n * Displays an indicator showing the completion progress of a task, optionally with a label\n */\nexport const Progress = forwardRef<HTMLDivElement, ProgressProps>(\n  function Progress(\n    {\n      size,\n      tint,\n      className,\n      value: valueProp,\n      max: maxProp,\n      getValueLabel,\n      ...props\n    },\n    ref,\n  ) {\n    const max = maxProp ?? 1;\n    const value = valueProp ?? max;\n    const labelId = useId();\n    const label = getValueLabel ? getValueLabel(value, max) : null;\n\n    return (\n      <div\n        className={classNames(styles[\"progress-bar-container\"], className)}\n        data-tint={tint}\n        {...props}\n      >\n        {label && (\n          <div id={labelId} className={styles[\"progress-bar-label\"]}>\n            {label}\n          </div>\n        )}\n\n        <Root\n          className={styles[\"progress-bar\"]}\n          data-size={size}\n          max={max}\n          value={value}\n          ref={ref}\n          aria-labelledby={label ? labelId : undefined}\n          getValueLabel={getValueLabel}\n        >\n          <Indicator\n            className={styles[\"progress-bar-indicator\"]}\n            style={{\n              transform: `translateX(-${100 - (value / max) * 100}%)`,\n            }}\n          />\n        </Root>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,YAAA,GAAA,MAAA,YACX,SAAS,SACP,EACE,MACA,MACA,WACA,OAAO,WACP,KAAK,SACL,eACA,GAAG,SAEL,KACA;CACA,MAAM,MAAM,WAAW;CACvB,MAAM,QAAQ,aAAa;CAC3B,MAAM,WAAA,GAAA,MAAA,QAAiB;CACvB,MAAM,QAAQ,gBAAgB,cAAc,OAAO,IAAI,GAAG;AAE1D,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,WAAA,SAAsB,wBAAA,QAAO,2BAA2B,UAAU;EAClE,aAAW;EACX,GAAI;YAHN,CAKG,SACC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,IAAI;GAAS,WAAW,wBAAA,QAAO;aACjC;GACG,CAAA,EAGR,iBAAA,GAAA,kBAAA,KAAC,yBAAA,MAAD;GACE,WAAW,wBAAA,QAAO;GAClB,aAAW;GACN;GACE;GACF;GACL,mBAAiB,QAAQ,UAAU,KAAA;GACpB;aAEf,iBAAA,GAAA,kBAAA,KAAC,yBAAA,WAAD;IACE,WAAW,wBAAA,QAAO;IAClB,OAAO,EACL,WAAW,eAAe,MAAO,QAAQ,MAAO,IAAI,KACrD;IACD,CAAA;GACG,CAAA,CACH;;EAGX"}