jfs-components 0.0.74 → 0.0.78

package/src/components/PageHero/PageHero.tsx

@@ -32,6 +32,23 @@ export type PageHeroProps = {
    * `modes` are automatically cascaded into this slot.
    */
   buttonSlot?: React.ReactNode
+  /**
+   * Optional media element shown above the text block (eyebrow + headline).
+   *
+   * Intentionally typed as `React.ReactNode` so the consumer can bring any
+   * renderer they like — `<Image />`, `<IconCapsule />`, a Lottie player
+   * (`lottie-react-native` / `@lottiefiles/dotlottie-react`), an `<SvgXml />`
+   * from `react-native-svg`, a `<Video />` from `react-native-video`, a
+   * gradient view, or a custom illustration. The library deliberately does
+   * NOT wrap Lottie / video runtimes (they require native modules + pod
+   * autolinking on every consumer's app), so PageHero just allocates a
+   * token-sized container and lets the slot render whatever it wants.
+   *
+   * The slot is rendered inside a `width × height` box driven by
+   * `media/width` and `media/height` tokens (default 117×117). `modes` are
+   * automatically cascaded into the slot via `cloneChildrenWithModes`.
+   */
+  media?: React.ReactNode
   /** Mode configuration for design-token theming. */
   modes?: Record<string, any>
   /** Style overrides applied to the outer container. */
@@ -41,12 +58,14 @@ export type PageHeroProps = {
 
 /**
  * PageHero displays a centered hero block typically used at the top of a page
- * or feature screen. It contains an eyebrow line, a large headline, an optional
- * supporting line (e.g. price/timeline), and an optional action button.
+ * or feature screen. It contains an optional media slot (illustration / image
+ * / Lottie / SVG / video — consumer's choice), an eyebrow line, a large
+ * headline, an optional supporting line (e.g. price / timeline), and an
+ * optional action button.
  *
  * All visual values are resolved from Figma design tokens via
- * `getVariableByName`. The button slot cascades the active `modes` to its
- * children through `cloneChildrenWithModes`.
+ * `getVariableByName`. Slots cascade the active `modes` to their children
+ * through `cloneChildrenWithModes`.
  *
  * @component
  * @example
@@ -57,6 +76,13 @@ export type PageHeroProps = {
  *   supportingText="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
+ *   media={
+ *     <Image
+ *       imageSource={require('./assets/upgrade.png')}
+ *       width={117}
+ *       height={117}
+ *     />
+ *   }
  * />
  * ```
  */
@@ -69,6 +95,7 @@ function PageHero({
   onButtonPress,
   showButton = true,
   buttonSlot,
+  media,
   modes: propModes = EMPTY_MODES,
   style,
   testID,
@@ -86,6 +113,12 @@ function PageHero({
   const textWrapGap =
     Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
 
+  // Media slot box — matches the 117×117 frame in Figma (node 4540:7845).
+  // Tokens fall back to 117 when not defined in the variables collection,
+  // so the layout stays stable on consumers that haven't tokenized this yet.
+  const mediaWidth = Number(getVariableByName('media/width', modes)) || 117
+  const mediaHeight = Number(getVariableByName('media/height', modes)) || 117
+
   const eyebrowColor =
     getVariableByName('PageHero/eyebrow/color', modes) || '#ffffff'
   const eyebrowFontFamily =
@@ -183,8 +216,32 @@ function PageHero({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttonSlot, showButton, buttonLabel, onButtonPress, modes])
 
+  // Sized container for the media slot. Always rendered when `media` is
+  // provided, so the slot has a predictable box (matches Figma frame
+  // 4540:7845 — 117×117 by default) even if the inner element omits its
+  // own width/height. `overflow: 'hidden'` mirrors the Figma frame's
+  // `clipsContent` so a slightly oversized illustration doesn't break
+  // the centered layout.
+  const mediaContent = useMemo<React.ReactNode>(() => {
+    if (media === undefined || media === null) return null
+    return (
+      <View
+        style={{
+          width: mediaWidth,
+          height: mediaHeight,
+          alignItems: 'center',
+          justifyContent: 'center',
+          overflow: 'hidden',
+        }}
+      >
+        {cloneChildrenWithModes(media, modes)}
+      </View>
+    )
+  }, [media, mediaWidth, mediaHeight, modes])
+
   return (
     <View style={[containerStyle, style]} testID={testID}>
+      {mediaContent}
       <View style={textWrapStyle}>
         {eyebrow ? <Text style={eyebrowStyle}>{eyebrow}</Text> : null}
         {headline ? <Text style={headlineStyle}>{headline}</Text> : null}

package/src/components/RechargeCard/RechargeCard.tsx

@@ -1,11 +1,26 @@
-import React, { isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle } from 'react-native';
+import React from 'react';
+import { View, Text, type ViewStyle } from 'react-native';
 import ButtonGroup from '../ButtonGroup/ButtonGroup';
 import AvatarGroup from '../AvatarGroup/AvatarGroup';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import MoneyValue from '../MoneyValue/MoneyValue';
-import Button from '../Button/Button';
+
+// Defaults applied to the inner ButtonGroup so the card matches Figma out of
+// the box. They are spread *before* the caller's `modes` so any consumer can
+// override an individual key (e.g. swap the size to "M").
+const DEFAULT_BUTTON_GROUP_MODES: Record<string, string> = {
+    AppearanceBrand: 'Secondary',
+    'Button / Size': 'S',
+    Emphasis: 'High',
+};
+
+// Defaults applied to the inner MoneyValue so the price renders at the
+// 36 px / 900-weight scale defined for cards in Figma. Same merge rule as
+// the button group — consumer `modes` override these.
+const DEFAULT_MONEY_VALUE_MODES: Record<string, string> = {
+    Context3: 'Balance & Cards',
+};
 
 
 export type RechargeCardProps = {
@@ -66,17 +81,19 @@ export default function RechargeCard({
     modes = EMPTY_MODES,
     style,
 }: RechargeCardProps) {
-    // Container Tokens
-    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#f6f3ff';
+    // Container Tokens (defaults mirror Figma node 2235:937).
+    const backgroundColor = getVariableByName('rechargeCard/background', modes) || '#ffffff';
     const paddingHorizontal = parseInt(getVariableByName('rechargeCard/padding/horizontal', modes) || 16, 10);
     const paddingVertical = parseInt(getVariableByName('rechargeCard/padding/vertical', modes) || 20, 10);
     const gap = parseInt(getVariableByName('rechargeCard/gap', modes) || 20, 10);
     const radius = parseInt(getVariableByName('rechargeCard/radius', modes) || 20, 10);
-    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 328, 10);
+    const minWidth = parseInt(getVariableByName('rechargeCard/minWidth', modes) || 312, 10);
+    const strokeWidth = parseInt(getVariableByName('rechargeCard/strokeWidth', modes) || 1, 10);
+    const strokeColor = getVariableByName('rechargeCard/stroke/color', modes) || '#ebebed';
 
     // Header Tokens
     const headerGap = parseInt(getVariableByName('rechargeCard/header/gap', modes) || 4, 10);
-    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#13002d';
+    const titleColor = getVariableByName('rechargeCard/title/color', modes) || '#000000';
     const titleFontSize = parseInt(getVariableByName('rechargeCard/title/fontSize', modes) || 12, 10);
     const titleFontFamily = getVariableByName('rechargeCard/title/fontFamily', modes) || 'JioType Var';
     const titleLineHeight = parseInt(getVariableByName('rechargeCard/title/lineHeight', modes) || 14, 10);
@@ -87,30 +104,26 @@ export default function RechargeCard({
     const specItemGap = parseInt(getVariableByName('rechargeCard/specItem/gap', modes) || 4, 10);
 
     // Spec Label Tokens
-    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#13002d';
+    const specLabelColor = getVariableByName('rechargeCard/specItem/label/color', modes) || '#000000';
     const specLabelFontSize = parseInt(getVariableByName('rechargeCard/specItem/label/fontSize', modes) || 12, 10);
     const specLabelFontFamily = getVariableByName('rechargeCard/specItem/label/fontFamily', modes) || 'JioType Var';
     const specLabelLineHeight = parseInt(getVariableByName('rechargeCard/specItem/label/lineHeight', modes) || 14, 10);
     const specLabelFontWeight = getVariableByName('rechargeCard/specItem/label/fontWeight', modes) || '500';
 
     // Spec Value Tokens
-    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#310064';
+    const specValueColor = getVariableByName('rechargeCard/specItem/value/color', modes) || '#000000';
     const specValueFontSize = parseInt(getVariableByName('rechargeCard/specItem/value/fontSize', modes) || 14, 10);
     const specValueFontFamily = getVariableByName('rechargeCard/specItem/value/fontFamily', modes) || 'JioType Var';
     const specValueLineHeight = parseInt(getVariableByName('rechargeCard/specItem/value/lineHeight', modes) || 17, 10);
     const specValueFontWeight = getVariableByName('rechargeCard/specItem/value/fontWeight', modes) || '500';
 
     // Disclaimer Tokens
-    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#22004a';
+    const disclaimerColor = getVariableByName('rechargeCard/disclaimer/color', modes) || '#000000';
     const disclaimerFontSize = parseInt(getVariableByName('rechargeCard/disclaimer/fontSize', modes) || 10, 10);
     const disclaimerFontFamily = getVariableByName('rechargeCard/disclaimer/fontFamily', modes) || 'JioType Var';
     const disclaimerLineHeight = parseInt(getVariableByName('rechargeCard/disclaimer/lineHeight', modes) || 13, 10);
     const disclaimerFontWeight = getVariableByName('rechargeCard/disclaimer/fontWeight', modes) || '400';
 
-    // Button Group Tokens
-    // Handled by ButtonGroup component directly
-
-    // Helpers
     const resolveFontWeight = (weight: string | number) => typeof weight === 'number' ? weight.toString() : weight;
 
     // Pass modes to subscription children (e.g. AvatarGroup)
@@ -125,6 +138,8 @@ export default function RechargeCard({
             paddingVertical,
             gap,
             borderRadius: radius,
+            borderWidth: strokeWidth,
+            borderColor: strokeColor,
             minWidth,
             alignItems: 'flex-start',
         }, style]}>
@@ -142,7 +157,7 @@ export default function RechargeCard({
                 <MoneyValue
                     value={price}
                     currency="₹"
-                    modes={modes}
+                    modes={{ ...DEFAULT_MONEY_VALUE_MODES, ...modes }}
                 />
             </View>
 
@@ -224,15 +239,8 @@ export default function RechargeCard({
                 {disclaimer}
             </Text>
 
-            {/* Button Group */}
-            <ButtonGroup
-                modes={{
-                    ...modes,
-                    "Appearance.Brand": "Secondary",
-                    "Button / Size": "S",
-                    "Emphasis": "High"
-                }}
-            >
+            {/* Button Group: defaults are overridable via the consumer's `modes` */}
+            <ButtonGroup modes={{ ...DEFAULT_BUTTON_GROUP_MODES, ...modes }}>
                 {actions}
             </ButtonGroup>
         </View>

package/src/components/Stepper/Step.tsx

@@ -3,7 +3,7 @@ import { View, Text, type ViewStyle, type TextStyle } from 'react-native'
 import Svg, { Path } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { StepLabel } from './StepLabel'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 
 export type StepStatus = 'number' | 'complete' | 'error' | 'warning'
 
@@ -14,14 +14,21 @@ export type StepProps = {
     // Injected by Stepper, or provided manually
     index?: number
 
-    // Custom style for the connecting line, allowing Stepper to hide it for the last item
+    // Connector line visibility — explicit prop (Figma `showLine`).
+    // Stepper sets this to false on the last item.
+    showLine?: boolean
+
+    // Custom style for the connecting line. Kept for backwards compatibility;
+    // when provided, it is merged on top of the default line style.
     connectorStyle?: ViewStyle
 
-    // Props matching Figma component interface directly
+    // Content props matching Figma component interface
     title?: string
     supportingText?: string
-    subtitle?: boolean // Toggle for subtitle visibility if passed via props
-    status?: StepStatus // 'number' | 'complete' | 'error' | 'warning'
+    metaText?: string
+    subtitle?: boolean
+    meta?: boolean
+    status?: StepStatus
 }
 
 export function Step({
@@ -29,35 +36,37 @@ export function Step({
     modes = EMPTY_MODES,
     style,
     index = 0,
+    showLine = true,
     connectorStyle,
     title,
     supportingText,
+    metaText,
     subtitle = true,
+    meta = true,
     status = 'number',
 }: StepProps) {
-    // Container styles
     const minHeight =
         Number(getVariableByName('steperItem/minHeight', modes) as unknown) || 52
     const gap =
-        Number(getVariableByName('steperItem/gap', modes) as unknown) || 8
+        Number(getVariableByName('steperItem/gap', modes) as unknown) || 16
 
-    // Indicator dimensions and styles
     const indicatorSize =
-        Number(getVariableByName('stepIndicator/size', modes) as unknown) || 24
+        Number(getVariableByName('stepIndicator/size', modes) as unknown) || 36
     const indicatorRadius =
         Number(getVariableByName('stepIndicator/radius', modes) as unknown) || 9999
     const indicatorBg =
         (getVariableByName('stepIndicator/background', modes) as string) ||
-        '#5c00b5'
+        '#5d00b5'
     const indicatorBorderColor =
         (getVariableByName('stepIndicator/border/color', modes) as string) ||
-        '#5c00b5'
+        '#5d00b5'
     const indicatorBorderSize =
         Number(getVariableByName('stepIndicator/border/size', modes) as unknown) || 1
     const iconColor =
         (getVariableByName('stepIndicator/icon/color', modes) as string) || '#ffffff'
+    const stepStatusSize =
+        Number(getVariableByName('stepStatus/size', modes) as unknown) || 18
 
-    // Label styles (for number)
     const labelFontSize =
         Number(getVariableByName('stepIndicator/label/fontSize', modes) as unknown) || 12
     const labelFontFamily =
@@ -67,28 +76,28 @@ export function Step({
     const labelFontWeight =
         (getVariableByName('stepIndicator/label/fontWeight', modes) as string) || '500'
 
-    // Vertical line styles
     const lineSize =
         Number(getVariableByName('steperItem/lineSize', modes) as unknown) || 2
     const lineColor =
-        (getVariableByName('steperItem/line', modes) as string) || '#5c00b5'
+        (getVariableByName('steperItem/line', modes) as string) || '#5d00b5'
     const badgeWrapGap =
         Number(getVariableByName('steperItem/badgeWrap/gap', modes) as unknown) || 2
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',
         minHeight,
+        gap,
         ...style,
     }
 
-    // FIX: This wrapper should NOT expand. It should be exact width of the indicator.
     const indicatorWrapperStyle: ViewStyle = {
         flexDirection: 'column',
         alignItems: 'center',
         width: indicatorSize,
-        flexGrow: 0, // Do NOT grow
+        flexGrow: 0,
         flexShrink: 0,
         gap: badgeWrapGap,
+        alignSelf: 'stretch',
     }
 
     const indicatorStyle: ViewStyle = {
@@ -103,6 +112,13 @@ export function Step({
         overflow: 'hidden',
     }
 
+    const stepStatusContainerStyle: ViewStyle = {
+        width: stepStatusSize,
+        height: stepStatusSize,
+        alignItems: 'center',
+        justifyContent: 'center',
+    }
+
     const labelStyle: TextStyle = {
         color: iconColor,
         fontSize: labelFontSize,
@@ -112,35 +128,31 @@ export function Step({
         textAlign: 'center',
     }
 
-    // Combine base line style with injected connectorStyle
     const lineStyle: ViewStyle = {
         width: lineSize,
         backgroundColor: lineColor,
-        flexGrow: 1, // Line should take up remaining vertical space in this column
-        ...connectorStyle, // Allow overriding display, color, etc.
+        flexGrow: 1,
+        minHeight: 1,
+        ...connectorStyle,
     }
 
-    // Helper for icons
     const renderIcon = () => {
         switch (status) {
             case 'complete':
-                // Checkmark
                 return (
-                    <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                    <Svg width={stepStatusSize} height={stepStatusSize} viewBox="0 0 24 24" fill="none">
                         <Path d="M20 6L9 17L4 12" stroke={iconColor} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                     </Svg>
                 )
             case 'error':
-                // X mark
                 return (
-                    <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                    <Svg width={stepStatusSize} height={stepStatusSize} viewBox="0 0 24 24" fill="none">
                         <Path d="M18 6L6 18M6 6l12 12" stroke={iconColor} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
                     </Svg>
                 )
             case 'warning':
-                // Exclamation / Triangle
                 return (
-                    <Svg width={12} height={12} viewBox="0 0 24 24" fill="none">
+                    <Svg width={stepStatusSize} height={stepStatusSize} viewBox="0 0 24 24" fill="none">
                         <Path d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" stroke={iconColor} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
                     </Svg>
                 )
@@ -150,42 +162,31 @@ export function Step({
         }
     }
 
-    // Clone children to pass modes if they are StepLabel
-    const childrenWithProps = React.Children.map(children, (child) => {
-        if (React.isValidElement(child)) {
-            return React.cloneElement(child, { modes } as any)
-        }
-        return child
-    })
-
-    // Determine if we have content to pad
-    // Default padding bottom to 16 if line is shown, but also respect connectorStyle display
-    // If display is none, we probably don't want the padding bottom either.
-    const isLineHidden = connectorStyle?.display === 'none'
-    const contentPaddingBottom = isLineHidden ? 0 : 16
+    const hasSlotChildren = React.Children.count(children) > 0
 
     return (
         <View style={containerStyle}>
             <View style={indicatorWrapperStyle}>
                 <View style={indicatorStyle}>
-                    {renderIcon()}
+                    <View style={stepStatusContainerStyle}>{renderIcon()}</View>
                 </View>
-                <View style={lineStyle} />
+                {showLine ? <View style={lineStyle} /> : null}
             </View>
 
-            {/* Spacer gap */}
-            <View style={{ width: gap }} />
-
-            {/* Content Area */}
-            <View style={{ flex: 1, paddingBottom: contentPaddingBottom }}>
-                {title ? (
+            <View style={{ flex: 1 }}>
+                {hasSlotChildren ? (
+                    cloneChildrenWithModes(children, modes)
+                ) : (
                     <StepLabel
-                        title={title}
-                        supportingText={subtitle ? (supportingText || undefined) : undefined}
+                        {...(title !== undefined ? { title } : {})}
+                        {...(supportingText !== undefined
+                            ? { supportingText }
+                            : {})}
+                        {...(metaText !== undefined ? { metaText } : {})}
+                        subtitle={subtitle}
+                        meta={meta}
                         modes={modes}
                     />
-                ) : (
-                    childrenWithProps
                 )}
             </View>
         </View>

package/src/components/Stepper/StepLabel.tsx

@@ -6,6 +6,9 @@ import { EMPTY_MODES } from '../../utils/react-utils'
 export type StepLabelProps = {
     title?: string
     supportingText?: string
+    metaText?: string
+    subtitle?: boolean
+    meta?: boolean
     modes?: Record<string, any>
     style?: ViewStyle
 }
@@ -13,10 +16,12 @@ export type StepLabelProps = {
 export function StepLabel({
     title = 'Stepper Item',
     supportingText,
+    metaText,
+    subtitle = true,
+    meta = true,
     modes = EMPTY_MODES,
     style,
 }: StepLabelProps) {
-    // Title styles
     const titleColor =
         (getVariableByName('steperItem/title/color', modes) as string) || '#0d0d0f'
     const titleFontSize =
@@ -30,26 +35,46 @@ export function StepLabel({
     const titleFontWeight =
         (getVariableByName('steperItem/title/fontWeight', modes) as string) || '700'
 
-    // Subtitle styles
+    // The Subtitle (supportingText) and Meta both default to the "Neutral"
+    // AppearanceBrand. A caller-supplied `AppearanceBrand` still wins (it is
+    // spread after the default), so each remains overridable. The Title keeps
+    // its own appearance resolution.
+    const subtitleModes = { AppearanceBrand: 'Neutral', ...modes }
+    const metaModes = { AppearanceBrand: 'Neutral', ...modes }
+
     const subtitleColor =
-        (getVariableByName('steperItem/subtitle/color', modes) as string) ||
+        (getVariableByName('steperItem/subtitle/color', subtitleModes) as string) ||
         '#3d4047'
     const subtitleFontSize =
         Number(
-            getVariableByName('steperItem/subtitle/fontSize', modes) as unknown
+            getVariableByName('steperItem/subtitle/fontSize', subtitleModes) as unknown
         ) || 12
     const subtitleFontFamily =
-        (getVariableByName('steperItem/subtitle/fontFamily', modes) as string) ||
+        (getVariableByName('steperItem/subtitle/fontFamily', subtitleModes) as string) ||
         undefined
     const subtitleLineHeight =
         Number(
-            getVariableByName('steperItem/subtitle/lineHeight', modes) as unknown
+            getVariableByName('steperItem/subtitle/lineHeight', subtitleModes) as unknown
         ) || 16
     const subtitleFontWeight =
-        (getVariableByName('steperItem/subtitle/fontWeight', modes) as string) ||
+        (getVariableByName('steperItem/subtitle/fontWeight', subtitleModes) as string) ||
         '400'
 
-    // Layout gap
+    const metaColor =
+        (getVariableByName('steperItem/meta/color', metaModes) as string) || '#f7ab21'
+    const metaFontSize =
+        Number(getVariableByName('steperItem/meta/fontSize', metaModes) as unknown) || 10
+    // The Figma variable is authored as "fontFamily Copy" (with a space + suffix).
+    // Match the literal Figma name to avoid a missing-variable warning.
+    const metaFontFamily =
+        (getVariableByName('steperItem/meta/fontFamily Copy', metaModes) as string) ||
+        undefined
+    const metaLineHeight =
+        Number(getVariableByName('steperItem/meta/lineHeight', metaModes) as unknown) ||
+        12
+    const metaFontWeight =
+        (getVariableByName('steperItem/meta/fontWeight', metaModes) as string) || '700'
+
     const textGap =
         Number(getVariableByName('steperItem/textWrap/gap', modes) as unknown) || 2
 
@@ -69,12 +94,24 @@ export function StepLabel({
         lineHeight: subtitleLineHeight,
     }
 
+    const metaStyle: TextStyle = {
+        color: metaColor,
+        fontSize: metaFontSize,
+        fontFamily: metaFontFamily,
+        fontWeight: metaFontWeight as TextStyle['fontWeight'],
+        lineHeight: metaLineHeight,
+    }
+
+    const showSubtitle = subtitle && !!supportingText
+    const showMeta = meta && !!metaText
+
     return (
         <View style={[{ gap: textGap, flex: 1 }, style]}>
             <Text style={titleStyle}>{title}</Text>
-            {supportingText ? (
+            {showSubtitle ? (
                 <Text style={subtitleStyle}>{supportingText}</Text>
             ) : null}
+            {showMeta ? <Text style={metaStyle}>{metaText}</Text> : null}
         </View>
     )
 }

package/src/components/Stepper/Stepper.tsx

@@ -6,8 +6,10 @@ import { StepLabel } from './StepLabel'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
 export { Step, StepLabel }
+export type { StepProps, StepStatus } from './Step'
+export type { StepLabelProps } from './StepLabel'
 
-type StepperProps = {
+export type StepperProps = {
     children?: React.ReactNode
     modes?: Record<string, any>
     style?: ViewStyle
@@ -18,7 +20,6 @@ export default function Stepper({
     modes = EMPTY_MODES,
     style,
 }: StepperProps) {
-    // Stepper container styles
     const paddingHorizontal =
         Number(getVariableByName('stepper/padding/horizontal', modes) as unknown) ||
         8
@@ -33,20 +34,24 @@ export default function Stepper({
         ...style,
     }
 
-    // Inject index and connectorStyle logic into Step children
     const steps = React.Children.toArray(children)
-    const childrenWithProps = steps.map((child, index) => {
-        if (React.isValidElement(child)) {
-            const isLast = index === steps.length - 1
-
-            return React.cloneElement(child, {
-                index,
-                modes, // Pass modes down
-                connectorStyle: isLast ? { display: 'none' } : undefined,
-            } as any)
-        }
-        return child
+    const stepsWithProps = steps.map((child, stepIndex) => {
+        if (!React.isValidElement(child)) return child
+
+        const isLast = stepIndex === steps.length - 1
+        const childProps = (child.props as any) || {}
+        const childModes = childProps.modes
+            ? { ...modes, ...childProps.modes }
+            : modes
+
+        return React.cloneElement(child, {
+            ...childProps,
+            index: childProps.index ?? stepIndex,
+            modes: childModes,
+            showLine:
+                childProps.showLine !== undefined ? childProps.showLine : !isLast,
+        } as any)
     })
 
-    return <View style={containerStyle}>{childrenWithProps}</View>
+    return <View style={containerStyle}>{stepsWithProps}</View>
 }