jfs-components 0.0.79 → 0.0.84

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import {
     View,
     Text,
@@ -7,12 +7,15 @@ import {
     type StyleProp,
     type ViewStyle,
     type TextStyle,
-    type LayoutChangeEvent,
 } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import Icon from '../../icons/Icon';
 
+/** Figma grid: label column 1.8fr, each plan column 1fr. */
+const LABEL_COLUMN_FR = 1.8;
+const PLAN_COLUMN_FR = 1;
+
 /**
  * A single plan column header (the label column has no header of its own).
  */
@@ -69,13 +72,6 @@ export type PlanComparisonCardProps = {
     columns?: PlanComparisonColumn[];
     /** Feature rows compared across the plan columns. */
     rows?: PlanComparisonRow[];
-    /**
-     * Minimum flex-grow on the label column when the table is given extra
-     * horizontal space. Plan columns always size to their content and never
-     * shrink below it.
-     * @default 0
-     */
-    labelColumnFlex?: number;
     /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
     modes?: Record<string, any>;
     /** Override the outer container style. */
@@ -93,92 +89,40 @@ const DEFAULT_ROWS: PlanComparisonRow[] = [
     { label: 'Bonus JioGold', showInfo: true, values: [false, '1%'] },
 ];
 
+/** Keeps every text layer on a single line. */
+const NO_WRAP_TEXT: TextStyle = {
+    flexShrink: 0,
+    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
+};
+
+const labelColumnStyle: ViewStyle = {
+    flex: LABEL_COLUMN_FR,
+    minWidth: 0,
+};
+
+const planColumnStyle: ViewStyle = {
+    flex: PLAN_COLUMN_FR,
+    minWidth: 0,
+    alignItems: 'center',
+};
+
 /**
  * PlanComparisonCard renders a compact comparison table that pits the user's
  * current plan against one or more alternative plans across a set of feature
  * rows. Implementation of Figma node `4498:2968` (`PlanComparisonCard`).
  *
- * The leading column holds feature labels (with an optional info icon); every
- * other column maps to a plan in `columns`. Each cell value can be plain text,
- * a "not available" cross (`false`), or any custom React node.
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
  *
  * @component
- * @example
- * ```tsx
- * <PlanComparisonCard
- *   columns={[{ label: 'Your plan' }, { label: 'JioFinance+', brand: true }]}
- *   rows={[
- *     { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
- *     { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
- *   ]}
- * />
- * ```
  */
-/** Keeps every text layer on a single line; columns grow to fit content. */
-const NO_WRAP_TEXT: TextStyle = {
-    flexShrink: 0,
-    ...(Platform.OS === 'web' ? { whiteSpace: 'nowrap' as const } : {}),
-};
-
 function PlanComparisonCard({
     columns = DEFAULT_COLUMNS,
     rows = DEFAULT_ROWS,
-    labelColumnFlex = 0,
     modes = EMPTY_MODES,
     style,
 }: PlanComparisonCardProps) {
-    /** Natural widths from header labels (plan columns only). */
-    const [headerWidths, setHeaderWidths] = useState<(number | undefined)[]>([]);
-    /** Natural widths from table body columns. */
-    const [bodyWidths, setBodyWidths] = useState<(number | undefined)[]>([]);
-
-    const setMeasuredWidth = useCallback(
-        (
-            setter: React.Dispatch<React.SetStateAction<(number | undefined)[]>>,
-            index: number,
-            width: number,
-        ) => {
-            setter((prev) => {
-                if (prev[index] === width) return prev;
-                const next = [...prev];
-                next[index] = width;
-                return next;
-            });
-        },
-        [],
-    );
-
-    const onHeaderColumnLayout = useCallback(
-        (index: number, event: LayoutChangeEvent) => {
-            setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
-        },
-        [setMeasuredWidth],
-    );
-
-    const onBodyColumnLayout = useCallback(
-        (index: number, event: LayoutChangeEvent) => {
-            setMeasuredWidth(setBodyWidths, index, event.nativeEvent.layout.width);
-        },
-        [setMeasuredWidth],
-    );
-
-    /**
-     * Shared width for header + body cells in a column (max of natural header
-     * label vs body content). No columnGap between columns — gaps would shift
-     * headers relative to the flush table grid below.
-     */
-    const columnWidthStyle = (index: number): ViewStyle => {
-        const width = Math.max(headerWidths[index] ?? 0, bodyWidths[index] ?? 0);
-        if (width > 0) {
-            return { width, minWidth: width, flexShrink: 0, flexGrow: 0 };
-        }
-        return { flexShrink: 0, flexGrow: 0 };
-    };
-
-    // Container
     const gap = (getVariableByName('planComparisonCard/gap', modes) as number) ?? 16;
 
-    // Header
     const headerFg = (getVariableByName('planComparisonCard/header/fg', modes) as string) ?? '#ffffff';
     const headerBrandFg = (getVariableByName('planComparisonCard/header/brand/fg', modes) as string) ?? '#cea15a';
     const headerFontSize = (getVariableByName('planComparisonCard/header/fontSize', modes) as number) ?? 14;
@@ -186,20 +130,17 @@ function PlanComparisonCard({
     const headerLineHeight = (getVariableByName('planComparisonCard/header/lineHeight', modes) as number) ?? 18;
     const headerFontWeight = (getVariableByName('planComparisonCard/header/fontWeight', modes) as number | string) ?? '500';
 
-    // Table
     const tableBackground = (getVariableByName('planComparisonCard/tableRow/background', modes) as string) ?? '#141414';
     const tableRadius = (getVariableByName('planComparisonCard/tableRow/radius', modes) as number) ?? 16;
     const tableBorderSize = (getVariableByName('planComparisonCard/tableRow/border/size', modes) as number) ?? 1;
     const tableBorderColor = (getVariableByName('planComparisonCard/tableRow/border/color', modes) as string) ?? '#1e1a14';
 
-    // Cell
     const cellPadding = (getVariableByName('planComparisonCard/tableCell/padding', modes) as number) ?? 12;
     const cellGap = (getVariableByName('planComparisonCard/tableCell/gap', modes) as number) ?? 2;
     const cellMinHeight = (getVariableByName('planComparisonCard/tableCell/height', modes) as number) ?? 46;
     const cellBorderSize = (getVariableByName('planComparisonCard/tableCell/border/size', modes) as number) ?? 1;
     const cellBorderColor = (getVariableByName('planComparisonCard/tableCell/border/color', modes) as string) ?? '#1e1a14';
 
-    // Cell label
     const labelColor = (getVariableByName('planComparisonCard/tableCell/label/color', modes) as string) ?? '#ffffff';
     const labelDisabledColor = (getVariableByName('planComparisonCard/tableCell/label/disabled/color', modes) as string) ?? '#91949c';
     const labelFontSize = (getVariableByName('planComparisonCard/tableCell/label/fontSize', modes) as number) ?? 12;
@@ -207,14 +148,12 @@ function PlanComparisonCard({
     const labelLineHeight = (getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) as number) ?? 16;
     const labelFontWeight = (getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) as number | string) ?? '400';
 
-    // Cell value
     const valueColor = (getVariableByName('planComparisonCard/tableCell/value/color', modes) as string) ?? '#ffffff';
     const valueFontSize = (getVariableByName('planComparisonCard/tableCell/value/fontSize', modes) as number) ?? 12;
     const valueFontFamily = (getVariableByName('planComparisonCard/tableCell/value/fontFamily', modes) as string) ?? 'JioType Var';
     const valueLineHeight = (getVariableByName('planComparisonCard/tableCell/value/lineHeight', modes) as number) ?? 16;
     const valueFontWeight = (getVariableByName('planComparisonCard/tableCell/value/fontWeight', modes) as number | string) ?? '500';
 
-    // Icon
     const iconColor = (getVariableByName('planComparisonCard/icon/color', modes) as string) ?? '#ffffff';
     const iconSize = (getVariableByName('planComparisonCard/icon/size', modes) as number) ?? 16;
 
@@ -248,13 +187,29 @@ function PlanComparisonCard({
         textAlign: 'center',
     };
 
-    const planHeaderColumnStyle: ViewStyle = {
+    const rowStyle: ViewStyle = {
+        flexDirection: 'row',
+        width: '100%',
+    };
+
+    const labelCellStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: cellGap,
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+    };
+
+    const valueCellStyle: ViewStyle = {
+        flexDirection: 'row',
         alignItems: 'center',
         justifyContent: 'center',
+        padding: cellPadding,
+        minHeight: cellMinHeight,
+        width: '100%',
     };
 
     const renderValue = (value: PlanComparisonCellValue, cellKey: React.Key) => {
-        // "Not available" → muted cross icon.
         if (value === false) {
             return (
                 <Icon
@@ -265,11 +220,9 @@ function PlanComparisonCard({
                 />
             );
         }
-        // Empty cell.
         if (value === null || value === undefined || value === true) {
             return null;
         }
-        // Text content.
         if (typeof value === 'string' || typeof value === 'number') {
             return (
                 <Text key={cellKey} style={valueTextStyle}>
@@ -277,67 +230,32 @@ function PlanComparisonCard({
                 </Text>
             );
         }
-        // Custom node — forward modes so themed children stay in sync.
         return cloneChildrenWithModes(value, modes);
     };
 
-    const labelCellStyle: ViewStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: cellGap,
-        padding: cellPadding,
-        minHeight: cellMinHeight,
-        flexShrink: 0,
-    };
-
-    const valueCellStyle: ViewStyle = {
-        flexDirection: 'row',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: cellPadding,
-        minHeight: cellMinHeight,
-        flexShrink: 0,
-    };
-
     return (
-        <View style={[{ gap, alignSelf: 'flex-start' }, style]}>
-            {/* Headers above table — same column grid as body (no columnGap) */}
-            <View style={{ flexDirection: 'row', alignItems: 'flex-end' }}>
-                <View
-                    style={[
-                        columnWidthStyle(0),
-                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
-                    ]}
-                />
-                {columns.map((column, index) => {
-                    const colIndex = index + 1;
-                    return (
-                        <View
-                            key={column.label ?? index}
-                            onLayout={(e) => onHeaderColumnLayout(colIndex, e)}
-                            style={[columnWidthStyle(colIndex), planHeaderColumnStyle]}
+        <View style={[{ gap, width: '100%' }, style]}>
+            {/* Header row — same 1.8fr / 1fr grid as the table */}
+            <View style={rowStyle}>
+                <View style={labelColumnStyle} />
+                {columns.map((column, index) => (
+                    <View key={column.label ?? index} style={planColumnStyle}>
+                        <Text
+                            style={[
+                                headerTextStyle,
+                                { color: column.brand ? headerBrandFg : headerFg },
+                            ]}
                         >
-                            <Text
-                                style={[
-                                    headerTextStyle,
-                                    {
-                                        color: column.brand ? headerBrandFg : headerFg,
-                                        alignSelf: 'center',
-                                    },
-                                ]}
-                            >
-                                {column.label}
-                            </Text>
-                        </View>
-                    );
-                })}
+                            {column.label}
+                        </Text>
+                    </View>
+                ))}
             </View>
 
-            {/* Single rounded table — columns size to their widest cell */}
+            {/* Table body */}
             <View
                 style={{
-                    flexDirection: 'row',
-                    alignSelf: 'flex-start',
+                    width: '100%',
                     backgroundColor: tableBackground,
                     borderWidth: tableBorderSize,
                     borderColor: tableBorderColor,
@@ -345,27 +263,21 @@ function PlanComparisonCard({
                     overflow: 'hidden',
                 }}
             >
-                <View
-                    onLayout={(e) => onBodyColumnLayout(0, e)}
-                    style={[
-                        columnWidthStyle(0),
-                        labelColumnFlex > 0 ? { flexGrow: labelColumnFlex } : undefined,
-                    ]}
-                >
-                    {rows.map((row, rowIndex) => {
-                        const isLast = rowIndex === rows.length - 1;
-                        const showInfo = row.showInfo || row.onInfoPress != null;
-                        return (
-                            <View
-                                key={row.key ?? `${row.label}-${rowIndex}`}
-                                style={[
-                                    labelCellStyle,
-                                    {
-                                        borderBottomWidth: isLast ? 0 : cellBorderSize,
-                                        borderBottomColor: cellBorderColor,
-                                    },
-                                ]}
-                            >
+                {rows.map((row, rowIndex) => {
+                    const isLast = rowIndex === rows.length - 1;
+                    const showInfo = row.showInfo || row.onInfoPress != null;
+                    return (
+                        <View
+                            key={row.key ?? `${row.label}-${rowIndex}`}
+                            style={[
+                                rowStyle,
+                                {
+                                    borderBottomWidth: isLast ? 0 : cellBorderSize,
+                                    borderBottomColor: cellBorderColor,
+                                },
+                            ]}
+                        >
+                            <View style={[labelColumnStyle, labelCellStyle]}>
                                 <Text style={labelTextStyle}>{row.label}</Text>
                                 {showInfo &&
                                     (row.onInfoPress ? (
@@ -381,41 +293,19 @@ function PlanComparisonCard({
                                         <Icon name="ic_info" size={iconSize} color={iconColor} />
                                     ))}
                             </View>
-                        );
-                    })}
-                </View>
 
-                {columns.map((column, colIndex) => {
-                    const colIndexWidth = colIndex + 1;
-                    return (
-                    <View
-                        key={column.label ?? colIndex}
-                        onLayout={(e) => onBodyColumnLayout(colIndexWidth, e)}
-                        style={[columnWidthStyle(colIndexWidth), planHeaderColumnStyle]}
-                    >
-                        {rows.map((row, rowIndex) => {
-                            const isLast = rowIndex === rows.length - 1;
-                            return (
+                            {columns.map((column, colIndex) => (
                                 <View
-                                    key={row.key ?? `${row.label}-${rowIndex}`}
-                                    style={[
-                                        valueCellStyle,
-                                        {
-                                            borderBottomWidth: isLast ? 0 : cellBorderSize,
-                                            borderBottomColor: cellBorderColor,
-                                        },
-                                    ]}
+                                    key={column.label ?? colIndex}
+                                    style={[planColumnStyle, valueCellStyle]}
                                 >
-                                    <View style={{ flexShrink: 0 }}>
-                                        {renderValue(
-                                            row.values?.[colIndex],
-                                            `${rowIndex}-${colIndex}`,
-                                        )}
-                                    </View>
+                                    {renderValue(
+                                        row.values?.[colIndex],
+                                        `${rowIndex}-${colIndex}`,
+                                    )}
                                 </View>
-                            );
-                        })}
-                    </View>
+                            ))}
+                        </View>
                     );
                 })}
             </View>

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,273 @@
+import React, { useEffect } from 'react'
+import { StyleSheet, View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import Animated, {
+  Easing,
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+  type SharedValue,
+} from 'react-native-reanimated'
+import Svg, { Path } from 'react-native-svg'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import { useReducedMotion } from '../../skeleton/useReducedMotion'
+
+/**
+ * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
+ * override any subset via the `colors` prop.
+ */
+export type SpinnerColors = {
+  /** Leading segment (front of the falling chain). */
+  primary?: string
+  /** Middle segment. */
+  secondary?: string
+  /** Trailing segment (tail of the chain). */
+  tertiary?: string
+}
+
+type SpinnerBaseProps = Omit<ViewProps, 'children' | 'style'>
+
+export type SpinnerProps = SpinnerBaseProps & {
+  /**
+   * Diameter in px. The spinner is always rendered at a 1:1 ratio, so a single
+   * size controls both width and height. Defaults to the Figma size (72).
+   */
+  size?: number
+  /**
+   * Duration of one full clockwise revolution of the leading segment, in ms.
+   * Lower = faster. Defaults to 2400.
+   */
+  durationMs?: number
+  /**
+   * "Weightiness" of the fall, in `[0, 0.9]`. 0 = perfectly constant speed;
+   * higher values make segments whip faster over the top and ease through the
+   * bottom. Kept below 1 so the motion never reverses. Defaults to 0.45.
+   */
+  gravity?: number
+  /** Override any subset of the token-driven segment colours. */
+  colors?: SpinnerColors
+  /** When false, renders a static resting spinner (also honoured for reduced motion). Defaults to true. */
+  animating?: boolean
+  /** Design token modes forwarded to token lookups. */
+  modes?: Record<string, any>
+  /** Container style override. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label announced to assistive tech. Defaults to "Loading". */
+  accessibilityLabel?: string
+}
+
+const SEGMENT_COUNT = 3
+const DEFAULT_SIZE = 72
+const DEFAULT_DURATION_MS = 1500
+const DEFAULT_GRAVITY = 0.45
+
+// Stroke thickness as a fraction of the diameter (matches the Figma ring weight).
+const STROKE_RATIO = 0.11
+// Angular length of each individual segment.
+const ARC_LENGTH_DEG = 100
+// Spacing between consecutive heads when fully bunched at the top. Small but
+// non-zero so all three colours stay faintly visible as they crest the top.
+const SPREAD_MIN_DEG = 10
+// Spacing between consecutive heads at full spread. At this extent each segment's
+// tail only overlaps the next head by `ARC_LENGTH_DEG - SPREAD_MAX_DEG` (16°) —
+// the maximum extension the chain reaches while staying connected (never a gap).
+const SPREAD_MAX_DEG = 84
+// Fraction of each revolution spent gradually fanning *out* (the rest is spent
+// snapping back together over the top).
+//
+// This is the knob that balances "reaches full extension" against "never stalls
+// and never recoils". The tail segment's velocity while spreading is
+// `vLead * (1 - spreadRange / (SPREAD_OUT_FRAC * π))`. Spreading the fan-out over
+// ~3/4 of the turn keeps that factor around ~0.45 (so the tail always carries
+// clear forward momentum — it never crawls to a stall, and never reverses),
+// while still letting the breath reach a full 1.0. The remaining ~1/4 is an
+// energetic gather over the top where the trailing segments whip forward to
+// rejoin the lead. A symmetric (sinusoidal/triangle) breath cannot do all three:
+// reach full extension, avoid recoil, and avoid a sustained stall.
+const SPREAD_OUT_FRAC = 0.75
+
+const DEG_TO_RAD = Math.PI / 180
+const TWO_PI = Math.PI * 2
+
+const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value))
+
+const toNumber = (value: unknown, fallback: number) => {
+  if (typeof value === 'number' && Number.isFinite(value)) {
+    return value
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value)
+    if (Number.isFinite(parsed)) {
+      return parsed
+    }
+  }
+  return fallback
+}
+
+/**
+ * Builds the SVG path for a single fixed-length arc whose *head* sits at the
+ * top (12 o'clock) and whose body trails counter-clockwise behind it. Rotating
+ * the containing view clockwise then places the head at the desired angle.
+ */
+const buildArcPath = (center: number, radius: number, arcLengthDeg: number) => {
+  const arc = arcLengthDeg * DEG_TO_RAD
+  // Head at the top: phi = 0 -> (center, center - radius).
+  const headX = center
+  const headY = center - radius
+  // Tail trails counter-clockwise by `arc`: phi = -arc.
+  const tailX = center + radius * Math.sin(-arc)
+  const tailY = center - radius * Math.cos(-arc)
+  const largeArc = arcLengthDeg > 180 ? 1 : 0
+  // Sweep from tail -> head is clockwise (sweep flag = 1 in SVG y-down space).
+  return `M ${tailX} ${tailY} A ${radius} ${radius} 0 ${largeArc} 1 ${headX} ${headY}`
+}
+
+/**
+ * Animated rotation for one segment.
+ *
+ * A single linear clock drives a gravity-warped lead angle: it advances faster
+ * over the top and slower through the bottom, giving the fall its weight. Each
+ * segment trails the lead by `index * offset`, where `offset` breathes between
+ * its bunched (top) and spread (bottom) extents in lock-step with the lead's
+ * vertical position. Because the offset is bounded by `SPREAD_MAX_DEG`, the
+ * three segments form a continuously-overlapping chain that gathers at the top
+ * and fans out — fully connected — through the free fall.
+ */
+const useSegmentRotation = (
+  clock: SharedValue<number>,
+  index: number,
+  gravity: number,
+  spreadMinRad: number,
+  spreadMaxRad: number,
+  spreadOutFrac: number,
+) =>
+  useAnimatedStyle(() => {
+    'worklet'
+    const tau = clock.value * TWO_PI
+    // Lead angle (clockwise from top). d(lead)/dtau = 1 + gravity*cos(tau) is
+    // maximal at the top (tau = 0) and minimal at the bottom (tau = PI), giving
+    // the fall its weight.
+    const lead = tau + gravity * Math.sin(tau)
+    // Breathing is an asymmetric saw in the lead angle: it ramps *gradually* from
+    // 0 (bunched, top) up to 1 (fully spread) over `spreadOutFrac` of the turn,
+    // then drops back to 0 over the remaining arc (the quick gather over the top).
+    // The gentle fan-out slope keeps the trailing segment moving forward at a
+    // healthy fraction of the lead's speed — it never stalls and never recoils —
+    // while still reaching full extension; the steeper gather is a forward whip,
+    // so momentum only ever increases there.
+    const leadMod = lead - TWO_PI * Math.floor(lead / TWO_PI)
+    const splitLead = spreadOutFrac * TWO_PI
+    const breath =
+      leadMod < splitLead
+        ? leadMod / splitLead
+        : (TWO_PI - leadMod) / (TWO_PI - splitLead)
+    const offset = spreadMinRad + breath * (spreadMaxRad - spreadMinRad)
+    const head = lead - index * offset
+    return {
+      transform: [{ rotate: `${(head * 180) / Math.PI}deg` }],
+    }
+  }, [gravity, index, spreadMinRad, spreadMaxRad, spreadOutFrac])
+
+const fullSize: ViewStyle = { ...StyleSheet.absoluteFillObject }
+
+function Spinner({
+  size = DEFAULT_SIZE,
+  durationMs = DEFAULT_DURATION_MS,
+  gravity = DEFAULT_GRAVITY,
+  colors,
+  animating = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel = 'Loading',
+  ...rest
+}: SpinnerProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = { ...globalModes, ...propModes }
+
+  const systemReducedMotion = useReducedMotion()
+  const isAnimated = animating && !systemReducedMotion
+
+  const resolvedSize = toNumber(size, DEFAULT_SIZE)
+  const safeGravity = clamp(toNumber(gravity, DEFAULT_GRAVITY), 0, 0.9)
+  const strokeWidth = Math.max(1, resolvedSize * STROKE_RATIO)
+  const radius = Math.max(0, (resolvedSize - strokeWidth) / 2)
+  const center = resolvedSize / 2
+  const arcPath = buildArcPath(center, radius, ARC_LENGTH_DEG)
+
+  const segmentColors = [
+    colors?.primary ?? (getVariableByName('spiner/primary/bg', modes) as string) ?? '#d0a259',
+    colors?.secondary ?? (getVariableByName('spiner/secondary/bg', modes) as string) ?? '#5b00b5',
+    colors?.tertiary ?? (getVariableByName('spiner/tertiary/bg', modes) as string) ?? '#066b99',
+  ]
+
+  const clock = useSharedValue(0)
+
+  useEffect(() => {
+    if (!isAnimated) {
+      cancelAnimation(clock)
+      clock.value = 0
+      return
+    }
+    clock.value = 0
+    clock.value = withRepeat(
+      withTiming(1, { duration: Math.max(1, durationMs), easing: Easing.linear }),
+      -1,
+      false,
+    )
+    return () => {
+      cancelAnimation(clock)
+    }
+  }, [isAnimated, durationMs, clock])
+
+  // Hooks must run unconditionally and in a stable order, so all three segment
+  // styles are always computed even when the spinner renders statically.
+  const spreadMinRad = SPREAD_MIN_DEG * DEG_TO_RAD
+  const spreadMaxRad = SPREAD_MAX_DEG * DEG_TO_RAD
+  const style0 = useSegmentRotation(clock, 0, safeGravity, spreadMinRad, spreadMaxRad, SPREAD_OUT_FRAC)
+  const style1 = useSegmentRotation(clock, 1, safeGravity, spreadMinRad, spreadMaxRad, SPREAD_OUT_FRAC)
+  const style2 = useSegmentRotation(clock, 2, safeGravity, spreadMinRad, spreadMaxRad, SPREAD_OUT_FRAC)
+  const animatedStyles = [style0, style1, style2]
+
+  // Static resting fan (evenly spaced) used when animation is disabled.
+  const restingRotations = [0, -120, -240]
+
+  const containerStyle: ViewStyle = {
+    height: resolvedSize,
+    width: resolvedSize,
+    position: 'relative',
+  }
+
+  return (
+    <View
+      accessibilityRole="progressbar"
+      accessibilityLabel={accessibilityLabel}
+      style={[containerStyle, style]}
+      {...rest}
+    >
+      {/* Render tail -> head so the leading segment overlaps on top. */}
+      {Array.from({ length: SEGMENT_COUNT }, (_, i) => SEGMENT_COUNT - 1 - i).map((segmentIndex) => {
+        const segmentStyle = isAnimated
+          ? animatedStyles[segmentIndex]
+          : { transform: [{ rotate: `${restingRotations[segmentIndex]}deg` }] }
+        return (
+          <Animated.View key={segmentIndex} style={[fullSize, segmentStyle]} pointerEvents="none">
+            <Svg width={resolvedSize} height={resolvedSize} viewBox={`0 0 ${resolvedSize} ${resolvedSize}`}>
+              <Path
+                d={arcPath}
+                stroke={segmentColors[segmentIndex]}
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                fill="none"
+              />
+            </Svg>
+          </Animated.View>
+        )
+      })}
+    </View>
+  )
+}
+
+export default Spinner