@elliemae/ds-circular-progress-indicator 2.2.2-rc.1 → 2.3.0-alpha.10

package/dist/esm/DSCircularProgressIndicator.js

@@ -0,0 +1,217 @@
+import * as React from "react";
+import React2 from "react";
+import { describe, PropTypes } from "react-desc";
+import { convertPropToCssClassName } from "@elliemae/ds-classnames";
+import DSTooltip from "@elliemae/ds-tooltip";
+const { classNameBlock, classNameElement } = convertPropToCssClassName("circular-progress-indicator");
+const CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {
+  const waitingLabel = "Waiting...";
+  const loadingLabel = "Loading...";
+  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;
+  let sizePx;
+  let sizeLabel;
+  let strokeWidth;
+  let trackWidth;
+  let markerHeight = "0.7";
+  let markerRefY = "4.8";
+  let grayArcStrokeDasharray = "45 170";
+  let grayArcStrokeDashoffset = "127.5";
+  switch (size.toUpperCase()) {
+    case "XS":
+      sizePx = 8;
+      sizeLabel = 12;
+      strokeWidth = 10;
+      trackWidth = 3;
+      markerHeight = "1";
+      grayArcStrokeDasharray = "46 174";
+      grayArcStrokeDashoffset = "133";
+      break;
+    case "S":
+      sizePx = 16;
+      sizeLabel = 12;
+      strokeWidth = 8;
+      trackWidth = 3;
+      markerHeight = "1";
+      grayArcStrokeDasharray = "46 174";
+      grayArcStrokeDashoffset = "133";
+      break;
+    case "M":
+      sizePx = 24;
+      sizeLabel = 12;
+      strokeWidth = 7;
+      trackWidth = 3;
+      markerHeight = "1";
+      markerRefY = "5.5";
+      grayArcStrokeDasharray = "46 174";
+      grayArcStrokeDashoffset = "133";
+      break;
+    case "L":
+      sizePx = 32;
+      sizeLabel = 13;
+      strokeWidth = 6;
+      trackWidth = 3;
+      markerRefY = "5";
+      break;
+    case "XL":
+      sizePx = 48;
+      sizeLabel = 14;
+      strokeWidth = 5;
+      trackWidth = 1;
+      break;
+    case "XXL":
+      sizePx = 56;
+      sizeLabel = 16;
+      strokeWidth = 4;
+      trackWidth = 1;
+      break;
+    case "XXXL":
+      sizePx = 64;
+      sizeLabel = 16;
+      strokeWidth = 5;
+      trackWidth = 2;
+      break;
+    default:
+      break;
+  }
+  const labelText = /* @__PURE__ */ React2.createElement("p", {
+    "data-testid": "circular-indicator-label",
+    className: classNameElement("label"),
+    style: { fontSize: `${sizeLabel}px` }
+  }, currentLabel);
+  const buildIndicator = (Component) => sizePx < 17 || showTooltip ? /* @__PURE__ */ React2.createElement(DSTooltip, {
+    containerProps: {
+      id: "ds-circular-progress-indicator",
+      "data-testid": "circular-indicator-title"
+    },
+    interactionType: "hover",
+    title: currentLabel,
+    triggerComponent: Component,
+    placement: "bottom"
+  }) : Component;
+  const grayTrack = /* @__PURE__ */ React2.createElement("circle", {
+    className: classNameElement("track"),
+    cx: "50%",
+    cy: "50%",
+    fill: "none",
+    r: "28",
+    strokeWidth: `${trackWidth}px`
+  });
+  const grayArc = /* @__PURE__ */ React2.createElement("circle", {
+    className: classNameElement("arc-gray"),
+    stroke: "#E0E3E8",
+    strokeDasharray: `${grayArcStrokeDasharray}`,
+    strokeDashoffset: `${grayArcStrokeDashoffset}`,
+    cx: "50%",
+    cy: "50%",
+    fill: "none",
+    r: "28",
+    strokeWidth: `${trackWidth}px`
+  });
+  const indicator = /* @__PURE__ */ React2.createElement("svg", {
+    height: `${sizePx}px`,
+    version: "1.1",
+    viewBox: "0 0 66 66",
+    width: `${sizePx}px`,
+    "data-testid": "circular-indicator"
+  }, /* @__PURE__ */ React2.createElement("defs", null, /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: "grad1",
+    x1: "0%",
+    x2: "100%",
+    y1: "100%",
+    y2: "0%"
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    offset: "0%",
+    style: { stopColor: "#E0E3E8", stopOpacity: 1 }
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "89%",
+    style: { stopColor: "#5594e2", stopOpacity: 1 }
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "100%",
+    style: { stopColor: "#5594e2", stopOpacity: 1 }
+  })), /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: "grad2",
+    x1: "0%",
+    x2: "100%",
+    y1: "100%",
+    y2: "0%"
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    offset: "0%",
+    style: { stopColor: "#5594e2", stopOpacity: 1 }
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "11%",
+    style: { stopColor: "#5594e2", stopOpacity: 1 }
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    offset: "100%",
+    style: { stopColor: "#E0E3E8", stopOpacity: 1 }
+  })), /* @__PURE__ */ React2.createElement("marker", {
+    id: "inverseL",
+    viewBox: "0 0 5 10",
+    refX: "0.5",
+    refY: `${markerRefY}`,
+    markerUnits: "strokeWidth",
+    markerWidth: "0.5",
+    markerHeight: `${markerHeight}`,
+    orient: "auto"
+  }, /* @__PURE__ */ React2.createElement("path", {
+    d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
+    fill: "#FFF"
+  })), /* @__PURE__ */ React2.createElement("marker", {
+    id: "inverseR",
+    viewBox: "0 0 5 10",
+    refX: "0",
+    refY: "5",
+    markerUnits: "strokeWidth",
+    markerWidth: "0.7",
+    markerHeight: `${markerHeight}`
+  }, /* @__PURE__ */ React2.createElement("path", {
+    d: "M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z",
+    fill: "#FFF"
+  }))), grayTrack, !waiting && /* @__PURE__ */ React2.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "none",
+    strokeWidth: "1"
+  }, /* @__PURE__ */ React2.createElement("path", {
+    className: classNameElement("arc-blue"),
+    d: "M30,5 C17.536025,6 6,17.536027 5,31",
+    stroke: "#5594e2",
+    strokeWidth: `${strokeWidth - 0.5}px`,
+    strokeLinecap: "round",
+    "data-testid": "circular-indicator-blue-arc"
+  }), /* @__PURE__ */ React2.createElement("path", {
+    className: classNameElement("arc-white"),
+    d: "M33,5 C17.536027,5 5,17.536027 5,33",
+    stroke: "#FFF",
+    strokeWidth: `${strokeWidth + 2}px`,
+    markerStart: "url(#inverseR)",
+    markerEnd: "url(#inverseL)"
+  }), grayArc));
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: classNameBlock("wrapper"),
+    role: "status",
+    "aria-hidden": waiting || loading ? "false" : "true"
+  }, buildIndicator(indicator), showLabel && labelText);
+};
+CircularProgressIndicator.defaultProps = {
+  size: "m",
+  showLabel: false,
+  showTooltip: false,
+  waiting: false,
+  loading: false
+};
+const circularProgressIndicatorProps = {
+  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl", "xxxl"]).description("Defines the size of the indicator").defaultValue("m"),
+  showLabel: PropTypes.bool.description("Wheter the indicator displays its state on a label or not").defaultValue(false),
+  showTooltip: PropTypes.bool.description("Wheter the indicator displays its state on a tooltip or not").defaultValue(false),
+  waiting: PropTypes.bool.description("Defines the state of the indicator as Waiting and only displays the gray track").defaultValue(false),
+  loading: PropTypes.bool.description("Defines the state of the indicator as Loading and displays a blue spinner animation").defaultValue(false)
+};
+CircularProgressIndicator.propTypes = circularProgressIndicatorProps;
+const CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);
+CircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;
+var DSCircularProgressIndicator_default = CircularProgressIndicator;
+export {
+  CircularProgressIndicatorWithSchema,
+  DSCircularProgressIndicator_default as default
+};
+//# sourceMappingURL=DSCircularProgressIndicator.js.map

package/dist/esm/DSCircularProgressIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSCircularProgressIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable max-statements */\nimport React from 'react';\nimport { describe, PropTypes } from 'react-desc';\nimport { convertPropToCssClassName } from '@elliemae/ds-classnames';\nimport DSTooltip from '@elliemae/ds-tooltip';\n\nconst { classNameBlock, classNameElement } = convertPropToCssClassName('circular-progress-indicator');\n\nconst CircularProgressIndicator = ({ size, showLabel, showTooltip, waiting, loading }) => {\n  const waitingLabel = 'Waiting...';\n  const loadingLabel = 'Loading...';\n  const currentLabel = waiting && !loading ? waitingLabel : loadingLabel;\n  let sizePx;\n  let sizeLabel;\n  let strokeWidth;\n  let trackWidth;\n  let markerHeight = '0.7';\n  let markerRefY = '4.8';\n  let grayArcStrokeDasharray = '45 170';\n  let grayArcStrokeDashoffset = '127.5';\n\n  switch (size.toUpperCase()) {\n    case 'XS':\n      sizePx = 8;\n      sizeLabel = 12;\n      strokeWidth = 10;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'S':\n      sizePx = 16;\n      sizeLabel = 12;\n      strokeWidth = 8;\n      trackWidth = 3;\n      markerHeight = '1';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'M':\n      sizePx = 24;\n      sizeLabel = 12;\n      strokeWidth = 7;\n      trackWidth = 3;\n      markerHeight = '1';\n      markerRefY = '5.5';\n      grayArcStrokeDasharray = '46 174';\n      grayArcStrokeDashoffset = '133';\n      break;\n    case 'L':\n      sizePx = 32;\n      sizeLabel = 13;\n      strokeWidth = 6;\n      trackWidth = 3;\n      markerRefY = '5';\n      break;\n    case 'XL':\n      sizePx = 48;\n      sizeLabel = 14;\n      strokeWidth = 5;\n      trackWidth = 1;\n      break;\n    case 'XXL':\n      sizePx = 56;\n      sizeLabel = 16;\n      strokeWidth = 4;\n      trackWidth = 1;\n      break;\n    case 'XXXL':\n      sizePx = 64;\n      sizeLabel = 16;\n      strokeWidth = 5;\n      trackWidth = 2;\n      break;\n    default:\n      break;\n  }\n\n  const labelText = (\n    <p\n      data-testid=\"circular-indicator-label\"\n      className={classNameElement('label')}\n      style={{ fontSize: `${sizeLabel}px` }}\n    >\n      {currentLabel}\n    </p>\n  );\n\n  // Only adds the tooltip if sizePx < 17 or showTooltip is true\n  const buildIndicator = (Component: JSX.Element) =>\n    sizePx < 17 || showTooltip ? (\n      <DSTooltip\n        containerProps={{\n          id: 'ds-circular-progress-indicator',\n          'data-testid': 'circular-indicator-title',\n        }}\n        interactionType=\"hover\"\n        title={currentLabel}\n        triggerComponent={Component}\n        placement=\"bottom\"\n      />\n    ) : (\n      Component\n    );\n\n  const grayTrack = (\n    <circle\n      className={classNameElement('track')}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const grayArc = (\n    <circle\n      className={classNameElement('arc-gray')}\n      stroke=\"#E0E3E8\"\n      strokeDasharray={`${grayArcStrokeDasharray}`}\n      strokeDashoffset={`${grayArcStrokeDashoffset}`}\n      cx=\"50%\"\n      cy=\"50%\"\n      fill=\"none\"\n      r=\"28\"\n      strokeWidth={`${trackWidth}px`}\n    />\n  );\n\n  const indicator = (\n    <svg\n      height={`${sizePx}px`}\n      version=\"1.1\"\n      viewBox=\"0 0 66 66\"\n      width={`${sizePx}px`}\n      data-testid=\"circular-indicator\"\n    >\n      <defs>\n        <linearGradient id=\"grad1\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n          <stop offset=\"89%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n        </linearGradient>\n        <linearGradient id=\"grad2\" x1=\"0%\" x2=\"100%\" y1=\"100%\" y2=\"0%\">\n          <stop offset=\"0%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"11%\" style={{ stopColor: '#5594e2', stopOpacity: 1 }} />\n          <stop offset=\"100%\" style={{ stopColor: '#E0E3E8', stopOpacity: 1 }} />\n        </linearGradient>\n        <marker\n          id=\"inverseL\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0.5\"\n          refY={`${markerRefY}`}\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.5\"\n          markerHeight={`${markerHeight}`}\n          orient=\"auto\"\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n        <marker\n          id=\"inverseR\"\n          viewBox=\"0 0 5 10\"\n          refX=\"0\"\n          refY=\"5\"\n          markerUnits=\"strokeWidth\"\n          markerWidth=\"0.7\"\n          markerHeight={`${markerHeight}`}\n        >\n          <path d=\"M 0 0 L 6 0 A 5 5 0 0 0 6 10 L 0 10 z\" fill=\"#FFF\" />\n        </marker>\n      </defs>\n      {grayTrack}\n      {!waiting && (\n        <g fill=\"none\" fillRule=\"evenodd\" stroke=\"none\" strokeWidth=\"1\">\n          <path\n            className={classNameElement('arc-blue')}\n            d=\"M30,5 C17.536025,6 6,17.536027 5,31\"\n            stroke=\"#5594e2\"\n            strokeWidth={`${strokeWidth - 0.5}px`}\n            strokeLinecap=\"round\"\n            data-testid=\"circular-indicator-blue-arc\"\n          />\n          <path\n            className={classNameElement('arc-white')}\n            d=\"M33,5 C17.536027,5 5,17.536027 5,33\"\n            stroke=\"#FFF\"\n            strokeWidth={`${strokeWidth + 2}px`}\n            markerStart=\"url(#inverseR)\"\n            markerEnd=\"url(#inverseL)\"\n          />\n          {grayArc}\n        </g>\n      )}\n    </svg>\n  );\n\n  return (\n    <div className={classNameBlock('wrapper')} role=\"status\" aria-hidden={waiting || loading ? 'false' : 'true'}>\n      {buildIndicator(indicator)}\n      {showLabel && labelText}\n    </div>\n  );\n};\n\nCircularProgressIndicator.defaultProps = {\n  size: 'm',\n  showLabel: false,\n  showTooltip: false,\n  waiting: false,\n  loading: false,\n};\n\nconst circularProgressIndicatorProps = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl'])\n    .description('Defines the size of the indicator')\n    .defaultValue('m'),\n  showLabel: PropTypes.bool\n    .description('Wheter the indicator displays its state on a label or not')\n    .defaultValue(false),\n  showTooltip: PropTypes.bool\n    .description('Wheter the indicator displays its state on a tooltip or not')\n    .defaultValue(false),\n  waiting: PropTypes.bool\n    .description('Defines the state of the indicator as Waiting and only displays the gray track')\n    .defaultValue(false),\n  loading: PropTypes.bool\n    .description('Defines the state of the indicator as Loading and displays a blue spinner animation')\n    .defaultValue(false),\n};\n\nCircularProgressIndicator.propTypes = circularProgressIndicatorProps;\n\nconst CircularProgressIndicatorWithSchema = describe(CircularProgressIndicator);\nCircularProgressIndicatorWithSchema.propTypes = circularProgressIndicatorProps;\n\nexport { CircularProgressIndicatorWithSchema };\nexport default CircularProgressIndicator;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+import {
+  default as default2,
+  default as default3,
+  CircularProgressIndicatorWithSchema
+} from "./DSCircularProgressIndicator";
+import { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from "./v2";
+export {
+  CircularProgressIndicatorWithSchema,
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema,
+  default3 as DSCircularProgressIndicator,
+  default2 as default
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/named */\nexport {\n  default,\n  default as DSCircularProgressIndicator,\n  CircularProgressIndicatorWithSchema,\n} from './DSCircularProgressIndicator';\nexport { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';\n"],
+  "mappings": "AAAA;ACCA;AAAA;AAAA;AAAA;AAAA;AAKA;",
+  "names": []
+}

package/dist/esm/v2/DSCircularIndeterminateIndicator.js

@@ -0,0 +1,120 @@
+import * as React from "react";
+import React2 from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { DSTooltipV3 } from "@elliemae/ds-tooltip";
+import { describe } from "react-desc";
+import styled from "styled-components";
+import { kfrm } from "@elliemae/ds-system";
+import { uid } from "uid";
+import { CircularIndeterminateIndicatorPropTypes } from "./react-desc-prop-types";
+const r = kfrm`to { transform: rotate(2turn) }`;
+const s = kfrm`0%, 39% { stroke-dasharray: 942px 2826px }`;
+const StyledSvg = styled.svg`
+  #gg {
+    transform: rotate(45deg);
+    stroke: url(#${(props) => props.linearGradientUid});
+    mask: url(#${(props) => props.maskUid});
+  }
+  mask use {
+    stroke: #fff;
+    stroke-linecap: round;
+    stroke-dasharray: 942px 2826px;
+    animation: ${r} ${(props) => props.duration}s cubic-bezier(0.5, -0.43, 0.5, 1.43) infinite,
+      ${s} ${(props) => props.duration / 2}s ease-in-out infinite alternate;
+  }
+`;
+const sizeToPx = {
+  xs: "16px",
+  s: "24px",
+  m: "32px",
+  l: "48px",
+  xl: "56px",
+  xxl: "64px"
+};
+const sizeToWeight = {
+  xs: "10%",
+  s: "9%",
+  m: "8%",
+  l: "6%",
+  xl: "5%",
+  xxl: "4%"
+};
+const colorToHex = {
+  light: "#FFFFFF",
+  dark: "#0F364A"
+};
+const sizeToTextSize = {
+  xs: "12px",
+  s: "12px",
+  m: "12px",
+  l: "13px",
+  xl: "14px",
+  xxl: "16px"
+};
+const DSCircularIndeterminateIndicator = ({
+  size = "m",
+  color = "dark",
+  text = "",
+  showText = true,
+  withTooltip = false,
+  tooltipStartPlacementPreference = "bottom",
+  __duration = 1.5
+}) => {
+  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }) => /* @__PURE__ */ React2.createElement(React2.Fragment, null, children);
+  const linearGradientUid = uid(16);
+  const maskUid = uid(16);
+  const circleUid = uid(16);
+  return /* @__PURE__ */ React2.createElement(Grid, {
+    gutter: "xs",
+    justifyContent: "center",
+    role: "status"
+  }, /* @__PURE__ */ React2.createElement(Wrapper, {
+    text,
+    textAlign: "center",
+    startPlacementPreference: tooltipStartPlacementPreference
+  }, /* @__PURE__ */ React2.createElement(StyledSvg, {
+    viewBox: "-1950 -975 3900 1950",
+    fill: "none",
+    stroke: "transparent",
+    strokeWidth: sizeToWeight[size],
+    width: sizeToPx[size],
+    height: sizeToPx[size],
+    style: { display: "block", margin: "auto" },
+    linearGradientUid,
+    maskUid,
+    duration: __duration
+  }, /* @__PURE__ */ React2.createElement("g", {
+    transform: "scale(2.298)"
+  }, /* @__PURE__ */ React2.createElement("linearGradient", {
+    id: linearGradientUid
+  }, /* @__PURE__ */ React2.createElement("stop", {
+    stopColor: color === "dark" ? "#48a3ff" : "#ccd6ff"
+  }), /* @__PURE__ */ React2.createElement("stop", {
+    stopColor: color === "dark" ? "#49d0ff" : "#ebf6ff",
+    offset: "1"
+  })), /* @__PURE__ */ React2.createElement("mask", {
+    id: maskUid
+  }, /* @__PURE__ */ React2.createElement("circle", {
+    r: "1200",
+    fill: "#000"
+  }), /* @__PURE__ */ React2.createElement("use", {
+    xlinkHref: `#${circleUid}`
+  })), /* @__PURE__ */ React2.createElement("circle", {
+    id: circleUid,
+    r: "600"
+  }), /* @__PURE__ */ React2.createElement("g", {
+    id: "gg"
+  }, /* @__PURE__ */ React2.createElement("use", {
+    xlinkHref: `#${circleUid}`
+  })))), text !== "" && showText && /* @__PURE__ */ React2.createElement("span", {
+    style: { color: colorToHex[color], fontSize: sizeToTextSize[size] }
+  }, text)));
+};
+DSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes;
+const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);
+DSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=DSCircularIndeterminateIndicator.js.map

package/dist/esm/v2/DSCircularIndeterminateIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/DSCircularIndeterminateIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { PropsWithChildren, WeakValidationMap } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSTooltipV3 } from '@elliemae/ds-tooltip';\nimport { describe } from 'react-desc';\nimport styled from 'styled-components';\nimport { kfrm } from '@elliemae/ds-system';\nimport { uid } from 'uid';\nimport { DSCircularIndeterminateIndicatorT, CircularIndeterminateIndicatorPropTypes } from './react-desc-prop-types';\n\nconst r = kfrm`to { transform: rotate(2turn) }`;\nconst s = kfrm`0%, 39% { stroke-dasharray: 942px 2826px }`;\n\nconst StyledSvg = styled.svg<{ linearGradientUid: string; maskUid: string; duration: number }>`\n  #gg {\n    transform: rotate(45deg);\n    stroke: url(#${(props) => props.linearGradientUid});\n    mask: url(#${(props) => props.maskUid});\n  }\n  mask use {\n    stroke: #fff;\n    stroke-linecap: round;\n    stroke-dasharray: 942px 2826px;\n    animation: ${r} ${(props) => props.duration}s cubic-bezier(0.5, -0.43, 0.5, 1.43) infinite,\n      ${s} ${(props) => props.duration / 2}s ease-in-out infinite alternate;\n  }\n`;\n\nconst sizeToPx = {\n  xs: '16px',\n  s: '24px',\n  m: '32px',\n  l: '48px',\n  xl: '56px',\n  xxl: '64px',\n};\n\nconst sizeToWeight = {\n  xs: '10%',\n  s: '9%',\n  m: '8%',\n  l: '6%',\n  xl: '5%',\n  xxl: '4%',\n};\n\nconst colorToHex = {\n  light: '#FFFFFF',\n  dark: '#0F364A',\n};\n\nconst sizeToTextSize = {\n  xs: '12px',\n  s: '12px',\n  m: '12px',\n  l: '13px',\n  xl: '14px',\n  xxl: '16px',\n};\n\nexport const DSCircularIndeterminateIndicator: React.ComponentType<DSCircularIndeterminateIndicatorT.Props> = ({\n  size = 'm',\n  color = 'dark',\n  text = '',\n  showText = true,\n  withTooltip = false,\n  tooltipStartPlacementPreference = 'bottom',\n  __duration = 1.5,\n}) => {\n  const Wrapper = withTooltip ? DSTooltipV3 : ({ children }: PropsWithChildren<unknown>) => <>{children}</>;\n\n  const linearGradientUid = uid(16);\n  const maskUid = uid(16);\n  const circleUid = uid(16);\n\n  return (\n    <Grid gutter=\"xs\" justifyContent=\"center\" role=\"status\">\n      <Wrapper text={text} textAlign=\"center\" startPlacementPreference={tooltipStartPlacementPreference}>\n        <StyledSvg\n          viewBox=\"-1950 -975 3900 1950\"\n          fill=\"none\"\n          stroke=\"transparent\"\n          strokeWidth={sizeToWeight[size]}\n          width={sizeToPx[size]}\n          height={sizeToPx[size]}\n          style={{ display: 'block', margin: 'auto' }}\n          linearGradientUid={linearGradientUid}\n          maskUid={maskUid}\n          duration={__duration}\n        >\n          <g transform=\"scale(2.298)\">\n            <linearGradient id={linearGradientUid}>\n              <stop stopColor={color === 'dark' ? '#48a3ff' : '#ccd6ff'}></stop>\n              <stop stopColor={color === 'dark' ? '#49d0ff' : '#ebf6ff'} offset=\"1\"></stop>\n            </linearGradient>\n            <mask id={maskUid}>\n              <circle r=\"1200\" fill=\"#000\"></circle>\n              <use xlinkHref={`#${circleUid}`}></use>\n            </mask>\n            <circle id={circleUid} r=\"600\"></circle>\n            <g id=\"gg\">\n              <use xlinkHref={`#${circleUid}`}></use>\n            </g>\n          </g>\n        </StyledSvg>\n        {text !== '' && showText && (\n          <span style={{ color: colorToHex[color], fontSize: sizeToTextSize[size] }}>{text}</span>\n        )}\n      </Wrapper>\n    </Grid>\n  );\n};\n\nDSCircularIndeterminateIndicator.propTypes = CircularIndeterminateIndicatorPropTypes as WeakValidationMap<unknown>;\n\nexport const DSCircularIndeterminateIndicatorWithSchema = describe(DSCircularIndeterminateIndicator);\nDSCircularIndeterminateIndicatorWithSchema.propTypes = CircularIndeterminateIndicatorPropTypes;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,MAAM,IAAI;AACV,MAAM,IAAI;AAEV,MAAM,YAAY,OAAO;AAAA;AAAA;AAAA,mBAGN,CAAC,UAAU,MAAM;AAAA,iBACnB,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAMjB,KAAK,CAAC,UAAU,MAAM;AAAA,QAC/B,KAAK,CAAC,UAAU,MAAM,WAAW;AAAA;AAAA;AAIzC,MAAM,WAAW;AAAA,EACf,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,eAAe;AAAA,EACnB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGP,MAAM,aAAa;AAAA,EACjB,OAAO;AAAA,EACP,MAAM;AAAA;AAGR,MAAM,iBAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,IAAI;AAAA,EACJ,KAAK;AAAA;AAGA,MAAM,mCAAiG,CAAC;AAAA,EAC7G,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,kCAAkC;AAAA,EAClC,aAAa;AAAA,MACT;AACJ,QAAM,UAAU,cAAc,cAAc,CAAC,EAAE,eAA2C,4DAAG;AAE7F,QAAM,oBAAoB,IAAI;AAC9B,QAAM,UAAU,IAAI;AACpB,QAAM,YAAY,IAAI;AAEtB,SACE,qCAAC,MAAD;AAAA,IAAM,QAAO;AAAA,IAAK,gBAAe;AAAA,IAAS,MAAK;AAAA,KAC7C,qCAAC,SAAD;AAAA,IAAS;AAAA,IAAY,WAAU;AAAA,IAAS,0BAA0B;AAAA,KAChE,qCAAC,WAAD;AAAA,IACE,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAa,aAAa;AAAA,IAC1B,OAAO,SAAS;AAAA,IAChB,QAAQ,SAAS;AAAA,IACjB,OAAO,EAAE,SAAS,SAAS,QAAQ;AAAA,IACnC;AAAA,IACA;AAAA,IACA,UAAU;AAAA,KAEV,qCAAC,KAAD;AAAA,IAAG,WAAU;AAAA,KACX,qCAAC,kBAAD;AAAA,IAAgB,IAAI;AAAA,KAClB,qCAAC,QAAD;AAAA,IAAM,WAAW,UAAU,SAAS,YAAY;AAAA,MAChD,qCAAC,QAAD;AAAA,IAAM,WAAW,UAAU,SAAS,YAAY;AAAA,IAAW,QAAO;AAAA,OAEpE,qCAAC,QAAD;AAAA,IAAM,IAAI;AAAA,KACR,qCAAC,UAAD;AAAA,IAAQ,GAAE;AAAA,IAAO,MAAK;AAAA,MACtB,qCAAC,OAAD;AAAA,IAAK,WAAW,IAAI;AAAA,OAEtB,qCAAC,UAAD;AAAA,IAAQ,IAAI;AAAA,IAAW,GAAE;AAAA,MACzB,qCAAC,KAAD;AAAA,IAAG,IAAG;AAAA,KACJ,qCAAC,OAAD;AAAA,IAAK,WAAW,IAAI;AAAA,SAIzB,SAAS,MAAM,YACd,qCAAC,QAAD;AAAA,IAAM,OAAO,EAAE,OAAO,WAAW,QAAQ,UAAU,eAAe;AAAA,KAAU;AAAA;AAOtF,iCAAiC,YAAY;AAEtC,MAAM,6CAA6C,SAAS;AACnE,2CAA2C,YAAY;",
+  "names": []
+}

package/dist/esm/v2/index.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+} from "./DSCircularIndeterminateIndicator";
+export {
+  DSCircularIndeterminateIndicator,
+  DSCircularIndeterminateIndicatorWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/v2/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export {\n  DSCircularIndeterminateIndicator,\n  DSCircularIndeterminateIndicatorWithSchema,\n} from './DSCircularIndeterminateIndicator';\n"],
+  "mappings": "AAAA;ACAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/v2/react-desc-prop-types.js

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { PropTypes } from "react-desc";
+const CircularIndeterminateIndicatorPropTypes = {
+  size: PropTypes.oneOf(["xs", "s", "m", "l", "xl", "xxl"]).description("Size of the indicator").defaultValue("m"),
+  color: PropTypes.oneOf(["light", "dark"]).description("Color mode for the indicator").defaultValue("dark"),
+  text: PropTypes.string.description("Optional text to show under the indicator").defaultValue(""),
+  showText: PropTypes.bool.description("Whether to show the optional text or not").defaultValue(true),
+  withTooltip: PropTypes.bool.description("Whether to include a tooltip that shows the optional text on hover").defaultValue(false),
+  tooltipStartPlacementPreference: PropTypes.oneOf([
+    "top-start",
+    "top",
+    "top-end",
+    "right-start",
+    "right",
+    "right-end",
+    "bottom-end",
+    "bottom",
+    "bottom-start",
+    "left-end",
+    "left",
+    "left-start"
+  ]).description("start placement preference for the tooltip").defaultValue("center")
+};
+export {
+  CircularIndeterminateIndicatorPropTypes
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/v2/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/v2/react-desc-prop-types.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { PropTypes } from 'react-desc';\n\nexport declare namespace DSCircularIndeterminateIndicatorT {\n  interface Props {\n    size?: 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl';\n    color?: 'light' | 'dark';\n    text?: string;\n    showText?: boolean;\n    withTooltip: boolean;\n    tooltipStartPlacementPreference?:\n      | 'top-start'\n      | 'top'\n      | 'top-end'\n      | 'right-start'\n      | 'right'\n      | 'right-end'\n      | 'bottom-end'\n      | 'bottom'\n      | 'bottom-start'\n      | 'left-end'\n      | 'left'\n      | 'left-start';\n    __duration: number;\n  }\n}\n\nexport const CircularIndeterminateIndicatorPropTypes = {\n  size: PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl', 'xxl']).description('Size of the indicator').defaultValue('m'),\n  color: PropTypes.oneOf(['light', 'dark']).description('Color mode for the indicator').defaultValue('dark'),\n  text: PropTypes.string.description('Optional text to show under the indicator').defaultValue(''),\n  showText: PropTypes.bool.description('Whether to show the optional text or not').defaultValue(true),\n  withTooltip: PropTypes.bool\n    .description('Whether to include a tooltip that shows the optional text on hover')\n    .defaultValue(false),\n  tooltipStartPlacementPreference: PropTypes.oneOf([\n    'top-start',\n    'top',\n    'top-end',\n    'right-start',\n    'right',\n    'right-end',\n    'bottom-end',\n    'bottom',\n    'bottom-start',\n    'left-end',\n    'left',\n    'left-start',\n  ])\n    .description('start placement preference for the tooltip')\n    .defaultValue('center'),\n};\n"],
+  "mappings": "AAAA;ACCA;AA0BO,MAAM,0CAA0C;AAAA,EACrD,MAAM,UAAU,MAAM,CAAC,MAAM,KAAK,KAAK,KAAK,MAAM,QAAQ,YAAY,yBAAyB,aAAa;AAAA,EAC5G,OAAO,UAAU,MAAM,CAAC,SAAS,SAAS,YAAY,gCAAgC,aAAa;AAAA,EACnG,MAAM,UAAU,OAAO,YAAY,6CAA6C,aAAa;AAAA,EAC7F,UAAU,UAAU,KAAK,YAAY,4CAA4C,aAAa;AAAA,EAC9F,aAAa,UAAU,KACpB,YAAY,sEACZ,aAAa;AAAA,EAChB,iCAAiC,UAAU,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,KAEC,YAAY,8CACZ,aAAa;AAAA;",
+  "names": []
+}

package/{types → dist/types}/index.d.ts

@@ -1,2 +1,2 @@
 export { default, default as DSCircularProgressIndicator, CircularProgressIndicatorWithSchema, } from './DSCircularProgressIndicator';
-export * from './v2';
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema } from './v2';

package/dist/types/v2/index.d.ts

@@ -0,0 +1 @@
+export { DSCircularIndeterminateIndicator, DSCircularIndeterminateIndicatorWithSchema, } from './DSCircularIndeterminateIndicator';

package/package.json

@@ -1,31 +1,34 @@
 {
   "name": "@elliemae/ds-circular-progress-indicator",
-  "version": "2.2.2-rc.1",
+  "version": "2.3.0-alpha.10",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Circular progress indicator",
-  "module": "./esm/index.js",
-  "main": "./cjs/index.js",
-  "types": "./types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
     ".": {
-      "import": "./esm/index.js",
-      "require": "./cjs/index.js"
+      "import": "./dist/esm/index.js",
+      "require": "./dist/cjs/index.js"
     },
     "./v2/react-desc-prop-types": {
-      "import": "./esm/v2/react-desc-prop-types.js",
-      "require": "./cjs/v2/react-desc-prop-types.js"
+      "import": "./dist/esm/v2/react-desc-prop-types.js",
+      "require": "./dist/cjs/v2/react-desc-prop-types.js"
     },
     "./v2": {
-      "import": "./esm/v2/index.js",
-      "require": "./cjs/v2/index.js"
+      "import": "./dist/esm/v2/index.js",
+      "require": "./dist/cjs/v2/index.js"
     },
     "./v2/DSCircularIndeterminateIndicator": {
-      "import": "./esm/v2/DSCircularIndeterminateIndicator.js",
-      "require": "./cjs/v2/DSCircularIndeterminateIndicator.js"
+      "import": "./dist/esm/v2/DSCircularIndeterminateIndicator.js",
+      "require": "./dist/cjs/v2/DSCircularIndeterminateIndicator.js"
     },
     "./DSCircularProgressIndicator": {
-      "import": "./esm/DSCircularProgressIndicator.js",
-      "require": "./cjs/DSCircularProgressIndicator.js"
+      "import": "./dist/esm/DSCircularProgressIndicator.js",
+      "require": "./dist/cjs/DSCircularProgressIndicator.js"
     }
   },
   "sideEffects": [
@@ -37,23 +40,17 @@
     "url": "https://git.elliemae.io/platform-ui/dimsum.git"
   },
   "engines": {
-    "npm": ">=7",
-    "node": ">=14"
+    "pnpm": ">=6",
+    "node": ">=16"
   },
   "author": "ICE MT",
-  "scripts": {
-    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
-    "prebuild": "exit 0",
-    "predev": "exit 0",
-    "build": "node ../../scripts/build/build.js"
-  },
   "dependencies": {
-    "@elliemae/ds-classnames": "2.2.2-rc.1",
-    "@elliemae/ds-tooltip": "2.2.2-rc.1",
+    "@elliemae/ds-classnames": "2.3.0-alpha.10",
+    "@elliemae/ds-tooltip": "2.3.0-alpha.10",
     "react-desc": "~4.1.3"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "~5.15.0",
+    "@testing-library/jest-dom": "~5.15.1",
     "@testing-library/react": "~12.1.2"
   },
   "peerDependencies": {
@@ -62,7 +59,12 @@
   },
   "publishConfig": {
     "access": "public",
-    "directory": "dist",
-    "generateSubmodules": true
+    "typeSafety": false
+  },
+  "scripts": {
+    "dev": "cross-env NODE_ENV=development && node ../../scripts/build/build.js -w",
+    "prebuild": "exit 0",
+    "predev": "exit 0",
+    "build": "node ../../scripts/build/build.js"
   }
 }