@cdx-ui/components 0.3.4 → 0.3.6

package/src/components/PieChart/index.tsx

@@ -0,0 +1,715 @@
+import { forwardRef, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { Platform, Pressable, Text, View, type ViewProps } 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 type { AnimationRootDisableAll } from '../../animation';
+import { ChartTooltipLayer } from '../chart/ChartInspector';
+import { formatChartPercent, resolveChartLocaleText, resolveValueFormatter } from '../chart/format';
+import { resolveChartBox } from '../chart/size';
+import type {
+  ChartLocaleText,
+  ChartSelectedItem,
+  ChartSeriesCommon,
+  ChartSizeProps,
+  ChartTooltipContent,
+  ChartTooltipProps,
+  ChartValueFormatterContext,
+  ChartValueLocation,
+} from '../chart/types';
+import {
+  ChartLinearFills,
+  chartFillUrl,
+  resolveChartColor,
+  useChartColorPaints,
+  useChartGradientId,
+  useChartPalette,
+  type ChartColor,
+} from '../chart/palette';
+import { lerpVector, useChartMorph, useChartMotionEnabled } from '../chart/motion';
+import {
+  layoutPieSlices,
+  pieRadii,
+  resolveInnerRadiusRatio,
+  slicePath,
+  type PieRadii,
+} from './geometry';
+import {
+  pieChartCanvasVariants,
+  pieChartCenterLabelVariants,
+  pieChartLegendItemVariants,
+  pieChartLegendLabelVariants,
+  pieChartLegendMetaVariants,
+  pieChartLegendShareVariants,
+  pieChartLegendVariants,
+  pieChartRootVariants,
+  type PieChartLegendLayout,
+  type PieChartLegendPlacement,
+} from './styles';
+
+const INACTIVE_OPACITY = 0.4;
+const SLICE_HOVER_EXIT_DELAY_MS = 120;
+const ENTRY_ANGLES: readonly number[] = [0, 0];
+const NO_SLICES: readonly PieChartValue[] = [];
+
+let hasWarnedPieChartSeries = false;
+
+const AnimatedPath = Animated.createAnimatedComponent(Path);
+
+export type * from '../chart';
+export type { PieChartLegendLayout, PieChartLegendPlacement };
+
+/** One slice. Same shape as MUI X `PieValueType`. */
+export interface PieChartValue {
+  /**
+   * Stable slice id. React keys and animation follow it, so a reordered slice moves to its new
+   * position instead of the slices morphing by index.
+   */
+  id: string;
+  /**
+   * Must be a positive finite number. Zero, negative, and `NaN` slices are skipped so they cannot
+   * break an arc; `dataIndex` still counts them.
+   */
+  value: number;
+  /** Legend, tooltip, and screen reader name. Defaults to `id`. */
+  label?: string;
+  /** Chart token for this slice. Defaults to the next `categorical-1`…`6` slot. */
+  color?: ChartColor;
+}
+
+/**
+ * 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.
+ */
+export type PieShareFormatter = (share: number, context: ChartValueFormatterContext) => string;
+
+/** One ring of slices. Same shape as MUI X `PieSeriesType`; slices carry their own `color`. */
+export interface PieChartSeries extends Omit<ChartSeriesCommon, 'color'> {
+  /** Series kind. Optional while `PieChart` only draws pies. */
+  type?: 'pie';
+  /** Slices, drawn clockwise from 12 o'clock in array order. */
+  data: readonly PieChartValue[];
+  /**
+   * Hole radius. A number is pixels; a string such as `'68%'` is a percent of the outer radius.
+   * `0` is a full pie. Clamped to 85% of the outer radius.
+   * @default 0
+   */
+  innerRadius?: number | `${number}%`;
+  /**
+   * Degrees between neighboring slices. Skipped on slices too thin to fit it.
+   * @default 0
+   */
+  paddingAngle?: number;
+  /**
+   * Rounds slice corners in pixels. Donuts round all four corners; pies round the outer edge.
+   * Clamped so thin slices stay valid.
+   * @default 0
+   */
+  cornerRadius?: number;
+  /**
+   * Formats the legend share column and the share in screen reader text. MUI X has no share
+   * column, so there is no MUI name. Defaults to a whole percent for `locale`.
+   */
+  shareFormatter?: PieShareFormatter;
+}
+
+/** The slice under the pointer or keyboard focus, falling back to the selected slice. */
+export interface PieChartActiveSlice {
+  /** The slice `id`. */
+  id: string;
+  /** Index into the series `data`, including slices that were skipped. */
+  dataIndex: number;
+  /** The slice `label`, or its `id` when it has none. */
+  label: string;
+  /** The raw slice `value`, unformatted. */
+  value: number;
+  /** Share of the visible total, from 0 to 1. */
+  percentage: number;
+}
+
+export interface PieChartProps extends ViewProps, ChartSizeProps {
+  /**
+   * Pie series. Only the first renders; more than one logs a development warning. The pie
+   * diameter is the shorter side of the `size` / `width` / `height` box.
+   */
+  series: readonly PieChartSeries[];
+  /**
+   * Hides the category legend. With the legend hidden, a selectable chart makes each slice a
+   * button; otherwise the plot is one image with a generated summary.
+   * @default false
+   */
+  hideLegend?: boolean;
+  /**
+   * How legend items are laid out when `legendPlacement` is `top` or `bottom`.
+   * `wrap` is centered chips (`Housing 46%`). `list` is full-width rows: name
+   * on the left, formatted value and share on the right, with a hairline between
+   * rows. Ignored when the legend is on the left or right.
+   * @default 'wrap'
+   */
+  legendLayout?: PieChartLegendLayout;
+  /**
+   * Where the legend sits relative to the plot, matching Drawer `placement`.
+   * `top` / `bottom` use `legendLayout`. `left` / `right` are swatch + name only
+   * (no amount, no percent).
+   * @default 'bottom'
+   */
+  legendPlacement?: PieChartLegendPlacement;
+  /**
+   * `item` shows the slice under the pointer or keyboard focus (on touch, the slice under the finger until it lifts).
+   * `axis` behaves like `item` because a pie has no axis. `none` hides the tooltip.
+   * @default { trigger: 'item' }
+   */
+  tooltip?: ChartTooltipProps;
+  /**
+   * Content in the donut hole. A string becomes styled `Text`. Pass a `View` for
+   * stacked copy such as “Total” over an amount.
+   * Pass a function to follow the active slice: it receives the hovered or focused
+   * slice, else the selected one, else `null` — return the total for `null`.
+   */
+  centerLabel?: ReactNode | ((slice: PieChartActiveSlice | null) => ReactNode);
+  /**
+   * Controlled selected slice: `{ seriesId, dataIndex }`, where `dataIndex` counts skipped
+   * slices. Pass `null` to clear the selection while staying controlled.
+   */
+  selectedItem?: ChartSelectedItem;
+  /** Initial selected slice when `selectedItem` is omitted. */
+  defaultSelectedItem?: ChartSelectedItem;
+  /**
+   * Called when a slice or legend row is pressed. Pressing the selected slice again reports
+   * `null`. Providing this, `selectedItem`, or `defaultSelectedItem` makes the chart selectable.
+   */
+  onSelectedItemChange?: (item: ChartSelectedItem) => void;
+  /**
+   * BCP 47 locale for default value and share formatting. Defaults to the `@cdx-ui/formatters`
+   * locale.
+   */
+  locale?: string;
+  /** Overrides for generated strings such as the screen reader summary. */
+  localeText?: Partial<ChartLocaleText>;
+  /**
+   * Slices sweep in clockwise on mount and tween to new shares when `data` changes. Pass
+   * `'disable-all'` to draw the final state. Reduce Motion and `GlobalAnimationSettingsProvider`
+   * `disable-all` also turn it off.
+   */
+  animation?: AnimationRootDisableAll;
+  /**
+   * Names the plot image. Defaults to `localeText.pieChartSummary` over labels and shares. Not
+   * applied when `hideLegend` on a selectable chart makes each slice a button.
+   */
+  accessibilityLabel?: string;
+  /** Additional Uniwind/Tailwind classes, merged after the root's own styles. */
+  className?: string;
+}
+
+export const PieChart = forwardRef<View, PieChartProps>(
+  (
+    {
+      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: PieShareFormatter =
+      pieSeries?.shareFormatter ?? ((share) => formatChartPercent(share, locale));
+    const context = (location: ChartValueLocation, dataIndex: number) => ({
+      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<ChartSelectedItem>({
+      prop: selectedItemProp,
+      defaultProp: defaultSelectedItem ?? null,
+      onChange: onSelectedItemChange,
+    });
+    const selectedItem = selectedItemState ?? null;
+    const selectedIndex =
+      selectedItem !== null && selectedItem.seriesId === seriesId ? selectedItem.dataIndex : null;
+    const toggleSelection = (dataIndex: number) => {
+      setSelectedItem(selectedIndex === dataIndex ? null : { seriesId, dataIndex });
+    };
+    const [previewIndex, setPreviewIndex] = useState<number | null>(null);
+    const highlightedIndex = previewIndex ?? selectedIndex;
+    const clearPreviewTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+    useEffect(
+      () => () => {
+        if (clearPreviewTimer.current) {
+          clearTimeout(clearPreviewTimer.current);
+        }
+      },
+      [],
+    );
+    const cancelPreviewClear = () => {
+      if (clearPreviewTimer.current) {
+        clearTimeout(clearPreviewTimer.current);
+        clearPreviewTimer.current = null;
+      }
+    };
+    const previewSlice = (index: number) => {
+      cancelPreviewClear();
+      setPreviewIndex(index);
+    };
+    const clearSlicePreview = () => {
+      clearPreviewTimer.current = setTimeout(() => {
+        clearPreviewTimer.current = null;
+        setPreviewIndex(null);
+      }, SLICE_HOVER_EXIT_DELAY_MS);
+    };
+    const pressSlice = (index: number) => {
+      if (interactive) {
+        toggleSelection(index);
+      }
+    };
+    const sliceButtonLabel = (slice: { label: string; percentage: number; index: number }) =>
+      `${slice.label}, ${formatShare(slice.percentage, context('a11y', slice.index))}`;
+    const releaseSlice = () => {
+      cancelPreviewClear();
+      setPreviewIndex(null);
+    };
+    const activeLayout = slices.find((slice) => slice.index === highlightedIndex);
+    const activeSlice: PieChartActiveSlice | null = 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: ChartTooltipContent | undefined = 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 = (
+      <View className="relative shrink-0" style={{ width: dimension, height: dimension }}>
+        <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: { preventDefault?: () => void }) => {
+                  event.preventDefault?.();
+                },
+              }
+            : {})}
+          {...dataAttributes({ slot: 'pie-chart-plot' })}
+        >
+          <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'}
+          >
+            <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 (
+                <AnimatedSlice
+                  key={slice.id}
+                  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' as const } : {}),
+                      }
+                    : {})}
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  {...(sliceButtons ? { accessibilityLabel: sliceButtonLabel(slice) } : {})}
+                />
+              );
+            })}
+          </Svg>
+          {sliceButtons
+            ? slices.map((slice) => {
+                const mid = anglePoint(
+                  radii,
+                  (radii.innerRadius + radii.outerRadius) / 2,
+                  (slice.startAngle + slice.endAngle) / 2,
+                );
+                const target = 24;
+                return (
+                  <Pressable
+                    key={slice.id}
+                    accessibilityRole="button"
+                    accessibilityLabel={sliceButtonLabel(slice)}
+                    accessibilityState={{ selected: selectedIndex === slice.index }}
+                    aria-pressed={Platform.OS === 'web' ? selectedIndex === slice.index : undefined}
+                    focusable
+                    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' })}
+                  />
+                );
+              })
+            : null}
+          {centerContent ? (
+            <View
+              className="pointer-events-none absolute inset-0 items-center justify-center px-6"
+              accessible={false}
+              accessibilityElementsHidden
+              importantForAccessibility="no-hide-descendants"
+              {...dataAttributes({ slot: 'pie-chart-center' })}
+            >
+              {typeof centerContent === 'string' ? (
+                <Text className={pieChartCenterLabelVariants()}>{centerContent}</Text>
+              ) : (
+                centerContent
+              )}
+            </View>
+          ) : null}
+        </View>
+        {tooltipContent !== undefined && tooltipAnchor !== undefined ? (
+          <ChartTooltipLayer
+            content={tooltipContent}
+            noValueText={text.noValue}
+            slot="pie-chart"
+            anchorX={tooltipAnchor.x}
+            anchorY={tooltipAnchor.y}
+            width={dimension}
+            height={dimension}
+          />
+        ) : null}
+      </View>
+    );
+
+    return (
+      <View
+        ref={ref}
+        className={cn(pieChartRootVariants({ placement: legendPlacement }), className)}
+        style={style}
+        accessible={false}
+        {...props}
+        {...mergeDataAttributes(props, dataAttributes({ slot: 'pie-chart' }))}
+      >
+        {legendFirst ? null : chart}
+        {hideLegend ? null : (
+          <View
+            className={pieChartLegendVariants({ layout: legendMode })}
+            {...dataAttributes({ slot: 'pie-chart-legend' })}
+          >
+            {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 = (
+                <View className="size-2.5 rounded-full" style={{ backgroundColor: slice.fill }} />
+              );
+              const labelClass = pieChartLegendLabelVariants({
+                selected: isSelected,
+                layout: legendMode,
+              });
+              const body = isList ? (
+                <>
+                  {swatch}
+                  <Text className={labelClass} numberOfLines={1}>
+                    {slice.label}
+                  </Text>
+                  <View className="flex-row items-center gap-3">
+                    <Text className={pieChartLegendMetaVariants()}>{valueText}</Text>
+                    <Text className={pieChartLegendShareVariants()}>{share}</Text>
+                  </View>
+                </>
+              ) : (
+                <>
+                  {swatch}
+                  <Text className={labelClass} numberOfLines={1}>
+                    {legendMode === 'names' ? slice.label : `${slice.label} ${share}`}
+                  </Text>
+                </>
+              );
+
+              if (!interactive) {
+                return (
+                  <View
+                    key={slice.id}
+                    className={pieChartLegendItemVariants({
+                      layout: legendMode,
+                      divided: isList && visibleIndex < slices.length - 1,
+                    })}
+                    {...dataAttributes({ slot: 'pie-chart-legend-item' })}
+                  >
+                    {body}
+                  </View>
+                );
+              }
+
+              return (
+                <Pressable
+                  key={slice.id}
+                  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 })}
+                >
+                  {body}
+                </Pressable>
+              );
+            })}
+          </View>
+        )}
+        {legendFirst ? chart : null}
+      </View>
+    );
+  },
+);
+
+PieChart.displayName = 'PieChart';
+
+function anglePoint(
+  radii: PieRadii,
+  radius: number,
+  angleFromTop: number,
+): { x: number; y: number } {
+  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
+}: {
+  startAngle: number;
+  endAngle: number;
+  animated: boolean;
+  radii: PieRadii;
+  cornerRadius?: number;
+  fill: string;
+  opacity: number;
+  accessible?: boolean;
+  accessibilityRole?: 'button';
+  accessibilityLabel?: string;
+  accessibilityState?: { selected: boolean };
+  accessibilityElementsHidden?: boolean;
+  importantForAccessibility?: 'auto' | 'yes' | 'no' | 'no-hide-descendants';
+  onPress?: () => void;
+  onPressIn?: () => void;
+  onPressOut?: () => void;
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  cursor?: 'pointer';
+}) {
+  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 (
+    <AnimatedPath
+      animatedProps={animatedProps}
+      {...pathProps}
+      {...({ focusable: false, tabIndex: -1 } as object)}
+    />
+  );
+}