jfs-components 0.0.72 → 0.0.74

package/lib/module/components/FormField/FormField.js

@@ -1,223 +1,373 @@
 "use strict";
 
-import React, { useState, useMemo, useCallback } from 'react';
-import { View, Text } from 'react-native';
+import React, { useCallback, useMemo, useState } from 'react';
+import { View, Text, TextInput as RNTextInput } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import { EMPTY_MODES } from '../../utils/react-utils';
 import { useTokens } from '../../design-tokens/JFSThemeProvider';
-import TextInput from '../TextInput/TextInput';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
 import SupportText from '../SupportText/SupportText';
+import Icon from '../../icons/Icon';
+import { useFormContext } from '../Form/Form';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function useFormField(props) {
-  const {
-    type = 'text',
-    isDisabled = false,
-    isInvalid = false,
-    supportText,
-    errorMessage,
-    modes: propModes = EMPTY_MODES,
-    onFocus,
-    onBlur
-  } = props;
-  const {
-    modes: globalModes
-  } = useTokens();
-  const baseModes = useMemo(() => ({
-    ...globalModes,
-    ...propModes
-  }), [globalModes, propModes]);
-  const [isFocused, setIsFocused] = useState(false);
+// ---------------------------------------------------------------------------
+// Token resolution
+// ---------------------------------------------------------------------------
 
-  // Merge FormField States collection based on focus
-  const modes = useMemo(() => ({
-    ...baseModes,
-    'FormField States': isFocused ? 'Active' : 'Idle'
-  }), [baseModes, isFocused]);
-
-  // -- Label tokens (from "FormField / Output" collection) --
-  const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
-  const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
-  const labelFontSize = parseInt(getVariableByName('formField/label/fontSize', modes), 10) || 14;
-  const labelLineHeight = parseInt(getVariableByName('formField/label/lineHeight', modes), 10) || 17;
-  const labelFontWeight = getVariableByName('formField/label/fontWeight', modes) || '500';
-  const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8;
-
-  // -- Input tokens (from "FormField / Output" + "FormField States" collections) --
-  const inputPaddingH = parseInt(getVariableByName('formField/input/padding/horizontal', modes), 10) || 12;
-  const inputGap = parseInt(getVariableByName('formField/input/gap', modes), 10) || 8;
-  const inputRadius = parseInt(getVariableByName('formField/input/radius', modes), 10) || 8;
-  const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
-  const inputFontSize = parseInt(getVariableByName('formField/input/label/fontSize', modes), 10) || 16;
-  const inputLineHeight = parseInt(getVariableByName('formField/input/label/lineHeight', modes), 10) || 45;
-  const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
-  const inputFontWeight = getVariableByName('formField/input/label/fontWeight', modes) || '400';
-  const inputTextColor = getVariableByName('states/formField/input/label/color', modes) || getVariableByName('formField/input/label/color', modes) || '#24262b';
-  const inputBorderColor = getVariableByName('states/formField/input/border/color', modes) || getVariableByName('formField/input/border/color', modes) || '#b5b6b7';
-  const inputBorderSize = parseInt(getVariableByName('formField/input/border/size', modes), 10) || 1;
-
-  // -- Styles --
-  const labelStyle = useMemo(() => ({
-    color: labelColor,
-    fontFamily: labelFontFamily,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight
-  }), [labelColor, labelFontFamily, labelFontSize, labelLineHeight, labelFontWeight]);
-  const wrapperStyle = useMemo(() => ({
-    gap,
-    opacity: isDisabled ? 0.5 : 1
-  }), [gap, isDisabled]);
-  const requiredIndicatorStyle = 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 = useMemo(() => ({
-    backgroundColor: inputBackground,
-    borderColor: inputBorderColor,
-    borderWidth: inputBorderSize,
-    borderRadius: inputRadius,
-    paddingHorizontal: inputPaddingH,
-    paddingVertical: 0,
-    gap: inputGap
-  }), [inputBackground, inputBorderColor, inputBorderSize, inputRadius, inputPaddingH, inputGap]);
-  const inputTextStyle = 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 = useCallback(e => {
-    setIsFocused(true);
-    onFocus?.(e);
-  }, [onFocus]);
-  const handleBlur = 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 useMemo(() => {
+    // Wrapper
+    const gap = toNumber(getVariableByName('formField/gap', modes), 8);
+
+    // Label (Figma: 14/17 medium, color #0c0d10)
+    const labelColor = getVariableByName('formField/label/color', modes) || '#0c0d10';
+    const labelFontFamily = getVariableByName('formField/label/fontFamily', modes) || 'JioType Var';
+    const labelFontSize = toNumber(getVariableByName('formField/label/fontSize', modes), 14);
+    const labelLineHeight = toNumber(getVariableByName('formField/label/lineHeight', modes), 17);
+    const labelFontWeight = toFontWeight(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(getVariableByName('formField/input/padding/horizontal', modes), 12);
+    const inputGap = toNumber(getVariableByName('formField/input/gap', modes), 8);
+    const inputRadius = toNumber(getVariableByName('formField/input/radius', modes), 8);
+    const inputBorderSize = toNumber(getVariableByName('formField/input/border/size', modes), 1);
+
+    // Input text (Figma: 16/45 regular)
+    const inputFontSize = toNumber(getVariableByName('formField/input/label/fontSize', modes), 16);
+    const inputLineHeight = toNumber(getVariableByName('formField/input/label/lineHeight', modes), 45);
+    const inputFontFamily = getVariableByName('formField/input/label/fontFamily', modes) || 'JioType Var';
+    const inputFontWeight = toFontWeight(getVariableByName('formField/input/label/fontWeight', modes), '400');
+    const inputBackground = getVariableByName('formField/input/background', modes) || '#ffffff';
+    const inputBorderColor = 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': getVariableByName('formField/input/border/color', modes)
+      });
+    }
+    const inputTextColor = 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 = EMPTY_MODES,
+  maxLength,
+  autoFocus = false,
+  modes: propModes = EMPTY_MODES,
   style,
+  inputStyle,
+  inputTextStyle,
   onFocus,
   onBlur,
+  onSubmitEditing,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  testID
 }) {
+  // -- Form context integration -------------------------------------------
+  const formCtx = 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
+  } = useTokens();
+  const baseModes = useMemo(() => ({
+    ...globalModes,
+    ...propModes
+  }), [globalModes, propModes]);
+  const [isFocused, setIsFocused] = 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 = useMemo(() => {
+    if (resolvedIsInvalid) return 'Error';
+    if (isReadOnly || isDisabled) return 'Read Only';
+    if (isFocused) return 'Active';
+    return 'Idle';
+  }, [resolvedIsInvalid, isReadOnly, isDisabled, isFocused]);
+  const modes = 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 = useMemo(() => deriveTypeProps(type), [type]);
+
+  // -- Event handlers ----------------------------------------------------
+  const handleFocus = useCallback(e => {
+    setIsFocused(true);
+    onFocus?.(e);
+  }, [onFocus]);
+  const handleBlur = useCallback(e => {
+    setIsFocused(false);
+    onBlur?.(e);
+  }, [onBlur]);
+  const handleChangeText = useCallback(next => {
+    onChangeText?.(next);
+    if (name && formCtx) formCtx.onFieldChange(name);
+  }, [onChangeText, name, formCtx]);
+
+  // -- Styles ------------------------------------------------------------
+  const wrapperStyle = useMemo(() => ({
+    gap: tokens.gap,
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens.gap, isDisabled]);
+  const labelRowStyle = useMemo(() => ({
+    flexDirection: 'row',
+    alignItems: 'baseline'
+  }), []);
+  const labelTextStyle = 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 = useMemo(() => ({
+    ...labelTextStyle,
+    color: '#d93d3d'
+  }), [labelTextStyle]);
+  const inputRowStyle = 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 = 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 = 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__*/_jsx(Icon, {
+    name: leadingIconName,
+    size: 20,
+    color: tokens.inputTextColor
+  }) : null);
+  const processedLeading = leadingElement ? cloneChildrenWithModes(leadingElement, modes) : null;
+  const processedTrailing = trailing ? 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__*/_jsxs(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__*/_jsxs(View, {
-      style: {
-        flexDirection: 'row',
-        alignItems: 'baseline'
-      },
+      style: labelRowStyle,
       children: [/*#__PURE__*/_jsx(Text, {
-        style: labelStyle,
+        style: labelTextStyle,
         children: label
       }), isRequired && /*#__PURE__*/_jsx(Text, {
         style: requiredIndicatorStyle,
         children: " *"
       })]
-    }), /*#__PURE__*/_jsx(TextInput, {
-      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__*/_jsx(SupportText, {
+    }), /*#__PURE__*/_jsxs(View, {
+      style: [inputRowStyle, inputStyle],
+      children: [processedLeading != null && /*#__PURE__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: processedLeading
+      }), /*#__PURE__*/_jsx(RNTextInput, {
+        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__*/_jsx(View, {
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no",
+        children: processedTrailing
+      })]
+    }), supportLabel != null && supportLabel !== '' && /*#__PURE__*/_jsx(SupportText, {
       label: supportLabel,
       status: supportStatus,
-      modes: resolvedModes
+      modes: modes
     })]
   });
 }

package/lib/module/components/LinearMeter/LinearMeter.js

@@ -5,6 +5,7 @@ import { View, Text } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
+import LinearProgress from '../LinearProgress/LinearProgress';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const LinearMeterLabel = ({
   children,
@@ -41,14 +42,6 @@ const LinearMeter = ({
   ...rest
 }) => {
   const gap = getVariableByName('linearMeter/gap', modes);
-  // Track tokens
-  const trackBg = getVariableByName('linearMeter/track/background', modes);
-  const trackHeight = getVariableByName('linearMeter/track/height', modes);
-  const trackRadius = getVariableByName('linearMeter/track/radius', modes);
-
-  // Indicator tokens
-  const indicatorBg = getVariableByName('linearMeter/indicator/background', modes);
-  const indicatorRadius = getVariableByName('linearMeter/indicator/radius', modes);
 
   // Wrap tokens
   const wrapGap = getVariableByName('linearMeter/wrap/gap', modes);
@@ -86,10 +79,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__*/_jsxs(View, {
     style: [{
       flexDirection: 'row',
@@ -97,22 +86,14 @@ const LinearMeter = ({
       gap
     }, style],
     ...rest,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [{
-        flex: 1,
-        height: trackHeight,
-        backgroundColor: trackBg,
-        borderRadius: trackRadius,
-        overflow: 'hidden' // Ensure indicator stays inside
-      }, trackStyle],
-      children: /*#__PURE__*/_jsx(View, {
-        style: [{
-          width: widthPercent,
-          height: '100%',
-          backgroundColor: indicatorBg,
-          borderRadius: indicatorRadius
-        }, indicatorStyle]
-      })
+    children: [/*#__PURE__*/_jsx(LinearProgress, {
+      value: value,
+      modes: modes,
+      style: {
+        flex: 1
+      },
+      trackStyle: trackStyle,
+      indicatorStyle: indicatorStyle
     }), /*#__PURE__*/_jsx(View, {
       style: {
         flexDirection: 'row',

package/lib/module/components/LinearProgress/LinearProgress.js

@@ -0,0 +1,63 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const LinearProgress = ({
+  value = 0,
+  modes = EMPTY_MODES,
+  style,
+  trackStyle,
+  indicatorStyle,
+  ...rest
+}) => {
+  // The track and the progress indicator are intentionally rendered at
+  // different emphasis levels by default: the track sits in the
+  // background as a low-emphasis surface, while the progress indicator
+  // is the high-emphasis foreground. Defaults are placed *before* the
+  // user-provided modes spread, so callers can still override
+  // `Emphasis / DataViz` (or any other mode) via the `modes` prop.
+  const trackModes = {
+    'Emphasis': 'Low',
+    ...modes
+  };
+  const progressModes = {
+    'Emphasis': 'High',
+    ...modes
+  };
+  const trackHeight = getVariableByName('linearProgress/track/height', trackModes) ?? 8;
+  const trackRadius = getVariableByName('linearProgress/track/radius', trackModes) ?? 999;
+  const trackBg = getVariableByName('linearProgress/track/background', trackModes) ?? '#ede7ff';
+  const indicatorHeight = getVariableByName('linearProgress/indicator/height', progressModes) ?? 8;
+  const indicatorRadius = getVariableByName('linearProgress/indicator/radius', progressModes) ?? 999;
+  const indicatorBg = getVariableByName('linearProgress/indicator/background', progressModes) ?? '#5d00b5';
+  const clampedValue = Math.min(Math.max(value, 0), 1);
+  const widthPercent = `${clampedValue * 100}%`;
+  return /*#__PURE__*/_jsx(View, {
+    style: [{
+      height: trackHeight,
+      backgroundColor: trackBg,
+      borderRadius: trackRadius,
+      overflow: 'hidden',
+      width: '100%'
+    }, style, trackStyle],
+    accessibilityRole: "progressbar",
+    accessibilityValue: {
+      min: 0,
+      max: 1,
+      now: clampedValue
+    },
+    ...rest,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [{
+        width: widthPercent,
+        height: indicatorHeight,
+        backgroundColor: indicatorBg,
+        borderRadius: indicatorRadius
+      }, indicatorStyle]
+    })
+  });
+};
+export default LinearProgress;