jfs-components 0.0.77 → 0.0.78

package/src/components/Accordion/Accordion.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import {
   View,
   Text,
@@ -21,9 +21,49 @@ if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental
   UIManager.setLayoutAnimationEnabledExperimental(true)
 }
 
+type AccordionStateMode = 'Idle' | 'Hover' | 'Open' | 'Open Hover' | 'Disabled'
+
+function resolveAccordionStateMode(
+  disabled: boolean,
+  isExpanded: boolean,
+  isHovered: boolean,
+  contained: boolean,
+): AccordionStateMode {
+  if (disabled) return 'Disabled'
+
+  if (contained) {
+    return isExpanded ? 'Open Hover' : 'Hover'
+  }
+
+  if (isExpanded) {
+    return isHovered ? 'Open Hover' : 'Open'
+  }
+
+  return isHovered ? 'Hover' : 'Idle'
+}
+
+function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextStyle['fontWeight'] {
+  if (typeof value === 'number') return String(value) as TextStyle['fontWeight']
+  if (typeof value === 'string') {
+    const normalized = value.trim().toLowerCase()
+    if (normalized === 'bold') return '700'
+    if (normalized === 'medium') return '500'
+    if (normalized === 'regular' || normalized === 'normal') return '400'
+    if (/^\d+$/.test(normalized)) return normalized as TextStyle['fontWeight']
+    return value as TextStyle['fontWeight']
+  }
+  return fallback
+}
+
 export type AccordionProps = {
   /** The accordion header title */
   title?: string;
+  /**
+   * When `true`, the header always uses the filled background treatment
+   * (Figma Hover / Open Hover visuals). Defaults to `false` (transparent at
+   * rest, filled only while hovered or pressed).
+   */
+  contained?: boolean;
   /** Initial expanded state. Defaults to false (collapsed) */
   defaultExpanded?: boolean;
   /** Controlled expanded state. When provided, the component becomes controlled */
@@ -51,31 +91,20 @@ export type AccordionProps = {
 /**
  * Accordion component that mirrors the Figma "Accordion" component.
  *
- * This component supports:
- *  - **Expandable/collapsible content** with smooth animation
- *  - **States**: Idle, Hover, Open, Disabled
- *  - **Slot** for custom content
- *  - **Design-token driven styling** via `getVariableByName` and `modes`
+ * Supports two visual treatments via the `contained` prop:
+ *  - **`contained={false}`** (default) — transparent header at rest; filled
+ *    background on hover / press.
+ *  - **`contained={true}`** — header always uses the filled background.
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "content" → `children`
+ * Interaction states (Idle, Hover, Open, Disabled) are resolved automatically
+ * from `expanded`, `disabled`, hover, and `contained` — consumers should not
+ * pass `'Accordion States'` in `modes`.
  *
  * @component
- * @param {Object} props
- * @param {string} [props.title='Accordion title'] - The accordion header title
- * @param {boolean} [props.defaultExpanded=false] - Initial expanded state
- * @param {boolean} [props.expanded] - Controlled expanded state
- * @param {Function} [props.onExpandedChange] - Callback fired when expanded state changes
- * @param {boolean} [props.disabled=false] - Whether the accordion is disabled
- * @param {React.ReactNode} [props.children] - Content to display when expanded
- * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
- * @param {Object} [props.style] - Optional container style overrides
- * @param {string} [props.accessibilityLabel] - Accessibility label for the accordion. If not provided, uses title
- * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
 function Accordion({
   title = 'Accordion title',
+  contained = false,
   defaultExpanded = false,
   expanded: controlledExpanded,
   onExpandedChange,
@@ -89,23 +118,31 @@ function Accordion({
   webAccessibilityProps,
   ...rest
 }: AccordionProps) {
-  // Internal state for uncontrolled mode
   const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
-  
-  // Determine if controlled or uncontrolled
+  const [isHovered, setIsHovered] = useState(false)
+
   const isControlled = controlledExpanded !== undefined
   const isExpanded = isControlled ? controlledExpanded : internalExpanded
-  
-  // Hover state for web
-  const [isHovered, setIsHovered] = useState(false)
-  
-  // Handle toggle
+
+  const resolvedModes = useMemo(() => {
+    const accordionState = resolveAccordionStateMode(
+      disabled,
+      isExpanded,
+      isHovered,
+      contained,
+    )
+
+    return {
+      ...modes,
+      'Accordion States': accordionState,
+    }
+  }, [contained, disabled, isExpanded, isHovered, modes])
+
   const handleToggle = () => {
     if (disabled) return
-    
-    // Animate the layout change
+
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    
+
     if (isControlled) {
       onExpandedChange?.(!isExpanded)
     } else {
@@ -113,38 +150,45 @@ function Accordion({
       onExpandedChange?.(!isExpanded)
     }
   }
-  
-  // Resolve design tokens
-  const titleColor = disabled
-    ? '#999999'
-    : getVariableByName('accordion/title/color', modes) || '#0d0d0d'
-  const titleFontSize = getVariableByName('accordion/title/fontSize', modes) || 18
-  const titleLineHeight = getVariableByName('accordion/title/lineHeight', modes) || 20
-  const titleFontFamily = getVariableByName('accordion/title/fontFamily', modes) || 'System'
-  
-  const iconColor = getVariableByName('accordion/icon/color', modes) || '#141414'
-  const iconSize = getVariableByName('accordion/icon/size', modes) || 24
-  
-  const headerGap = getVariableByName('accordion/header/gap', modes) || 12
-  const headerPaddingVertical = getVariableByName('accordion/header/padding/vertical', modes) || 24
-  const headerBackground = isHovered && !disabled
-    ? '#f2f2f2'
-    : getVariableByName('accordion/header/background', modes) || 'transparent'
-  
-  const contentGap = getVariableByName('accordion/content/gap', modes) || 12
-  const contentPaddingTop = getVariableByName('accordion/content/padding/top', modes) || 8
-  const contentPaddingBottom = isExpanded
-    ? (getVariableByName('accordion/content/padding/bottom', modes) ?? 24)
-    : 8
-  
-  const borderColor = getVariableByName('accordion/border/color', modes) || '#e6e6e6'
-  
-  // Styles
+
+  const titleColor =
+    (getVariableByName('accordion/title/color', resolvedModes) as string | null) ?? '#0d0d0d'
+  const titleFontSize =
+    (getVariableByName('accordion/title/fontSize', resolvedModes) as number | null) ?? 14
+  const titleLineHeight =
+    (getVariableByName('accordion/title/lineHeight', resolvedModes) as number | null) ?? 20
+  const titleFontFamily =
+    (getVariableByName('accordion/title/fontFamily', resolvedModes) as string | null) ?? 'System'
+  const titleFontWeight = toFontWeight(
+    getVariableByName('accordion/title/fontWeight', resolvedModes),
+    '700',
+  )
+
+  const iconColor =
+    (getVariableByName('accordion/icon/color', resolvedModes) as string | null) ?? '#141414'
+  const iconSize = (getVariableByName('accordion/icon/size', resolvedModes) as number | null) ?? 24
+
+  const headerGap = (getVariableByName('accordion/header/gap', resolvedModes) as number | null) ?? 12
+  const headerPaddingVertical =
+    (getVariableByName('accordion/header/padding/vertical', resolvedModes) as number | null) ?? 8
+  const headerBackground =
+    (getVariableByName('accordion/header/background', resolvedModes) as string | null) ??
+    'transparent'
+
+  const contentGap = (getVariableByName('accordion/content/gap', resolvedModes) as number | null) ?? 12
+  const contentPaddingTop =
+    (getVariableByName('accordion/content/padding/top', resolvedModes) as number | null) ?? 8
+  const contentPaddingBottom =
+    (getVariableByName('accordion/content/padding/bottom', resolvedModes) as number | null) ?? 8
+
+  const borderColor =
+    (getVariableByName('accordion/border/color', resolvedModes) as string | null) ?? '#e6e6e6'
+
   const containerStyle: ViewStyle = {
     borderBottomWidth: 1,
     borderBottomColor: borderColor,
   }
-  
+
   const headerStyle: ViewStyle = {
     flexDirection: 'row',
     alignItems: 'center',
@@ -154,16 +198,16 @@ function Accordion({
     backgroundColor: headerBackground,
     overflow: 'hidden',
   }
-  
+
   const titleStyle: TextStyle = {
     flex: 1,
     color: titleColor,
     fontSize: titleFontSize,
     lineHeight: titleLineHeight,
     fontFamily: titleFontFamily,
-    fontWeight: '700',
+    fontWeight: titleFontWeight,
   }
-  
+
   const contentStyle: ViewStyle = {
     backgroundColor: 'transparent',
     gap: contentGap,
@@ -172,11 +216,9 @@ function Accordion({
     paddingHorizontal: 0,
     overflow: 'hidden',
   }
-  
-  // Generate default accessibility label
+
   const defaultAccessibilityLabel = accessibilityLabel || title
-  
-  // Web platform support
+
   const webProps = usePressableWebSupport({
     restProps: {},
     onPress: handleToggle,
@@ -184,12 +226,11 @@ function Accordion({
     accessibilityLabel: defaultAccessibilityLabel,
     webAccessibilityProps,
   })
-  
-  // Process children to pass modes
+
   const processedChildren = children
-    ? cloneChildrenWithModes(React.Children.toArray(children), modes)
+    ? cloneChildrenWithModes(React.Children.toArray(children), resolvedModes)
     : null
-  
+
   return (
     <View style={[containerStyle, style]} {...rest}>
       <Pressable
@@ -217,12 +258,12 @@ function Accordion({
         <Icon
           name={isExpanded ? 'ic_minus' : 'ic_add'}
           size={iconSize}
-          color={disabled ? '#999999' : iconColor}
+          color={iconColor}
           accessibilityElementsHidden={true}
           importantForAccessibility="no"
         />
       </Pressable>
-      
+
       {isExpanded && processedChildren && (
         <View style={contentStyle}>
           {processedChildren}
@@ -233,4 +274,3 @@ function Accordion({
 }
 
 export default Accordion
-

package/src/components/ActionFooter/ActionFooter.tsx

@@ -1,7 +1,10 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
 import {
+  Animated,
+  Keyboard,
   View,
   Platform,
+  type KeyboardEvent,
   type ViewStyle,
   type StyleProp,
 } from 'react-native'
@@ -133,6 +136,47 @@ function ActionFooter({
   style,
   accessibilityLabel,
 }: ActionFooterProps) {
+  // -------------------------------------------------------------------------
+  // Keep the footer locked in place behind the software keyboard (Android).
+  // -------------------------------------------------------------------------
+  //
+  // The Android activity is configured with `windowSoftInputMode="adjustResize"`,
+  // which shrinks the app window by the keyboard height when the keyboard
+  // opens. A bottom-anchored footer therefore gets lifted UP by the keyboard
+  // height — exactly the jump the design does not want.
+  //
+  // To counteract that, we translate the footer back DOWN by the same keyboard
+  // height so it visually stays exactly where it was (now sitting behind the
+  // keyboard). iOS does not resize the window for the keyboard, so the footer
+  // already stays put there; we only run this on Android to avoid pushing the
+  // footer off-screen on platforms that don't lift it in the first place.
+  const keyboardOffset = useRef(new Animated.Value(0)).current
+  useEffect(() => {
+    if (Platform.OS !== 'android') return undefined
+
+    const animateTo = (toValue: number, duration?: number) => {
+      Animated.timing(keyboardOffset, {
+        toValue,
+        // Match the OS keyboard animation so the resize and our counter-shift
+        // cancel out smoothly with no visible footer movement.
+        duration: typeof duration === 'number' && duration > 0 ? duration : 150,
+        useNativeDriver: true,
+      }).start()
+    }
+
+    const showSub = Keyboard.addListener('keyboardDidShow', (e: KeyboardEvent) => {
+      animateTo(e?.endCoordinates?.height ?? 0, e?.duration)
+    })
+    const hideSub = Keyboard.addListener('keyboardDidHide', (e: KeyboardEvent) => {
+      animateTo(0, e?.duration)
+    })
+
+    return () => {
+      showSub.remove()
+      hideSub.remove()
+    }
+  }, [keyboardOffset])
+
   // All token reads collapsed into a single useMemo keyed on `modes`. With
   // the shared `EMPTY_MODES` default this resolves once for the common path
   // and never re-allocates the container/slot style objects between renders.
@@ -192,13 +236,21 @@ function ActionFooter({
   }, [children, modes])
 
   return (
-    <View
-      style={[containerStyle, WEB_SHADOW, style]}
+    <Animated.View
+      style={[
+        containerStyle,
+        WEB_SHADOW,
+        style,
+        // Counter-translate by the keyboard height on Android so `adjustResize`
+        // can't lift the footer above the keyboard (no-op on iOS/web where the
+        // value stays at 0).
+        { transform: [{ translateY: keyboardOffset }] },
+      ]}
       accessibilityRole="toolbar"
       accessibilityLabel={accessibilityLabel}
     >
       <View style={slotStyle}>{enhancedChildren}</View>
-    </View>
+    </Animated.View>
   )
 }
 

package/src/components/Checkbox/Checkbox.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import {
   Pressable,
   Platform,
+  View,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
@@ -50,6 +51,16 @@ function useFocusVisible() {
   return { isFocusVisible, focusHandlers: { onFocus, onBlur } }
 }
 
+/** Minimum touch target per iOS HIG / Material accessibility guidance. */
+const MIN_TOUCH_TARGET = 44
+
+const touchTargetStyle: ViewStyle = {
+  minWidth: MIN_TOUCH_TARGET,
+  minHeight: MIN_TOUCH_TARGET,
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
 export interface CheckboxProps {
   /** Whether the checkbox is checked (controlled) */
   checked?: boolean
@@ -207,7 +218,7 @@ function Checkbox({
 
   return (
     <Pressable
-      style={[resolveStyle(), style]}
+      style={[touchTargetStyle, style]}
       onPress={handlePress}
       disabled={disabled}
       onHoverIn={() => setIsHovered(true)}
@@ -217,14 +228,16 @@ function Checkbox({
       accessibilityState={{ checked: isChecked, disabled }}
       accessibilityLabel={accessibilityLabel}
     >
-      {isChecked && (
-        <Svg width={12} height={9} viewBox="0 0 12 9" fill="none">
-          <Path
-            d="M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z"
-            fill={markColor}
-          />
-        </Svg>
-      )}
+      <View style={resolveStyle()}>
+        {isChecked && (
+          <Svg width={12} height={9} viewBox="0 0 12 9" fill="none">
+            <Path
+              d="M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z"
+              fill={markColor}
+            />
+          </Svg>
+        )}
+      </View>
     </Pressable>
   )
 }

package/src/components/DropdownInput/DropdownInput.tsx

@@ -162,51 +162,60 @@ function useChevronTokens(modes: Record<string, any>) {
     }, [modes])
 }
 
+function toNumber(value: unknown, fallback: number): number {
+    if (typeof value === 'number' && Number.isFinite(value)) return value
+    if (typeof value === 'string') {
+        const parsed = parseFloat(value)
+        if (Number.isFinite(parsed)) return parsed
+    }
+    return fallback
+}
+
 function useFormFieldTokens(modes: Record<string, any>) {
     return useMemo(() => {
         const labelColor =
             (getVariableByName('formField/label/color', modes) as string) ||
-            '#0c0d10'
+            '#000000'
         const labelFontFamily =
             (getVariableByName('formField/label/fontFamily', modes) as string) ||
             'JioType Var'
-        const labelFontSize =
-            parseInt(getVariableByName('formField/label/fontSize', modes), 10) ||
+        const labelFontSize = toNumber(
+            getVariableByName('formField/label/fontSize', modes),
             14
-        const labelLineHeight =
-            parseInt(
-                getVariableByName('formField/label/lineHeight', modes),
-                10
-            ) || 17
+        )
+        const labelLineHeight = toNumber(
+            getVariableByName('formField/label/lineHeight', modes),
+            17
+        )
         const labelFontWeight =
             (getVariableByName('formField/label/fontWeight', modes) as string) ||
             '500'
 
-        const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8
-
-        const inputPaddingH =
-            parseInt(
-                getVariableByName('formField/input/padding/horizontal', modes),
-                10
-            ) || 12
-        const inputGap =
-            parseInt(getVariableByName('formField/input/gap', modes), 10) || 8
-        const inputRadius =
-            parseInt(getVariableByName('formField/input/radius', modes), 10) ||
+        const gap = toNumber(getVariableByName('formField/gap', modes), 8)
+
+        const inputPaddingH = toNumber(
+            getVariableByName('formField/input/padding/horizontal', modes),
+            12
+        )
+        const inputGap = toNumber(
+            getVariableByName('formField/input/gap', modes),
             8
+        )
+        const inputRadius = toNumber(
+            getVariableByName('formField/input/radius', modes),
+            8
+        )
         const inputBackground =
             (getVariableByName('formField/input/background', modes) as string) ||
             '#ffffff'
-        const inputFontSize =
-            parseInt(
-                getVariableByName('formField/input/label/fontSize', modes),
-                10
-            ) || 16
-        const inputLineHeight =
-            parseInt(
-                getVariableByName('formField/input/label/lineHeight', modes),
-                10
-            ) || 45
+        const inputFontSize = toNumber(
+            getVariableByName('formField/input/label/fontSize', modes),
+            16
+        )
+        const inputLineHeight = toNumber(
+            getVariableByName('formField/input/label/lineHeight', modes),
+            45
+        )
         const inputFontFamily =
             (getVariableByName(
                 'formField/input/label/fontFamily',
@@ -231,11 +240,13 @@ function useFormFieldTokens(modes: Record<string, any>) {
             ) as string) ||
             (getVariableByName('formField/input/border/color', modes) as string) ||
             '#b5b6b7'
-        const inputBorderSize =
-            parseInt(
-                getVariableByName('formField/input/border/size', modes),
-                10
-            ) || 1
+        // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
+        // fractional value — parseInt was truncating it to 1, leaving the
+        // resolved row height ~1px shorter than the Figma reference.
+        const inputBorderSize = toNumber(
+            getVariableByName('formField/input/border/size', modes),
+            1.5
+        )
 
         return {
             labelColor,
@@ -314,7 +325,7 @@ function DropdownInput({
     supportText,
     errorMessage,
     menuMaxHeight = 240,
-    menuOffset = 4,
+    menuOffset = 6,
     matchTriggerWidth = true,
     closeOnBackdropPress = true,
     modes: propModes = EMPTY_MODES,
@@ -594,19 +605,23 @@ function DropdownInput({
     }
 
     // Focus ring uses the resolved input border color from FormField States so
-    // active/error look consistent with TextInput-based FormField. We also lift
-    // border weight to 2 when "Active" to read as a focus ring.
+    // active/error look consistent with TextInput-based FormField. Only the
+    // color changes between states — width stays constant to avoid layout
+    // shift when opening the menu (a shift would invalidate the measured
+    // trigger rect and visually shove the popup).
     const inputRowStyle: ViewStyle = {
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: tokens.inputBackground,
         borderColor: tokens.inputBorderColor,
-        borderWidth: isOpen ? Math.max(tokens.inputBorderSize, 1) : tokens.inputBorderSize,
+        borderWidth: tokens.inputBorderSize,
+        borderStyle: 'solid',
         borderRadius: tokens.inputRadius,
         paddingHorizontal: tokens.inputPaddingH,
         paddingVertical: 0,
         gap: tokens.inputGap,
         minHeight: tokens.inputLineHeight,
+        width: '100%',
     }
 
     const valueTextStyle: TextStyle = {
@@ -763,12 +778,25 @@ function DropdownInput({
                 />
             )}
 
+            {/*
+              IMPORTANT: do NOT pass `statusBarTranslucent` to this Modal.
+              On Android, a `statusBarTranslucent` Modal opens its own window
+              that spans the entire screen (origin at screen-top, including
+              the status bar), but `measureInWindow` on the trigger returns
+              coordinates relative to the *activity* window — which on a
+              default Android setup starts BELOW the status bar. The two
+              coordinate spaces then differ by `StatusBar.currentHeight`, so
+              `triggerRect.y + triggerRect.height + menuOffset` lands roughly
+              one status-bar-height ABOVE the visible input, making the
+              popup overlap the input row. Leaving `statusBarTranslucent`
+              off keeps the Modal's window aligned with the activity
+              window, which is what every measurement here assumes.
+            */}
             <Modal
                 visible={isOpen}
                 transparent
                 animationType="fade"
                 onRequestClose={closeMenu}
-                statusBarTranslucent
             >
                 <Pressable
                     style={StyleSheet.absoluteFill}