jfs-components 0.0.79 → 0.0.84

package/lib/commonjs/components/PlanComparisonCard/PlanComparisonCard.js

@@ -4,14 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _Icon = _interopRequireDefault(require("../../icons/Icon"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/** 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).
  */
@@ -43,121 +45,65 @@ const DEFAULT_ROWS = [{
   values: [false, '1%']
 }];
 
+/** Keeps every text layer on a single line. */
+const NO_WRAP_TEXT = {
+  flexShrink: 0,
+  ...(_reactNative.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,
-  ...(_reactNative.Platform.OS === 'web' ? {
-    whiteSpace: 'nowrap'
-  } : {})
-};
 function PlanComparisonCard({
   columns = DEFAULT_COLUMNS,
   rows = DEFAULT_ROWS,
-  labelColumnFlex = 0,
   modes = _reactUtils.EMPTY_MODES,
   style
 }) {
-  /** Natural widths from header labels (plan columns only). */
-  const [headerWidths, setHeaderWidths] = (0, _react.useState)([]);
-  /** Natural widths from table body columns. */
-  const [bodyWidths, setBodyWidths] = (0, _react.useState)([]);
-  const setMeasuredWidth = (0, _react.useCallback)((setter, index, width) => {
-    setter(prev => {
-      if (prev[index] === width) return prev;
-      const next = [...prev];
-      next[index] = width;
-      return next;
-    });
-  }, []);
-  const onHeaderColumnLayout = (0, _react.useCallback)((index, event) => {
-    setMeasuredWidth(setHeaderWidths, index, event.nativeEvent.layout.width);
-  }, [setMeasuredWidth]);
-  const onBodyColumnLayout = (0, _react.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 = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/gap', modes) ?? 16;
-
-  // Header
   const headerFg = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fg', modes) ?? '#ffffff';
   const headerBrandFg = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/brand/fg', modes) ?? '#cea15a';
   const headerFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontSize', modes) ?? 14;
   const headerFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontFamily', modes) ?? 'JioType Var';
   const headerLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/lineHeight', modes) ?? 18;
   const headerFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/header/fontWeight', modes) ?? '500';
-
-  // Table
   const tableBackground = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/background', modes) ?? '#141414';
   const tableRadius = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/radius', modes) ?? 16;
   const tableBorderSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/border/size', modes) ?? 1;
   const tableBorderColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableRow/border/color', modes) ?? '#1e1a14';
-
-  // Cell
   const cellPadding = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/padding', modes) ?? 12;
   const cellGap = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/gap', modes) ?? 2;
   const cellMinHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/height', modes) ?? 46;
   const cellBorderSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/border/size', modes) ?? 1;
   const cellBorderColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/border/color', modes) ?? '#1e1a14';
-
-  // Cell label
   const labelColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/color', modes) ?? '#ffffff';
   const labelDisabledColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/disabled/color', modes) ?? '#91949c';
   const labelFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontSize', modes) ?? 12;
   const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontFamily', modes) ?? 'JioType Var';
   const labelLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/lineHeight', modes) ?? 16;
   const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/label/fontWeight', modes) ?? '400';
-
-  // Cell value
   const valueColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/color', modes) ?? '#ffffff';
   const valueFontSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontSize', modes) ?? 12;
   const valueFontFamily = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontFamily', modes) ?? 'JioType Var';
   const valueLineHeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/lineHeight', modes) ?? 16;
   const valueFontWeight = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/tableCell/value/fontWeight', modes) ?? '500';
-
-  // Icon
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/icon/color', modes) ?? '#ffffff';
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('planComparisonCard/icon/size', modes) ?? 16;
   const toWeight = w => typeof w === 'number' ? `${w}` : w;
@@ -186,12 +132,26 @@ function PlanComparisonCard({
     fontWeight: toWeight(valueFontWeight),
     textAlign: 'center'
   };
-  const planHeaderColumnStyle = {
+  const rowStyle = {
+    flexDirection: 'row',
+    width: '100%'
+  };
+  const labelCellStyle = {
+    flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    gap: cellGap,
+    padding: cellPadding,
+    minHeight: cellMinHeight
+  };
+  const valueCellStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: cellPadding,
+    minHeight: cellMinHeight,
+    width: '100%'
   };
   const renderValue = (value, cellKey) => {
-    // "Not available" → muted cross icon.
     if (value === false) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         name: "ic_close",
@@ -199,87 +159,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__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: valueTextStyle,
         children: value
       }, cellKey);
     }
-    // Custom node — forward modes so themed children stay in sync.
     return (0, _reactUtils.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
       gap,
-      alignSelf: 'flex-start'
+      width: '100%'
     }, style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'flex-end'
-      },
+      style: rowStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [columnWidthStyle(0), labelColumnFlex > 0 ? {
-          flexGrow: labelColumnFlex
-        } : undefined]
-      }), columns.map((column, index) => {
-        const colIndex = index + 1;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          onLayout: e => onHeaderColumnLayout(colIndex, e),
-          style: [columnWidthStyle(colIndex), planHeaderColumnStyle],
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-            style: [headerTextStyle, {
-              color: column.brand ? headerBrandFg : headerFg,
-              alignSelf: 'center'
-            }],
-            children: column.label
-          })
-        }, column.label ?? index);
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: labelColumnStyle
+      }), columns.map((column, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: planColumnStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: [headerTextStyle, {
+            color: column.brand ? headerBrandFg : headerFg
+          }],
+          children: column.label
+        })
+      }, column.label ?? index))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
-        flexDirection: 'row',
-        alignSelf: 'flex-start',
+        width: '100%',
         backgroundColor: tableBackground,
         borderWidth: tableBorderSize,
         borderColor: tableBorderColor,
         borderRadius: tableRadius,
         overflow: 'hidden'
       },
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+          style: [rowStyle, {
+            borderBottomWidth: isLast ? 0 : cellBorderSize,
+            borderBottomColor: cellBorderColor
+          }],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+            style: [labelColumnStyle, labelCellStyle],
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
               style: labelTextStyle,
               children: row.label
@@ -298,30 +225,12 @@ function PlanComparisonCard({
               size: iconSize,
               color: iconColor
             }))]
-          }, row.key ?? `${row.label}-${rowIndex}`);
-        })
-      }), columns.map((column, colIndex) => {
-        const colIndexWidth = colIndex + 1;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          onLayout: e => onBodyColumnLayout(colIndexWidth, e),
-          style: [columnWidthStyle(colIndexWidth), planHeaderColumnStyle],
-          children: rows.map((row, rowIndex) => {
-            const isLast = rowIndex === rows.length - 1;
-            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-              style: [valueCellStyle, {
-                borderBottomWidth: isLast ? 0 : cellBorderSize,
-                borderBottomColor: cellBorderColor
-              }],
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-                style: {
-                  flexShrink: 0
-                },
-                children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
-              })
-            }, row.key ?? `${row.label}-${rowIndex}`);
-          })
-        }, column.label ?? colIndex);
-      })]
+          }), columns.map((column, colIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+            style: [planColumnStyle, valueCellStyle],
+            children: renderValue(row.values?.[colIndex], `${rowIndex}-${colIndex}`)
+          }, column.label ?? colIndex))]
+        }, row.key ?? `${row.label}-${rowIndex}`);
+      })
     })]
   });
 }

package/lib/commonjs/components/Spinner/Spinner.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
+var _reactUtils = require("../../utils/react-utils");
+var _useReducedMotion = require("../../skeleton/useReducedMotion");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Per-segment colours, resolved from the Figma `spiner/*` tokens. Consumers can
+ * override any subset via the `colors` prop.
+ */
+
+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) => (0, _reactNativeReanimated.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 = {
+  ..._reactNative.StyleSheet.absoluteFillObject
+};
+function Spinner({
+  size = DEFAULT_SIZE,
+  durationMs = DEFAULT_DURATION_MS,
+  gravity = DEFAULT_GRAVITY,
+  colors,
+  animating = true,
+  modes: propModes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel = 'Loading',
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const modes = {
+    ...globalModes,
+    ...propModes
+  };
+  const systemReducedMotion = (0, _useReducedMotion.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 ?? (0, _figmaVariablesResolver.getVariableByName)('spiner/primary/bg', modes) ?? '#d0a259', colors?.secondary ?? (0, _figmaVariablesResolver.getVariableByName)('spiner/secondary/bg', modes) ?? '#5b00b5', colors?.tertiary ?? (0, _figmaVariablesResolver.getVariableByName)('spiner/tertiary/bg', modes) ?? '#066b99'];
+  const clock = (0, _reactNativeReanimated.useSharedValue)(0);
+  (0, _react.useEffect)(() => {
+    if (!isAnimated) {
+      (0, _reactNativeReanimated.cancelAnimation)(clock);
+      clock.value = 0;
+      return;
+    }
+    clock.value = 0;
+    clock.value = (0, _reactNativeReanimated.withRepeat)((0, _reactNativeReanimated.withTiming)(1, {
+      duration: Math.max(1, durationMs),
+      easing: _reactNativeReanimated.Easing.linear
+    }), -1, false);
+    return () => {
+      (0, _reactNativeReanimated.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+        style: [fullSize, segmentStyle],
+        pointerEvents: "none",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+          width: resolvedSize,
+          height: resolvedSize,
+          viewBox: `0 0 ${resolvedSize} ${resolvedSize}`,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+            d: arcPath,
+            stroke: segmentColors[segmentIndex],
+            strokeWidth: strokeWidth,
+            strokeLinecap: "round",
+            fill: "none"
+          })
+        })
+      }, segmentIndex);
+    })
+  });
+}
+var _default = exports.default = Spinner;

package/lib/commonjs/components/TextInput/TextInput.js

@@ -43,7 +43,8 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 /**
  * 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.
- */function makePlaceholderColor(color, opacity = 0.5) {
+ */const IS_WEB = _reactNative.Platform.OS === 'web';
+function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';
   }
@@ -118,10 +119,9 @@ function TextInput({
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.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 = (0, _react.useRef)(null);
 
   // Resolve container tokens
@@ -213,19 +213,18 @@ function TextInput({
 
   // Generate default accessibility label from placeholder if not provided
   const defaultAccessibilityLabel = accessibilityLabel || placeholder || 'Text input';
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [processedLeading && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       accessibilityElementsHidden: true,
       importantForAccessibility: "no",
@@ -248,6 +247,22 @@ function TextInput({
       children: processedTrailing
     })]
   });
+  if (IS_WEB) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: containerStyleArray,
+    children: inner
+  });
 }
 
 /**

package/lib/commonjs/components/index.js

@@ -603,6 +603,12 @@ Object.defineProperty(exports, "Slot", {
     return _Slot.default;
   }
 });
+Object.defineProperty(exports, "Spinner", {
+  enumerable: true,
+  get: function () {
+    return _Spinner.default;
+  }
+});
 Object.defineProperty(exports, "StatGroup", {
   enumerable: true,
   get: function () {
@@ -878,6 +884,7 @@ var _Title = _interopRequireDefault(require("./Title/Title"));
 var _Screen = _interopRequireDefault(require("./Screen/Screen"));
 var _Section = _interopRequireDefault(require("./Section/Section"));
 var _Slot = _interopRequireDefault(require("./Slot/Slot"));
+var _Spinner = _interopRequireDefault(require("./Spinner/Spinner"));
 var _Stepper = _interopRequireDefault(require("./Stepper/Stepper"));
 var _Step = require("./Stepper/Step");
 var _StepLabel = require("./Stepper/StepLabel");