jfs-components 0.1.23 → 0.1.28

package/src/components/MetricData/MetricData.tsx

@@ -0,0 +1,185 @@
+import React from 'react'
+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'
+import Icon from '../Icon/Icon'
+import type { Modes } from '../../design-tokens'
+
+const LINE_HEIGHT_RATIO = 1.2
+const ICON_SIZE = 18
+// Figma renders the value-row icon with no surrounding padding; the shared Icon
+// component pulls padding from `icon/padding/*` tokens, so we zero it here.
+const ICON_PADDING_RESET: ViewStyle = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+}
+
+export type MetricDataProps = {
+  /** Top label (small, 12px). Hidden when omitted. */
+  title?: string
+  /**
+   * The prominent value (20px bold). Pass a string, or any node (e.g. a
+   * `MoneyValue`) to compose a richer value.
+   */
+  value?: string | React.ReactNode
+  /** Sub-label below the value (12px, muted). Hidden when omitted. */
+  caption?: string
+  /**
+   * Optional glyph shown to the left of the value. Pass a registry icon name
+   * (e.g. `'ic_card'`) or a custom node. Rendered at 18px, tinted to the value
+   * colour. Hidden when omitted.
+   */
+  icon?: string | React.ReactNode
+  /** Design-token modes for theming. */
+  modes?: Modes
+  /** Override the container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the title text styles. */
+  titleStyle?: StyleProp<TextStyle>
+  /** Override the value text styles. */
+  valueStyle?: StyleProp<TextStyle>
+  /** Override the caption text styles. */
+  captionStyle?: StyleProp<TextStyle>
+  /**
+   * Accessibility label. Defaults to the resolved `title`, `value` and
+   * `caption` text joined together.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * MetricData — a compact, centered metric block.
+ *
+ * Stacks a small `title`, a prominent `value` (with an optional leading
+ * `icon`), and a muted `caption`. Typography, colours, gaps and padding all
+ * resolve from the `metricdata/*` design tokens. `title`, `caption` and `icon`
+ * are optional; only `value` is shown by default.
+ *
+ * @example
+ * ```tsx
+ * <MetricData title="Balance" value="₹1,20,000" caption="as of today" />
+ * <MetricData title="Cards" value="12" icon="ic_card" caption="active" />
+ * ```
+ */
+function MetricData({
+  title,
+  value,
+  caption,
+  icon,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel,
+}: MetricDataProps) {
+  const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
+  const titleFontFamily = (getVariableByName('metricdata/title/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const titleFontSize = (getVariableByName('metricdata/title/fontsize', modes) as number | null) ?? 12
+  const titleFontWeight = String(getVariableByName('metricdata/title/fontweight', modes) ?? 400) as TextStyle['fontWeight']
+
+  const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
+  const valueFontFamily = (getVariableByName('metricdata/value/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const valueFontSize = (getVariableByName('metricdata/value/fontsize', modes) as number | null) ?? 20
+  const valueFontWeight = String(getVariableByName('metricdata/value/fontweight', modes) ?? 700) as TextStyle['fontWeight']
+
+  const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
+  const captionFontFamily = (getVariableByName('metricdata/caption/fontfamily', modes) as string | null) ?? 'JioType Var'
+  const captionFontSize = (getVariableByName('metricdata/caption/fontsize', modes) as number | null) ?? 12
+  const captionFontWeight = String(getVariableByName('metricdata/caption/fontweight', modes) ?? 500) as TextStyle['fontWeight']
+
+  const gap = (getVariableByName('metricdata/gap', modes) as number | null) ?? 4
+  const valueWrapGap = (getVariableByName('metricdata/valueWrap/gap', modes) as number | null) ?? 4
+  const paddingHorizontal = (getVariableByName('metricdata/padding/horizontal', modes) as number | null) ?? 10
+  const paddingVertical = (getVariableByName('metricdata/padding/vertical', modes) as number | null) ?? 10
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontFamily: titleFontFamily,
+    fontSize: titleFontSize,
+    fontWeight: titleFontWeight,
+    lineHeight: titleFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center',
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: valueColor,
+    fontFamily: valueFontFamily,
+    fontSize: valueFontSize,
+    fontWeight: valueFontWeight,
+    lineHeight: valueFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center',
+  }
+
+  const captionTextStyle: TextStyle = {
+    color: captionColor,
+    fontFamily: captionFontFamily,
+    fontSize: captionFontSize,
+    fontWeight: captionFontWeight,
+    lineHeight: captionFontSize * LINE_HEIGHT_RATIO,
+    textAlign: 'center',
+  }
+
+  const iconNode =
+    icon == null ? null : typeof icon === 'string' ? (
+      <Icon
+        iconName={icon}
+        size={ICON_SIZE}
+        color={valueColor}
+        modes={modes}
+        style={ICON_PADDING_RESET}
+      />
+    ) : (
+      icon
+    )
+
+  const resolvedLabel =
+    accessibilityLabel ??
+    ([title, typeof value === 'string' ? value : undefined, caption]
+      .filter(Boolean)
+      .join(', ') || undefined)
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessible
+      {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+    >
+      {title !== undefined && title !== '' ? (
+        <Text style={[titleTextStyle, titleStyle]}>{title}</Text>
+      ) : null}
+
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: valueWrapGap }}>
+        {iconNode}
+        {typeof value === 'string' ? (
+          <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+        ) : (
+          value
+        )}
+      </View>
+
+      {caption !== undefined && caption !== '' ? (
+        <Text style={[captionTextStyle, captionStyle]}>{caption}</Text>
+      ) : null}
+    </View>
+  )
+}
+
+export default React.memo(MetricData)

package/src/components/NumberPagination/NumberPagination.tsx

@@ -0,0 +1,170 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import GlassFill from '../../utils/GlassFill/GlassFill'
+import type { Modes } from '../../design-tokens'
+
+export type NumberPaginationProps = {
+  /** The 1-based active page index. Ignored if `children` is supplied. Defaults to 1. */
+  activePage?: number;
+  /** The total number of pages. Ignored if `children` is supplied. Defaults to 1. */
+  totalPages?: number;
+  /** Callback fired when a page button is pressed. Ignored if `children` is supplied. */
+  onPageChange?: (page: number) => void;
+  /** Custom children to override the default page buttons. */
+  children?: React.ReactNode;
+  modes?: Modes;
+  style?: StyleProp<ViewStyle>;
+}
+
+interface NumberPaginationTokens {
+  containerStyle: ViewStyle;
+  activeItemStyle: ViewStyle;
+  inactiveItemStyle: ViewStyle;
+  activeTextStyle: TextStyle;
+  inactiveTextStyle: TextStyle;
+  blurIntensity: number;
+  backgroundColor: string;
+}
+
+function resolveNumberPaginationTokens(modes: Modes): NumberPaginationTokens {
+  const horizontalPadding = (getVariableByName('numberPagination/padding/horizontal', modes) ?? 4) as number
+  const verticalPadding = (getVariableByName('numberPagination/padding/vertical', modes) ?? 4) as number
+  const radiusRaw = (getVariableByName('numberPagination/radius', modes) ?? 9999) as number
+  const backgroundColor = (getVariableByName('numberPagination/background/color', modes) ?? 'rgba(141, 141, 141, 0.4)') as string
+  const borderColor = (getVariableByName('numberPagination/border/color', modes) ?? 'rgba(255, 255, 255, 0.15)') as string
+
+  // control number variables
+  const itemWidth = (getVariableByName('controlNumber/width', modes) ?? 32) as number
+  const itemHeight = (getVariableByName('controlNumber/height', modes) ?? 32) as number
+  const itemRadiusRaw = (getVariableByName('controlNumber/radius', modes) ?? 9999) as number
+  const activeBgColor = (getVariableByName('control/active/background/color', modes) ?? '#ffffff') as string
+  const activeTextColor = (getVariableByName('control/active/text/color', modes) ?? '#000000') as string
+  const inactiveTextColor = (getVariableByName('control/text/default', modes) ?? '#ffffff') as string
+
+  // typography variables
+  const fontFamily = (getVariableByName('numberPagination/fontFamily', modes) ?? 'JioType') as string
+  const fontSize = (getVariableByName('numberPagination/fontSize', modes) ?? 16) as number
+  const fontWeight = String(getVariableByName('numberPagination/fontWeight', modes) ?? '500') as TextStyle['fontWeight']
+  const lineHeight = (getVariableByName('numberPagination/lineHeight', modes) ?? 18) as number
+
+  const blurMinimal = (getVariableByName('blur/minimal', modes) ?? 29) as number
+  const blurIntensity = Math.max(0, Math.min(100, Math.round(Number(blurMinimal))))
+
+  const borderRadius = radiusRaw === 9999 ? 39 / 2 : radiusRaw
+  const itemRadius = itemRadiusRaw === 9999 ? itemWidth / 2 : itemRadiusRaw
+
+  return {
+    containerStyle: {
+      height: 39,
+      borderRadius,
+      borderWidth: 1,
+      borderColor,
+      backgroundColor: 'transparent',
+      overflow: 'hidden',
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: horizontalPadding,
+      paddingVertical: verticalPadding,
+    },
+    activeItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: activeBgColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    inactiveItemStyle: {
+      width: itemWidth,
+      height: itemHeight,
+      borderRadius: itemRadius,
+      backgroundColor: 'transparent',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    activeTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: activeTextColor,
+      textAlign: 'center',
+    },
+    inactiveTextStyle: {
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight,
+      color: inactiveTextColor,
+      textAlign: 'center',
+    },
+    blurIntensity,
+    backgroundColor,
+  }
+}
+
+/**
+ * NumberPagination component displays a horizontal list of page numbers on a frosted glass surface.
+ * All styling is driven by Figma design tokens with support for custom children slot.
+ */
+export default function NumberPagination({
+  activePage = 1,
+  totalPages = 1,
+  onPageChange,
+  children,
+  modes,
+  style,
+}: NumberPaginationProps) {
+  const tokens = useMemo(() => resolveNumberPaginationTokens(modes ?? {}), [modes])
+
+  const renderPages = () => {
+    if (children) {
+      return children
+    }
+
+    const pages = []
+    for (let i = 1; i <= totalPages; i++) {
+      const active = i === activePage
+      pages.push(
+        <Pressable
+          key={i}
+          onPress={() => onPageChange?.(i)}
+          style={({ pressed }) => [
+            active ? tokens.activeItemStyle : tokens.inactiveItemStyle,
+            pressed && { opacity: 0.7 },
+          ]}
+          accessibilityRole="button"
+          accessibilityState={{ selected: active }}
+          accessibilityLabel={`Page ${i}`}
+        >
+          <Text style={active ? tokens.activeTextStyle : tokens.inactiveTextStyle}>
+            {i}
+          </Text>
+        </Pressable>
+      )
+    }
+    return pages
+  }
+
+  return (
+    <View style={[tokens.containerStyle, style]}>
+      <GlassFill
+        tint="light"
+        intensity={tokens.blurIntensity}
+        overlayColor={tokens.backgroundColor}
+        androidTintWash={false}
+      />
+      <View style={{ flexDirection: 'row', alignItems: 'center', height: '100%' }}>
+        {renderPages()}
+      </View>
+    </View>
+  )
+}

package/src/components/ProfileCard/ProfileCard.tsx

@@ -0,0 +1,268 @@
+import React, { useMemo } from 'react'
+import {
+  View,
+  type StyleProp,
+  type ViewStyle,
+  type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Avatar from '../Avatar/Avatar'
+import Attached from '../Attached/Attached'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import ListItem from '../ListItem/ListItem'
+import UpiHandle from '../UpiHandle/UpiHandle'
+import Divider from '../Divider/Divider'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single UPI handle pill rendered under the profile name.
+ */
+export interface ProfileCardUpiHandle {
+  /** Handle text, e.g. `"username@jio"` or a phone number. */
+  label: string
+  /** Trailing registry icon (e.g. `'ic_copy'`, `'ic_confirm'`). */
+  iconName?: string
+  /** Toggles the trailing icon. Defaults to `true`. */
+  showIcon?: boolean
+  /** Makes the pill pressable (e.g. copy-to-clipboard). */
+  onPress?: () => void
+}
+
+export interface ProfileCardProps {
+  /** User's display name shown in the header. */
+  name?: string
+  /** Monogram initials for the avatar (used when `avatarSource` is not set). */
+  monogram?: string
+  /** Avatar image source. When set, the avatar renders the image instead of the monogram. */
+  avatarSource?: ImageSourcePropType | string
+  /**
+   * Registry icon for the small badge attached to the avatar's bottom-right
+   * corner. Pass `null` to hide the badge. Defaults to `'ic_qr_code'`.
+   */
+  badgeIcon?: string | null
+  /** UPI handle pills rendered under the name. Pass `[]` to render none. */
+  upiHandles?: ProfileCardUpiHandle[]
+  /**
+   * Full override for the header row (avatar + name + handles). Takes
+   * precedence over the declarative header props. `modes` cascade into it.
+   */
+  header?: React.ReactNode
+  /**
+   * Card body (the Figma "slot"). Rendered below the header divider; `modes`
+   * (including the profile-card context) cascade into every child, so nested
+   * `ListItem`s, `Divider`s, `Text`s and `Button`s resolve the on-dark
+   * profile-card token values automatically.
+   */
+  children?: React.ReactNode
+  /** Toggles the divider between the header and the body. Defaults to `true`. */
+  showDivider?: boolean
+  /** Card width. Defaults to the Figma spec (`344`). Pass `'100%'` to fill the parent. */
+  width?: number | `${number}%`
+  /** Modes object for design-token resolution, cascaded to all children. */
+  modes?: Modes
+  /** Style overrides for the card container. */
+  style?: StyleProp<ViewStyle>
+  /** Accessibility label for the card. */
+  accessibilityLabel?: string
+}
+
+// Forced modes for everything rendered inside the card — the profile card is
+// an on-dark (jioPlus) surface, so child components (Avatar, UpiHandle,
+// ListItem, Divider, Text, Button, …) must resolve their tokens through the
+// `context 10: jioPlus` mode. Consumer modes are spread first so appearance
+// modes (e.g. `Profile Card Appearance: Premium`) still cascade through.
+const CARD_CONTEXT: Modes = Object.freeze({ 'context 10': 'jioPlus' })
+
+const DEFAULT_UPI_HANDLES: ProfileCardUpiHandle[] = [
+  { label: 'username@jio', iconName: 'ic_copy' },
+  { label: '9999999999', iconName: 'ic_confirm' },
+]
+
+interface ProfileCardTokens {
+  containerStyle: ViewStyle
+  handlesRowStyle: ViewStyle
+  badgeBackground: string
+  childModes: Modes
+  badgeModes: Modes
+}
+
+function resolveProfileCardTokens(modes: Modes): ProfileCardTokens {
+  const backgroundColor = (getVariableByName('profileCard/bg', modes) ?? '#00065a') as string
+  const gap = (getVariableByName('profileCard/gap', modes) ?? 12) as number
+  const borderRadius = (getVariableByName('profileCard/radius', modes) ?? 12) as number
+  const paddingHorizontal = (getVariableByName('profileCard/padding/horizontal', modes) ?? 20) as number
+  const paddingVertical = (getVariableByName('profileCard/padding/vertical', modes) ?? 20) as number
+
+  const childModes: Modes = { ...modes, ...CARD_CONTEXT }
+
+  // The UPI handle pills sit in the header ListItem's support slot, whose row
+  // gap is the `slot/gap` token in the ListItem context.
+  const handlesGap = (getVariableByName('slot/gap', { ...childModes, Context: 'ListItem' }) ?? 2) as number
+
+  // The avatar badge is a white circle: the fill comes from the Attached
+  // slot's background token (the IconCapsule itself resolves transparent).
+  const badgeBackground = (getVariableByName('attached/slot/background', childModes) ?? '#ffffff') as string
+
+  return {
+    containerStyle: {
+      backgroundColor,
+      borderRadius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      flexDirection: 'column',
+      alignItems: 'stretch',
+    },
+    handlesRowStyle: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignItems: 'center',
+      alignSelf: 'flex-start',
+      gap: handlesGap,
+    },
+    badgeBackground,
+    childModes,
+    // XS capsule per the Figma spec; consumers can still override the size
+    // through their own modes.
+    badgeModes: { 'Icon Capsule Size': 'XS', ...modes, ...CARD_CONTEXT },
+  }
+}
+
+/**
+ * ProfileCard — Figma node 6914:38498 ("Profile Card").
+ *
+ * A dark, rounded profile summary card composed from the shared primitives:
+ *
+ *  - **Header** — a {@link ListItem} whose leading slot is an {@link Attached}
+ *    monogram {@link Avatar} with a small {@link IconCapsule} badge at its
+ *    bottom-right, the user's name as the title, and a row of
+ *    {@link UpiHandle} pills in the support slot.
+ *  - **Divider** — separates the header from the body.
+ *  - **Body slot** — arbitrary children (typically `ListItem`s separated by
+ *    `Divider`s). All profile-card context modes cascade into the slot, so
+ *    nested components automatically resolve their on-dark token values.
+ *
+ * The card supports the `Profile Card Appearance` collection
+ * (`Default` | `Premium`) via the `modes` prop, which recolors the container,
+ * avatar, pills and divider in one go.
+ *
+ * @example
+ * ```tsx
+ * <ProfileCard
+ *   name="Shruti Chandarshekhar Rai"
+ *   monogram="SR"
+ *   upiHandles={[
+ *     { label: 'shrutirai-1@jio', iconName: 'ic_copy', onPress: copyHandle },
+ *     { label: '9184844184', iconName: 'ic_confirm' },
+ *   ]}
+ * >
+ *   <ListItem layout="Horizontal" title="JioFinance+" navArrow={false} />
+ * </ProfileCard>
+ * ```
+ */
+function ProfileCard({
+  name = 'Name',
+  monogram = 'MS',
+  avatarSource,
+  badgeIcon = 'ic_qr_code',
+  upiHandles = DEFAULT_UPI_HANDLES,
+  header,
+  children,
+  showDivider = true,
+  width = 344,
+  modes: propModes = EMPTY_MODES,
+  style,
+  accessibilityLabel,
+}: ProfileCardProps) {
+  const { modes: globalModes } = useTokens()
+
+  const modes = useMemo(
+    () => (globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+      ? EMPTY_MODES
+      : { ...globalModes, ...propModes }),
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(() => resolveProfileCardTokens(modes), [modes])
+
+  // ---- Header -------------------------------------------------------------
+  const headerNode = useMemo(() => {
+    if (header) return cloneChildrenWithModes(header, tokens.childModes)
+
+    const avatar = (
+      <Attached
+        position="bottom-right"
+        modes={tokens.childModes}
+        badge={
+          badgeIcon != null ? (
+            <IconCapsule
+              iconName={badgeIcon}
+              modes={tokens.badgeModes}
+              style={{ backgroundColor: tokens.badgeBackground }}
+            />
+          ) : null
+        }
+      >
+        <Avatar
+          monogram={monogram}
+          style={avatarSource ? 'Image' : 'Monogram'}
+          {...(avatarSource != null ? { imageSource: avatarSource } : {})}
+          modes={tokens.childModes}
+        />
+      </Attached>
+    )
+
+    const handles = upiHandles.length > 0 ? (
+      <View style={tokens.handlesRowStyle}>
+        {upiHandles.map((handle, index) => (
+          <UpiHandle
+            key={`${handle.label}-${index}`}
+            label={handle.label}
+            {...(handle.iconName != null ? { iconName: handle.iconName } : {})}
+            showIcon={handle.showIcon ?? true}
+            {...(handle.onPress != null ? { onPress: handle.onPress } : {})}
+            modes={tokens.childModes}
+          />
+        ))}
+      </View>
+    ) : null
+
+    return (
+      <ListItem
+        layout="Horizontal"
+        title={name}
+        navArrow={false}
+        showSupportText={handles != null}
+        supportSlot={handles}
+        leading={avatar}
+        modes={tokens.childModes}
+      />
+    )
+  }, [header, name, monogram, avatarSource, badgeIcon, upiHandles, tokens])
+
+  // ---- Body slot ----------------------------------------------------------
+  const bodyChildren = useMemo(
+    () => (children != null ? cloneChildrenWithModes(children, tokens.childModes) : null),
+    [children, tokens.childModes]
+  )
+  const hasBody = bodyChildren != null && bodyChildren.length > 0
+
+  const containerStyle = useMemo<ViewStyle>(
+    () => ({ ...tokens.containerStyle, width }),
+    [tokens.containerStyle, width]
+  )
+
+  return (
+    <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+      {headerNode}
+      {hasBody && showDivider ? (
+        <Divider direction="horizontal" modes={tokens.childModes} />
+      ) : null}
+      {bodyChildren}
+    </View>
+  )
+}
+
+export default React.memo(ProfileCard)