jfs-components 0.0.72 → 0.0.74

package/lib/commonjs/components/FormField/FormField.js

@@ -7,223 +7,373 @@ 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 _JFSThemeProvider = require("../../design-tokens/JFSThemeProvider");
-var _TextInput = _interopRequireDefault(require("../TextInput/TextInput"));
+var _reactUtils = require("../../utils/react-utils");
 var _SupportText = _interopRequireDefault(require("../SupportText/SupportText"));
+var _Icon = _interopRequireDefault(require("../../icons/Icon"));
+var _Form = require("../Form/Form");
 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); }
-function useFormField(props) {
-  const {
-    type = 'text',
-    isDisabled = false,
-    isInvalid = false,
-    supportText,
-    errorMessage,
-    modes: propModes = _reactUtils.EMPTY_MODES,
-    onFocus,
-    onBlur
-  } = props;
-  const {
-    modes: globalModes
-  } = (0, _JFSThemeProvider.useTokens)();
-  const baseModes = (0, _react.useMemo)(() => ({
-    ...globalModes,
-    ...propModes
-  }), [globalModes, propModes]);
-  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
 
-  // Merge FormField States collection based on focus
-  const modes = (0, _react.useMemo)(() => ({
-    ...baseModes,
-    'FormField States': isFocused ? 'Active' : 'Idle'
-  }), [baseModes, isFocused]);
-
-  // -- Label tokens (from "FormField / Output" collection) --
-  const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#0c0d10';
-  const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
-  const labelFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 10) || 14;
-  const labelLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 10) || 17;
-  const labelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes) || '500';
-  const gap = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 10) || 8;
-
-  // -- Input tokens (from "FormField / Output" + "FormField States" collections) --
-  const inputPaddingH = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 10) || 12;
-  const inputGap = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 10) || 8;
-  const inputRadius = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 10) || 8;
-  const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
-  const inputFontSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 10) || 16;
-  const inputLineHeight = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 10) || 45;
-  const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
-  const inputFontWeight = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes) || '400';
-  const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/label/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
-  const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('states/formField/input/border/color', modes) || (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
-  const inputBorderSize = parseInt((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 10) || 1;
-
-  // -- Styles --
-  const labelStyle = (0, _react.useMemo)(() => ({
-    color: labelColor,
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
-  const wrapperStyle = (0, _react.useMemo)(() => ({
-    gap,
-    opacity: isDisabled ? 0.5 : 1
-  }), [gap, isDisabled]);
-  const requiredIndicatorStyle = (0, _react.useMemo)(() => ({
-    color: '#d93d3d',
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
-
-  // Style overrides for the input row, sourced from formField/input/* tokens
-  const inputContainerStyle = (0, _react.useMemo)(() => ({
-    backgroundColor: inputBackground,
-    borderColor: inputBorderColor,
-    borderWidth: inputBorderSize,
-    borderRadius: inputRadius,
-    paddingHorizontal: inputPaddingH,
-    paddingVertical: 0,
-    gap: inputGap
-  }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap]);
-  const inputTextStyle = (0, _react.useMemo)(() => ({
-    color: inputTextColor,
-    fontSize: inputFontSize,
-    lineHeight: inputLineHeight,
-    fontFamily: inputFontFamily,
-    fontWeight: inputFontWeight
-  }), [inputTextColor, inputFontSize, inputLineHeight, inputFontFamily, inputFontWeight]);
-
-  // -- Support text logic --
-  const supportStatus = isInvalid ? 'Error' : 'Neutral';
-  const supportLabel = isInvalid && errorMessage ? errorMessage : supportText;
-
-  // -- Input type derived props --
-  const secureTextEntry = type === 'password';
-  const keyboardType = type === 'email' ? 'email-address' : 'default';
-  const autoCapitalize = type === 'email' || type === 'password' ? 'none' : 'sentences';
-
-  // -- Event handlers --
-  const handleFocus = (0, _react.useCallback)(e => {
-    setIsFocused(true);
-    onFocus?.(e);
-  }, [onFocus]);
-  const handleBlur = (0, _react.useCallback)(e => {
-    setIsFocused(false);
-    onBlur?.(e);
-  }, [onBlur]);
-  return {
-    modes,
-    labelStyle,
-    wrapperStyle,
-    requiredIndicatorStyle,
-    inputContainerStyle,
-    inputTextStyle,
-    supportStatus,
-    supportLabel,
-    secureTextEntry,
-    keyboardType,
-    autoCapitalize,
-    handleFocus,
-    handleBlur
-  };
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function toFontWeight(value, fallback) {
+  if (typeof value === 'number') return value.toString();
+  if (typeof value === 'string' && value.length > 0) return value;
+  return fallback;
+}
+function useFormFieldTokens(modes) {
+  return (0, _react.useMemo)(() => {
+    // Wrapper
+    const gap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/gap', modes), 8);
+
+    // Label (Figma: 14/17 medium, color #0c0d10)
+    const labelColor = (0, _figmaVariablesResolver.getVariableByName)('formField/label/color', modes) || '#0c0d10';
+    const labelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/label/lineHeight', modes), 17);
+    const labelFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('formField/label/fontWeight', modes), '500');
+
+    // Input row (Figma: 12 px padding-h, 8 px gap, 8 px radius, 1 px border)
+    const inputPaddingH = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/padding/horizontal', modes), 12);
+    const inputGap = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/gap', modes), 8);
+    const inputRadius = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/radius', modes), 8);
+    const inputBorderSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/border/size', modes), 1);
+
+    // Input text (Figma: 16/45 regular)
+    const inputFontSize = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontSize', modes), 16);
+    const inputLineHeight = toNumber((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/lineHeight', modes), 45);
+    const inputFontFamily = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontWeight = toFontWeight((0, _figmaVariablesResolver.getVariableByName)('formField/input/label/fontWeight', modes), '400');
+    const inputBackground = (0, _figmaVariablesResolver.getVariableByName)('formField/input/background', modes) || '#ffffff';
+    const inputBorderColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes) || '#b5b6b7';
+    if (__DEV__) {
+      console.warn('[FormField] border color (modes changed)', {
+        'FormField States': modes['FormField States'],
+        inputBorderColor,
+        'formField/input/border/color': (0, _figmaVariablesResolver.getVariableByName)('formField/input/border/color', modes)
+      });
+    }
+    const inputTextColor = (0, _figmaVariablesResolver.getVariableByName)('formField/input/label/color', modes) || '#24262b';
+    return {
+      gap,
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+      inputPaddingH,
+      inputGap,
+      inputRadius,
+      inputBorderSize,
+      inputFontSize,
+      inputLineHeight,
+      inputFontFamily,
+      inputFontWeight,
+      inputBackground,
+      inputBorderColor,
+      inputTextColor
+    };
+  }, [modes]);
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+function deriveTypeProps(type) {
+  switch (type) {
+    case 'password':
+      return {
+        secureTextEntry: true,
+        keyboardType: 'default',
+        autoCapitalize: 'none',
+        autoComplete: 'password',
+        textContentType: 'password'
+      };
+    case 'email':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'email-address',
+        autoCapitalize: 'none',
+        autoComplete: 'email',
+        textContentType: 'emailAddress'
+      };
+    case 'number':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'numeric',
+        autoCapitalize: 'none',
+        autoComplete: 'off',
+        textContentType: 'none'
+      };
+    case 'phone':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'phone-pad',
+        autoCapitalize: 'none',
+        autoComplete: 'tel',
+        textContentType: 'telephoneNumber'
+      };
+    case 'url':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'url',
+        autoCapitalize: 'none',
+        autoComplete: 'url',
+        textContentType: 'URL'
+      };
+    case 'search':
+      return {
+        secureTextEntry: false,
+        keyboardType: 'default',
+        autoCapitalize: 'none',
+        autoComplete: 'off',
+        textContentType: 'none'
+      };
+    case 'text':
+    default:
+      return {
+        secureTextEntry: false,
+        keyboardType: 'default',
+        autoCapitalize: 'sentences',
+        autoComplete: 'off',
+        textContentType: 'none'
+      };
+  }
+}
+function firstError(error) {
+  if (!error) return undefined;
+  if (Array.isArray(error)) return error[0];
+  return error;
 }
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
 function FormField({
   label,
   placeholder,
-  value = '',
+  value,
   onChangeText,
   type = 'text',
+  name,
   leading,
   trailing,
   leadingIconName,
   isRequired = false,
   isDisabled = false,
   isInvalid = false,
+  isReadOnly = false,
   supportText,
   errorMessage,
-  modes = _reactUtils.EMPTY_MODES,
+  maxLength,
+  autoFocus = false,
+  modes: propModes = _reactUtils.EMPTY_MODES,
   style,
+  inputStyle,
+  inputTextStyle,
   onFocus,
   onBlur,
+  onSubmitEditing,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  testID
 }) {
+  // -- Form context integration -------------------------------------------
+  const formCtx = (0, _Form.useFormContext)();
+  const formError = name && formCtx ? firstError(formCtx.validationErrors[name]) : undefined;
+  const resolvedIsInvalid = isInvalid || Boolean(formError);
+  const resolvedErrorMessage = errorMessage ?? formError;
+
+  // -- Mode resolution ----------------------------------------------------
   const {
-    modes: resolvedModes,
-    labelStyle,
-    wrapperStyle,
-    requiredIndicatorStyle,
-    inputContainerStyle,
-    inputTextStyle,
-    supportStatus,
-    supportLabel,
-    secureTextEntry,
-    keyboardType,
-    autoCapitalize,
-    handleFocus,
-    handleBlur
-  } = useFormField({
-    type,
-    isDisabled,
-    isInvalid,
-    supportText,
-    errorMessage,
-    modes,
-    onFocus,
-    onBlur
-  });
+    modes: globalModes
+  } = (0, _JFSThemeProvider.useTokens)();
+  const baseModes = (0, _react.useMemo)(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const interactive = !isDisabled && !isReadOnly;
+
+  // FormField States cascade — error > read only/disabled > active (focused) > idle.
+  // Disabled maps to "Read Only" since there is no dedicated disabled mode and
+  // the visual treatment is closest. This is only the DEFAULT — an explicit
+  // `modes['FormField States']` passed in via props or the global theme
+  // always wins so consumers can force a state (e.g. for documentation).
+  const derivedStateMode = (0, _react.useMemo)(() => {
+    if (resolvedIsInvalid) return 'Error';
+    if (isReadOnly || isDisabled) return 'Read Only';
+    if (isFocused) return 'Active';
+    return 'Idle';
+  }, [resolvedIsInvalid, isReadOnly, isDisabled, isFocused]);
+  const modes = (0, _react.useMemo)(() => {
+    const explicitStateMode = baseModes['FormField States'];
+    const stateMode = explicitStateMode ?? derivedStateMode;
+    const explicitStatus = baseModes.Status;
+    // Default SupportText token mode is Auto (Figma resolves foreground from
+    // context). Pass modes={{ Status: 'Error' }} etc. to override.
+    const status = explicitStatus ?? 'Auto';
+    return {
+      ...baseModes,
+      'FormField States': stateMode,
+      Status: status
+    };
+  }, [baseModes, derivedStateMode]);
+  const tokens = useFormFieldTokens(modes);
+
+  // -- Type-derived input props ------------------------------------------
+  const typeProps = (0, _react.useMemo)(() => deriveTypeProps(type), [type]);
+
+  // -- Event handlers ----------------------------------------------------
+  const handleFocus = (0, _react.useCallback)(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = (0, _react.useCallback)(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const handleChangeText = (0, _react.useCallback)(next => {
+    onChangeText?.(next);
+    if (name && formCtx) formCtx.onFieldChange(name);
+  }, [onChangeText, name, formCtx]);
+
+  // -- Styles ------------------------------------------------------------
+  const wrapperStyle = (0, _react.useMemo)(() => ({
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens.gap, isDisabled]);
+  const labelRowStyle = (0, _react.useMemo)(() => ({
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  }), []);
+  const labelTextStyle = (0, _react.useMemo)(() => ({
+    color: tokens.labelColor,
+    fontFamily: tokens.labelFontFamily,
+    fontSize: tokens.labelFontSize,
+    lineHeight: tokens.labelLineHeight,
+    fontWeight: tokens.labelFontWeight
+  }), [tokens.labelColor, tokens.labelFontFamily, tokens.labelFontSize, tokens.labelLineHeight, tokens.labelFontWeight]);
+  const requiredIndicatorStyle = (0, _react.useMemo)(() => ({
+    ...labelTextStyle,
+    color: '#d93d3d'
+  }), [labelTextStyle]);
+  const inputRowStyle = (0, _react.useMemo)(() => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: tokens.inputBackground,
+    borderColor: tokens.inputBorderColor,
+    borderWidth: tokens.inputBorderSize,
+    borderStyle: 'solid',
+    borderRadius: tokens.inputRadius,
+    paddingHorizontal: tokens.inputPaddingH,
+    paddingVertical: 0,
+    gap: tokens.inputGap,
+    minHeight: tokens.inputLineHeight,
+    width: '100%'
+  }), [tokens.inputBackground, tokens.inputBorderColor, tokens.inputBorderSize, tokens.inputRadius, tokens.inputPaddingH, tokens.inputGap, tokens.inputLineHeight]);
+  const inputTextStyles = (0, _react.useMemo)(() => ({
+    flex: 1,
+    color: tokens.inputTextColor,
+    fontFamily: tokens.inputFontFamily,
+    fontSize: tokens.inputFontSize,
+    lineHeight: tokens.inputLineHeight,
+    fontWeight: tokens.inputFontWeight,
+    padding: 0,
+    margin: 0,
+    // Remove the default web focus ring; the input row's border acts as the
+    // focus indicator via the FormField States cascade.
+    outlineStyle: 'none',
+    outlineWidth: 0,
+    outlineColor: 'transparent'
+  }), [tokens.inputTextColor, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputLineHeight, tokens.inputFontWeight]);
+  const placeholderColor = (0, _react.useMemo)(() => {
+    // Slightly muted version of the resolved text color, mirroring the
+    // sibling TextInput behavior.
+    const c = tokens.inputTextColor;
+    if (typeof c !== 'string') return undefined;
+    if (c.startsWith('rgb(')) {
+      return c.replace('rgb(', 'rgba(').replace(')', ', 0.55)');
+    }
+    return '#888a8d';
+  }, [tokens.inputTextColor]);
+
+  // -- Slots --------------------------------------------------------------
+  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+    name: leadingIconName,
+    size: 20,
+    color: tokens.inputTextColor
+  }) : null);
+  const processedLeading = leadingElement ? (0, _reactUtils.cloneChildrenWithModes)(leadingElement, modes) : null;
+  const processedTrailing = trailing ? (0, _reactUtils.cloneChildrenWithModes)(trailing, modes) : null;
+
+  // -- Support text -------------------------------------------------------
+  const supportStatus = resolvedIsInvalid ? 'Error' : 'Neutral';
+  const supportLabel = resolvedIsInvalid && resolvedErrorMessage ? resolvedErrorMessage : supportText;
+
+  // -- Accessibility ------------------------------------------------------
   const resolvedA11yLabel = accessibilityLabel || label || placeholder || 'Form field';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [wrapperStyle, style],
     pointerEvents: isDisabled ? 'none' : 'auto',
-    accessible: true,
-    accessibilityRole: "none",
-    accessibilityLabel: resolvedA11yLabel,
-    accessibilityState: {
-      disabled: isDisabled
-    },
+    testID: testID,
+    accessible: false,
     children: [label != null && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'baseline'
-      },
+      style: labelRowStyle,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: labelStyle,
+        style: labelTextStyle,
         children: label
       }), isRequired && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
-      placeholder: placeholder || '',
-      value: value,
-      ...(onChangeText ? {
-        onChangeText
-      } : {}),
-      leading: leading,
-      trailing: trailing,
-      leadingIconName: leadingIconName || 'ic_search',
-      modes: resolvedModes,
-      style: inputContainerStyle,
-      inputStyle: inputTextStyle,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      secureTextEntry: secureTextEntry,
-      keyboardType: keyboardType,
-      autoCapitalize: autoCapitalize,
-      editable: !isDisabled,
-      accessibilityLabel: resolvedA11yLabel,
-      accessibilityHint: accessibilityHint || ''
-    }), supportLabel != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: [inputRowStyle, inputStyle],
+      children: [processedLeading != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: processedLeading
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
+        style: [inputTextStyles, inputTextStyle],
+        value: value ?? '',
+        onChangeText: handleChangeText,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onSubmitEditing: onSubmitEditing,
+        placeholder: placeholder ?? '',
+        placeholderTextColor: placeholderColor,
+        editable: interactive,
+        maxLength: maxLength,
+        autoFocus: autoFocus,
+        secureTextEntry: typeProps.secureTextEntry,
+        keyboardType: typeProps.keyboardType,
+        autoCapitalize: typeProps.autoCapitalize,
+        autoComplete: typeProps.autoComplete,
+        textContentType: typeProps.textContentType,
+        accessibilityLabel: resolvedA11yLabel,
+        accessibilityHint: accessibilityHint
+      }), processedTrailing != null && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: processedTrailing
+      })]
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SupportText.default, {
       label: supportLabel,
       status: supportStatus,
-      modes: resolvedModes
+      modes: modes
     })]
   });
 }

package/lib/commonjs/components/LinearMeter/LinearMeter.js

@@ -9,6 +9,7 @@ var _reactNative = require("react-native");
 var _figmaVariablesResolver = require("../../design-tokens/figma-variables-resolver");
 var _reactUtils = require("../../utils/react-utils");
 var _MoneyValue = _interopRequireDefault(require("../MoneyValue/MoneyValue"));
+var _LinearProgress = _interopRequireDefault(require("../LinearProgress/LinearProgress"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const LinearMeterLabel = ({
@@ -46,14 +47,6 @@ const LinearMeter = ({
   ...rest
 }) => {
   const gap = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/gap', modes);
-  // Track tokens
-  const trackBg = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/track/background', modes);
-  const trackHeight = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/track/height', modes);
-  const trackRadius = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/track/radius', modes);
-
-  // Indicator tokens
-  const indicatorBg = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/indicator/background', modes);
-  const indicatorRadius = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/indicator/radius', modes);
 
   // Wrap tokens
   const wrapGap = (0, _figmaVariablesResolver.getVariableByName)('linearMeter/wrap/gap', modes);
@@ -91,10 +84,6 @@ const LinearMeter = ({
     })]
   });
   const content = children ? childrenWithModes : defaultContent;
-
-  // Calculate width percentage
-  const clampedValue = Math.min(Math.max(value, 0), 1);
-  const widthPercent = `${clampedValue * 100}%`;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [{
       flexDirection: 'row',
@@ -102,22 +91,14 @@ const LinearMeter = ({
       gap
     }, style],
     ...rest,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: [{
-        flex: 1,
-        height: trackHeight,
-        backgroundColor: trackBg,
-        borderRadius: trackRadius,
-        overflow: 'hidden' // Ensure indicator stays inside
-      }, trackStyle],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-        style: [{
-          width: widthPercent,
-          height: '100%',
-          backgroundColor: indicatorBg,
-          borderRadius: indicatorRadius
-        }, indicatorStyle]
-      })
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.default, {
+      value: value,
+      modes: modes,
+      style: {
+        flex: 1
+      },
+      trackStyle: trackStyle,
+      indicatorStyle: indicatorStyle
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: {
         flexDirection: 'row',