jfs-components 0.0.77 → 0.0.79

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>
 }