jfs-components 0.0.78 → 0.0.84

package/src/components/PlanComparisonCard/PlanComparisonCard.tsx

@@ -0,0 +1,316 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    Pressable,
+    Platform,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+} 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).
+ */
+export type PlanComparisonColumn = {
+    /** Header text for the plan column. */
+    label: string;
+    /**
+     * Render the header in the brand accent colour (gold) — use it to
+     * highlight the recommended / upsell plan.
+     * @default false
+     */
+    brand?: boolean;
+};
+
+/**
+ * Value rendered inside a plan cell.
+ * - `string` / `number` → rendered as value text.
+ * - `false` → renders the muted "not available" cross icon.
+ * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
+ * - `null` / `undefined` / `true` → empty cell.
+ */
+export type PlanComparisonCellValue =
+    | string
+    | number
+    | boolean
+    | null
+    | undefined
+    | React.ReactElement;
+
+export type PlanComparisonRow = {
+    /** Feature label shown in the first (left) column. */
+    label: string;
+    /**
+     * Show an info icon after the label. When `onInfoPress` is provided the
+     * icon becomes tappable; otherwise it is purely decorative.
+     */
+    showInfo?: boolean;
+    /** Handler for the info icon. Implies `showInfo`. */
+    onInfoPress?: () => void;
+    /**
+     * One value per plan column, in the same order as `columns`. See
+     * {@link PlanComparisonCellValue} for how each value is rendered.
+     */
+    values: PlanComparisonCellValue[];
+    /** Stable key. Falls back to the label / index. */
+    key?: React.Key;
+};
+
+export type PlanComparisonCardProps = {
+    /**
+     * Plan column headers (excludes the leading label column). The order here
+     * maps 1:1 to each row's `values` array.
+     */
+    columns?: PlanComparisonColumn[];
+    /** Feature rows compared across the plan columns. */
+    rows?: PlanComparisonRow[];
+    /** Design token modes for theming (e.g. `{ "Color Mode": "Light" }`). */
+    modes?: Record<string, any>;
+    /** Override the outer container style. */
+    style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_COLUMNS: PlanComparisonColumn[] = [
+    { label: 'Your plan' },
+    { label: 'JioFinance+', brand: true },
+];
+
+const DEFAULT_ROWS: PlanComparisonRow[] = [
+    { label: 'JioPoints multiplier', values: ['1x', '1.25x'] },
+    { label: 'Cashback', showInfo: true, values: [false, 'Upto ₹5000'] },
+    { 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`).
+ *
+ * Columns use a 1.8fr / 1fr flex ratio (label vs plan), matching the Figma grid.
+ *
+ * @component
+ */
+function PlanComparisonCard({
+    columns = DEFAULT_COLUMNS,
+    rows = DEFAULT_ROWS,
+    modes = EMPTY_MODES,
+    style,
+}: PlanComparisonCardProps) {
+    const gap = (getVariableByName('planComparisonCard/gap', modes) as number) ?? 16;
+
+    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;
+    const headerFontFamily = (getVariableByName('planComparisonCard/header/fontFamily', modes) as string) ?? 'JioType Var';
+    const headerLineHeight = (getVariableByName('planComparisonCard/header/lineHeight', modes) as number) ?? 18;
+    const headerFontWeight = (getVariableByName('planComparisonCard/header/fontWeight', modes) as number | string) ?? '500';
+
+    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';
+
+    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';
+
+    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;
+    const labelFontFamily = (getVariableByName('planComparisonCard/tableCell/label/fontFamily', modes) as string) ?? 'JioType Var';
+    const labelLineHeight = (getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) as number) ?? 16;
+    const labelFontWeight = (getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) as number | string) ?? '400';
+
+    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';
+
+    const iconColor = (getVariableByName('planComparisonCard/icon/color', modes) as string) ?? '#ffffff';
+    const iconSize = (getVariableByName('planComparisonCard/icon/size', modes) as number) ?? 16;
+
+    const toWeight = (w: number | string) => (typeof w === 'number' ? `${w}` : w) as TextStyle['fontWeight'];
+
+    const headerTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        fontFamily: headerFontFamily,
+        fontSize: headerFontSize,
+        lineHeight: headerLineHeight,
+        fontWeight: toWeight(headerFontWeight),
+        textAlign: 'center',
+    };
+
+    const labelTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: labelColor,
+        fontFamily: labelFontFamily,
+        fontSize: labelFontSize,
+        lineHeight: labelLineHeight,
+        fontWeight: toWeight(labelFontWeight),
+    };
+
+    const valueTextStyle: TextStyle = {
+        ...NO_WRAP_TEXT,
+        color: valueColor,
+        fontFamily: valueFontFamily,
+        fontSize: valueFontSize,
+        lineHeight: valueLineHeight,
+        fontWeight: toWeight(valueFontWeight),
+        textAlign: 'center',
+    };
+
+    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) => {
+        if (value === false) {
+            return (
+                <Icon
+                    key={cellKey}
+                    name="ic_close"
+                    size={iconSize}
+                    color={labelDisabledColor}
+                />
+            );
+        }
+        if (value === null || value === undefined || value === true) {
+            return null;
+        }
+        if (typeof value === 'string' || typeof value === 'number') {
+            return (
+                <Text key={cellKey} style={valueTextStyle}>
+                    {value}
+                </Text>
+            );
+        }
+        return cloneChildrenWithModes(value, modes);
+    };
+
+    return (
+        <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 },
+                            ]}
+                        >
+                            {column.label}
+                        </Text>
+                    </View>
+                ))}
+            </View>
+
+            {/* Table body */}
+            <View
+                style={{
+                    width: '100%',
+                    backgroundColor: tableBackground,
+                    borderWidth: tableBorderSize,
+                    borderColor: tableBorderColor,
+                    borderRadius: tableRadius,
+                    overflow: 'hidden',
+                }}
+            >
+                {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 ? (
+                                        <Pressable
+                                            onPress={row.onInfoPress}
+                                            accessibilityRole="button"
+                                            accessibilityLabel={`More information about ${row.label}`}
+                                            hitSlop={8}
+                                        >
+                                            <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                        </Pressable>
+                                    ) : (
+                                        <Icon name="ic_info" size={iconSize} color={iconColor} />
+                                    ))}
+                            </View>
+
+                            {columns.map((column, colIndex) => (
+                                <View
+                                    key={column.label ?? colIndex}
+                                    style={[planColumnStyle, valueCellStyle]}
+                                >
+                                    {renderValue(
+                                        row.values?.[colIndex],
+                                        `${rowIndex}-${colIndex}`,
+                                    )}
+                                </View>
+                            ))}
+                        </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+}
+
+export default PlanComparisonCard;

package/src/components/Slot/Slot.tsx

@@ -0,0 +1,91 @@
+import React, { useMemo } from 'react'
+import { View, type StyleProp, type ViewProps, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+
+export type SlotLayoutDirection = 'vertical' | 'horizontal'
+
+export type SlotProps = ViewProps & {
+  /**
+   * Content laid out inside the slot. `modes` are cascaded to every child via
+   * {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * Main-axis direction for slot children. Matches the Figma Slot variant:
+   * - `vertical` (default): stacks children in a column
+   * - `horizontal`: arranges children in a row
+   */
+  layoutDirection?: SlotLayoutDirection
+  /**
+   * Alignment along the cross axis.
+   * Defaults to `stretch` for vertical and `flex-start` for horizontal.
+   */
+  alignCrossAxis?: ViewStyle['alignItems']
+  /**
+   * Distribution along the main axis (maps to `justifyContent`).
+   */
+  justifyMainAxis?: ViewStyle['justifyContent']
+  /**
+   * Mode configuration passed to the token resolver and cascaded to children.
+   */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Slot — a token-driven layout container for grouped slot content.
+ *
+ * Use `Slot` instead of a raw `View` when you need a vertical or horizontal
+ * stack with design-token gap spacing and automatic `modes` propagation to
+ * children. Typical usage is nesting a column of actions inside a
+ * direction-locked parent such as `ActionFooter`:
+ *
+ * @example
+ * ```tsx
+ * <ActionFooter modes={modes}>
+ *   <Slot layoutDirection="vertical" modes={modes}>
+ *     <Button label="Continue" modes={primaryModes} />
+ *     <Disclaimer disclaimer="Terms apply." modes={modes} />
+ *   </Slot>
+ * </ActionFooter>
+ * ```
+ */
+function Slot({
+  children,
+  layoutDirection = 'vertical',
+  alignCrossAxis,
+  justifyMainAxis,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: SlotProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+  const { containerStyle, processedChildren } = useMemo(() => {
+    const gap = (getVariableByName('slot/gap', modes) ?? 8) as number
+    const isHorizontal = layoutDirection === 'horizontal'
+
+    const container: ViewStyle = {
+      flexDirection: isHorizontal ? 'row' : 'column',
+      alignItems: alignCrossAxis ?? (isHorizontal ? 'flex-start' : 'stretch'),
+      justifyContent: justifyMainAxis ?? (isHorizontal ? 'center' : undefined),
+      alignSelf: 'stretch',
+      gap,
+    }
+
+    const processed = children ? cloneChildrenWithModes(children, modes) : null
+
+    return { containerStyle: container, processedChildren: processed }
+  }, [children, modes, layoutDirection, alignCrossAxis, justifyMainAxis])
+
+  return (
+    <View style={[containerStyle, style]} {...rest}>
+      {processedChildren}
+    </View>
+  )
+}
+
+export default React.memo(Slot)

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