jfs-components 0.0.71 → 0.0.73

package/src/components/StatItem/StatItem.tsx

@@ -1,22 +1,46 @@
 import React from 'react'
-import { View, Text, type StyleProp, type ViewStyle } from 'react-native'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 
+export type StatItemLabelPosition = 'Top' | 'Bottom'
+
 export type StatItemProps = {
-  /** The small descriptive label above the value. */
+  /** The small descriptive label. */
   label?: string
-  /** The large prominent value to display. */
+  /** The prominent value to display. */
   value?: string
-  /** Design token modes for theming. */
+  /**
+   * Whether the label is rendered above or below the value. Matches the
+   * Figma `labelPosition` variant. Defaults to `'Top'`.
+   *
+   * - `'Top'`  — Label (12px medium) above large value (26px black). Left-aligned.
+   * - `'Bottom'` — Value (12px medium) above smaller label (10px regular). Center-aligned.
+   */
+  labelPosition?: StatItemLabelPosition
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
   modes?: Record<string, any>
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
+  /** Override the label text styles. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Override the value text styles. */
+  valueStyle?: StyleProp<TextStyle>
 }
 
 /**
- * StatItem displays a label/value pair with the value in a large, bold style.
- * Useful for metrics, product stats, or KPI callouts.
+ * StatItem displays a label/value pair, useful for product stats, metrics
+ * or KPI callouts.
+ *
+ * Supports two layouts via the `labelPosition` variant:
+ *  - `'Top'`    — Small label above a large prominent value (default).
+ *  - `'Bottom'` — Value above a smaller label, content centered.
  *
  * @component
  * @param {StatItemProps} props
@@ -24,47 +48,100 @@ export type StatItemProps = {
 function StatItem({
   label = 'Purity verified by NABL',
   value = '99.99%',
+  labelPosition = 'Top',
   modes = EMPTY_MODES,
   style,
+  labelStyle,
+  valueStyle,
 }: StatItemProps) {
-  const gap = getVariableByName('statItem/gap', modes) ?? 2
+  const isBottom = labelPosition === 'Bottom'
+
+  // The Figma `Bottom` variant overrides token values locally inside the
+  // component (it is not exposed in the design-tokens JSON), so the resolved
+  // token values reflect only the `Top` variant. For the `Bottom` variant we
+  // therefore use hardcoded literals that match the Figma design, while still
+  // allowing the resolver to surface any future mode-based overrides for the
+  // `Top` variant.
+  const gap = isBottom
+    ? 6
+    : ((getVariableByName('statItem/gap', modes) as number | null) ?? 2)
+
+  const labelForeground = isBottom
+    ? '#24262b'
+    : ((getVariableByName('statItem/label/foreground', modes) as string | null) ?? '#1a1c1f')
+  const labelFontFamily =
+    (getVariableByName('statItem/label/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const labelFontSize = isBottom
+    ? 10
+    : ((getVariableByName('statItem/label/fontSize', modes) as number | null) ?? 12)
+  const labelFontWeightRaw = isBottom
+    ? 400
+    : (getVariableByName('statItem/label/fontWeight', modes) ?? 500)
+  const labelFontWeight = String(labelFontWeightRaw) as TextStyle['fontWeight']
+  const labelLineHeight = isBottom
+    ? 13
+    : ((getVariableByName('statItem/label/lineHeight', modes) as number | null) ?? 16)
+
+  const valueForeground = isBottom
+    ? '#141414'
+    : ((getVariableByName('statItem/value/foreground', modes) as string | null) ?? '#0d0d0f')
+  const valueFontFamily =
+    (getVariableByName('statItem/value/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const valueFontSize = isBottom
+    ? 12
+    : ((getVariableByName('statItem/value/fontSize', modes) as number | null) ?? 26)
+  const valueFontWeightRaw = isBottom
+    ? 500
+    : (getVariableByName('statItem/value/fontWeight', modes) ?? 900)
+  const valueFontWeight = String(valueFontWeightRaw) as TextStyle['fontWeight']
+  const valueLineHeight = isBottom
+    ? 16
+    : ((getVariableByName('statItem/value/lineHeight', modes) as number | null) ?? 26)
 
-  const labelForeground = getVariableByName('statItem/label/foreground', modes) ?? '#1a1c1f'
-  const labelFontFamily = getVariableByName('statItem/label/fontFamily', modes) ?? 'JioType Var'
-  const labelFontSize = getVariableByName('statItem/label/fontSize', modes) ?? 12
-  const labelFontWeight = getVariableByName('statItem/label/fontWeight', modes) ?? '500'
-  const labelLineHeight = getVariableByName('statItem/label/lineHeight', modes) ?? 16
+  const containerStyle: ViewStyle = {
+    gap,
+    alignItems: isBottom ? 'center' : 'flex-start',
+    justifyContent: isBottom ? 'center' : 'flex-start',
+  }
 
-  const valueForeground = getVariableByName('statItem/value/foreground', modes) ?? '#0d0d0f'
-  const valueFontFamily = getVariableByName('statItem/value/fontFamily', modes) ?? 'JioType Var'
-  const valueFontSize = getVariableByName('statItem/value/fontSize', modes) ?? 26
-  const valueFontWeight = getVariableByName('statItem/value/fontWeight', modes) ?? '900'
-  const valueLineHeight = getVariableByName('statItem/value/lineHeight', modes) ?? 26
+  const labelTextStyle: TextStyle = {
+    color: labelForeground,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    fontWeight: labelFontWeight,
+    lineHeight: labelLineHeight,
+    textAlign: isBottom ? 'center' : 'left',
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: valueForeground,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueLineHeight,
+    textAlign: isBottom ? 'center' : 'left',
+  }
+
+  const labelNode = (
+    <Text style={[labelTextStyle, labelStyle]}>{label}</Text>
+  )
+  const valueNode = (
+    <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+  )
 
   return (
-    <View style={[{ gap: gap as number }, style]}>
-      <Text
-        style={{
-          color: labelForeground as string,
-          fontFamily: labelFontFamily as string,
-          fontSize: labelFontSize as number,
-          fontWeight: String(labelFontWeight) as any,
-          lineHeight: labelLineHeight as number,
-        }}
-      >
-        {label}
-      </Text>
-      <Text
-        style={{
-          color: valueForeground as string,
-          fontFamily: valueFontFamily as string,
-          fontSize: valueFontSize as number,
-          fontWeight: String(valueFontWeight) as any,
-          lineHeight: valueLineHeight as number,
-        }}
-      >
-        {value}
-      </Text>
+    <View style={[containerStyle, style]}>
+      {isBottom ? (
+        <>
+          {valueNode}
+          {labelNode}
+        </>
+      ) : (
+        <>
+          {labelNode}
+          {valueNode}
+        </>
+      )}
     </View>
   )
 }

package/src/components/StrengthIndicator/StrengthIndicator.tsx

@@ -0,0 +1,205 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+/**
+ * Confidence levels supported by the indicator. Mirrors the Figma `Confidence`
+ * mode collection exactly (`High` | `Medium` | `Low` | `None`).
+ */
+export type StrengthIndicatorConfidence = 'High' | 'Medium' | 'Low' | 'None'
+
+/**
+ * Accepted shape for the `confidence` prop. Either:
+ *   - one of the named levels (`'High' | 'Medium' | 'Low' | 'None'`), or
+ *   - a float in `[0, 1]`. Floats are bucketed to the nearest level using
+ *     midpoint thresholds (1/6, 1/2, 5/6) so anchor values land squarely:
+ *     `0` → `None`, `~0.33` → `Low`, `~0.66` → `Medium`, `1` → `High`.
+ *     Values outside `[0, 1]` are clamped.
+ */
+export type StrengthIndicatorConfidenceValue =
+    | StrengthIndicatorConfidence
+    | number
+
+export type StrengthIndicatorProps = {
+    /**
+     * Overall confidence level. Accepts either the named enum value
+     * (`'High' | 'Medium' | 'Low' | 'None'`) or a float in `[0, 1]`:
+     *
+     *   `1.0` (or `'High'`)   → bars `[High, High, High]`     (3/3 lit)
+     *   `0.66` (or `'Medium'`) → bars `[Medium, Medium, None]`   (2/3 lit)
+     *   `0.33` (or `'Low'`)    → bars `[Low, None, None]`        (1/3 lit)
+     *   `0.0` (or `'None'`)    → bars `[None, None, None]`       (0/3 lit)
+     *
+     * The component maps the resolved level to a per-bar confidence mode
+     * internally, so each bar's color resolves through the
+     * `strengthIndicator/bar/<size>/background` token using its own
+     * `Confidence` mode.
+     *
+     * Default: `'High'`.
+     */
+    confidence?: StrengthIndicatorConfidenceValue
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>
+} & Omit<React.ComponentProps<typeof View>, 'style'>
+
+type BarSize = 'small' | 'medium' | 'large'
+
+const BAR_SIZES: BarSize[] = ['small', 'medium', 'large']
+
+/**
+ * Maps an overall confidence level to per-bar confidence modes. Bars are
+ * filled from the smallest (left) to the largest (right) as confidence
+ * rises, with each lit bar tinted at its own confidence level so the
+ * indicator visually communicates *which* level the value is at — not just
+ * how many bars are lit.
+ *
+ *   High   -> [High, High, High]       (3/3 lit, bright)
+ *   Medium -> [Medium, Medium, None]   (2/3 lit, mid intensity)
+ *   Low    -> [Low, None, None]        (1/3 lit, low intensity)
+ *   None   -> [None, None, None]       (0/3 lit)
+ *
+ * Each bar resolves its color through `getVariableByName` with its own
+ * per-bar `Confidence` mode, so the mapping survives any token updates in
+ * the Figma variables export.
+ */
+const CONFIDENCE_TO_BARS: Record<
+    StrengthIndicatorConfidence,
+    [StrengthIndicatorConfidence, StrengthIndicatorConfidence, StrengthIndicatorConfidence]
+> = {
+    High: ['High', 'High', 'High'],
+    Medium: ['Medium', 'Medium', 'None'],
+    Low: ['Low', 'None', 'None'],
+    None: ['None', 'None', 'None'],
+}
+
+/**
+ * Fallback colors used when the `strengthIndicator/*` design tokens have not
+ * yet been imported into `Coin Variables-variables-full.json`. The `High`
+ * fallback matches the Figma export (`#25ab21`); the intermediate levels
+ * use progressively lighter greens, and `None` uses a neutral gray for
+ * unlit bars. Once the tokens land, `getVariableByName` returns the
+ * canonical value and these fallbacks are bypassed.
+ */
+const FALLBACK_BAR_COLOR: Record<StrengthIndicatorConfidence, string> = {
+    High: '#25ab21',
+    Medium: '#5cc257',
+    Low: '#a8dba2',
+    None: '#d9d9dd',
+}
+
+/**
+ * Bucket a float `[0, 1]` into the nearest named confidence level using
+ * midpoint thresholds between the four anchor values (`0`, `1/3`, `2/3`,
+ * `1`). Out-of-range values are clamped.
+ */
+function floatToConfidence(value: number): StrengthIndicatorConfidence {
+    const clamped = Math.min(Math.max(value, 0), 1)
+    if (clamped > 5 / 6) return 'High'
+    if (clamped > 1 / 2) return 'Medium'
+    if (clamped > 1 / 6) return 'Low'
+    return 'None'
+}
+
+/**
+ * Normalize the union `confidence` prop into a single named level.
+ * Strings pass through; numbers are bucketed via {@link floatToConfidence}.
+ * Anything else (e.g. `null`/`undefined`) defaults to `'High'` to match
+ * Figma's default mode.
+ */
+function resolveConfidence(
+    value: StrengthIndicatorConfidenceValue | undefined
+): StrengthIndicatorConfidence {
+    if (typeof value === 'number') return floatToConfidence(value)
+    if (value === 'High' || value === 'Medium' || value === 'Low' || value === 'None') {
+        return value
+    }
+    return 'High'
+}
+
+/**
+ * StrengthIndicator renders three fixed-size, ascending bars that
+ * communicate a discrete confidence/strength level — typically used to
+ * signal model confidence, signal quality, or password strength.
+ *
+ * Sizes are intentionally fixed (matching the Figma spec): 3px-wide bars
+ * 6/9/12px tall with a 2px gap and 2px container padding.
+ *
+ * Pass a single `confidence` value (named enum *or* float `[0, 1]`); the
+ * component normalizes it to a level, maps that level to a per-bar
+ * confidence mode, and resolves each bar's color through design tokens
+ * (`strengthIndicator/bar/<size>/background`).
+ *
+ * @component
+ * @param {StrengthIndicatorProps} props
+ */
+function StrengthIndicator({
+    confidence = 'High',
+    modes = EMPTY_MODES,
+    style,
+    ...rest
+}: StrengthIndicatorProps) {
+    const containerGap =
+        (getVariableByName('strengthIndicator/container/gap', modes) as number | null) ?? 2
+    const containerPadding =
+        (getVariableByName('strengthIndicator/container/padding', modes) as number | null) ?? 2
+    const barWidth =
+        (getVariableByName('strengthIndicator/bar/width', modes) as number | null) ?? 3
+    const barRadius =
+        (getVariableByName('strengthIndicator/bar/radius', modes) as number | null) ?? 1
+
+    const barHeights: Record<BarSize, number> = {
+        small:
+            (getVariableByName('strengthIndicator/bar/height/small', modes) as number | null) ?? 6,
+        medium:
+            (getVariableByName('strengthIndicator/bar/height/medium', modes) as number | null) ?? 9,
+        large:
+            (getVariableByName('strengthIndicator/bar/height/large', modes) as number | null) ?? 12,
+    }
+
+    const resolvedLevel = resolveConfidence(confidence)
+    const perBarConfidence = CONFIDENCE_TO_BARS[resolvedLevel]
+
+    const containerStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: containerGap,
+        padding: containerPadding,
+    }
+
+    return (
+        <View
+            style={[containerStyle, style]}
+            accessibilityRole="image"
+            accessibilityLabel={`Strength indicator: ${resolvedLevel} confidence`}
+            {...rest}
+        >
+            {BAR_SIZES.map((size, index) => {
+                const barConfidence: StrengthIndicatorConfidence =
+                    perBarConfidence[index] ?? 'None'
+                const barModes = { ...modes, Confidence: barConfidence }
+                const tokenColor = getVariableByName(
+                    `strengthIndicator/bar/${size}/background`,
+                    barModes
+                ) as string | null
+                const backgroundColor = tokenColor ?? FALLBACK_BAR_COLOR[barConfidence]
+
+                return (
+                    <View
+                        key={size}
+                        style={{
+                            width: barWidth,
+                            height: barHeights[size],
+                            borderRadius: barRadius,
+                            backgroundColor,
+                        }}
+                    />
+                )
+            })}
+        </View>
+    )
+}
+
+export default StrengthIndicator

package/src/components/SummaryTile/SummaryTile.tsx

@@ -0,0 +1,251 @@
+import React from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    type StyleProp,
+    type ViewStyle,
+    type TextStyle,
+    type PressableStateCallbackType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Button from '../Button/Button'
+import NavArrow from '../NavArrow/NavArrow'
+import StrengthIndicator, {
+    type StrengthIndicatorConfidenceValue,
+} from '../StrengthIndicator/StrengthIndicator'
+
+export type SummaryTileProps = {
+    /** Bold heading shown at the top-left of the tile. */
+    title?: string
+    /** Smaller supporting copy rendered beneath the title. */
+    description?: string
+    /**
+     * Confidence level for the inline `StrengthIndicator` next to the title.
+     * Defaults to `'None'` to match the Figma reference (all bars unlit).
+     * Pass `null` to hide the indicator entirely.
+     */
+    confidence?: StrengthIndicatorConfidenceValue | null
+    /**
+     * When `true`, render a trailing forward chevron (`NavArrow`) — the
+     * convention for "tap the tile to drill in" affordance. Defaults to
+     * `false`.
+     */
+    chevron?: boolean
+    /**
+     * Action slot rendered to the right of the text content. Defaults to a
+     * small `Button` (`Button / Size: 'S'`) labelled "Button" to match the
+     * Figma default. Pass `null` to render no action slot (typical for
+     * static tiles that want only a chevron).
+     */
+    children?: React.ReactNode
+    /**
+     * Optional press handler for the entire tile. When provided, the tile
+     * is wrapped in a `Pressable`, gets `accessibilityRole="button"` and
+     * the default `Button` action slot is automatically suppressed so the
+     * rendered HTML doesn't contain a `<button>` inside another `<button>`
+     * (which would trigger a hydration warning on web). Pair this with
+     * `chevron` for the navigational tile pattern.
+     */
+    onPress?: () => void
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override container styles. */
+    style?: StyleProp<ViewStyle>
+    /** Override the title text styles. */
+    titleStyle?: StyleProp<TextStyle>
+    /** Override the description text styles. */
+    descriptionStyle?: StyleProp<TextStyle>
+    /** Accessibility label override (defaults to `title`). */
+    accessibilityLabel?: string
+}
+
+/**
+ * SummaryTile composes a title (with an inline `StrengthIndicator`), a
+ * supporting description and an action slot into a compact horizontal row,
+ * commonly used at the top of dashboard cards (e.g. "Spending — know your
+ * spending and savings"). An optional trailing chevron and tile-level
+ * `onPress` handler turn the whole row into a navigational entry point.
+ *
+ * @component
+ * @param {SummaryTileProps} props
+ */
+function SummaryTile({
+    title = 'Spending',
+    description = 'Know your spending and savings',
+    confidence = 'None',
+    chevron = false,
+    children,
+    onPress,
+    modes = EMPTY_MODES,
+    style,
+    titleStyle,
+    descriptionStyle,
+    accessibilityLabel,
+}: SummaryTileProps) {
+    const containerGap =
+        (getVariableByName('summaryTile/gap', modes) as number | null) ?? 8
+    const containerPadding =
+        (getVariableByName('summaryTile/padding', modes) as number | null) ?? 0
+
+    const contentGap =
+        (getVariableByName('summaryTile/content/gap', modes) as number | null) ?? 8
+    const titleWrapGap =
+        (getVariableByName('summaryTile/titleWrap/gap', modes) as number | null) ?? 4
+
+    const titleColor =
+        (getVariableByName('summaryTile/title/color', modes) as string | null) ?? '#0d0d0f'
+    const titleFontFamily =
+        (getVariableByName('summaryTile/title/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const titleFontSize =
+        (getVariableByName('summaryTile/title/fontSize', modes) as number | null) ?? 16
+    const titleFontWeight =
+        getVariableByName('summaryTile/title/fontWeight', modes) ?? 700
+    const titleLineHeight =
+        (getVariableByName('summaryTile/title/lineHeight', modes) as number | null) ?? 18
+
+    const descriptionColor =
+        (getVariableByName('summaryTile/description/color', modes) as string | null) ??
+        '#24262b'
+    const descriptionFontFamily =
+        (getVariableByName('summaryTile/description/fontFamily', modes) as string | null) ??
+        'JioType Var'
+    const descriptionFontSize =
+        (getVariableByName('summaryTile/description/fontSize', modes) as number | null) ?? 12
+    const descriptionFontWeight =
+        getVariableByName('summaryTile/description/fontWeight', modes) ?? 500
+    const descriptionLineHeight =
+        (getVariableByName('summaryTile/description/lineHeight', modes) as number | null) ?? 16
+
+    const titleTextStyle: TextStyle = {
+        color: titleColor,
+        fontFamily: titleFontFamily,
+        fontSize: titleFontSize,
+        fontWeight: String(titleFontWeight) as TextStyle['fontWeight'],
+        lineHeight: titleLineHeight,
+    }
+
+    const descriptionTextStyle: TextStyle = {
+        color: descriptionColor,
+        fontFamily: descriptionFontFamily,
+        fontSize: descriptionFontSize,
+        fontWeight: String(descriptionFontWeight) as TextStyle['fontWeight'],
+        lineHeight: descriptionLineHeight,
+    }
+
+    const showIndicator = confidence !== null
+
+    // When the entire tile is pressable, the default `Button` slot is
+    // suppressed so we don't render a `<button>` inside another `<button>`
+    // (which is invalid HTML and triggers a React hydration warning on
+    // web). Consumers can still pass an explicit non-button node via
+    // `children` if they want a visible affordance alongside `onPress`.
+    const isPressable = onPress != null
+
+    const actionSlot =
+        children !== undefined ? (
+            children !== null ? (
+                <>{cloneChildrenWithModes(children, modes)}</>
+            ) : null
+        ) : isPressable ? null : (
+            <Button
+                label="Button"
+                modes={{'AppearanceBrand': 'Secondary', ...modes, 'Button / Size': 'S' }}
+            />
+        )
+
+    const tileContent = (
+        <>
+            <View
+                style={{
+                    flex: 1,
+                    minWidth: 0,
+                    flexDirection: 'column',
+                    gap: contentGap,
+                    alignItems: 'flex-start',
+                }}
+            >
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: titleWrapGap,
+                        width: '100%',
+                    }}
+                >
+                    {title ? (
+                        <Text
+                            style={[titleTextStyle, titleStyle]}
+                            numberOfLines={1}
+                        >
+                            {title}
+                        </Text>
+                    ) : null}
+                    {showIndicator ? (
+                        <StrengthIndicator
+                            confidence={confidence as StrengthIndicatorConfidenceValue}
+                            modes={modes}
+                        />
+                    ) : null}
+                </View>
+
+                {description ? (
+                    <Text style={[descriptionTextStyle, descriptionStyle]}>
+                        {description}
+                    </Text>
+                ) : null}
+            </View>
+
+            {actionSlot != null ? (
+                <View
+                    style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                    }}
+                >
+                    {actionSlot}
+                </View>
+            ) : null}
+
+            {chevron ? <NavArrow direction="Forward" modes={modes} /> : null}
+        </>
+    )
+
+    const containerLayoutStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: containerGap,
+        padding: containerPadding,
+        width: '100%',
+    }
+
+    if (onPress) {
+        return (
+            <Pressable
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                style={({ pressed }: PressableStateCallbackType): StyleProp<ViewStyle> => [
+                    containerLayoutStyle,
+                    style,
+                    pressed ? { opacity: 0.7 } : null,
+                ]}
+            >
+                {tileContent}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View
+            style={[containerLayoutStyle, style]}
+            accessibilityLabel={accessibilityLabel}
+        >
+            {tileContent}
+        </View>
+    )
+}
+
+export default SummaryTile