@cdx-ui/components 0.3.5 → 0.3.6

package/lib/module/components/PieChart/index.js

@@ -0,0 +1,471 @@
+"use strict";
+
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { Platform, Pressable, Text, View } from 'react-native';
+import Animated, { useAnimatedProps } from 'react-native-reanimated';
+import { Path, Svg } from 'react-native-svg';
+import { dataAttributes, mergeDataAttributes } from '@cdx-ui/primitives';
+import { cn, useControllableState } from '@cdx-ui/utils';
+import { ChartTooltipLayer } from '../chart/ChartInspector';
+import { formatChartPercent, resolveChartLocaleText, resolveValueFormatter } from '../chart/format';
+import { resolveChartBox } from '../chart/size';
+import { ChartLinearFills, chartFillUrl, resolveChartColor, useChartColorPaints, useChartGradientId, useChartPalette } from '../chart/palette';
+import { lerpVector, useChartMorph, useChartMotionEnabled } from '../chart/motion';
+import { layoutPieSlices, pieRadii, resolveInnerRadiusRatio, slicePath } from './geometry';
+import { pieChartCanvasVariants, pieChartCenterLabelVariants, pieChartLegendItemVariants, pieChartLegendLabelVariants, pieChartLegendMetaVariants, pieChartLegendShareVariants, pieChartLegendVariants, pieChartRootVariants } from './styles';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const INACTIVE_OPACITY = 0.4;
+const SLICE_HOVER_EXIT_DELAY_MS = 120;
+const ENTRY_ANGLES = [0, 0];
+const NO_SLICES = [];
+let hasWarnedPieChartSeries = false;
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+/** One slice. Same shape as MUI X `PieValueType`. */
+
+/**
+ * Turns a slice's 0–1 share of the visible total into text. `location` is `label` for the
+ * legend and `a11y` for screen reader labels and the summary.
+ */
+
+/** One ring of slices. Same shape as MUI X `PieSeriesType`; slices carry their own `color`. */
+
+/** The slice under the pointer or keyboard focus, falling back to the selected slice. */
+
+export const PieChart = /*#__PURE__*/forwardRef(({
+  series,
+  size = 'lg',
+  width,
+  height,
+  hideLegend = false,
+  legendLayout = 'wrap',
+  legendPlacement = 'bottom',
+  tooltip,
+  centerLabel,
+  selectedItem: selectedItemProp,
+  defaultSelectedItem,
+  onSelectedItemChange,
+  locale,
+  localeText,
+  animation,
+  accessibilityLabel,
+  className,
+  style,
+  ...props
+}, ref) => {
+  useEffect(() => {
+    if (__DEV__ && series.length > 1 && !hasWarnedPieChartSeries) {
+      hasWarnedPieChartSeries = true;
+      console.warn('[PieChart] Only the first series renders. Concentric rings are not supported yet.');
+    }
+  }, [series.length]);
+  const pieSeries = series.at(0);
+  const seriesId = pieSeries?.id ?? '';
+  const data = pieSeries?.data ?? NO_SLICES;
+  const cornerRadius = pieSeries?.cornerRadius ?? 0;
+  const paddingAngle = pieSeries?.paddingAngle ?? 0;
+  const text = resolveChartLocaleText(localeText);
+  const formatValue = resolveValueFormatter(pieSeries, undefined, locale);
+  const formatShare = pieSeries?.shareFormatter ?? (share => formatChartPercent(share, locale));
+  const context = (location, dataIndex) => ({
+    location,
+    seriesId,
+    dataIndex
+  });
+  const animated = useChartMotionEnabled(animation);
+  const palette = useChartPalette();
+  const paints = useChartColorPaints();
+  const gradientId = useChartGradientId('pie-fill');
+  const isSideLegend = legendPlacement === 'left' || legendPlacement === 'right';
+  const legendFirst = legendPlacement === 'top' || legendPlacement === 'left';
+  const legendMode = isSideLegend ? 'names' : legendLayout;
+  const box = resolveChartBox(size, width, height);
+  const dimension = Math.min(box.width, box.height);
+  const innerRadiusRatio = resolveInnerRadiusRatio(pieSeries?.innerRadius ?? 0, dimension);
+  const layout = useMemo(() => layoutPieSlices({
+    data: data.map(slice => ({
+      id: slice.id,
+      label: slice.label ?? slice.id,
+      value: slice.value
+    })),
+    size: dimension,
+    innerRadiusRatio,
+    paddingAngle,
+    cornerRadius
+  }), [data, dimension, innerRadiusRatio, paddingAngle, cornerRadius]);
+  const slices = layout.map((slice, visibleIndex) => ({
+    ...slice,
+    fill: resolveChartColor(data[slice.index]?.color, paints) ?? palette[visibleIndex % palette.length]
+  }));
+  const radii = pieRadii(dimension, innerRadiusRatio);
+  const summary = accessibilityLabel ?? text.pieChartSummary(slices.map(slice => ({
+    label: slice.label,
+    formattedValue: formatShare(slice.percentage, context('a11y', slice.index))
+  })));
+  const tooltipEnabled = (tooltip?.trigger ?? 'item') !== 'none';
+  const interactive = onSelectedItemChange !== undefined || selectedItemProp !== undefined || defaultSelectedItem !== undefined;
+  const hoverable = interactive || tooltipEnabled;
+  const sliceButtons = interactive && hideLegend;
+  const hidePlotFromAccessibility = !sliceButtons;
+  const [selectedItemState, setSelectedItem] = useControllableState({
+    prop: selectedItemProp,
+    defaultProp: defaultSelectedItem ?? null,
+    onChange: onSelectedItemChange
+  });
+  const selectedItem = selectedItemState ?? null;
+  const selectedIndex = selectedItem !== null && selectedItem.seriesId === seriesId ? selectedItem.dataIndex : null;
+  const toggleSelection = dataIndex => {
+    setSelectedItem(selectedIndex === dataIndex ? null : {
+      seriesId,
+      dataIndex
+    });
+  };
+  const [previewIndex, setPreviewIndex] = useState(null);
+  const highlightedIndex = previewIndex ?? selectedIndex;
+  const clearPreviewTimer = useRef(null);
+  useEffect(() => () => {
+    if (clearPreviewTimer.current) {
+      clearTimeout(clearPreviewTimer.current);
+    }
+  }, []);
+  const cancelPreviewClear = () => {
+    if (clearPreviewTimer.current) {
+      clearTimeout(clearPreviewTimer.current);
+      clearPreviewTimer.current = null;
+    }
+  };
+  const previewSlice = index => {
+    cancelPreviewClear();
+    setPreviewIndex(index);
+  };
+  const clearSlicePreview = () => {
+    clearPreviewTimer.current = setTimeout(() => {
+      clearPreviewTimer.current = null;
+      setPreviewIndex(null);
+    }, SLICE_HOVER_EXIT_DELAY_MS);
+  };
+  const pressSlice = index => {
+    if (interactive) {
+      toggleSelection(index);
+    }
+  };
+  const sliceButtonLabel = slice => `${slice.label}, ${formatShare(slice.percentage, context('a11y', slice.index))}`;
+  const releaseSlice = () => {
+    cancelPreviewClear();
+    setPreviewIndex(null);
+  };
+  const activeLayout = slices.find(slice => slice.index === highlightedIndex);
+  const activeSlice = activeLayout ? {
+    id: activeLayout.id,
+    dataIndex: activeLayout.index,
+    label: activeLayout.label,
+    value: activeLayout.value,
+    percentage: activeLayout.percentage
+  } : null;
+  const centerContent = typeof centerLabel === 'function' ? centerLabel(activeSlice) : centerLabel;
+  const tooltipSlice = tooltipEnabled ? slices.find(slice => slice.index === previewIndex) : undefined;
+  const tooltipContent = tooltipSlice ? {
+    title: tooltipSlice.label,
+    items: [{
+      seriesId,
+      label: pieSeries?.label ?? '',
+      color: tooltipSlice.fill,
+      formattedValue: formatValue(tooltipSlice.value, context('tooltip', tooltipSlice.index))
+    }]
+  } : undefined;
+  const tooltipAnchor = tooltipSlice ? anglePoint(radii, (radii.innerRadius + radii.outerRadius) / 2, (tooltipSlice.startAngle + tooltipSlice.endAngle) / 2) : undefined;
+  const chart = /*#__PURE__*/_jsxs(View, {
+    className: "relative shrink-0",
+    style: {
+      width: dimension,
+      height: dimension
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      collapsable: false,
+      className: width === undefined && height === undefined ? pieChartCanvasVariants({
+        size
+      }) : 'relative shrink-0 items-center justify-center overflow-hidden web:outline-none',
+      style: {
+        width: dimension,
+        height: dimension,
+        overflow: 'hidden'
+      },
+      accessible: !sliceButtons,
+      accessibilityRole: !sliceButtons ? 'image' : undefined,
+      accessibilityLabel: !sliceButtons ? summary : undefined,
+      focusable: false,
+      tabIndex: -1,
+      ...(Platform.OS === 'web' ? {
+        onMouseDown: event => {
+          event.preventDefault?.();
+        }
+      } : {}),
+      ...dataAttributes({
+        slot: 'pie-chart-plot'
+      }),
+      children: [/*#__PURE__*/_jsxs(Svg, {
+        width: dimension,
+        height: dimension,
+        viewBox: `0 0 ${String(dimension)} ${String(dimension)}`,
+        focusable: false,
+        tabIndex: -1,
+        className: "web:outline-none",
+        pointerEvents: hoverable ? 'auto' : 'none',
+        accessible: false,
+        accessibilityElementsHidden: hidePlotFromAccessibility,
+        importantForAccessibility: hidePlotFromAccessibility ? 'no-hide-descendants' : 'no',
+        children: [/*#__PURE__*/_jsx(ChartLinearFills, {
+          idPrefix: gradientId,
+          colors: slices.map(slice => slice.fill),
+          x2: "100%",
+          y2: "100%"
+        }), slices.map((slice, visibleIndex) => {
+          const dimmed = interactive && activeLayout !== undefined && activeLayout.index !== slice.index;
+          return /*#__PURE__*/_jsx(AnimatedSlice, {
+            startAngle: slice.startAngle,
+            endAngle: slice.endAngle,
+            animated: animated,
+            radii: radii,
+            cornerRadius: cornerRadius,
+            fill: chartFillUrl(gradientId, visibleIndex),
+            opacity: dimmed ? INACTIVE_OPACITY : 1,
+            accessible: false,
+            ...(hoverable ? {
+              onPress: () => {
+                pressSlice(slice.index);
+              },
+              onMouseEnter: () => {
+                previewSlice(slice.index);
+              },
+              onMouseLeave: clearSlicePreview,
+              // Touch has no hover: the finger previews the slice until it lifts.
+              ...(Platform.OS !== 'web' ? {
+                onPressIn: () => {
+                  previewSlice(slice.index);
+                },
+                onPressOut: releaseSlice
+              } : {}),
+              ...(interactive ? {
+                cursor: 'pointer'
+              } : {})
+            } : {}),
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            ...(sliceButtons ? {
+              accessibilityLabel: sliceButtonLabel(slice)
+            } : {})
+          }, slice.id);
+        })]
+      }), sliceButtons ? slices.map(slice => {
+        const mid = anglePoint(radii, (radii.innerRadius + radii.outerRadius) / 2, (slice.startAngle + slice.endAngle) / 2);
+        const target = 24;
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: sliceButtonLabel(slice),
+          accessibilityState: {
+            selected: selectedIndex === slice.index
+          },
+          "aria-pressed": Platform.OS === 'web' ? selectedIndex === slice.index : undefined,
+          focusable: true,
+          tabIndex: 0,
+          className: "absolute",
+          style: {
+            left: mid.x - target / 2,
+            top: mid.y - target / 2,
+            width: target,
+            height: target
+          }
+          // Pointer hits stay on the wedge. This host is the keyboard and
+          // screen-reader target, because an SVG path does not activate on Enter or Space.
+          ,
+          pointerEvents: "none",
+          onPress: () => {
+            pressSlice(slice.index);
+          },
+          onFocus: () => {
+            previewSlice(slice.index);
+          },
+          onBlur: clearSlicePreview,
+          ...dataAttributes({
+            slot: 'pie-chart-slice'
+          })
+        }, slice.id);
+      }) : null, centerContent ? /*#__PURE__*/_jsx(View, {
+        className: "pointer-events-none absolute inset-0 items-center justify-center px-6",
+        accessible: false,
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no-hide-descendants",
+        ...dataAttributes({
+          slot: 'pie-chart-center'
+        }),
+        children: typeof centerContent === 'string' ? /*#__PURE__*/_jsx(Text, {
+          className: pieChartCenterLabelVariants(),
+          children: centerContent
+        }) : centerContent
+      }) : null]
+    }), tooltipContent !== undefined && tooltipAnchor !== undefined ? /*#__PURE__*/_jsx(ChartTooltipLayer, {
+      content: tooltipContent,
+      noValueText: text.noValue,
+      slot: "pie-chart",
+      anchorX: tooltipAnchor.x,
+      anchorY: tooltipAnchor.y,
+      width: dimension,
+      height: dimension
+    }) : null]
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    className: cn(pieChartRootVariants({
+      placement: legendPlacement
+    }), className),
+    style: style,
+    accessible: false,
+    ...props,
+    ...mergeDataAttributes(props, dataAttributes({
+      slot: 'pie-chart'
+    })),
+    children: [legendFirst ? null : chart, hideLegend ? null : /*#__PURE__*/_jsx(View, {
+      className: pieChartLegendVariants({
+        layout: legendMode
+      }),
+      ...dataAttributes({
+        slot: 'pie-chart-legend'
+      }),
+      children: slices.map((slice, visibleIndex) => {
+        const isSelected = selectedIndex === slice.index;
+        const isList = legendMode === 'list';
+        const share = formatShare(slice.percentage, context('label', slice.index));
+        const valueText = formatValue(slice.value, context('label', slice.index));
+        const a11yShare = formatShare(slice.percentage, context('a11y', slice.index));
+        const itemLabel = isList ? `${slice.label}, ${formatValue(slice.value, context('a11y', slice.index))}, ${a11yShare}` : `${slice.label}, ${a11yShare}`;
+        const swatch = /*#__PURE__*/_jsx(View, {
+          className: "size-2.5 rounded-full",
+          style: {
+            backgroundColor: slice.fill
+          }
+        });
+        const labelClass = pieChartLegendLabelVariants({
+          selected: isSelected,
+          layout: legendMode
+        });
+        const body = isList ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [swatch, /*#__PURE__*/_jsx(Text, {
+            className: labelClass,
+            numberOfLines: 1,
+            children: slice.label
+          }), /*#__PURE__*/_jsxs(View, {
+            className: "flex-row items-center gap-3",
+            children: [/*#__PURE__*/_jsx(Text, {
+              className: pieChartLegendMetaVariants(),
+              children: valueText
+            }), /*#__PURE__*/_jsx(Text, {
+              className: pieChartLegendShareVariants(),
+              children: share
+            })]
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [swatch, /*#__PURE__*/_jsx(Text, {
+            className: labelClass,
+            numberOfLines: 1,
+            children: legendMode === 'names' ? slice.label : `${slice.label} ${share}`
+          })]
+        });
+        if (!interactive) {
+          return /*#__PURE__*/_jsx(View, {
+            className: pieChartLegendItemVariants({
+              layout: legendMode,
+              divided: isList && visibleIndex < slices.length - 1
+            }),
+            ...dataAttributes({
+              slot: 'pie-chart-legend-item'
+            }),
+            children: body
+          }, slice.id);
+        }
+        return /*#__PURE__*/_jsx(Pressable, {
+          accessibilityRole: "button",
+          accessibilityLabel: itemLabel,
+          accessibilityState: {
+            selected: isSelected
+          },
+          className: pieChartLegendItemVariants({
+            layout: legendMode,
+            divided: isList && visibleIndex < slices.length - 1,
+            interactive: true
+          }),
+          onPress: () => {
+            toggleSelection(slice.index);
+          },
+          onFocus: () => {
+            previewSlice(slice.index);
+          },
+          onBlur: () => {
+            setPreviewIndex(null);
+          },
+          onHoverIn: () => {
+            previewSlice(slice.index);
+          },
+          onHoverOut: () => {
+            setPreviewIndex(null);
+          },
+          ...dataAttributes({
+            slot: 'pie-chart-legend-item',
+            selected: isSelected
+          }),
+          children: body
+        }, slice.id);
+      })
+    }), legendFirst ? chart : null]
+  });
+});
+PieChart.displayName = 'PieChart';
+function anglePoint(radii, radius, angleFromTop) {
+  const radians = (angleFromTop - 90) * Math.PI / 180;
+  return {
+    x: radii.cx + radius * Math.cos(radians),
+    y: radii.cy + radius * Math.sin(radians)
+  };
+}
+
+/** Owns its tween, so a slice keyed by `id` animates from wherever it was last drawn. */
+function AnimatedSlice({
+  startAngle,
+  endAngle,
+  animated,
+  radii,
+  cornerRadius = 0,
+  ...pathProps
+}) {
+  const {
+    from,
+    to,
+    progress
+  } = useChartMorph([startAngle, endAngle], ENTRY_ANGLES, animated);
+  const {
+    cx,
+    cy,
+    outerRadius,
+    innerRadius
+  } = radii;
+  const animatedProps = useAnimatedProps(() => {
+    const angles = lerpVector(from.get(), to.get(), progress.get());
+    return {
+      d: slicePath({
+        cx,
+        cy,
+        outerRadius,
+        innerRadius,
+        startAngle: angles[0] ?? 0,
+        endAngle: angles[1] ?? 0,
+        cornerRadius
+      })
+    };
+  }, [from, to, progress, cx, cy, outerRadius, innerRadius, cornerRadius]);
+  return /*#__PURE__*/_jsx(AnimatedPath, {
+    animatedProps: animatedProps,
+    ...pathProps,
+    focusable: false,
+    tabIndex: -1
+  });
+}
+//# sourceMappingURL=index.js.map

package/lib/module/components/PieChart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","useEffect","useMemo","useRef","useState","Platform","Pressable","Text","View","Animated","useAnimatedProps","Path","Svg","dataAttributes","mergeDataAttributes","cn","useControllableState","ChartTooltipLayer","formatChartPercent","resolveChartLocaleText","resolveValueFormatter","resolveChartBox","ChartLinearFills","chartFillUrl","resolveChartColor","useChartColorPaints","useChartGradientId","useChartPalette","lerpVector","useChartMorph","useChartMotionEnabled","layoutPieSlices","pieRadii","resolveInnerRadiusRatio","slicePath","pieChartCanvasVariants","pieChartCenterLabelVariants","pieChartLegendItemVariants","pieChartLegendLabelVariants","pieChartLegendMetaVariants","pieChartLegendShareVariants","pieChartLegendVariants","pieChartRootVariants","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","INACTIVE_OPACITY","SLICE_HOVER_EXIT_DELAY_MS","ENTRY_ANGLES","NO_SLICES","hasWarnedPieChartSeries","AnimatedPath","createAnimatedComponent","PieChart","series","size","width","height","hideLegend","legendLayout","legendPlacement","tooltip","centerLabel","selectedItem","selectedItemProp","defaultSelectedItem","onSelectedItemChange","locale","localeText","animation","accessibilityLabel","className","style","props","ref","__DEV__","length","console","warn","pieSeries","at","seriesId","id","data","cornerRadius","paddingAngle","text","formatValue","undefined","formatShare","shareFormatter","share","context","location","dataIndex","animated","palette","paints","gradientId","isSideLegend","legendFirst","legendMode","box","dimension","Math","min","innerRadiusRatio","innerRadius","layout","map","slice","label","value","slices","visibleIndex","fill","index","color","radii","summary","pieChartSummary","formattedValue","percentage","tooltipEnabled","trigger","interactive","hoverable","sliceButtons","hidePlotFromAccessibility","selectedItemState","setSelectedItem","prop","defaultProp","onChange","selectedIndex","toggleSelection","previewIndex","setPreviewIndex","highlightedIndex","clearPreviewTimer","current","clearTimeout","cancelPreviewClear","previewSlice","clearSlicePreview","setTimeout","pressSlice","sliceButtonLabel","releaseSlice","activeLayout","find","activeSlice","centerContent","tooltipSlice","tooltipContent","title","items","tooltipAnchor","anglePoint","outerRadius","startAngle","endAngle","chart","children","collapsable","overflow","accessible","accessibilityRole","focusable","tabIndex","OS","onMouseDown","event","preventDefault","slot","viewBox","String","pointerEvents","accessibilityElementsHidden","importantForAccessibility","idPrefix","colors","x2","y2","dimmed","AnimatedSlice","opacity","onPress","onMouseEnter","onMouseLeave","onPressIn","onPressOut","cursor","mid","target","accessibilityState","selected","left","x","top","y","onFocus","onBlur","content","noValueText","noValue","anchorX","anchorY","placement","isSelected","isList","valueText","a11yShare","itemLabel","swatch","backgroundColor","labelClass","body","numberOfLines","divided","onHoverIn","onHoverOut","displayName","radius","angleFromTop","radians","PI","cx","cos","cy","sin","pathProps","from","to","progress","animatedProps","angles","get","d"],"sourceRoot":"../../../../src","sources":["components/PieChart/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/PieChart/styles.js

@@ -0,0 +1,84 @@
+"use strict";
+
+import { cva } from '@cdx-ui/utils';
+export const pieChartRootVariants = cva('w-full max-w-full gap-4', {
+  variants: {
+    placement: {
+      top: 'items-center',
+      bottom: 'items-center',
+      left: 'flex-row items-center justify-center',
+      right: 'flex-row items-center justify-center'
+    }
+  },
+  defaultVariants: {
+    placement: 'bottom'
+  }
+});
+export const pieChartCanvasVariants = cva('relative shrink-0 items-center justify-center overflow-hidden web:outline-none', {
+  variants: {
+    size: {
+      sm: 'size-40',
+      md: 'size-48',
+      lg: 'size-56',
+      xl: 'size-64'
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+export const pieChartLegendVariants = cva('max-w-full', {
+  variants: {
+    layout: {
+      wrap: 'flex-row flex-wrap items-center justify-center gap-x-4 gap-y-2',
+      list: 'w-full self-stretch',
+      names: 'min-w-0 shrink gap-2'
+    }
+  },
+  defaultVariants: {
+    layout: 'wrap'
+  }
+});
+export const pieChartLegendItemVariants = cva('flex-row items-center', {
+  variants: {
+    layout: {
+      wrap: 'gap-1.5',
+      list: 'w-full gap-2 py-2.5',
+      names: 'gap-1.5 py-0.5'
+    },
+    divided: {
+      true: 'border-b border-stroke-secondary',
+      false: ''
+    },
+    interactive: {
+      true: 'rounded-sm web:cursor-pointer web:outline-none web:focus-visible:ring-2 web:focus-visible:ring-[var(--color-stroke-ring)]',
+      false: ''
+    }
+  },
+  defaultVariants: {
+    layout: 'wrap',
+    divided: false,
+    interactive: false
+  }
+});
+export const pieChartLegendLabelVariants = cva('body-sm text-content-primary', {
+  variants: {
+    selected: {
+      true: 'font-medium text-content-primary',
+      false: ''
+    },
+    layout: {
+      wrap: '',
+      list: 'min-w-0 flex-1 font-normal text-content-primary',
+      names: 'font-normal text-content-primary'
+    }
+  },
+  defaultVariants: {
+    selected: false,
+    layout: 'wrap'
+  }
+});
+export const pieChartLegendMetaVariants = cva('body-sm font-normal text-content-primary');
+export const pieChartLegendShareVariants = cva('body-sm w-12 text-right text-content-primary');
+export const pieChartCenterLabelVariants = cva('body-md text-center font-medium text-content-primary');
+//# sourceMappingURL=styles.js.map

package/lib/module/components/PieChart/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","pieChartRootVariants","variants","placement","top","bottom","left","right","defaultVariants","pieChartCanvasVariants","size","sm","md","lg","xl","pieChartLegendVariants","layout","wrap","list","names","pieChartLegendItemVariants","divided","true","false","interactive","pieChartLegendLabelVariants","selected","pieChartLegendMetaVariants","pieChartLegendShareVariants","pieChartCenterLabelVariants"],"sourceRoot":"../../../../src","sources":["components/PieChart/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,eAAe;AAItD,OAAO,MAAMC,oBAAoB,GAAGD,GAAG,CAAC,yBAAyB,EAAE;EACjEE,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,GAAG,EAAE,cAAc;MACnBC,MAAM,EAAE,cAAc;MACtBC,IAAI,EAAE,sCAAsC;MAC5CC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,OAAO,MAAMM,sBAAsB,GAAGT,GAAG,CACvC,gFAAgF,EAChF;EACEE,QAAQ,EAAE;IACRQ,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE;IACN;EACF,CAAC;EACDN,eAAe,EAAE;IACfE,IAAI,EAAE;EACR;AACF,CACF,CAAC;AAID,OAAO,MAAMK,sBAAsB,GAAGf,GAAG,CAAC,YAAY,EAAE;EACtDE,QAAQ,EAAE;IACRc,MAAM,EAAE;MACNC,IAAI,EAAE,gEAAgE;MACtEC,IAAI,EAAE,qBAAqB;MAC3BC,KAAK,EAAE;IACT;EACF,CAAC;EACDX,eAAe,EAAE;IACfQ,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,OAAO,MAAMI,0BAA0B,GAAGpB,GAAG,CAAC,uBAAuB,EAAE;EACrEE,QAAQ,EAAE;IACRc,MAAM,EAAE;MACNC,IAAI,EAAE,SAAS;MACfC,IAAI,EAAE,qBAAqB;MAC3BC,KAAK,EAAE;IACT,CAAC;IACDE,OAAO,EAAE;MACPC,IAAI,EAAE,kCAAkC;MACxCC,KAAK,EAAE;IACT,CAAC;IACDC,WAAW,EAAE;MACXF,IAAI,EAAE,2HAA2H;MACjIC,KAAK,EAAE;IACT;EACF,CAAC;EACDf,eAAe,EAAE;IACfQ,MAAM,EAAE,MAAM;IACdK,OAAO,EAAE,KAAK;IACdG,WAAW,EAAE;EACf;AACF,CAAC,CAAC;AAEF,OAAO,MAAMC,2BAA2B,GAAGzB,GAAG,CAAC,8BAA8B,EAAE;EAC7EE,QAAQ,EAAE;IACRwB,QAAQ,EAAE;MACRJ,IAAI,EAAE,kCAAkC;MACxCC,KAAK,EAAE;IACT,CAAC;IACDP,MAAM,EAAE;MACNC,IAAI,EAAE,EAAE;MACRC,IAAI,EAAE,iDAAiD;MACvDC,KAAK,EAAE;IACT;EACF,CAAC;EACDX,eAAe,EAAE;IACfkB,QAAQ,EAAE,KAAK;IACfV,MAAM,EAAE;EACV;AACF,CAAC,CAAC;AAEF,OAAO,MAAMW,0BAA0B,GAAG3B,GAAG,CAAC,0CAA0C,CAAC;AAEzF,OAAO,MAAM4B,2BAA2B,GAAG5B,GAAG,CAAC,8CAA8C,CAAC;AAE9F,OAAO,MAAM6B,2BAA2B,GAAG7B,GAAG,CAC5C,sDACF,CAAC","ignoreList":[]}

package/lib/module/components/ProgressCircle/ProgressCircleRing.js

@@ -3,12 +3,12 @@
 import { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, { Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
-import { Circle, Svg } from 'react-native-svg';
 import { useProgressContext } from '@cdx-ui/primitives';
+import { ProgressRing } from './ProgressRing';
 import { PROGRESS_CIRCLE_DIMENSIONS } from './styles';
 import { useProgressCircleColors } from './useProgressCircleColors';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const INDETERMINATE_ARC_RATIO = 0.25;
+import { jsx as _jsx } from "react/jsx-runtime";
+const INDETERMINATE_ARC_PERCENT = 25;
 const ROTATION_DURATION_MS = 1000;
 export function ProgressCircleRing({
   size = 'large',
@@ -24,9 +24,6 @@ export function ProgressCircleRing({
     size: dimension,
     strokeWidth
   } = PROGRESS_CIRCLE_DIMENSIONS[size];
-  const radius = (dimension - strokeWidth) / 2;
-  const center = dimension / 2;
-  const circumference = 2 * Math.PI * radius;
   const isIndeterminate = state === 'indeterminate';
   useEffect(() => {
     if (!isIndeterminate) {
@@ -43,32 +40,13 @@ export function ProgressCircleRing({
       rotate: `${String(rotation.get())}deg`
     }]
   }), [rotation]);
-  const progressLength = isIndeterminate ? circumference * INDETERMINATE_ARC_RATIO : circumference * percent / 100;
-  const gapLength = circumference - progressLength;
-  const ring = /*#__PURE__*/_jsxs(Svg, {
-    width: dimension,
-    height: dimension,
-    viewBox: `0 0 ${String(dimension)} ${String(dimension)}`,
-    children: [/*#__PURE__*/_jsx(Circle, {
-      cx: center,
-      cy: center,
-      r: radius,
-      stroke: ringColors.track,
-      strokeWidth: strokeWidth,
-      fill: "none",
-      opacity: ringColors.trackOpacity
-    }), progressLength > 0 ? /*#__PURE__*/_jsx(Circle, {
-      cx: center,
-      cy: center,
-      r: radius,
-      stroke: ringColors.indicator,
-      strokeWidth: strokeWidth,
-      fill: "none",
-      strokeDasharray: `${String(progressLength)} ${String(gapLength)}`,
-      strokeLinecap: "round",
-      rotation: -90,
-      origin: `${String(center)}, ${String(center)}`
-    }) : null]
+  const ring = /*#__PURE__*/_jsx(ProgressRing, {
+    size: dimension,
+    strokeWidth: strokeWidth,
+    value: isIndeterminate ? INDETERMINATE_ARC_PERCENT : percent,
+    trackColor: ringColors.track,
+    indicatorColor: ringColors.indicator,
+    trackOpacity: ringColors.trackOpacity
   });
   if (isIndeterminate) {
     const inheritClass = color === 'inherit' ? 'text-inherit' : undefined;