jfs-components 0.0.84 → 0.0.86

package/src/components/ClusterBubble/ClusterBubble.tsx

@@ -0,0 +1,359 @@
+import React, { useMemo, useState } from 'react'
+import {
+    Pressable,
+    StyleSheet,
+    Text,
+    View,
+    type LayoutChangeEvent,
+    type StyleProp,
+    type TextStyle,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES } from '../../utils/react-utils'
+
+/** Where the value/label text sits relative to the circle. */
+export type ClusterBubbleLabelPlacement = 'inside' | 'outside' | 'auto'
+
+/** Which side of the circle an *outside* label is anchored to. */
+export type ClusterBubbleLabelDirection = 'top' | 'bottom' | 'left' | 'right'
+
+export type ClusterBubbleProps = {
+    /**
+     * The bold, primary content rendered in/under the bubble — e.g. `"40%"`,
+     * `"₹270K"`. Strings are auto-wrapped in a `<Text>`; pass a node for full
+     * control (e.g. a `MoneyValue`).
+     */
+    value?: React.ReactNode
+    /** The secondary caption shown beside the value — e.g. `"Recommended"`. */
+    label?: React.ReactNode
+    /** Diameter of the circle in px. Defaults to `120`. */
+    size?: number
+    /**
+     * `Appearance / DataViz` mode used to resolve the fill from the
+     * `dataViz/bg` token (e.g. `Primary`, `Secondary`, `Tertiary`).
+     * Defaults to `Primary`. The *emphasis* of the fill is taken from the
+     * `Emphasis / DataViz` mode in `modes`.
+     */
+    appearance?: string
+    /** Hard-override the circle fill color (bypasses token resolution). */
+    color?: string
+    /**
+     * Where the text sits. `inside` centers it within the circle, `outside`
+     * anchors it just beyond the circle's edge, and `auto` (default) picks
+     * `inside` when the bubble is at least `autoInsideMinSize` px, otherwise
+     * `outside`.
+     */
+    labelPlacement?: ClusterBubbleLabelPlacement
+    /**
+     * Which side an *outside* label is placed on. The label is positioned
+     * exactly `labelGap` px beyond the circle's radius in this direction.
+     * Defaults to `bottom`.
+     */
+    labelDirection?: ClusterBubbleLabelDirection
+    /** Gap in px between the circle's edge and an outside label. Defaults to `8`. */
+    labelGap?: number
+    /** Diameter (px) at/above which `auto` places the text inside. Defaults to `88`. */
+    autoInsideMinSize?: number
+    /**
+     * Text color when the label sits *inside*. Defaults to an automatic
+     * black/white choice based on the fill's luminance for legibility.
+     */
+    insideTextColor?: string
+    /** Press handler — wraps the bubble in a `Pressable` when provided. */
+    onPress?: () => void
+    /** Style override for the value text. */
+    valueStyle?: StyleProp<TextStyle>
+    /** Style override for the label text. */
+    labelStyle?: StyleProp<TextStyle>
+    /** Style override for the circle view. */
+    circleStyle?: StyleProp<ViewStyle>
+    /** Style override for the outer container. */
+    style?: StyleProp<ViewStyle>
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Accessibility label. Defaults to a `value + label` composite. */
+    accessibilityLabel?: string
+}
+
+const DEFAULT_FILL = '#5d00b5'
+
+/** Parse `#rgb`, `#rrggbb`, `rgb()` / `rgba()` into 0–255 channels. */
+function parseColor(input: string): { r: number; g: number; b: number } | null {
+    if (typeof input !== 'string') return null
+    const value = input.trim()
+
+    if (value[0] === '#') {
+        let hex = value.slice(1)
+        if (hex.length === 3) {
+            hex = hex
+                .split('')
+                .map((ch) => ch + ch)
+                .join('')
+        }
+        if (hex.length >= 6) {
+            const r = parseInt(hex.slice(0, 2), 16)
+            const g = parseInt(hex.slice(2, 4), 16)
+            const b = parseInt(hex.slice(4, 6), 16)
+            if ([r, g, b].every((n) => Number.isFinite(n))) return { r, g, b }
+        }
+        return null
+    }
+
+    const match = value.match(/rgba?\(([^)]+)\)/i)
+    if (match) {
+        const parts = match[1].split(',').map((p) => parseFloat(p))
+        if (parts.length >= 3 && parts.slice(0, 3).every((n) => Number.isFinite(n))) {
+            return { r: parts[0], g: parts[1], b: parts[2] }
+        }
+    }
+    return null
+}
+
+/** Pick a legible foreground (near-black or white) for a given background. */
+function readableTextColor(background: string): string {
+    const rgb = parseColor(background)
+    if (!rgb) return '#ffffff'
+    // Perceived luminance (ITU-R BT.601).
+    const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255
+    return luminance > 0.6 ? '#0f0d0a' : '#ffffff'
+}
+
+/**
+ * `ClusterBubble` is the atomic circle that composes a `BubbleChart`. It renders
+ * a single token-colored disc with a bold `value` and a secondary `label`. The
+ * text can sit inside the circle or anchor just outside its edge on any side
+ * (`labelDirection`) at a precise `labelGap` distance — so consumers (or the
+ * chart) can steer labels toward free space. The inside text color adapts to
+ * the fill for legibility. It is fully usable standalone.
+ *
+ * @component
+ */
+function ClusterBubble({
+    value,
+    label,
+    size = 120,
+    appearance = 'Primary',
+    color,
+    labelPlacement = 'auto',
+    labelDirection = 'bottom',
+    labelGap = 8,
+    autoInsideMinSize = 88,
+    insideTextColor,
+    onPress,
+    valueStyle,
+    labelStyle,
+    circleStyle,
+    style,
+    modes: propModes = EMPTY_MODES,
+    accessibilityLabel,
+}: ClusterBubbleProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = useMemo(() => ({ ...globalModes, ...propModes }), [globalModes, propModes])
+
+    // Emphasis is read from the `Emphasis / DataViz` mode (defaulting to the
+    // token's own default) rather than a dedicated prop.
+    const fill = useMemo(() => {
+        if (color) return color
+        return (
+            (getVariableByName('dataViz/bg', {
+                ...modes,
+                'Appearance / DataViz': appearance,
+            }) as string | null) ?? DEFAULT_FILL
+        )
+    }, [color, modes, appearance])
+
+    const fontFamily =
+        (getVariableByName('text/fontFamily', modes) as string | null) ?? 'JioType'
+    const outsideTextColor =
+        (getVariableByName('text/foreground', modes) as string | null) ?? '#0f0d0a'
+
+    const placement: 'inside' | 'outside' =
+        labelPlacement === 'auto'
+            ? size >= autoInsideMinSize
+                ? 'inside'
+                : 'outside'
+            : labelPlacement
+
+    // Measure the outside label so it can be anchored precisely on any side
+    // without guessing its dimensions.
+    const [labelSize, setLabelSize] = useState<{ w: number; h: number } | null>(null)
+    const handleLabelLayout = (e: LayoutChangeEvent) => {
+        const { width, height } = e.nativeEvent.layout
+        setLabelSize((prev) =>
+            prev && Math.abs(prev.w - width) < 0.5 && Math.abs(prev.h - height) < 0.5
+                ? prev
+                : { w: width, h: height }
+        )
+    }
+
+    // Default typography scales with the bubble when inside (so it fits the
+    // disc); fixed comfortable sizes when anchored outside.
+    const valueFontSize =
+        placement === 'inside' ? Math.round(Math.min(48, Math.max(13, size * 0.17))) : 24
+    const labelFontSize =
+        placement === 'inside' ? Math.round(Math.min(18, Math.max(10, size * 0.085))) : 14
+
+    const textColor =
+        placement === 'inside' ? insideTextColor ?? readableTextColor(fill) : outsideTextColor
+
+    const renderText = (
+        node: React.ReactNode,
+        baseStyle: TextStyle,
+        override: StyleProp<TextStyle>
+    ) => {
+        if (node === undefined || node === null || node === false) return null
+        if (typeof node === 'string' || typeof node === 'number') {
+            return (
+                <Text style={[baseStyle, override]} numberOfLines={2}>
+                    {node}
+                </Text>
+            )
+        }
+        return node
+    }
+
+    const valueNode = renderText(
+        value,
+        {
+            color: textColor,
+            fontFamily,
+            fontSize: valueFontSize,
+            lineHeight: Math.round(valueFontSize * 1.15),
+            fontWeight: '700',
+            textAlign: 'center',
+            letterSpacing: -0.5,
+        },
+        valueStyle
+    )
+
+    const labelNode = renderText(
+        label,
+        {
+            color: textColor,
+            fontFamily,
+            fontSize: labelFontSize,
+            lineHeight: Math.round(labelFontSize * 1.3),
+            fontWeight: '400',
+            textAlign: 'center',
+            letterSpacing: -0.2,
+        },
+        labelStyle
+    )
+
+    const hasText = !!valueNode || !!labelNode
+
+    const textBlock = hasText ? (
+        <View style={styles.textBlock}>
+            {valueNode}
+            {labelNode}
+        </View>
+    ) : null
+
+    const derivedA11y = [value, label]
+        .filter((v) => typeof v === 'string' || typeof v === 'number')
+        .join(', ')
+    const a11yLabel = accessibilityLabel ?? (derivedA11y || undefined)
+
+    const circle = (
+        <View
+            style={[
+                styles.circle,
+                { width: size, height: size, borderRadius: size / 2, backgroundColor: fill },
+                circleStyle,
+            ]}
+        >
+            {placement === 'inside' ? textBlock : null}
+        </View>
+    )
+
+    let content: React.ReactNode
+    if (placement === 'inside' || !textBlock) {
+        content = <View style={[styles.inlineContainer, style]}>{circle}</View>
+    } else {
+        // Anchor the label exactly `labelGap` beyond the radius on the chosen
+        // side. Hidden until measured to avoid a positioning flash.
+        const offset = labelOffset(labelDirection, size, labelGap, labelSize)
+        content = (
+            <View style={[{ width: size, height: size }, style]}>
+                {circle}
+                <View
+                    onLayout={handleLabelLayout}
+                    style={[
+                        styles.outsideLabel,
+                        { left: offset.left, top: offset.top, opacity: labelSize ? 1 : 0 },
+                    ]}
+                    pointerEvents="none"
+                >
+                    {textBlock}
+                </View>
+            </View>
+        )
+    }
+
+    if (onPress) {
+        return (
+            <Pressable
+                onPress={onPress}
+                accessibilityRole="button"
+                accessibilityLabel={a11yLabel}
+                style={({ pressed }) => (pressed ? styles.pressed : undefined)}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View accessibilityRole="image" accessibilityLabel={a11yLabel}>
+            {content}
+        </View>
+    )
+}
+
+/** Compute the absolute `left/top` of the outside label box for a direction. */
+function labelOffset(
+    direction: ClusterBubbleLabelDirection,
+    size: number,
+    gap: number,
+    labelSize: { w: number; h: number } | null
+): { left: number; top: number } {
+    const center = size / 2
+    const w = labelSize?.w ?? 0
+    const h = labelSize?.h ?? 0
+    switch (direction) {
+        case 'top':
+            return { left: center - w / 2, top: -(gap + h) }
+        case 'bottom':
+            return { left: center - w / 2, top: size + gap }
+        case 'left':
+            return { left: -(gap + w), top: center - h / 2 }
+        case 'right':
+            return { left: size + gap, top: center - h / 2 }
+    }
+}
+
+const styles = StyleSheet.create({
+    inlineContainer: {
+        alignItems: 'center',
+    },
+    circle: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    textBlock: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 8,
+    },
+    outsideLabel: {
+        position: 'absolute',
+    },
+    pressed: {
+        opacity: 0.85,
+    },
+})
+
+export default ClusterBubble

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -3,17 +3,11 @@ import {
   View,
   Text,
   ScrollView,
+  StyleSheet,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
 } from 'react-native'
-import Animated, {
-  Extrapolation,
-  interpolate,
-  useAnimatedScrollHandler,
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -37,17 +31,6 @@ import Slot from '../Slot/Slot'
 // ---------------------------------------------------------------------------
 const FULLSCREEN_MODAL_FORCED_MODES = Object.freeze({ context5: 'Fullscreen Modal' })
 
-// Reanimated-driven ScrollView so the parallax handler runs on the UI thread.
-// Module scope so the wrapped component identity is stable across renders.
-const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
-
-// Parallax tuning. The hero collapses by HEIGHT only as the user scrolls up —
-// its full width is preserved and the media keeps a fixed aspect ratio (it is
-// cropped, never scaled or squished, like a `cover` background). When no
-// explicit `heroMinHeight` is given, the hero collapses to this fraction of
-// its resting height.
-const HERO_MIN_HEIGHT_RATIO = 0.45
-
 export type FullscreenModalProps = {
   /** Small eyebrow line above the headline. */
   eyebrow?: string
@@ -58,23 +41,20 @@ export type FullscreenModalProps = {
   /** Secondary line below the supporting paragraph (e.g. a price / timeline). */
   priceText?: string
   /**
-   * Media rendered full-bleed behind the hero text and driven by the parallax
-   * scroll effect. Bring any renderer — most commonly a `LottiePlayer`, but an
-   * `Image`, `Video`, or `SvgXml` works too. Size it to fill the hero box
-   * (`heroHeight` tall, full modal width) and let it `cover` so that as the
-   * hero collapses in height the art is cropped, never distorted. `modes` are
-   * cascaded into it.
+   * Background media rendered full-bleed behind the hero text. Bring any
+   * renderer — most commonly an `Image`, but a `LottiePlayer`, `Video`, or
+   * `SvgXml` works too. It is laid out at the full modal width; size it with an
+   * aspect ratio (e.g. `<Image ratio={3 / 4} />`) so its height follows the
+   * width naturally. The media scrolls together with the rest of the content
+   * (no parallax). `modes` are cascaded into it.
    */
   heroMedia?: React.ReactNode
-  /** Resting height of the hero region. Defaults to 420. */
-  heroHeight?: number
   /**
-   * Collapsed height the hero shrinks to at full scroll. Defaults to
-   * `heroHeight * 0.45`. Only the height changes — the width is always full.
+   * Fallback height for the hero text region when no `heroMedia` is provided.
+   * When `heroMedia` is present, the hero height is driven entirely by the
+   * media's own aspect ratio and this value is ignored. Defaults to 420.
    */
-  heroMinHeight?: number
-  /** Enable the scroll-driven hero collapse. Defaults to true. */
-  parallax?: boolean
+  heroHeight?: number
   /** Whether to render the floating close button (top-right). Defaults to true. */
   showClose?: boolean
   /** Press handler for the close button. */
@@ -109,7 +89,7 @@ export type FullscreenModalProps = {
 // Hero text — the eyebrow / headline / supporting / price block. Built inline
 // (rather than reusing <PageHero>) so we can render BOTH a supporting
 // paragraph AND a price line with the exact PageHero token gaps, and overlay
-// it on the parallax media without PageHero's media/button scaffolding.
+// it on the hero media without PageHero's media/button scaffolding.
 // ---------------------------------------------------------------------------
 type HeroTextProps = {
   eyebrow?: string
@@ -181,8 +161,9 @@ function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroT
 }
 
 /**
- * FullscreenModal — a full-screen takeover surface with a parallax media hero,
- * a scrollable body, a floating close button, and a sticky `ActionFooter`.
+ * FullscreenModal — a full-screen takeover surface with a full-bleed media
+ * hero, a scrollable body, a floating close button, and a sticky
+ * `ActionFooter`.
  *
  * The component always themes itself with `context5: 'Fullscreen Modal'`
  * (non-overridable) so every nested component (Section, ListItem, Button,
@@ -190,14 +171,12 @@ function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroT
  * That mode is cascaded into `children`, the footer, and the hero text via
  * `cloneChildrenWithModes` / the merged `modes` object.
  *
- * ### Parallax
- * As the user scrolls up, the hero collapses by **height only** (from
- * `heroHeight` to `heroMinHeight`) — its **full width is always preserved**.
- * The `heroMedia` is pinned to the top at a fixed size and `cover`-cropped by
- * the collapsing clip, so it keeps a perfect aspect ratio the whole time
- * (never scaled or squished). Because it collapses slower than the content
- * scrolls, the media lags behind for the parallax depth cue. Disable with
- * `parallax={false}`.
+ * ### Hero
+ * The `heroMedia` is rendered full modal width inside the scroll body and
+ * takes its height from its own aspect ratio. The hero text (eyebrow /
+ * headline / supporting / price) is overlaid on top, anchored to the bottom.
+ * The whole hero scrolls together with the rest of the content — there is no
+ * parallax effect.
  *
  * @component
  * @example
@@ -207,7 +186,7 @@ function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroT
  *   headline="Get more from your money."
  *   supportingText="JioFinance+ is your upgraded financial experience…"
  *   priceText="₹999/year · ₹0 until 2027"
- *   heroMedia={<LottiePlayer source={hero} size={{ width: 360, height: 420 }} />}
+ *   heroMedia={<Image imageSource={hero} ratio={3 / 4} />}
  *   primaryActionLabel="Upgrade for free"
  *   disclaimer="By upgrading, we'll check your eligibility with Experian."
  *   onPrimaryAction={() => upgrade()}
@@ -225,8 +204,6 @@ function FullscreenModal({
   priceText = '₹999/year · ₹0 until 2027',
   heroMedia,
   heroHeight = 420,
-  heroMinHeight,
-  parallax = true,
   showClose = true,
   onClose,
   closeAccessibilityLabel = 'Close',
@@ -252,28 +229,6 @@ function FullscreenModal({
 
   const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16
 
-  const minHeight = heroMinHeight ?? Math.round(heroHeight * HERO_MIN_HEIGHT_RATIO)
-
-  const scrollY = useSharedValue(0)
-  const onScroll = useAnimatedScrollHandler((event) => {
-    scrollY.value = event.contentOffset.y
-  })
-
-  // Collapse the hero by HEIGHT only as the user scrolls up. The clip's width
-  // never changes and the media inside is pinned full-size at the top, so the
-  // art is cropped (cover) rather than scaled or narrowed — it keeps a perfect
-  // aspect ratio the whole time. Pull-down (negative offset) is clamped, so the
-  // hero never grows past its resting height.
-  const heroAnimatedStyle = useAnimatedStyle(() => {
-    const height = interpolate(
-      scrollY.value,
-      [0, heroHeight],
-      [heroHeight, minHeight],
-      Extrapolation.CLAMP
-    )
-    return { height }
-  })
-
   const processedHeroMedia = useMemo(
     () =>
       heroMedia ? cloneChildrenWithModes(heroMedia, modes, FULLSCREEN_MODAL_FORCED_MODES) : null,
@@ -286,37 +241,11 @@ function FullscreenModal({
     [children, modes]
   )
 
-  // The clip is full-width and top-pinned; its height is what animates. Width
-  // is intentionally never animated.
-  const heroClipBaseStyle = useMemo<ViewStyle>(
-    () => ({
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      overflow: 'hidden',
-    }),
-    []
-  )
-
-  // The media sits at a fixed full-size box pinned to the top of the clip, so
-  // the collapsing clip crops it from the bottom (cover) instead of resizing
-  // it. Full width, fixed height — a perfect, constant aspect ratio.
-  const heroMediaWrapStyle = useMemo<ViewStyle>(
+  // No-media fallback: without hero media the text region needs an explicit
+  // resting height (driven by `heroHeight`) so the hero still has presence.
+  const heroTextFallbackStyle = useMemo<ViewStyle>(
     () => ({
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      height: heroHeight,
-      alignItems: 'stretch',
-    }),
-    [heroHeight]
-  )
-
-  const heroTextRegionStyle = useMemo<ViewStyle>(
-    () => ({
-      height: heroHeight,
+      minHeight: heroHeight,
       justifyContent: 'flex-end',
       paddingHorizontal: 16,
       paddingBottom: 16,
@@ -337,13 +266,29 @@ function FullscreenModal({
     [backgroundColor, rootGap, contentContainerStyle]
   )
 
-  const heroClip = (
-    <Animated.View
-      style={[heroClipBaseStyle, parallax ? heroAnimatedStyle : { height: heroHeight }]}
-      pointerEvents="none"
-    >
-      <View style={heroMediaWrapStyle}>{processedHeroMedia}</View>
-    </Animated.View>
+  const heroTextNode = (
+    <HeroText
+      eyebrow={eyebrow}
+      headline={headline}
+      supportingText={supportingText}
+      priceText={priceText}
+      modes={modes}
+    />
+  )
+
+  // The hero scrolls inline with the body (no parallax). When media is present
+  // it is laid out full modal width and takes its height from its own aspect
+  // ratio; the hero text is overlaid on top, anchored to the bottom. Without
+  // media the text simply renders in flow at the fallback height.
+  const hero = processedHeroMedia ? (
+    <View style={heroMediaContainerStyle}>
+      {processedHeroMedia}
+      <View style={heroTextOverlayStyle} pointerEvents="box-none">
+        {heroTextNode}
+      </View>
+    </View>
+  ) : (
+    <View style={heroTextFallbackStyle}>{heroTextNode}</View>
   )
 
   // Footer: a fully custom node, or the default Button + Disclaimer column.
@@ -366,29 +311,17 @@ function FullscreenModal({
 
   return (
     <View style={[rootStyle, { backgroundColor }, style]} testID={testID}>
-      {processedHeroMedia ? heroClip : null}
-
-      <AnimatedScrollView
+      <ScrollView
         style={scrollViewStyle}
         contentContainerStyle={scrollContentStyle}
         showsVerticalScrollIndicator={false}
-        onScroll={onScroll}
-        scrollEventThrottle={16}
         // Tap an input in the body and it focuses on the FIRST tap, even when
         // the keyboard is already open (default 'never' eats that tap).
         keyboardShouldPersistTaps="handled"
       >
-        <View style={heroTextRegionStyle}>
-          <HeroText
-            eyebrow={eyebrow}
-            headline={headline}
-            supportingText={supportingText}
-            priceText={priceText}
-            modes={modes}
-          />
-        </View>
+        {hero}
         <View style={bodyStyle}>{processedChildren}</View>
-      </AnimatedScrollView>
+      </ScrollView>
 
       {footerContent ? (
         <ActionFooter modes={modes}>{footerContent}</ActionFooter>
@@ -413,5 +346,14 @@ const scrollViewStyle: ViewStyle = { flex: 1 }
 const scrollContentStyle: ViewStyle = { flexGrow: 1 }
 const fullWidthStyle: ViewStyle = { width: '100%' }
 const closeButtonStyle: ViewStyle = { position: 'absolute', top: 12, right: 12 }
+// Full-width hero wrapper; height comes from the media's own aspect ratio.
+const heroMediaContainerStyle: ViewStyle = { width: '100%', position: 'relative' }
+// Hero text overlaid on the media, anchored to the bottom edge.
+const heroTextOverlayStyle: ViewStyle = {
+  ...StyleSheet.absoluteFillObject,
+  justifyContent: 'flex-end',
+  paddingHorizontal: 16,
+  paddingBottom: 16,
+}
 
 export default FullscreenModal

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -22,6 +22,12 @@ export type MetricLegendItemProps = {
      * `metricLegendItem/indicator/bg` design token.
      */
     indicatorColor?: string
+    /**
+     * Shape of the leading indicator. `'dot'` (default) renders the small
+     * circle used in categorical legends; `'line'` renders a short
+     * horizontal bar, matching the legend of a line chart.
+     */
+    indicatorShape?: 'dot' | 'line'
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
     modes?: Record<string, any>
     /** Override container styles. */
@@ -46,6 +52,7 @@ function MetricLegendItem({
     label = 'Current (4 months)',
     value,
     indicatorColor,
+    indicatorShape = 'dot',
     modes = EMPTY_MODES,
     style,
     indicatorStyle,
@@ -107,12 +114,19 @@ function MetricLegendItem({
         >
             <View
                 style={[
-                    {
-                        width: indicatorSize,
-                        height: indicatorSize,
-                        borderRadius: indicatorRadius,
-                        backgroundColor: indicatorBg,
-                    },
+                    indicatorShape === 'line'
+                        ? {
+                              width: indicatorSize * 2,
+                              height: Math.max(2, Math.round(indicatorSize / 4)),
+                              borderRadius: indicatorRadius,
+                              backgroundColor: indicatorBg,
+                          }
+                        : {
+                              width: indicatorSize,
+                              height: indicatorSize,
+                              borderRadius: indicatorRadius,
+                              backgroundColor: indicatorBg,
+                          },
                     indicatorStyle,
                 ]}
             />