jfs-components 0.1.0 → 0.1.8

package/lib/commonjs/components/Slider/Slider.js

@@ -0,0 +1,473 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _reactNativeSvg = _interopRequireWildcard(require("react-native-svg"));
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+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); }
+/**
+ * Imperative handle exposed via `ref`. The primary way to read a slider's value
+ * is still the controlled `value` + `onChange` pair (each `<Slider />` reports
+ * its own value, so multiple sliders are disambiguated by their own handlers).
+ * The ref is a convenience for reading the latest value on demand (e.g. on a
+ * button press) or imperatively nudging an uncontrolled slider.
+ *
+ * @example
+ * const slider = useRef<SliderHandle>(null)
+ * slider.current?.setValue(50)
+ * const v = slider.current?.getValue()
+ */
+
+const clamp = (n, min, max) => Math.min(Math.max(n, min), max);
+const asNum = (raw, fallback) => {
+  const n = typeof raw === 'number' ? raw : parseFloat(raw);
+  return Number.isFinite(n) ? n : fallback;
+};
+const asStr = (raw, fallback) => raw != null ? String(raw) : fallback;
+
+// The unfilled track is rendered at a lighter emphasis in the design.
+const TRACK_EMPHASIS = {
+  Emphasis: 'Low'
+};
+
+/**
+ * Slider — Figma node 5373:446 ("Slider").
+ *
+ * A horizontal, single-thumb slider driven entirely by design tokens. It maps a
+ * numeric range (`minValue`–`maxValue`) onto a track with a filled indicator, a
+ * draggable handle, a value bubble pinned above the handle, and optional min/max
+ * labels beneath the track. Built on `PanResponder` so the one code path works
+ * on iOS, Android and the web.
+ *
+ * The design only labels the range bounds, but a slider's purpose is to bind a
+ * value — so the live value is surfaced through the bubble (formatted via
+ * `formatOptions` / `formatValue`) and reported through `onChange` /
+ * `onChangeEnd`. Supports controlled and uncontrolled usage, web keyboard
+ * control, and an imperative {@link SliderHandle} `ref` for on-demand reads.
+ */
+const Slider = /*#__PURE__*/(0, _react.forwardRef)(function Slider({
+  value: controlledValue,
+  defaultValue,
+  onChange,
+  onChangeEnd,
+  minValue = 0,
+  maxValue = 100,
+  step = 1,
+  isDisabled = false,
+  formatOptions,
+  locale,
+  formatValue,
+  renderTooltip,
+  alwaysShowTooltip = true,
+  showLabels = true,
+  minLabel,
+  maxLabel,
+  width = '100%',
+  modes = _reactUtils.EMPTY_MODES,
+  style,
+  accessibilityLabel
+}, ref) {
+  const tokens = (0, _react.useMemo)(() => resolveTokens(modes), [modes]);
+  const isControlled = controlledValue !== undefined;
+  const [internalValue, setInternalValue] = (0, _react.useState)(() => clamp(defaultValue ?? minValue, minValue, maxValue));
+  const rawValue = isControlled ? controlledValue : internalValue;
+  const currentValue = clamp(rawValue, minValue, maxValue);
+  const [trackWidth, setTrackWidth] = (0, _react.useState)(0);
+  const [tooltipWidth, setTooltipWidth] = (0, _react.useState)(0);
+  const [isDragging, setIsDragging] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
+  const quantize = (0, _react.useCallback)(v => {
+    if (!step || step <= 0) return clamp(v, minValue, maxValue);
+    const stepped = Math.round((v - minValue) / step) * step + minValue;
+    // Round away float dust introduced by the division (e.g. 0.30000000000004).
+    const decimals = (String(step).split('.')[1] || '').length;
+    const fixed = decimals > 0 ? Number(stepped.toFixed(decimals)) : stepped;
+    return clamp(fixed, minValue, maxValue);
+  }, [minValue, maxValue, step]);
+
+  // Keep the latest interactive config in a ref so the PanResponder (created
+  // once) always reads fresh values without being recreated mid-gesture.
+  const interaction = (0, _react.useRef)({
+    trackWidth,
+    minValue,
+    maxValue,
+    isDisabled,
+    isControlled,
+    quantize,
+    onChange,
+    onChangeEnd
+  });
+  interaction.current = {
+    trackWidth,
+    minValue,
+    maxValue,
+    isDisabled,
+    isControlled,
+    quantize,
+    onChange,
+    onChangeEnd
+  };
+  const lastValueRef = (0, _react.useRef)(currentValue);
+  lastValueRef.current = currentValue;
+  const commit = (0, _react.useCallback)((next, isFinal) => {
+    const {
+      isControlled: ctrl,
+      onChange: change,
+      onChangeEnd: changeEnd
+    } = interaction.current;
+    const changed = next !== lastValueRef.current;
+    lastValueRef.current = next;
+    if (changed) {
+      if (!ctrl) setInternalValue(next);
+      change?.(next);
+    }
+    if (isFinal) changeEnd?.(next);
+  }, []);
+  const valueFromX = (0, _react.useCallback)(x => {
+    const {
+      trackWidth: w,
+      minValue: min,
+      maxValue: max,
+      quantize: q
+    } = interaction.current;
+    if (w <= 0) return lastValueRef.current;
+    const ratio = clamp(x / w, 0, 1);
+    return q(min + ratio * (max - min));
+  }, []);
+  const panResponder = (0, _react.useRef)(_reactNative.PanResponder.create({
+    onStartShouldSetPanResponder: () => !interaction.current.isDisabled,
+    onMoveShouldSetPanResponder: () => !interaction.current.isDisabled,
+    onPanResponderGrant: e => {
+      if (interaction.current.isDisabled) return;
+      setIsDragging(true);
+      commit(valueFromX(e.nativeEvent.locationX), false);
+    },
+    onPanResponderMove: e => {
+      if (interaction.current.isDisabled) return;
+      commit(valueFromX(e.nativeEvent.locationX), false);
+    },
+    onPanResponderRelease: e => {
+      setIsDragging(false);
+      if (interaction.current.isDisabled) return;
+      commit(valueFromX(e.nativeEvent.locationX), true);
+    },
+    onPanResponderTerminate: () => {
+      setIsDragging(false);
+      if (interaction.current.isDisabled) return;
+      commit(lastValueRef.current, true);
+    }
+  })).current;
+
+  // Keyboard support (web). Arrow/Page keys nudge, Home/End jump to bounds.
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    if (isDisabled) return;
+    const big = Math.max(step, (maxValue - minValue) / 10);
+    let next = null;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        next = quantize(currentValue + step);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        next = quantize(currentValue - step);
+        break;
+      case 'PageUp':
+        next = quantize(currentValue + big);
+        break;
+      case 'PageDown':
+        next = quantize(currentValue - big);
+        break;
+      case 'Home':
+        next = minValue;
+        break;
+      case 'End':
+        next = maxValue;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault?.();
+    commit(next, true);
+  }, [isDisabled, step, minValue, maxValue, currentValue, quantize, commit]);
+  const handleAccessibilityAction = (0, _react.useCallback)(event => {
+    if (isDisabled) return;
+    const name = event.nativeEvent.actionName;
+    if (name === 'increment') commit(quantize(currentValue + step), true);else if (name === 'decrement') commit(quantize(currentValue - step), true);
+  }, [isDisabled, step, currentValue, quantize, commit]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    getValue: () => lastValueRef.current,
+    setValue: v => commit(quantize(v), true),
+    increment: by => commit(quantize(lastValueRef.current + (by ?? step)), true),
+    decrement: by => commit(quantize(lastValueRef.current - (by ?? step)), true)
+  }), [quantize, commit, step]);
+  const defaultFormat = (0, _react.useCallback)(v => {
+    try {
+      return new Intl.NumberFormat(locale, formatOptions).format(v);
+    } catch {
+      return String(v);
+    }
+  }, [locale, formatOptions]);
+  const format = formatValue ?? defaultFormat;
+  const ratio = maxValue > minValue ? (currentValue - minValue) / (maxValue - minValue) : 0;
+  const percent = clamp(ratio, 0, 1) * 100;
+  const handleSize = tokens.handleSize;
+  // The bubble floats (absolutely positioned, no reserved layout space). When
+  // `alwaysShowTooltip` is false it only appears while interacting: dragging on
+  // any platform, or hovering on web. Lifting the finger clears `isDragging`,
+  // so the bubble disappears immediately on touch release.
+  const showTooltip = alwaysShowTooltip || isDragging || isHovered;
+  const onTrackLayout = (0, _react.useCallback)(e => {
+    setTrackWidth(e.nativeEvent.layout.width);
+  }, []);
+  const onTooltipLayout = (0, _react.useCallback)(e => {
+    setTooltipWidth(e.nativeEvent.layout.width);
+  }, []);
+  const valueText = format(currentValue);
+  const tooltipNode = showTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    onLayout: onTooltipLayout,
+    style: [styles.tooltip, {
+      backgroundColor: tokens.tooltipBackground,
+      paddingHorizontal: tokens.tooltipPaddingH,
+      paddingVertical: tokens.tooltipPaddingV,
+      borderRadius: tokens.tooltipRadius,
+      maxWidth: tokens.tooltipMaxWidth,
+      bottom: handleSize + tokens.tooltipWrapGap,
+      // Pinned to the value point on the full-width track area (not
+      // the tiny handle-width thumb). An absolute child with only
+      // `left` set is clamped by Yoga to `parentWidth - left`, so
+      // parenting it to the 20px thumb collapsed the text to ~0px
+      // and rendered an empty bubble on device. Centre via translate.
+      left: `${percent}%`,
+      transform: [{
+        translateX: -tooltipWidth / 2
+      }]
+    }],
+    pointerEvents: "none",
+    children: [renderTooltip ? renderTooltip(currentValue) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: tokens.tooltipLabel,
+      numberOfLines: 1,
+      children: valueText
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.tip, {
+        bottom: -tokens.tipHeight
+      }],
+      pointerEvents: "none",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.default, {
+        width: tokens.tipWidth,
+        height: tokens.tipHeight,
+        viewBox: `0 0 ${tokens.tipWidth} ${tokens.tipHeight}`,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSvg.Path, {
+          d: `M0 0 L${tokens.tipWidth / 2} ${tokens.tipHeight} L${tokens.tipWidth} 0 Z`,
+          fill: tokens.tooltipBackground
+        })
+      })
+    })]
+  }) : null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [{
+      width,
+      gap: tokens.gap,
+      paddingTop: tokens.paddingTop,
+      paddingBottom: tokens.paddingBottom,
+      paddingLeft: tokens.paddingLeft,
+      paddingRight: tokens.paddingRight,
+      opacity: isDisabled ? 0.5 : 1
+    }, style],
+    accessibilityLabel: accessibilityLabel,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      ...panResponder.panHandlers,
+      onLayout: onTrackLayout,
+      style: [styles.trackArea, {
+        height: handleSize
+      }],
+      accessible: true,
+      accessibilityRole: "adjustable",
+      accessibilityLabel: accessibilityLabel,
+      accessibilityValue: {
+        min: minValue,
+        max: maxValue,
+        now: currentValue,
+        text: valueText
+      },
+      accessibilityState: {
+        disabled: isDisabled
+      },
+      accessibilityActions: [{
+        name: 'increment'
+      }, {
+        name: 'decrement'
+      }],
+      onAccessibilityAction: handleAccessibilityAction,
+      focusable: !isDisabled,
+      ...(_reactNative.Platform.OS === 'web' ? {
+        onKeyDown: handleKeyDown,
+        tabIndex: isDisabled ? -1 : 0,
+        onMouseEnter: () => !isDisabled && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false)
+      } : {}),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          height: tokens.trackHeight,
+          borderRadius: tokens.trackRadius,
+          backgroundColor: tokens.trackBackground
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: {
+          position: 'absolute',
+          left: 0,
+          top: (handleSize - tokens.indicatorHeight) / 2,
+          height: tokens.indicatorHeight,
+          width: `${percent}%`,
+          borderRadius: tokens.indicatorRadius,
+          backgroundColor: tokens.indicatorBackground
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        pointerEvents: "none",
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: `${percent}%`,
+          width: handleSize,
+          height: handleSize,
+          transform: [{
+            translateX: -handleSize / 2
+          }]
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+          style: {
+            width: handleSize,
+            height: handleSize,
+            borderRadius: tokens.handleRadius,
+            backgroundColor: tokens.handleBackground
+          }
+        })
+      }), tooltipNode]
+    }), showLabels ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.labelWrap,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.label,
+        children: minLabel ?? format(minValue)
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: tokens.label,
+        children: maxLabel ?? format(maxValue)
+      })]
+    }) : null]
+  });
+});
+function resolveTokens(modes) {
+  // NOTE: token names are passed as string literals DIRECTLY to
+  // getVariableByName so the `extract-component-tokens` script can statically
+  // collect them for the generated docs. Do not refactor into a helper that
+  // receives the name as a variable.
+  const gap = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/gap', modes), 16);
+  const paddingTop = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/top', modes), 8);
+  const paddingBottom = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/bottom', modes), 0);
+  const paddingLeft = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/left', modes), 0);
+  const paddingRight = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/padding/right', modes), 0);
+  const trackHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/track/height', modes), 4);
+  const trackRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/track/radius', modes), 999);
+  // The unfilled track uses a lighter emphasis in the design; consumer modes
+  // still win over the baked-in `Emphasis: Low`.
+  const trackBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('slider/track/background', {
+    ...TRACK_EMPHASIS,
+    ...modes
+  }), '#fde8c9');
+  const indicatorHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/indicator/height', modes), 4);
+  const indicatorRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/indicator/radius', modes), 999);
+  const indicatorBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('slider/indicator/background', modes), '#f7ab21');
+  const handleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/handle/size', modes), 20);
+  const handleRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/handle/radius', modes), 999999);
+  const handleBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('slider/handle/background', modes), '#f7ab21');
+  const tooltipWrapGap = asNum((0, _figmaVariablesResolver.getVariableByName)('slider/tooltipWrap/gap', modes), 12);
+  const tooltipBackground = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/background', modes), '#0f0d0a');
+  const tooltipPaddingH = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/horizontal', modes), 12);
+  const tooltipPaddingV = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/padding/vertical', modes), 8);
+  const tooltipRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('radius', modes), 8);
+  const tooltipMaxWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('maxWidth', modes), 280);
+  const tipWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/width', modes), 16);
+  const tipHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/tipItem/height', modes), 8);
+  const tooltipLabelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/color', modes), '#ffffff');
+  const tooltipLabelSize = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontSize', modes), 14);
+  const tooltipLabelFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/lable/fontFamily', modes), 'JioType Var');
+  const tooltipLabelLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/lineHeight', modes), 18);
+  const tooltipLabelWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('tooltip/label/fontWeight', modes), '500');
+  const labelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes), '#000000');
+  const labelSize = asNum((0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes), 14);
+  const labelFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes), 'JioType Var');
+  const labelLineHeight = asNum((0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes), 20);
+  const labelWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes), '500');
+  const labelLetterSpacing = asNum((0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes), -0.5);
+  return {
+    gap,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    trackHeight,
+    trackRadius,
+    trackBackground,
+    indicatorHeight,
+    indicatorRadius,
+    indicatorBackground,
+    handleSize,
+    handleRadius,
+    handleBackground,
+    tooltipWrapGap,
+    tooltipBackground,
+    tooltipPaddingH,
+    tooltipPaddingV,
+    tooltipRadius,
+    tooltipMaxWidth,
+    tooltipLineHeight: tooltipLabelLineHeight,
+    tipWidth,
+    tipHeight,
+    tooltipLabel: {
+      color: tooltipLabelColor,
+      fontSize: tooltipLabelSize,
+      fontFamily: tooltipLabelFamily,
+      lineHeight: tooltipLabelLineHeight,
+      fontWeight: tooltipLabelWeight,
+      includeFontPadding: false
+    },
+    label: {
+      color: labelColor,
+      fontSize: labelSize,
+      fontFamily: labelFamily,
+      lineHeight: labelLineHeight,
+      fontWeight: labelWeight,
+      letterSpacing: labelLetterSpacing,
+      includeFontPadding: false
+    }
+  };
+}
+const styles = {
+  trackArea: {
+    width: '100%',
+    justifyContent: 'center',
+    position: 'relative'
+  },
+  labelWrap: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    width: '100%'
+  },
+  tooltip: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  tip: {
+    position: 'absolute',
+    alignSelf: 'center'
+  }
+};
+var _default = exports.default = Slider;

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.
- */const IS_WEB = _reactNative.Platform.OS === 'web';
+ */
+const IS_WEB = _reactNative.Platform.OS === 'web';
 function makePlaceholderColor(color, opacity = 0.5) {
   if (!color || typeof color !== 'string') {
     return color || '';
@@ -100,7 +101,7 @@ function makePlaceholderColor(color, opacity = 0.5) {
   // Fallback: return original color
   return color;
 }
-function TextInput({
+const TextInputBase = /*#__PURE__*/(0, _react.forwardRef)(function TextInput({
   placeholder = '',
   value = '',
   onChangeText,
@@ -115,7 +116,7 @@ function TextInput({
   accessibilityLabel,
   accessibilityHint,
   ...rest
-}) {
+}, ref) {
   // Track focus state to hide placeholder when focused
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isHovered, setIsHovered] = (0, _react.useState)(false);
@@ -230,7 +231,7 @@ function TextInput({
       importantForAccessibility: "no",
       children: processedLeading
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-      ref: inputRef,
+      ref: (0, _reactUtils.mergeRefs)(inputRef, ref),
       accessibilityLabel: undefined,
       accessibilityHint: accessibilityHint,
       placeholder: displayPlaceholder,
@@ -263,7 +264,7 @@ function TextInput({
     style: containerStyleArray,
     children: inner
   });
-}
+});
 
 /**
  * TextInput.Search component that mirrors the Figma "textInput.search" component.
@@ -285,7 +286,7 @@ function TextInput({
  * @param {Object} [props.rest] - Additional props passed to the underlying TextInput
  */
 
-function TextInputSearch({
+const TextInputSearch = /*#__PURE__*/(0, _react.forwardRef)(function TextInputSearch({
   placeholder = 'Search',
   value = '',
   onChangeText,
@@ -298,7 +299,7 @@ function TextInputSearch({
   onFocus,
   onBlur,
   ...rest
-}) {
+}, ref) {
   // Resolve icon tokens for default search icon
   const iconColor = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/color', modes) || '#24262b';
   const iconSize = (0, _figmaVariablesResolver.getVariableByName)('textInput/icon/size', modes) || 18;
@@ -335,10 +336,15 @@ function TextInputSearch({
     textInputProps.accessibilityHint = accessibilityHint;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TextInput, {
+    ref: ref,
     ...textInputProps
   });
-}
+});
+
+// Attach Search as a property of TextInput using namespace pattern. The base
+// component is created via forwardRef, so we compose the static onto a typed
+// alias to keep `TextInput.Search` strongly typed.
 
-// Attach Search as a property of TextInput using namespace pattern
+const TextInput = TextInputBase;
 TextInput.Search = TextInputSearch;
 var _default = exports.default = TextInput;

package/lib/commonjs/components/TextSegment/TextSegment.js

@@ -0,0 +1,118 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
+var _reactUtils = require("../../utils/react-utils");
+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); }
+/**
+ * A single coloured run inside a {@link TextSegment}. Each run can carry its own
+ * `modes`, so individual fragments of the same paragraph can resolve different
+ * design tokens (most commonly a different `text/foreground` colour) while still
+ * flowing — and wrapping — inline as one continuous line of text.
+ */
+
+const TEXT_ALIGN_MAP = {
+  Left: 'left',
+  Center: 'center'
+};
+
+/**
+ * Resolves the `text/*` design tokens for a given modes object into an RN
+ * `TextStyle`. Shared by the outer paragraph and every inline run so a run that
+ * only overrides colour still inherits the family/size/weight/spacing.
+ */
+function resolveTextStyle(modes) {
+  return {
+    color: (0, _figmaVariablesResolver.getVariableByName)('text/foreground', modes) ?? '#000000',
+    fontFamily: (0, _figmaVariablesResolver.getVariableByName)('text/fontFamily', modes) ?? 'JioType',
+    fontSize: (0, _figmaVariablesResolver.getVariableByName)('text/fontSize', modes) ?? 14,
+    fontWeight: String((0, _figmaVariablesResolver.getVariableByName)('text/fontWeight', modes) ?? '500'),
+    lineHeight: (0, _figmaVariablesResolver.getVariableByName)('text/lineHeight', modes) ?? 20,
+    letterSpacing: (0, _figmaVariablesResolver.getVariableByName)('text/letterSpacing', modes) ?? -0.5
+  };
+}
+
+/**
+ * TextSegment — composes several differently-styled text runs into a single
+ * paragraph that wraps as one continuous line.
+ *
+ * On the web you would reach for `<span>`s inside a `<p>`; the React Native
+ * equivalent is nesting `<Text>` inside a parent `<Text>`. That nesting is the
+ * whole trick: sibling `<View>`s would lay out as flex blocks and break onto
+ * rigid rows, but nested `<Text>` nodes flow inline and wrap naturally at word
+ * boundaries — exactly like a real paragraph — while each nested run keeps its
+ * own colour/weight resolved from its own `modes`.
+ *
+ * Two equivalent ways to author content:
+ *  - **`segments` prop** — declarative array of `{ text, modes }` runs.
+ *  - **`children`** — pass library `Text` elements (or strings); the parent
+ *    `modes` cascade down and each child may override its own.
+ *
+ * @example Data-driven
+ * ```tsx
+ * <TextSegment
+ *   segments={[
+ *     { text: 'Upsell message ' },
+ *     { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+ *   ]}
+ * />
+ * ```
+ *
+ * @example Compositional
+ * ```tsx
+ * <TextSegment numberOfLines={2}>
+ *   <Text>Pay with </Text>
+ *   <Text modes={{ 'Text Appearance': 'Primary' }}>JioFinance+</Text>
+ *   <Text> and earn rewards on every transaction.</Text>
+ * </TextSegment>
+ * ```
+ */
+function TextSegment({
+  segments,
+  children,
+  textAlign = 'Left',
+  numberOfLines,
+  modes = _reactUtils.EMPTY_MODES,
+  style
+}) {
+  const baseStyle = (0, _react.useMemo)(() => ({
+    ...resolveTextStyle(modes),
+    textAlign: TEXT_ALIGN_MAP[textAlign]
+  }), [modes, textAlign]);
+
+  // children win over `segments` so the compositional API can always override.
+  const hasChildren = children !== undefined && children !== null && children !== false;
+  const renderedSegments = (0, _react.useMemo)(() => {
+    if (hasChildren || !segments?.length) return null;
+    return segments.map((run, index) => {
+      // Parent modes first, then the run's own modes override them — mirrors the
+      // merge order used by `cloneChildrenWithModes` for the children API.
+      const runModes = run.modes ? {
+        ...modes,
+        ...run.modes
+      } : modes;
+      const runStyle = run.modes ? resolveTextStyle(runModes) : undefined;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: [runStyle, run.style],
+        children: run.text
+      }, index);
+    });
+  }, [segments, hasChildren, modes]);
+
+  // The cascade: every child (and its descendants) receives the parent modes so
+  // nested library `Text` runs resolve their tokens against the same baseline,
+  // while still honouring any per-child `modes` override.
+  const content = hasChildren ? (0, _reactUtils.cloneChildrenWithModes)(children, modes) : renderedSegments;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+    style: [baseStyle, style],
+    numberOfLines: numberOfLines,
+    children: content
+  });
+}
+var _default = exports.default = /*#__PURE__*/_react.default.memo(TextSegment);