jfs-components 0.0.77 → 0.0.79

package/src/components/Attached/Attached.tsx

@@ -0,0 +1,181 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} from 'react-native'
+import { useTokens } from '../../design-tokens/JFSThemeProvider'
+import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+
+/**
+ * Anchor point on the main content where the attached `badge` is centered.
+ * Mirrors the nine Figma `position` variants (corners, edge midpoints, center).
+ */
+export type AttachedPosition =
+  | 'top-left'
+  | 'top'
+  | 'top-right'
+  | 'left'
+  | 'center'
+  | 'right'
+  | 'bottom-left'
+  | 'bottom'
+  | 'bottom-right'
+
+export type AttachedProps = Omit<ViewProps, 'children'> & {
+  /**
+   * Main content the badge attaches to (the Figma "main slot"). Any node —
+   * typically an `IconCapsule`, `Avatar`, image, etc. `modes` are cascaded to
+   * every child via {@link cloneChildrenWithModes}.
+   */
+  children?: React.ReactNode
+  /**
+   * The element attached on top of `children` (the Figma "slot"). Centered on
+   * the anchor point given by `position` so it straddles the edge/corner.
+   * `modes` are cascaded into it as well.
+   */
+  badge?: React.ReactNode
+  /**
+   * Anchor point for the `badge` relative to the main content.
+   * @default 'bottom-right'
+   */
+  position?: AttachedPosition
+  /**
+   * How the anchor point is computed for diagonal (corner) positions:
+   * - `false` (default): treat the main content as a **square** — corner
+   *   anchors sit on the bounding-box corners.
+   * - `true`: treat the main content as a **circle** inscribed in its bounding
+   *   box — corner anchors sit on the circle's circumference (the 45° point),
+   *   so badges hug round content like a circular `IconCapsule` or `Avatar`.
+   *
+   * Edge (`top`/`bottom`/`left`/`right`) and `center` anchors are unaffected,
+   * since the circle meets the bounding box at those points.
+   * @default false
+   */
+  circular?: boolean
+  /** Mode configuration cascaded to the token resolver and all children. */
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+type Size = { width: number; height: number }
+
+const ZERO_SIZE: Size = { width: 0, height: 0 }
+
+/**
+ * Fraction (0 | 0.5 | 1) of the main content's width/height at which the badge
+ * center should sit, derived from the `position` anchor.
+ */
+function resolveAnchorFractions(position: AttachedPosition): { fx: number; fy: number } {
+  const fx = position.includes('left') ? 0 : position.includes('right') ? 1 : 0.5
+  const fy = position.startsWith('top') ? 0 : position.startsWith('bottom') ? 1 : 0.5
+  return { fx, fy }
+}
+
+/**
+ * Attached — overlays a small `badge` on top of arbitrary main content,
+ * centered on one of nine anchor points (corners, edge midpoints, or center).
+ *
+ * The badge straddles the chosen anchor regardless of either element's size:
+ * both the main content and the badge are measured via `onLayout`, then the
+ * badge is absolutely positioned so its center lands exactly on the anchor.
+ *
+ * @example
+ * ```tsx
+ * <Attached position="bottom-right" badge={<InstitutionBadge modes={modes} />} modes={modes}>
+ *   <IconCapsule iconName="ic_card" modes={modes} />
+ * </Attached>
+ * ```
+ */
+function Attached({
+  children,
+  badge,
+  position = 'bottom-right',
+  circular = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+  ...rest
+}: AttachedProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const [mainSize, setMainSize] = useState<Size>(ZERO_SIZE)
+  const [badgeSize, setBadgeSize] = useState<Size>(ZERO_SIZE)
+
+  const onMainLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout
+    setMainSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+  }, [])
+
+  const onBadgeLayout = useCallback((e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout
+    setBadgeSize((prev) => (prev.width === width && prev.height === height ? prev : { width, height }))
+  }, [])
+
+  const mainChildren = useMemo(
+    () => (children != null ? cloneChildrenWithModes(children, modes) : null),
+    [children, modes]
+  )
+  const badgeChildren = useMemo(
+    () => (badge != null ? cloneChildrenWithModes(badge, modes) : null),
+    [badge, modes]
+  )
+
+  const badgePlacement = useMemo<ViewStyle>(() => {
+    const { fx, fy } = resolveAnchorFractions(position)
+    const measured = mainSize.width > 0 && badgeSize.width > 0
+
+    let anchorX: number
+    let anchorY: number
+    if (circular) {
+      // Project the anchor onto the circle inscribed in the bounding box, so
+      // corner badges land on the circumference (45°) instead of the box corner.
+      const cx = mainSize.width / 2
+      const cy = mainSize.height / 2
+      const radius = Math.min(mainSize.width, mainSize.height) / 2
+      const dx = (fx - 0.5) * 2 // -1 | 0 | 1
+      const dy = (fy - 0.5) * 2 // -1 | 0 | 1
+      const len = Math.hypot(dx, dy) || 1 // 'center' → 0, guard against /0
+      anchorX = cx + (dx / len) * radius
+      anchorY = cy + (dy / len) * radius
+    } else {
+      anchorX = mainSize.width * fx
+      anchorY = mainSize.height * fy
+    }
+
+    return {
+      position: 'absolute',
+      left: anchorX - badgeSize.width / 2,
+      top: anchorY - badgeSize.height / 2,
+      // Hide until both elements are measured to avoid a one-frame flash at (0,0).
+      opacity: measured ? 1 : 0,
+    }
+  }, [position, circular, mainSize, badgeSize])
+
+  return (
+    <View style={[styles.container, style]} {...rest}>
+      <View onLayout={onMainLayout}>{mainChildren}</View>
+      {badgeChildren != null && (
+        <View style={badgePlacement} onLayout={onBadgeLayout} pointerEvents="box-none">
+          {badgeChildren}
+        </View>
+      )}
+    </View>
+  )
+}
+
+const styles = {
+  // alignSelf flex-start so the wrapper hugs the main content; anchors are then
+  // computed relative to the content size rather than a stretched parent.
+  container: { position: 'relative', alignSelf: 'flex-start' } as ViewStyle,
+}
+
+export default React.memo(Attached)

package/src/components/Card/Card.tsx

@@ -11,6 +11,11 @@ import { EMPTY_MODES } from '../../utils/react-utils';
 const CardContext = createContext<{ modes?: Record<string, any> }>({});
 
 export interface CardProps {
+    /**
+     * Content rendered in the header slot at the top of the card (e.g. a brand logo).
+     * Sits above the media slot, with its own padding.
+     */
+    header?: React.ReactNode;
     /**
      * The content to be rendered in the media slot (e.g. an Image).
      * This content is wrapped in a container that respects the `aspectRatio`.
@@ -39,9 +44,11 @@ export interface CardProps {
  * Card component implementation from Figma node 765:6186.
  * 
  * Supports a `media` slot (with aspect ratio) and a content area.
+ * Supports an optional `header` slot (e.g. a brand logo), a `media` slot
+ * (with aspect ratio) and a content area.
  * Usage:
  * ```tsx
- * <Card media={<Image source={...} />} modes={modes}>
+ * <Card header={<GoldLogo />} media={<Image source={...} />} modes={modes}>
  *   <Card.SupportText>Support text</Card.SupportText>
  *   <Card.Title>Title</Card.Title>
  *   <Card.SupportText>Support text</Card.SupportText>
@@ -49,6 +56,7 @@ export interface CardProps {
  * ```
  */
 export function Card({
+    header,
     media,
     children,
     modes = EMPTY_MODES,
@@ -74,6 +82,11 @@ export function Card({
         ? cloneElement(media as any, { modes: { ...(media.props as any).modes, ...modes } })
         : media;
 
+    // Clone header to pass modes if it's a valid element
+    const headerWithModes = isValidElement(header)
+        ? cloneElement(header as any, { modes: { ...(header.props as any).modes, ...modes } })
+        : header;
+
     const containerStyle: ViewStyle = {
         backgroundColor,
         borderColor,
@@ -85,6 +98,15 @@ export function Card({
         overflow: 'hidden', // Ensure border radius clips content
     };
 
+    // Header wrap uses fixed padding from Figma (no dedicated tokens defined).
+    const headerWrapperStyle: ViewStyle = {
+        width: '100%',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        paddingHorizontal: 12,
+        paddingVertical: 16,
+    };
+
     const mediaWrapperStyle: ViewStyle = {
         width: '100%',
         aspectRatio: mediaAspectRatio,
@@ -104,6 +126,11 @@ export function Card({
     return (
         <CardContext.Provider value={{ modes }}>
             <View style={[containerStyle, style]}>
+                {header && (
+                    <View style={headerWrapperStyle}>
+                        {headerWithModes}
+                    </View>
+                )}
                 {media && (
                     <View style={mediaWrapperStyle}>
                         {mediaWithModes}

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}