jfs-components 0.1.25 → 0.1.30

package/src/components/MoneyValue/MoneyValue.tsx

@@ -1,9 +1,14 @@
-import React, { useMemo, useEffect, useRef } from 'react'
+import React, { useMemo, useEffect, useRef, useState, useCallback } from 'react'
 import {
   View,
   Text,
+  TextInput,
   Pressable,
   Animated,
+  Platform,
+  Keyboard,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
@@ -58,6 +63,15 @@ export type MoneyValueProps = {
   hidden?: boolean
   /** When true, a blinking vertical cursor is shown at the end of the value text. */
   focused?: boolean
+  /**
+   * When true, tapping the component enters an inline edit mode where the value
+   * becomes a numeric TextInput. The user can type digits or delete the existing
+   * amount. Only numeric characters (including one decimal point) are accepted.
+   * On blur or submit the edit is committed and the display restores.
+   */
+  editable?: boolean
+  /** Called when the value changes during editing (after commit on blur). */
+  onValueChange?: (newValue: string | number) => void
   /** Modes configuration mapped to Figma tokens. */
   modes?: Modes
   style?: StyleProp<ViewStyle>
@@ -85,6 +99,8 @@ function MoneyValue({
   negative,
   focused = false,
   hidden = false,
+  editable = false,
+  onValueChange,
   modes = EMPTY_MODES,
   style,
   valueStyle,
@@ -96,23 +112,60 @@ function MoneyValue({
   ...rest
 }: MoneyValueProps) {
   // Auto-detect negative from value and compute display value
-  const { isNegative, displayValue } = useMemo(() => {
-    const stringValue = String(value)
-    const trimmed = stringValue.trim()
-    const valueIsNegative =
-      trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
+  const stringValue = String(value)
+  const trimmed = stringValue.trim()
+  const valueIsNegative =
+    trimmed.startsWith('-') || (typeof value === 'number' && value < 0)
 
-    // Strip leading minus sign for display (we show it separately)
-    const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
+  // Strip leading minus sign for display (we show it separately)
+  const absoluteValue = trimmed.startsWith('-') ? trimmed.slice(1) : trimmed
 
-    // Use explicit negative prop if provided, otherwise use auto-detected
-    const showNegative = negative !== undefined ? negative : valueIsNegative
+  // Use explicit negative prop if provided, otherwise use auto-detected
+  const showNegative = negative !== undefined ? negative : valueIsNegative
 
-    return {
-      isNegative: hidden ? false : showNegative,
-      displayValue: hidden ? '•••' : absoluteValue,
+  const isNegative = hidden ? false : showNegative
+  const displayValue = hidden ? '•••' : absoluteValue
+
+  // Inline editing state
+  const [isEditing, setIsEditing] = useState(false)
+  const [editBuffer, setEditBuffer] = useState('')
+  const inputRef = useRef<TextInput>(null)
+  // Always-current snapshot of the display value for callbacks to reference.
+  const displayValueRef = useRef(displayValue)
+  displayValueRef.current = displayValue
+
+  const enterEditMode = useCallback(() => {
+    setIsEditing(true)
+    setEditBuffer(displayValueRef.current)
+    // Focus the input on next frame so the keyboard opens
+    setTimeout(() => inputRef.current?.focus(), 0)
+  }, [])
+
+  const commitEdit = useCallback(() => {
+    setIsEditing(false)
+    const resolved = editBuffer || '0'
+    if (resolved !== displayValueRef.current) {
+      onValueChange?.(resolved)
+    }
+  }, [editBuffer, onValueChange])
+
+  const handleChangeText = useCallback(
+    (text: string) => {
+      // Allow only digits and at most one decimal point
+      const filtered = text.replace(/[^0-9.]/g, '')
+      const parts = filtered.split('.')
+      const clean = parts.length > 2 ? parts[0] + '.' + parts.slice(1).join('') : filtered
+      setEditBuffer(clean)
+    },
+    [],
+  )
+
+  const handlePress = useCallback((event: GestureResponderEvent) => {
+    if (editable) {
+      enterEditMode()
     }
-  }, [value, negative, hidden])
+    onPress?.(event)
+  }, [editable, enterEditMode, onPress])
 
   // Resolve typography and layout tokens from Figma
   const textColor = getVariableByName('moneyValue/text/color', modes)
@@ -191,64 +244,162 @@ function MoneyValue({
     }
   }, [focused, cursorOpacity])
 
-  return (
-    <Pressable
-      style={[containerStyle, style]}
-      accessibilityRole="text"
-      accessibilityLabel={undefined}
-      accessibilityHint={accessibilityHint}
-      onPress={onPress}
-      disabled={!onPress}
-      {...rest}
-    >
-      {isNegative && (
-        <Text
-          style={[currencyTextStyle, negativeSignStyle]}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        >
-          -
-        </Text>
-      )}
-      <Text
-        style={[currencyTextStyle, currencyStyle]}
-        accessibilityElementsHidden={true}
-        importantForAccessibility="no"
-      >
-        {resolvedCurrency}
-      </Text>
-
-      {/* Group value and cursor in their own view to bypass the parent's generic gap constraint */}
-      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
-        <Text
-          style={[valueTextStyle, valueStyle]}
-          accessibilityElementsHidden={true}
-          importantForAccessibility="no"
-        >
-          {displayValue}
-        </Text>
-        {focused && (
-          <Animated.View
-            style={{
-              opacity: cursorOpacity,
-              width: 2,
-              height: (valueFontSize as number) * 1.1,
-              backgroundColor: textColor,
-              marginLeft: 2,
-            }}
-          />
-        )}
-      </View>
-    </Pressable>
+  // Keyboard avoidance — lift the component when the keyboard would cover it.
+  // Follows the same pattern as ActionFooter (uses Keyboard.addListener).
+  // Resets when editing ends or the keyboard hides.
+  const rootRef = useRef<View>(null)
+  const keyboardLift = useRef(new Animated.Value(0)).current
+  const rootWindowYRef = useRef(0)
+  const rootMeasuredHeightRef = useRef(0)
+
+  const measureRoot = useCallback(() => {
+    rootRef.current?.measureInWindow((_x, y, _w, h) => {
+      rootWindowYRef.current = y
+      rootMeasuredHeightRef.current = h
+    })
+  }, [])
+
+  const handleRootLayout = useCallback(
+    (_e: LayoutChangeEvent) => {
+      // measureInWindow gives the component's position relative to the window,
+      // which is what we need for keyboard overlap calculation. onLayout fires
+      // after the component mounts and whenever its size changes.
+      measureRoot()
+    },
+    [measureRoot],
   )
-}
 
-export default MoneyValue
+  useEffect(() => {
+    if (!editable) return
+
+    const showSub = Keyboard.addListener('keyboardDidShow', (e) => {
+      measureRoot()
+      if (!isEditing) return
 
+      const kbHeight = e.endCoordinates.height
+      const { height: screenH } = require('react-native').Dimensions.get('window')
+      const componentBottom = rootWindowYRef.current + rootMeasuredHeightRef.current
+      const visibleBottom = screenH - kbHeight
+      const overlap = componentBottom - visibleBottom + 12
 
+      if (overlap > 0) {
+        Animated.timing(keyboardLift, {
+          toValue: -overlap,
+          duration: e.duration ?? 250,
+          useNativeDriver: true,
+        }).start()
+      }
+    })
 
+    const hideSub = Keyboard.addListener('keyboardDidHide', () => {
+      Animated.timing(keyboardLift, {
+        toValue: 0,
+        duration: 150,
+        useNativeDriver: true,
+      }).start()
+    })
 
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [editable, isEditing, keyboardLift, measureRoot])
+
+  // Reset lift when editing ends
+  useEffect(() => {
+    if (!isEditing) {
+      keyboardLift.setValue(0)
+    }
+  }, [isEditing, keyboardLift])
 
+  const handleBlur = useCallback(() => {
+    commitEdit()
+  }, [commitEdit])
 
+  const handleSubmitEditing = useCallback(() => {
+    commitEdit()
+  }, [commitEdit])
 
+  return (
+    <Animated.View style={{ transform: [{ translateY: keyboardLift }] }}>
+      <View ref={rootRef} onLayout={handleRootLayout}>
+        <Pressable
+          style={[containerStyle, style]}
+          accessibilityRole="text"
+          accessibilityLabel={undefined}
+          accessibilityHint={accessibilityHint}
+          onPress={handlePress}
+          disabled={!onPress && !editable}
+          {...rest}
+        >
+          {isNegative && (
+            <Text
+              style={[currencyTextStyle, negativeSignStyle]}
+              accessibilityElementsHidden={true}
+              importantForAccessibility="no"
+            >
+              -
+            </Text>
+          )}
+          <Text
+            style={[currencyTextStyle, currencyStyle]}
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no"
+          >
+            {resolvedCurrency}
+          </Text>
+
+          {/* Group value and cursor in their own view to bypass the parent's generic gap constraint */}
+          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
+            {isEditing ? (
+              <TextInput
+                ref={inputRef}
+                value={editBuffer}
+                onChangeText={handleChangeText}
+                onBlur={handleBlur}
+                onSubmitEditing={handleSubmitEditing}
+                keyboardType="decimal-pad"
+                returnKeyType="done"
+                selectTextOnFocus
+                style={[
+                  valueTextStyle,
+                  valueStyle,
+                  {
+                    padding: 0,
+                    margin: 0,
+                    // On web a thin border helps the cursor appear precisely
+                    ...(Platform.OS === 'web' ? { outlineStyle: 'none' as any } : {}),
+                  },
+                ]}
+                accessibilityLabel={accessibilityLabel || 'Edit value'}
+              />
+            ) : (
+              <>
+                <Text
+                  style={[valueTextStyle, valueStyle]}
+                  accessibilityElementsHidden={true}
+                  importantForAccessibility="no"
+                >
+                  {displayValue}
+                </Text>
+                {focused && (
+                  <Animated.View
+                    style={{
+                      opacity: cursorOpacity,
+                      width: 2,
+                      height: (valueFontSize as number) * 1.1,
+                      backgroundColor: textColor,
+                      marginLeft: 2,
+                    }}
+                  />
+                )}
+              </>
+            )}
+          </View>
+        </Pressable>
+      </View>
+    </Animated.View>
+  )
+}
 
+export default MoneyValue

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/PdpCcCard/PdpCcCard.tsx

@@ -50,6 +50,30 @@ export interface PdpCcCardProps {
     title?: string
     /** Subtitle rendered below the title (14px medium). */
     subtitle?: string
+    /**
+     * Number of lines to limit the title to. The `Title` component defaults to
+     * `1` when this is unset, so the headline is a single line with an ellipsis
+     * by default. Pass a larger value (e.g. `2`) to allow the title to wrap onto
+     * that many lines before truncating, or set {@link disableTruncation} to
+     * remove the clamp entirely. The subtitle is never line-clamped.
+     */
+    numberOfLines?: number
+    /**
+     * When `true`, disables truncation for both the title and subtitle: the
+     * trailing ellipsis (`…`) is never shown and the `numberOfLines` clamp is
+     * ignored. The text is also never shrunk by a tight parent — it keeps its
+     * full intrinsic size and overflows (even breaking the parent layout) rather
+     * than ever clipping into an ellipsis. The text still wraps onto multiple
+     * lines.
+     */
+    disableTruncation?: boolean
+    /**
+     * When `true`, forces both the title and subtitle onto a single line with no
+     * wrapping (implies {@link disableTruncation}). On web the line overflows
+     * horizontally — brutally breaking the parent layout if it has to — instead
+     * of wrapping or truncating.
+     */
+    singleLine?: boolean
     /**
      * The metric columns rendered in the stats row. Vertical dividers are
      * inserted automatically between adjacent metrics. Defaults to two sample
@@ -105,6 +129,9 @@ function PdpCcCard({
     media,
     title = 'Title',
     subtitle = 'Subtitle',
+    numberOfLines,
+    disableTruncation,
+    singleLine,
     metrics = DEFAULT_METRICS,
     buttonLabel = 'button',
     buttonIcon = 'ic_add_circle',
@@ -165,7 +192,15 @@ function PdpCcCard({
         <>
             <View style={styles.mediaSlot}>{mediaNode}</View>
 
-            <Title title={title} subtitle={subtitle} textAlign="Center" modes={modes} />
+            <Title
+                title={title}
+                subtitle={subtitle}
+                textAlign="Center"
+                modes={modes}
+                numberOfLines={numberOfLines}
+                disableTruncation={disableTruncation}
+                singleLine={singleLine}
+            />
 
             {metrics.length > 0 ? (
                 <View style={styles.metricsRow}>