jfs-components 0.0.79 → 0.0.84

package/lib/module/components/PlanComparisonCard/PlanComparisonCard.js

@@ -1,11 +1,16 @@
 "use strict";
 
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { View, Text, Pressable, Platform } 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. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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).
  */
@@ -17,7 +22,7 @@ import Icon from '../../icons/Icon';
  * - any React node → rendered as-is (e.g. a `Badge`, `MoneyValue`, icon…).
  * - `null` / `undefined` / `true` → empty cell.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+
 const DEFAULT_COLUMNS = [{
   label: 'Your plan'
 }, {
@@ -37,121 +42,65 @@ const DEFAULT_ROWS = [{
   values: [false, '1%']
 }];
 
+/** Keeps every text layer on a single line. */
+const NO_WRAP_TEXT = {
+  flexShrink: 0,
+  ...(Platform.OS === 'web' ? {
+    whiteSpace: 'nowrap'
+  } : {})
+};
+const labelColumnStyle = {
+  flex: LABEL_COLUMN_FR,
+  minWidth: 0
+};
+const planColumnStyle = {
+  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 = {
-  flexShrink: 0,
-  ...(Platform.OS === 'web' ? {
-    whiteSpace: 'nowrap'
-  } : {})
-};
 function PlanComparisonCard({
   columns = DEFAULT_COLUMNS,
   rows = DEFAULT_ROWS,
-  labelColumnFlex = 0,
   modes = EMPTY_MODES,
   style
 }) {
-  /** Natural widths from header labels (plan columns only). */
-  const [headerWidths, setHeaderWidths] = useState([]);
-  /** Natural widths from table body columns. */
-  const [bodyWidths, setBodyWidths] = useState([]);
-  const setMeasuredWidth = useCallback((setter, index, width) => {
-    setter(prev => {
-      if (prev[index] === width) return prev;
-      const next = [...prev];
-      next[index] = width;
-      return next;
-    });
-  }, []);
-  const onHeaderColumnLayout = useCallback((index, event) => {
-    setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
-  }, [setMeasuredWidth]);
-  const onBodyColumnLayout = useCallback((index, event) => {
-    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 => {
-    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) ?? 16;
-
-  // Header
   const headerFg = getVariableByName('planComparisonCard/header/fg', modes) ?? '#ffffff';
   const headerBrandFg = getVariableByName('planComparisonCard/header/brand/fg', modes) ?? '#cea15a';
   const headerFontSize = getVariableByName('planComparisonCard/header/fontSize', modes) ?? 14;
   const headerFontFamily = getVariableByName('planComparisonCard/header/fontFamily', modes) ?? 'JioType Var';
   const headerLineHeight = getVariableByName('planComparisonCard/header/lineHeight', modes) ?? 18;
   const headerFontWeight = getVariableByName('planComparisonCard/header/fontWeight', modes) ?? '500';
-
-  // Table
   const tableBackground = getVariableByName('planComparisonCard/tableRow/background', modes) ?? '#141414';
   const tableRadius = getVariableByName('planComparisonCard/tableRow/radius', modes) ?? 16;
   const tableBorderSize = getVariableByName('planComparisonCard/tableRow/border/size', modes) ?? 1;
   const tableBorderColor = getVariableByName('planComparisonCard/tableRow/border/color', modes) ?? '#1e1a14';
-
-  // Cell
   const cellPadding = getVariableByName('planComparisonCard/tableCell/padding', modes) ?? 12;
   const cellGap = getVariableByName('planComparisonCard/tableCell/gap', modes) ?? 2;
   const cellMinHeight = getVariableByName('planComparisonCard/tableCell/height', modes) ?? 46;
   const cellBorderSize = getVariableByName('planComparisonCard/tableCell/border/size', modes) ?? 1;
   const cellBorderColor = getVariableByName('planComparisonCard/tableCell/border/color', modes) ?? '#1e1a14';
-
-  // Cell label
   const labelColor = getVariableByName('planComparisonCard/tableCell/label/color', modes) ?? '#ffffff';
   const labelDisabledColor = getVariableByName('planComparisonCard/tableCell/label/disabled/color', modes) ?? '#91949c';
   const labelFontSize = getVariableByName('planComparisonCard/tableCell/label/fontSize', modes) ?? 12;
   const labelFontFamily = getVariableByName('planComparisonCard/tableCell/label/fontFamily', modes) ?? 'JioType Var';
   const labelLineHeight = getVariableByName('planComparisonCard/tableCell/label/lineHeight', modes) ?? 16;
   const labelFontWeight = getVariableByName('planComparisonCard/tableCell/label/fontWeight', modes) ?? '400';
-
-  // Cell value
   const valueColor = getVariableByName('planComparisonCard/tableCell/value/color', modes) ?? '#ffffff';
   const valueFontSize = getVariableByName('planComparisonCard/tableCell/value/fontSize', modes) ?? 12;
   const valueFontFamily = getVariableByName('planComparisonCard/tableCell/value/fontFamily', modes) ?? 'JioType Var';
   const valueLineHeight = getVariableByName('planComparisonCard/tableCell/value/lineHeight', modes) ?? 16;
   const valueFontWeight = getVariableByName('planComparisonCard/tableCell/value/fontWeight', modes) ?? '500';
-
-  // Icon
   const iconColor = getVariableByName('planComparisonCard/icon/color', modes) ?? '#ffffff';
   const iconSize = getVariableByName('planComparisonCard/icon/size', modes) ?? 16;
   const toWeight = w => typeof w === 'number' ? `${w}` : w;
@@ -180,12 +129,26 @@ function PlanComparisonCard({
     fontWeight: toWeight(valueFontWeight),
     textAlign: 'center'
   };
-  const planHeaderColumnStyle = {
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const labelCellStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: cellGap,
+    padding: cellPadding,
+    minHeight: cellMinHeight
+  };
+  const valueCellStyle = {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
+    padding: cellPadding,
+    minHeight: cellMinHeight,
+    width: '100%'
   };
   const renderValue = (value, cellKey) => {
-    // "Not available" → muted cross icon.
     if (value === false) {
       return /*#__PURE__*/_jsx(Icon, {
         name: "ic_close",
@@ -193,87 +156,54 @@ function PlanComparisonCard({
         color: labelDisabledColor
       }, cellKey);
     }
-    // Empty cell.
     if (value === null || value === undefined || value === true) {
       return null;
     }
-    // Text content.
     if (typeof value === 'string' || typeof value === 'number') {
       return /*#__PURE__*/_jsx(Text, {
         style: valueTextStyle,
         children: value
       }, cellKey);
     }
-    // Custom node — forward modes so themed children stay in sync.
     return cloneChildrenWithModes(value, modes);
   };
-  const labelCellStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: cellGap,
-    padding: cellPadding,
-    minHeight: cellMinHeight,
-    flexShrink: 0
-  };
-  const valueCellStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: cellPadding,
-    minHeight: cellMinHeight,
-    flexShrink: 0
-  };
   return /*#__PURE__*/_jsxs(View, {
     style: [{
       gap,
-      alignSelf: 'flex-start'
+      width: '100%'
     }, style],
     children: [/*#__PURE__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'flex-end'
-      },
+      style: rowStyle,
       children: [/*#__PURE__*/_jsx(View, {
-        style: [columnWidthStyle(0), labelColumnFlex > 0 ? {
-          flexGrow: labelColumnFlex
-        } : undefined]
-      }), columns.map((column, index) => {
-        const colIndex = index + 1;
-        return /*#__PURE__*/_jsx(View, {
-          onLayout: e => onHeaderColumnLayout(colIndex, e),
-          style: [columnWidthStyle(colIndex), planHeaderColumnStyle],
-          children: /*#__PURE__*/_jsx(Text, {
-            style: [headerTextStyle, {
-              color: column.brand ? headerBrandFg : headerFg,
-              alignSelf: 'center'
-            }],
-            children: column.label
-          })
-        }, column.label ?? index);
-      })]
-    }), /*#__PURE__*/_jsxs(View, {
+        style: labelColumnStyle
+      }), columns.map((column, index) => /*#__PURE__*/_jsx(View, {
+        style: planColumnStyle,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [headerTextStyle, {
+            color: column.brand ? headerBrandFg : headerFg
+          }],
+          children: column.label
+        })
+      }, column.label ?? index))]
+    }), /*#__PURE__*/_jsx(View, {
       style: {
-        flexDirection: 'row',
-        alignSelf: 'flex-start',
+        width: '100%',
         backgroundColor: tableBackground,
         borderWidth: tableBorderSize,
         borderColor: tableBorderColor,
         borderRadius: tableRadius,
         overflow: 'hidden'
       },
-      children: [/*#__PURE__*/_jsx(View, {
-        onLayout: e => onBodyColumnLayout(0, e),
-        style: [columnWidthStyle(0), labelColumnFlex > 0 ? {
-          flexGrow: labelColumnFlex
-        } : undefined],
-        children: rows.map((row, rowIndex) => {
-          const isLast = rowIndex === rows.length - 1;
-          const showInfo = row.showInfo || row.onInfoPress != null;
-          return /*#__PURE__*/_jsxs(View, {
-            style: [labelCellStyle, {
-              borderBottomWidth: isLast ? 0 : cellBorderSize,
-              borderBottomColor: cellBorderColor
-            }],
+      children: rows.map((row, rowIndex) => {
+        const isLast = rowIndex === rows.length - 1;
+        const showInfo = row.showInfo || row.onInfoPress != null;
+        return /*#__PURE__*/_jsxs(View, {
+          style: [rowStyle, {
+            borderBottomWidth: isLast ? 0 : cellBorderSize,
+            borderBottomColor: cellBorderColor
+          }],
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: [labelColumnStyle, labelCellStyle],
             children: [/*#__PURE__*/_jsx(Text, {
               style: labelTextStyle,
               children: row.label
@@ -292,30 +222,12 @@ function PlanComparisonCard({
               size: iconSize,
               color: iconColor
             }))]
-          }, row.key ?? `${row.label}-${rowIndex}`);
-        })
-      }), columns.map((column, colIndex) => {
-        const colIndexWidth = colIndex + 1;
-        return /*#__PURE__*/_jsx(View, {
-          onLayout: e => onBodyColumnLayout(colIndexWidth, e),
-          style: [columnWidthStyle(colIndexWidth), planHeaderColumnStyle],
-          children: rows.map((row, rowIndex) => {
-            const isLast = rowIndex === rows.length - 1;
-            return /*#__PURE__*/_jsx(View, {
-              style: [valueCellStyle, {
-                borderBottomWidth: isLast ? 0 : cellBorderSize,
-                borderBottomColor: cellBorderColor
-              }],
-              children: /*#__PURE__*/_jsx(View, {
-                style: {
-                  flexShrink: 0
-                },
-                children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-              })
-            }, row.key ?? `${row.label}-${rowIndex}`);
-          })
-        }, column.label ?? colIndex);
-      })]
+          }), columns.map((column, colIndex) => /*#__PURE__*/_jsx(View, {
+            style: [planColumnStyle, valueCellStyle],
+            children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+          }, column.label ?? colIndex))]
+        }, row.key ?? `${row.label}-${rowIndex}`);
+      })
     })]
   });
 }

package/lib/module/components/Spinner/Spinner.js

@@ -0,0 +1,212 @@
+"use strict";
+
+import React, { useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { Easing, cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } 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.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+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, min, max) => Math.min(max, Math.max(min, value));
+const toNumber = (value, fallback) => {
+  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, radius, arcLengthDeg) => {
+  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, index, gravity, spreadMinRad, spreadMaxRad, spreadOutFrac) => 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 = {
+  ...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
+}) {
+  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) ?? '#d0a259', colors?.secondary ?? getVariableByName('spiner/secondary/bg', modes) ?? '#5b00b5', colors?.tertiary ?? getVariableByName('spiner/tertiary/bg', modes) ?? '#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 = {
+    height: resolvedSize,
+    width: resolvedSize,
+    position: 'relative'
+  };
+  return /*#__PURE__*/_jsx(View, {
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    style: [containerStyle, style],
+    ...rest,
+    children: Array.from({
+      length: SEGMENT_COUNT
+    }, (_, i) => SEGMENT_COUNT - 1 - i).map(segmentIndex => {
+      const segmentStyle = isAnimated ? animatedStyles[segmentIndex] : {
+        transform: [{
+          rotate: `${restingRotations[segmentIndex]}deg`
+        }]
+      };
+      return /*#__PURE__*/_jsx(Animated.View, {
+        style: [fullSize, segmentStyle],
+        pointerEvents: "none",
+        children: /*#__PURE__*/_jsx(Svg, {
+          width: resolvedSize,
+          height: resolvedSize,
+          viewBox: `0 0 ${resolvedSize} ${resolvedSize}`,
+          children: /*#__PURE__*/_jsx(Path, {
+            d: arcPath,
+            stroke: segmentColors[segmentIndex],
+            strokeWidth: strokeWidth,
+            strokeLinecap: "round",
+            fill: "none"
+          })
+        })
+      }, segmentIndex);
+    })
+  });
+}
+export default Spinner;

package/lib/module/components/TextInput/TextInput.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import React, { useRef, useState } from 'react';
-import { Pressable, View, TextInput as RNTextInput } from 'react-native';
+import { Platform, Pressable, View, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import Icon from '../../icons/Icon';
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
@@ -38,7 +38,8 @@ import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
  * Helper function to convert a color to a more transparent version for placeholder text.
  * Takes a color string (hex, rgb, rgba) and returns it with reduced opacity.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const IS_WEB = Platform.OS === 'web';
 function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';
@@ -114,10 +115,9 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = useState(false);
   const [isHovered, setIsHovered] = useState(false);
-  // Ref to the underlying native input so a tap anywhere inside the Pressable
-  // wrapper can programmatically focus it. Without this, on Android the
-  // wrapping Pressable becomes the touch responder on the first tap and the
-  // native input only gains focus on the *second* tap.
+  // On web we keep a ref so a click anywhere inside the (Pressable) wrapper can
+  // focus the input. On native the wrapper is a plain View and the native
+  // input focuses itself on the first tap (see container note below).
   const inputRef = useRef(null);
 
   // Resolve container tokens
@@ -209,19 +209,18 @@ function TextInput({
 
   // Generate default accessibility label from placeholder if not provided
   const defaultAccessibilityLabel = accessibilityLabel || placeholder || 'Text input';
-  return /*#__PURE__*/_jsxs(Pressable, {
-    style: [containerStyle, focusContainerStyle, hoverStyle, style],
-    onHoverIn: () => setIsHovered(true),
-    onHoverOut: () => setIsHovered(false)
-    // Forward taps on the wrapper (padding, leading icon gutter, etc.) to the
-    // native input. This guarantees the keyboard opens on the FIRST tap on
-    // Android instead of requiring a second tap.
-    ,
-    onPress: () => inputRef.current?.focus()
-    // The native input is the real accessible element; don't add a redundant
-    // focusable node for screen readers.
-    ,
-    accessible: false,
+
+  // IMPORTANT (Android focus reliability):
+  // Do NOT wrap the native <TextInput> in a Pressable/Touchable on native.
+  // A touch-responder-claiming wrapper steals the first tap, which is the
+  // classic cause of the "needs 2–3 taps to focus" Android bug — and forwarding
+  // focus from `onPress` is unreliable because the press is cancelled by the
+  // tiniest finger movement. A plain <View> does not claim the responder, so
+  // the native input receives the tap and focuses on the FIRST tap.
+  // On web there is no such issue, so we keep the Pressable for the hover
+  // affordance plus click-anywhere-to-focus.
+  const containerStyleArray = [containerStyle, focusContainerStyle, hoverStyle, style];
+  const inner = /*#__PURE__*/_jsxs(_Fragment, {
     children: [processedLeading && /*#__PURE__*/_jsx(View, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -244,6 +243,22 @@ function TextInput({
       children: processedTrailing
     })]
   });
+  if (IS_WEB) {
+    return /*#__PURE__*/_jsx(Pressable, {
+      style: containerStyleArray,
+      onHoverIn: () => setIsHovered(true),
+      onHoverOut: () => setIsHovered(false)
+      // Web: clicking the padding / icon gutter focuses the input too.
+      ,
+      onPress: () => inputRef.current?.focus(),
+      accessible: false,
+      children: inner
+    });
+  }
+  return /*#__PURE__*/_jsx(View, {
+    style: containerStyleArray,
+    children: inner
+  });
 }
 
 /**

package/lib/module/components/index.js

@@ -66,6 +66,7 @@ export { default as Title } from './Title/Title';
 export { default as Screen } from './Screen/Screen';
 export { default as Section } from './Section/Section';
 export { default as Slot } from './Slot/Slot';
+export { default as Spinner } from './Spinner/Spinner';
 export { default as Stepper } from './Stepper/Stepper';
 export { Step } from './Stepper/Step';
 export { StepLabel } from './Stepper/StepLabel';

package/lib/module/icons/components/IconArrowdown.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const IconArrowdown = props => /*#__PURE__*/_jsx(Svg, {
+  viewBox: "0 0 24 24",
+  ...props,
+  children: /*#__PURE__*/_jsx(Path, {
+    d: "M18.7099 14.29C18.617 14.1963 18.5064 14.1219 18.3845 14.0711C18.2627 14.0203 18.132 13.9942 17.9999 13.9942C17.8679 13.9942 17.7372 14.0203 17.6154 14.0711C17.4935 14.1219 17.3829 14.1963 17.2899 14.29L12.9999 18.59V3C12.9999 2.73478 12.8946 2.48043 12.707 2.29289C12.5195 2.10536 12.2652 2 11.9999 2C11.7347 2 11.4804 2.10536 11.2928 2.29289C11.1053 2.48043 10.9999 2.73478 10.9999 3V18.59L6.70994 14.29C6.52164 14.1017 6.26624 13.9959 5.99994 13.9959C5.73364 13.9959 5.47825 14.1017 5.28994 14.29C5.10164 14.4783 4.99585 14.7337 4.99585 15C4.99585 15.1319 5.02182 15.2624 5.07228 15.3842C5.12274 15.5061 5.1967 15.6168 5.28994 15.71L11.2899 21.71C11.3829 21.8037 11.4935 21.8781 11.6154 21.9289C11.7372 21.9797 11.8679 22.0058 11.9999 22.0058C12.132 22.0058 12.2627 21.9797 12.3845 21.9289C12.5064 21.8781 12.617 21.8037 12.7099 21.71L18.7099 15.71C18.8037 15.617 18.8781 15.5064 18.9288 15.3846C18.9796 15.2627 19.0057 15.132 19.0057 15C19.0057 14.868 18.9796 14.7373 18.9288 14.6154C18.8781 14.4936 18.8037 14.383 18.7099 14.29Z"
+  })
+});