@helpwave/hightide/dist/components/loading-states/ProgressIndicator.mjs.map

helpwave's component and theming library

{"version":3,"sources":["../../../src/components/loading-states/ProgressIndicator.tsx"],"sourcesContent":["export type ProgressIndicatorProps = {\n  /*\n    The amount of progress that has been made\n    Value form 0 to 1\n   */\n  progress: number,\n  strokeWidth?: number,\n  size?: keyof typeof sizeMapping,\n  direction?: 'clockwise' | 'counterclockwise',\n  /*\n    Rotation of the starting point of the indicator\n    default start at 3 o'clock\n    Given in degree\n   */\n  rotation?: number,\n}\n\nconst sizeMapping = { small: 16, medium: 24, big: 48 }\n\n/**\n * A progress indicator\n *\n * Start rotation is 3 o'clock and fills counterclockwise\n *\n * Progress is given from 0 to 1\n */\nexport const ProgressIndicator = ({\n                                    progress,\n                                    strokeWidth = 5,\n                                    size = 'medium',\n                                    direction = 'counterclockwise',\n                                    rotation = 0\n                                  }: ProgressIndicatorProps) => {\n  const currentSize = sizeMapping[size]\n  const center = currentSize / 2\n  const radius = center - strokeWidth / 2\n  const arcLength = 2 * Math.PI * radius\n  const arcOffset = arcLength * progress\n  if (direction === 'clockwise') {\n    rotation += 360 * progress\n  }\n  return (\n    <svg\n      style={{\n        height: `${currentSize}px`,\n        width: `${currentSize}px`,\n        transform: `rotate(${rotation}deg)`\n      }}\n    >\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              className=\"stroke-progress-indicator-fill\"\n      />\n      <circle cx={center} cy={center} r={radius} fill=\"transparent\" strokeWidth={strokeWidth}\n              strokeDasharray={arcLength} strokeDashoffset={arcOffset} className=\"stroke-progress-indicator-background\"\n      />\n    </svg>\n  )\n}\n"],"mappings":";AA0CI,SAOE,KAPF;AAzBJ,IAAM,cAAc,EAAE,OAAO,IAAI,QAAQ,IAAI,KAAK,GAAG;AAS9C,IAAM,oBAAoB,CAAC;AAAA,EACE;AAAA,EACA,cAAc;AAAA,EACd,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb,MAA8B;AAC9D,QAAM,cAAc,YAAY,IAAI;AACpC,QAAM,SAAS,cAAc;AAC7B,QAAM,SAAS,SAAS,cAAc;AACtC,QAAM,YAAY,IAAI,KAAK,KAAK;AAChC,QAAM,YAAY,YAAY;AAC9B,MAAI,cAAc,aAAa;AAC7B,gBAAY,MAAM;AAAA,EACpB;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,QACL,QAAQ,GAAG,WAAW;AAAA,QACtB,OAAO,GAAG,WAAW;AAAA,QACrB,WAAW,UAAU,QAAQ;AAAA,MAC/B;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,WAAU;AAAA;AAAA,QAClB;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YAAO,IAAI;AAAA,YAAQ,IAAI;AAAA,YAAQ,GAAG;AAAA,YAAQ,MAAK;AAAA,YAAc;AAAA,YACtD,iBAAiB;AAAA,YAAW,kBAAkB;AAAA,YAAW,WAAU;AAAA;AAAA,QAC3E;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}