jfs-components 0.1.30 → 0.1.32

package/src/components/ValueBackMetric/ValueBackMetric.tsx

@@ -0,0 +1,298 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  Pressable,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type GestureResponderEvent,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Icon from '../Icon/Icon'
+import Link from '../Link/Link'
+import type { Modes } from '../../design-tokens'
+
+const TITLE_LINE_HEIGHT_RATIO = 1.2
+const VALUE_LINE_HEIGHT_RATIO = 1.2
+const CAPTION_LINE_HEIGHT_RATIO = 1.5
+
+// The Figma node binds the header-icon size and the per-part font sizes/weights
+// to `valueBackMetric/*` variables, but those tokens are NOT in the committed
+// variables snapshot (`npm run tokens -- find valueBackMetric` → no matches).
+// They also intentionally differ from the `metricdata/*` typography defaults
+// (e.g. `metricdata/value` resolves to 20px/700, whereas this component's value
+// is 16px/500). So the sizes/weights below are encoded as literal constants
+// matching the Figma design exactly. Colours, gaps and padding DO exist as real
+// `metricdata/*` tokens (and match the design), so those resolve through
+// `getVariableByName` and stay themeable.
+const TITLE_FONT_SIZE = 12
+const TITLE_FONT_WEIGHT: TextStyle['fontWeight'] = '500'
+const VALUE_FONT_SIZE = 16
+const VALUE_FONT_WEIGHT: TextStyle['fontWeight'] = '500'
+const CAPTION_FONT_SIZE = 12
+const CAPTION_FONT_WEIGHT: TextStyle['fontWeight'] = '400'
+const FONT_FAMILY = 'JioType Var'
+const CARD_BACKGROUND = '#ffffff'
+const CARD_MIN_HEIGHT = 82
+const ICON_SIZE = 18
+// Figma renders the header glyph flush (all `icon/padding/*` tokens are 0); the
+// shared Icon pulls padding from those tokens, so mirror MetricData and zero it
+// explicitly to keep the icon flush against the title.
+const ICON_PADDING_RESET: ViewStyle = {
+  paddingLeft: 0,
+  paddingRight: 0,
+  paddingTop: 0,
+  paddingBottom: 0,
+}
+
+export type ValueBackMetricProps = {
+  /**
+   * Header glyph slot, shown to the left of the title. Mirrors the Figma swap
+   * slot whose preferred instances are `Icon` and `Image`:
+   *  - a registry icon name (e.g. `'ic_rupee_coin'`) renders the shared
+   *    {@link Icon}, colour/size from the `icon/*` tokens (default 18px gold —
+   *    retint via `modes`, e.g. `{ AppearanceBrand: 'Secondary' }`);
+   *  - a custom node (an `<Icon/>`, an `<Image/>`, your brand logo) renders
+   *    as-is with `modes` cascaded into it.
+   * The Figma design uses a dedicated JioPoints brand mark that is not in the
+   * icon registry, so `ic_rupee_coin` stands in by default.
+   */
+  icon?: string | React.ReactNode
+  /** Header title next to the icon. Defaults to `'JioPoints'`. */
+  title?: string
+  /**
+   * The prominent value line (16px/500). Pass a string, or any node to compose
+   * a richer value. Hidden when omitted.
+   */
+  value?: string | React.ReactNode
+  /** Muted caption below the value (12px, `#777`). Hidden when omitted. */
+  caption?: string
+  /** Bottom link label (underlined, brand accent). Hidden when omitted. */
+  linkLabel?: string
+  /** Fired when the link is pressed. Navigation is the consumer's job. */
+  onLinkPress?: (event: GestureResponderEvent) => void
+  /**
+   * Press handler for the whole card. When set, the card becomes pressable
+   * (rendered through a `Pressable` with `accessibilityRole="button"`).
+   * Independent of {@link onLinkPress} — the bottom link keeps its own handler.
+   */
+  onPress?: (event: GestureResponderEvent) => void
+  /** Disable interaction when `onPress` is set. */
+  disabled?: boolean
+  /** 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`, `caption`
+   * and `linkLabel` joined together.
+   */
+  accessibilityLabel?: string
+}
+
+/**
+ * ValueBackMetric — a compact, left-aligned "value back" card.
+ *
+ * Stacks a branded header row (icon + `title`, e.g. "JioPoints"), a prominent
+ * `value`, a muted `caption`, and an optional bottom `linkLabel` (e.g. "Earn").
+ * `value`, `caption` and `linkLabel` each render only when provided; the header
+ * (icon + title) always shows.
+ *
+ * Colours, gaps and padding resolve from the `metricdata/*` tokens; the header
+ * glyph from the `icon/*` tokens (default 18px gold); the link entirely from
+ * the `link/*` + `text/foreground` tokens via the shared {@link Link}, with
+ * `Text Appearance: Secondary` and `Text Sizes: Small` seeded so it renders
+ * purple at 12px like the design (caller `modes` win). The per-part font
+ * sizes/weights come from the Figma `valueBackMetric/*` variables, which are
+ * not yet in the committed token snapshot, so they are encoded as constants
+ * matching the design.
+ *
+ * @example
+ * ```tsx
+ * <ValueBackMetric
+ *   title="JioPoints"
+ *   value="Value"
+ *   caption="Earn 10 point with UPI"
+ *   linkLabel="Earn"
+ *   onPress={() => navigation.navigate('ValueBack')}
+ *   onLinkPress={() => navigation.navigate('EarnPoints')}
+ * />
+ * ```
+ */
+function ValueBackMetric({
+  icon = 'ic_rupee_coin',
+  title = 'JioPoints',
+  value,
+  caption,
+  linkLabel,
+  onLinkPress,
+  onPress,
+  disabled,
+  modes = EMPTY_MODES,
+  style,
+  titleStyle,
+  valueStyle,
+  captionStyle,
+  accessibilityLabel,
+}: ValueBackMetricProps) {
+  const titleColor = (getVariableByName('metricdata/title/color', modes) as string | null) ?? '#000000'
+  const valueColor = (getVariableByName('metricdata/value/color', modes) as string | null) ?? '#000000'
+  const captionColor = (getVariableByName('metricdata/caption/color', modes) as string | null) ?? '#777777'
+  // The design's link is purple (`text/foreground` under `Text Appearance:
+  // Secondary`) at 12px (`link/fontSize` under `Text Sizes: Small`), while the
+  // header icon keeps the default gold `icon/color`. Seed only the link's
+  // modes; caller-supplied modes win.
+  const linkModes = React.useMemo<Modes>(
+    () => ({ 'Text Appearance': 'Secondary', 'Text Sizes': 'Small', ...modes }),
+    [modes]
+  )
+
+  // The header glyph is token-driven: `icon/color` (gold by default, retinted
+  // via `AppearanceBrand`) and `icon/size` (18px). Passing them explicitly — as
+  // MetricData does — makes the glyph deterministic instead of relying on the
+  // shared Icon's internal token lookups.
+  const iconColor = (getVariableByName('icon/color', modes) as string | null) ?? '#ad8444'
+  const iconSize = (getVariableByName('icon/size', modes) as number | null) ?? ICON_SIZE
+
+  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: 'flex-start',
+    justifyContent: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    minHeight: CARD_MIN_HEIGHT,
+    backgroundColor: CARD_BACKGROUND,
+  }
+
+  const titleTextStyle: TextStyle = {
+    color: titleColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: TITLE_FONT_SIZE,
+    fontWeight: TITLE_FONT_WEIGHT,
+    lineHeight: TITLE_FONT_SIZE * TITLE_LINE_HEIGHT_RATIO,
+  }
+
+  const valueTextStyle: TextStyle = {
+    color: valueColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: VALUE_FONT_SIZE,
+    fontWeight: VALUE_FONT_WEIGHT,
+    lineHeight: VALUE_FONT_SIZE * VALUE_LINE_HEIGHT_RATIO,
+  }
+
+  const captionTextStyle: TextStyle = {
+    color: captionColor,
+    fontFamily: FONT_FAMILY,
+    fontSize: CAPTION_FONT_SIZE,
+    fontWeight: CAPTION_FONT_WEIGHT,
+    lineHeight: CAPTION_FONT_SIZE * CAPTION_LINE_HEIGHT_RATIO,
+  }
+
+  // Mirrors the Figma swap slot, whose preferred instances are `Icon` and
+  // `Image`. A registry name renders the token-driven `Icon` (18px, gold,
+  // flush — all from the `icon/*` tokens); a custom node (`<Icon/>`,
+  // `<Image/>`, anything) renders as-is with `modes` cascaded into it, so an
+  // Icon instance follows the icon tokens while an Image keeps its own sizing.
+  const iconNode =
+    icon == null ? null : typeof icon === 'string' ? (
+      <Icon
+        iconName={icon}
+        size={iconSize}
+        color={iconColor}
+        modes={modes}
+        style={ICON_PADDING_RESET}
+      />
+    ) : (
+      cloneChildrenWithModes(icon, modes)
+    )
+
+  const hasValue = value !== undefined && value !== null && value !== ''
+  const hasCaption = caption !== undefined && caption !== ''
+
+  const resolvedLabel =
+    accessibilityLabel ??
+    ([title, typeof value === 'string' ? value : undefined, caption, linkLabel]
+      .filter(Boolean)
+      .join(', ') || undefined)
+
+  const content = (
+    <>
+      {/* Header row: brand glyph + title (always shown). */}
+      <View style={{ flexDirection: 'row', alignItems: 'center', gap: valueWrapGap }}>
+        {iconNode}
+        {title !== undefined && title !== '' ? (
+          <Text style={[titleTextStyle, titleStyle]}>{title}</Text>
+        ) : null}
+      </View>
+
+      {/* Value + caption block (each optional). */}
+      {hasValue || hasCaption ? (
+        <View style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 4 }}>
+          {hasValue ? (
+            typeof value === 'string' ? (
+              <Text style={[valueTextStyle, valueStyle]}>{value}</Text>
+            ) : (
+              value
+            )
+          ) : null}
+          {hasCaption ? <Text style={[captionTextStyle, captionStyle]}>{caption}</Text> : null}
+        </View>
+      ) : null}
+
+      {/* Bottom link (optional). Fully token-driven via the seeded `linkModes`
+          (purple 12px, see above). `linkLabel` is checked inline (narrows it to
+          a non-undefined `string`) and `onPress` is spread conditionally, since
+          `exactOptionalPropertyTypes` forbids passing `undefined` to Link's
+          non-`undefined` optional props. */}
+      {linkLabel ? (
+        <Link
+          text={linkLabel}
+          autolayout="Hug"
+          modes={linkModes}
+          {...(onLinkPress ? { onPress: onLinkPress } : null)}
+        />
+      ) : null}
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={[containerStyle, style]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+        accessibilityState={{ disabled: !!disabled }}
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessible
+      {...(resolvedLabel !== undefined ? { accessibilityLabel: resolvedLabel } : null)}
+    >
+      {content}
+    </View>
+  )
+}
+
+export default React.memo(ValueBackMetric)

package/src/components/index.ts

@@ -33,6 +33,7 @@ export {
 } from './CardFinancialCondition/CardFinancialCondition'
 export { default as CardInsight, type CardInsightProps } from './CardInsight/CardInsight'
 export { default as CcCard, type CcCardProps, type CcCardBadge, type CcCardListItem } from './CcCard/CcCard'
+export { default as CategoryCard, type CategoryCardProps } from './CategoryCard/CategoryCard'
 export { default as Disclaimer } from './Disclaimer/Disclaimer'
 export { default as Divider, type DividerProps, type DividerDirection } from './Divider/Divider'
 export { default as Drawer, type DrawerProps, type DrawerHandle } from './Drawer/Drawer'
@@ -108,6 +109,7 @@ export {
 } from './MonthlyStatusGrid/MonthlyStatusGrid'
 export { default as Gauge, type GaugeProps } from './Gauge/Gauge'
 export { default as HeroSection, type HeroSectionProps } from './HeroSection/HeroSection'
+export { default as HelloJioInput, type HelloJioInputProps } from './HelloJioInput/HelloJioInput'
 export { default as HoldingsCard, type HoldingsCardProps } from './HoldingsCard/HoldingsCard'
 export { default as HStack, type HStackProps } from './HStack/HStack'
 export { default as Icon, type IconProps } from './Icon/Icon'
@@ -336,3 +338,6 @@ export {
 export { default as Toggle, type ToggleProps } from './Toggle/Toggle'
 export { default as AutoplayControl, type AutoplayControlProps } from './AutoplayControl/AutoplayControl'
 export { default as NumberPagination, type NumberPaginationProps } from './NumberPagination/NumberPagination'
+export { default as CounterBadge, type CounterBadgeProps } from './CounterBadge/CounterBadge'
+export { default as FavoriteToggle, type FavoriteToggleProps } from './FavoriteToggle/FavoriteToggle'
+export { default as ValueBackMetric, type ValueBackMetricProps } from './ValueBackMetric/ValueBackMetric'

package/src/design-tokens/figma-modes.generated.ts

@@ -319,6 +319,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "CardProviderInfo": ["AppearanceBrand", "Avatar Size", "Badge Size", "Color Mode", "context 10", "Context4", "Profile Card Appearance"],
   "Carousel": ["peekOffset"],
   "CarouselCardAccounts": ["peekOffset"],
+  "CategoryCard": ["AppearanceBrand", "Badge Size", "Color Mode", "Emphasis", "Radius"],
   "CcCard": ["AppearanceBrand", "AppearanceSystem", "Avatar Size", "Badge Size", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context 8", "Context2", "Context4", "context5", "context7", "Emphasis", "List Item Style", "ListItem State", "NavArrow Direction", "Page type", "Profile Card Appearance", "Radius", "Selectable", "Semantic Intent", "Text Appearance", "Text Sizes", "Weight"],
   "Checkbox": ["Color Mode"],
   "CheckboxGroup": ["Color Mode"],
@@ -348,6 +349,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "FullscreenModal": ["AppearanceBrand", "AppearanceSystem", "Button / Size", "Button / State", "Color Mode", "Context", "context 10", "context5", "Emphasis", "Profile Card Appearance", "Semantic Intent", "Slot gap"],
   "Gauge": ["AppearanceBrand", "AppearanceSystem", "Color Mode", "FormField States", "Semantic Intent", "Status"],
   "Grid": ["Background", "Color Mode", "Context", "Padding", "Page type", "Slot gap"],
+  "HelloJioInput": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "Emphasis"],
   "HeroSection": ["AppearanceBrand", "Button / Size", "Button / State", "Color Mode", "context 9", "context7", "Emphasis", "FormField States", "InputState", "Page type", "Status"],
   "HoldingsCard": ["AppearanceBrand", "Color Mode"],
   "HStack": ["Context", "Padding", "Page type", "Slot gap"],
@@ -416,6 +418,7 @@ export const FIGMA_COMPONENT_MODES: Record<string, readonly string[]> = {
   "TransactionBubble": ["Color Mode", "context 10", "Context2", "Context3", "context5", "List Item Style", "NavArrow Direction", "Page type", "Profile Card Appearance", "Transaction Status"],
   "TransactionStatus": ["Transaction Status"],
   "UpiHandle": ["Color Mode", "context 10", "Profile Card Appearance", "UPI Handle Image"],
+  "ValueBackMetric": ["AppearanceBrand", "Badge Size", "Color Mode", "Context", "context 10", "Context4", "Emphasis", "Profile Card Appearance", "Text Appearance", "Text Sizes", "Weight"],
   "VStack": ["Context", "Padding", "Page type", "Slot gap"],
 };
 

package/src/icons/registry.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  * 
- * Generated: 2026-07-10T20:55:36.505Z
+ * Generated: 2026-07-15T20:21:39.992Z
  */
 
 // Icon name to SVG data mapping