jfs-components 0.0.72 → 0.0.74

package/src/components/SegmentedTrack/SegmentedTrack.tsx

@@ -0,0 +1,268 @@
+import React from 'react'
+import {
+    View,
+    type StyleProp,
+    type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+
+/**
+ * Per-segment data definition for the data-driven `segments` prop.
+ *
+ * Use `value` for proportional widths (segments share width by their value
+ * relative to the sum). When `value` is omitted, segments share the row
+ * equally (`flex: 1`).
+ *
+ * Use `modes` to override the per-segment design-token mode — typically the
+ * `Appearance / DataViz` mode for color theming, or `Emphasis / DataViz` to
+ * change the emphasis level. The parent already injects per-index defaults
+ * (segment 0 = High, 1 = Medium, 2 = Low, then cycling) so callers only need
+ * to pass `modes` when they want a different result.
+ */
+export type SegmentedTrackSegmentData = {
+    /** Stable React key. */
+    key?: React.Key
+    /**
+     * Optional explicit weight used for proportional width (`flex: value`).
+     * When omitted, the segment uses an equal share of the available row.
+     * Mixing values and undefined is supported — undefined falls back to 1.
+     */
+    value?: number
+    /**
+     * Hard-override the segment color. Bypasses `dataViz/bg` token resolution
+     * entirely.
+     */
+    color?: string
+    /**
+     * Per-segment design token mode overrides. Merged on top of the parent
+     * `modes` and the per-index Emphasis defaults.
+     */
+    modes?: Record<string, any>
+    /** Override individual segment styles. */
+    style?: StyleProp<ViewStyle>
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string
+}
+
+export type SegmentedTrackProps = {
+    /**
+     * Data-driven segment list. Used when no `children` slot is provided.
+     * Defaults to three equal segments which receive per-index Emphasis
+     * defaults (`High`, `Medium`, `Low`).
+     */
+    segments?: SegmentedTrackSegmentData[]
+    /**
+     * Slot for fully custom segment children. Each top-level child is treated
+     * as one segment. The parent injects per-index Emphasis defaults and the
+     * shared `modes`, while child-level `modes` overrides win.
+     */
+    children?: React.ReactNode
+    /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+    modes?: Record<string, any>
+    /** Override the container styles. */
+    style?: StyleProp<ViewStyle>
+    /** Style applied to every segment (data-driven mode only). */
+    segmentStyle?: StyleProp<ViewStyle>
+    /** Accessibility label announced for the whole distribution row. */
+    accessibilityLabel?: string
+}
+
+type SegmentedTrackSegmentProps = {
+    /**
+     * Optional explicit weight used for proportional width (`flex: value`).
+     * Defaults to 1 (equal share within the parent row).
+     */
+    value?: number | undefined
+    /**
+     * Hard-override the segment color. Bypasses `dataViz/bg` token resolution.
+     */
+    color?: string | undefined
+    /**
+     * Design token modes for the segment. Merged with parent `modes` and the
+     * per-index Emphasis defaults injected by the parent `SegmentedTrack`.
+     */
+    modes?: Record<string, any> | undefined
+    /** Override the segment styles. */
+    style?: StyleProp<ViewStyle> | undefined
+    /** Per-segment accessibility label. */
+    accessibilityLabel?: string | undefined
+}
+
+/**
+ * Default per-index Emphasis modes applied to every segment when the caller
+ * does not provide its own `Emphasis / DataViz` override. Cycles for >3
+ * segments so additional segments fall back to the same High/Medium/Low
+ * rotation.
+ */
+const DEFAULT_EMPHASIS_CYCLE = ['High', 'Medium', 'Low'] as const
+
+const DEFAULT_SEGMENTS: SegmentedTrackSegmentData[] = [
+    {},
+    {},
+    {},
+]
+
+/**
+ * Compute the default `Emphasis / DataViz` mode for a segment at `index`.
+ * Cycles through {@link DEFAULT_EMPHASIS_CYCLE} so any number of segments
+ * gets a sensible default.
+ */
+function defaultEmphasisFor(index: number) {
+    return DEFAULT_EMPHASIS_CYCLE[index % DEFAULT_EMPHASIS_CYCLE.length]
+}
+
+function SegmentedTrackSegment({
+    value = 1,
+    color,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: SegmentedTrackSegmentProps) {
+    const resolvedColor =
+        color ?? ((getVariableByName('dataViz/bg', modes) as string | null) ?? '#5d00b5')
+
+    return (
+        <View
+            accessibilityLabel={accessibilityLabel}
+            style={[
+                {
+                    flex: value,
+                    minWidth: 1,
+                    height: '100%',
+                    backgroundColor: resolvedColor,
+                },
+                style,
+            ]}
+        />
+    )
+}
+
+/**
+ * `SegmentedTrack` renders a horizontal pill-shaped row of categorical
+ * segments. Use it for distribution / share-of breakdowns where each
+ * segment is a sibling category (not a directional or temporal progress).
+ *
+ * Defaults to three equal segments tinted at descending Emphasis levels
+ * (`High`, `Medium`, `Low`) so the shape reads as a single concept split
+ * three ways. Consumers can either pass the data-driven `segments` prop or
+ * a fully custom `children` slot of `SegmentedTrack.Segment`s.
+ *
+ * Each segment resolves its color through the `dataViz/bg` token, which
+ * cascades through `Emphasis / DataViz` and `Appearance / DataViz`. Pass
+ * `modes` per segment (or override `Appearance / DataViz` at the parent
+ * level via `modes`) to retheme the row without touching colors directly.
+ *
+ * @component
+ * @param {SegmentedTrackProps} props
+ */
+function SegmentedTrack({
+    segments,
+    children,
+    modes: propModes = EMPTY_MODES,
+    style,
+    segmentStyle,
+    accessibilityLabel,
+}: SegmentedTrackProps) {
+    const { modes: globalModes } = useTokens()
+    const modes = { ...globalModes, ...propModes }
+
+    const trackHeight =
+        (getVariableByName('segmentedTrack/height', modes) as number | null) ?? 24
+    const trackRadius =
+        (getVariableByName('segmentedTrack/radius', modes) as number | null) ?? 999
+
+    const renderedSegments = renderSegments({
+        segments,
+        children,
+        modes,
+        segmentStyle,
+    })
+
+    return (
+        <View
+            accessibilityRole="image"
+            accessibilityLabel={accessibilityLabel}
+            style={[
+                {
+                    flexDirection: 'row',
+                    alignItems: 'stretch',
+                    height: trackHeight,
+                    borderRadius: trackRadius,
+                    overflow: 'hidden',
+                    width: '100%',
+                    backgroundColor: 'transparent',
+                },
+                style,
+            ]}
+        >
+            {renderedSegments}
+        </View>
+    )
+}
+
+/**
+ * Build the slot children. When the caller passes JSX `children`, every
+ * top-level element is treated as one segment and receives merged `modes`
+ * (parent + per-index Emphasis default + the child's own `modes` taking
+ * priority). Otherwise the data-driven `segments` array is rendered.
+ */
+function renderSegments({
+    segments,
+    children,
+    modes,
+    segmentStyle,
+}: {
+    segments: SegmentedTrackSegmentData[] | undefined
+    children: React.ReactNode | undefined
+    modes: Record<string, any>
+    segmentStyle: StyleProp<ViewStyle> | undefined
+}): React.ReactNode[] {
+    if (children !== undefined && children !== null) {
+        const flat = flattenChildren(children)
+        return flat.map((child, index) => {
+            if (!React.isValidElement(child)) {
+                return child
+            }
+            const childProps = (child.props as any) ?? {}
+            const childModes = childProps.modes
+            const mergedModes = {
+                ...modes,
+                'Emphasis / DataViz': defaultEmphasisFor(index),
+                ...(childModes || {}),
+            }
+            return React.cloneElement(child, {
+                ...childProps,
+                modes: mergedModes,
+                key: child.key ?? `segment-${index}`,
+            })
+        })
+    }
+
+    const list = segments && segments.length > 0 ? segments : DEFAULT_SEGMENTS
+    return list.map((segment, index) => {
+        const segmentModes = {
+            ...modes,
+            'Emphasis / DataViz': defaultEmphasisFor(index),
+            ...(segment.modes || {}),
+        }
+        return (
+            <SegmentedTrackSegment
+                key={segment.key ?? `segment-${index}`}
+                value={segment.value ?? 1}
+                color={segment.color}
+                modes={segmentModes}
+                style={[segmentStyle, segment.style]}
+                accessibilityLabel={segment.accessibilityLabel}
+            />
+        )
+    })
+}
+
+SegmentedTrack.Segment = SegmentedTrackSegment
+
+export { SegmentedTrackSegment }
+export type { SegmentedTrackSegmentProps }
+
+export default SegmentedTrack

package/src/components/StatGroup/StatGroup.tsx

@@ -0,0 +1,169 @@
+import React from 'react'
+import { View, type StyleProp, type ViewStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import {
+  EMPTY_MODES,
+  cloneChildrenWithModes,
+  flattenChildren,
+} from '../../utils/react-utils'
+import StatItem from '../StatItem/StatItem'
+import Divider from '../Divider/Divider'
+
+export type StatGroupItem = {
+  /** Stable key for the item. Falls back to the label / index. */
+  key?: React.Key
+  /** The descriptive label shown beneath the value. */
+  label?: string
+  /** The prominent value shown above the label. */
+  value?: string
+}
+
+export type StatGroupProps = {
+  /**
+   * Array of stat items. Each item is rendered as a centered `StatItem`
+   * (`labelPosition="Bottom"`) with vertical dividers between them.
+   *
+   * Ignored when a `children` slot is provided.
+   */
+  items?: StatGroupItem[]
+  /**
+   * Custom slot content. When provided, the `items` prop is ignored. Each
+   * top-level child is wrapped to take an equal share of the available width
+   * and a vertical `Divider` is auto-inserted between siblings — matching the
+   * Figma `slot` behaviour. `modes` are propagated to all children.
+   */
+  children?: React.ReactNode
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override container styles. */
+  style?: StyleProp<ViewStyle>
+}
+
+const DEFAULT_ITEMS: StatGroupItem[] = [
+  { label: 'Updates', value: 'Daily' },
+  { label: 'Data range', value: '24 months' },
+  { label: 'Validity', value: '24 months' },
+  { label: 'Stored for', value: '1 month' },
+]
+
+/**
+ * StatGroup renders a card-style container holding a horizontal row of
+ * `StatItem`s separated by vertical dividers. It is typically used to surface
+ * 3–5 short metrics (e.g. validity, data range, storage) at a glance.
+ *
+ * Pass `items` for the simple data-driven case, or use the `children` slot
+ * for full control over the row contents (the component still auto-inserts
+ * vertical dividers between top-level children).
+ *
+ * @component
+ * @param {StatGroupProps} props
+ */
+function StatGroup({
+  items,
+  children,
+  modes = EMPTY_MODES,
+  style,
+}: StatGroupProps) {
+  const background =
+    (getVariableByName('statGroup/background', modes) as string | null) ?? '#ffffff'
+  const strokeColor =
+    (getVariableByName('statGroup/stroke/color', modes) as string | null) ?? '#ebebed'
+  const strokeSize =
+    (getVariableByName('statGroup/stroke/size', modes) as number | null) ?? 1
+  const radius =
+    (getVariableByName('statGroup/radius', modes) as number | null) ?? 12
+  const paddingTop =
+    (getVariableByName('statGroup/padding/top', modes) as number | null) ?? 16
+  const paddingRight =
+    (getVariableByName('statGroup/padding/right', modes) as number | null) ?? 0
+  const paddingBottom =
+    (getVariableByName('statGroup/padding/bottom', modes) as number | null) ?? 12
+  const paddingLeft =
+    (getVariableByName('statGroup/padding/left', modes) as number | null) ?? 0
+
+  const containerStyle: ViewStyle = {
+    backgroundColor: background,
+    borderColor: strokeColor,
+    borderWidth: strokeSize,
+    borderStyle: 'solid',
+    borderRadius: radius,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    overflow: 'hidden',
+  }
+
+  const slotChildren = renderSlotChildren({ items, children, modes })
+
+  return (
+    <View style={[containerStyle, style]} accessibilityRole="summary">
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'stretch',
+          width: '100%',
+        }}
+      >
+        {slotChildren}
+      </View>
+    </View>
+  )
+}
+
+/**
+ * Build the row of items: render either the supplied children or the
+ * `items` array, wrap each entry so it grows equally, and inject a vertical
+ * `Divider` between siblings.
+ */
+function renderSlotChildren({
+  items,
+  children,
+  modes,
+}: {
+  items?: StatGroupItem[]
+  children?: React.ReactNode
+  modes: Record<string, any>
+}): React.ReactNode[] {
+  let nodes: React.ReactNode[]
+
+  if (children !== undefined && children !== null) {
+    const cloned = cloneChildrenWithModes(children, modes)
+    nodes = flattenChildren(cloned)
+  } else {
+    const list = items && items.length > 0 ? items : DEFAULT_ITEMS
+    nodes = list.map((item, index) => (
+      <StatItem
+        key={item.key ?? `${item.label ?? 'item'}-${index}`}
+        label={item.label}
+        value={item.value}
+        labelPosition="Bottom"
+        modes={modes}
+      />
+    ))
+  }
+
+  const result: React.ReactNode[] = []
+  nodes.forEach((node, index) => {
+    if (index > 0) {
+      result.push(
+        <Divider
+          key={`divider-${index}`}
+          direction="vertical"
+          modes={modes}
+        />
+      )
+    }
+    result.push(
+      <View
+        key={`slot-${index}`}
+        style={{ flex: 1, minWidth: 0, alignSelf: 'center' }}
+      >
+        {node}
+      </View>
+    )
+  })
+  return result
+}
+
+export default StatGroup

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