jfs-components 0.0.99 → 0.1.2

package/src/components/CircularRating/CircularRating.tsx

@@ -12,6 +12,7 @@ import Icon from '../../icons/Icon'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import CircularProgressBarDoted from '../CircularProgressBarDoted/CircularProgressBarDoted'
 import Nudge from '../Nudge/Nudge'
+import type { Modes } from '../../design-tokens'
 
 type CircularRatingBaseProps = Omit<React.ComponentProps<typeof View>, 'children' | 'style'>
 
@@ -43,7 +44,7 @@ export type CircularRatingProps = CircularRatingBaseProps & {
   /** Optional nudge slot. Receives `modes` recursively. */
   nudgeSlot?: React.ReactNode
   /** Design token modes forwarded to token lookups and child components. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Optional container style overrides. */
   style?: StyleProp<ViewStyle>
   /** Optional rating ring wrapper style overrides. */
@@ -92,7 +93,7 @@ const toFontWeight = (value: unknown, fallback: TextStyle['fontWeight']) => {
   return fallback
 }
 
-function resolveCircularRatingTokens(modes: Record<string, any>): CircularRatingTokens {
+function resolveCircularRatingTokens(modes: Modes): CircularRatingTokens {
   const gap = toNumber(getVariableByName('circularRating/gap', modes), 32)
   const padding = toNumber(getVariableByName('circularRating/padding', modes), 10)
 

package/src/components/ClusterBubble/ClusterBubble.tsx

@@ -12,6 +12,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /** Where the value/label text sits relative to the circle. */
 export type ClusterBubbleLabelPlacement = 'inside' | 'outside' | 'auto'
@@ -72,7 +73,7 @@ export type ClusterBubbleProps = {
     /** Style override for the outer container. */
     style?: StyleProp<ViewStyle>
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Accessibility label. Defaults to a `value + label` composite. */
     accessibilityLabel?: string
 }

package/src/components/CoverageBarComparison/CoverageBarComparison.tsx

@@ -12,6 +12,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * One entry in the {@link CoverageBarComparisonProps.bars} array.
@@ -54,7 +55,7 @@ export type CoverageBarComparisonItem = {
    * Per-bar design token mode overrides. Merged on top of the parent `modes`
    * and the per-index `Emphasis / DataViz` defaults injected by the parent.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Per-bar accessibility label. */
   accessibilityLabel?: string
 }
@@ -85,7 +86,7 @@ export type CoverageBarComparisonProps = {
    */
   legendGap?: number
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Style applied to the chart row (the bars container). */

package/src/components/CoverageRing/CoverageRing.tsx

@@ -10,6 +10,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Button, { type ButtonProps } from '../Button/Button'
 import CircularProgressBar from '../CircularProgressBar/CircularProgressBar'
+import type { Modes } from '../../design-tokens'
 
 type CoverageRingBaseProps = Omit<
   React.ComponentProps<typeof View>,
@@ -73,7 +74,7 @@ export type CoverageRingProps = CoverageRingBaseProps & {
    */
   children?: React.ReactNode
   /** Design token modes forwarded to token lookups and slot children. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Container style override. */
   style?: StyleProp<ViewStyle>
   /** Override the support-text style inside the ring. */

package/src/components/DebitCard/DebitCard.tsx

@@ -3,6 +3,7 @@ import { View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle, typ
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { cloneChildrenWithModes, EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 const defaultCardArt = require('./cf64a67d5075caa8924d20b4e4e650d47b3ee08b.png')
 
@@ -24,7 +25,7 @@ export type DebitCardProps = {
     /** Slot: custom content for the provider logo area (right side of header, after cardType text) */
     providerLogoSlot?: React.ReactNode;
     /** Mode configuration for design token resolution */
-    modes?: Record<string, any>;
+    modes?: Modes;
     /** Container style overrides */
     style?: StyleProp<ViewStyle>;
 };

package/src/components/Disclaimer/Disclaimer.tsx

@@ -3,10 +3,11 @@ import { View, Text, type StyleProp, type ViewStyle, type TextStyle } from 'reac
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type DisclaimerProps = {
   disclaimer?: string;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   accessibilityLabel?: string;

package/src/components/Divider/Divider.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type DividerDirection = 'horizontal' | 'vertical'
 
@@ -19,7 +20,7 @@ export type DividerProps = {
   /**
    * Mode configuration passed to the token resolver.
    */
-  modes?: Record<string, any>
+  modes?: Modes
   /**
    * Optional style overrides for the divider
    */

package/src/components/DonutChart/DonutChart.tsx

@@ -11,6 +11,7 @@ import Svg, { Circle } from 'react-native-svg'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, flattenChildren } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 /**
  * Per-segment data definition for the data-driven `segments` prop.
@@ -32,7 +33,7 @@ export type DonutChartSegmentData = {
      * Per-segment design token mode overrides. Merged on top of parent
      * `modes` and the per-index `Appearance / DataViz` defaults.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Per-segment accessibility label. */
     accessibilityLabel?: string
 }
@@ -73,7 +74,7 @@ export type DonutChartProps = {
      */
     gap?: number
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
     /** Override default value text styles. */
@@ -142,7 +143,7 @@ function defaultAppearanceFor(index: number) {
  */
 function resolveSegmentColor(
     color: string | undefined,
-    modes: Record<string, any>
+    modes: Modes
 ): string {
     if (color) return color
     return ((getVariableByName('dataViz/bg', modes) as string | null) ?? '#5d00b5')
@@ -176,7 +177,7 @@ type DonutChartSegmentProps = {
      * Design token modes for the segment. Merged with parent `modes` and
      * the per-index `Appearance / DataViz` defaults.
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Per-segment accessibility label. */
     accessibilityLabel?: string
 }
@@ -446,7 +447,7 @@ function buildArcs({
     totalValue: number
     circumference: number
     gapLength: number
-    modes: Record<string, any>
+    modes: Modes
 }): ArcDescriptor[] {
     const arcs: ArcDescriptor[] = []
     const halfGap = gapLength / 2

package/src/components/DonutChartSummary/DonutChartSummary.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import DonutChart, { type DonutChartSegmentData } from '../DonutChart/DonutChart'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
+import type { Modes } from '../../design-tokens'
 
 /**
  * One row of the `DonutChartSummary`. Each item drives BOTH a donut
@@ -42,7 +43,7 @@ export type DonutChartSummaryItem = {
      * (`Senary`, `Primary`, `Secondary`, `Tertiary`, `Quaternary`,
      * `Quinary`, then cycles).
      */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Accessibility label for the segment + legend row pairing. */
     accessibilityLabel?: string
 }
@@ -80,7 +81,7 @@ export type DonutChartSummaryProps = {
      */
     donutGap?: number
     /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Override outer container styles. */
     style?: StyleProp<ViewStyle>
     /** Override the legend container styles. */

package/src/components/Drawer/Drawer.tsx

@@ -15,6 +15,8 @@ import Animated, {
 } from 'react-native-reanimated'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
+import Overlay from '../Overlay/Overlay'
 
 
 const AnimatedScrollView = Animated.createAnimatedComponent(ScrollView)
@@ -54,7 +56,7 @@ function rubberBand(value: number, min: number, max: number, friction: number =
 
 export type DrawerProps = {
 
-  modes?: Record<string, any>
+  modes?: Modes
   style?: import('react-native').StyleProp<import('react-native').ViewStyle>
   title?: string
   /**
@@ -95,6 +97,19 @@ export type DrawerProps = {
    * expanded), so parent components can react programmatically.
    */
   onStateChange?: (state: 'collapsed' | 'expanded') => void
+  /**
+   * When `true`, renders a full-screen semi-transparent {@link Overlay} scrim
+   * behind the drawer sheet (dimming everything else on screen). Defaults to
+   * `false`, in which case nothing is rendered behind the sheet and behaviour
+   * is unchanged.
+   */
+  showOverlay?: boolean
+  /**
+   * Called when the overlay scrim (the area outside the sheet) is pressed.
+   * Only relevant when `showOverlay` is `true` — typically used to collapse
+   * or dismiss the drawer.
+   */
+  onOverlayPress?: () => void
 }
 
 /**
@@ -132,6 +147,8 @@ function DrawerInner({
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
   onStateChange,
+  showOverlay = false,
+  onOverlayPress,
 }: DrawerProps, ref: React.Ref<DrawerHandle>) {
   const { height: screenHeight } = useWindowDimensions()
 
@@ -439,6 +456,9 @@ function DrawerInner({
     // GestureHandlerRootView must wrap the app root; this overlay only needs to
     // let touches fall through where the sheet isn't.
     <View style={[styles.host, style]} pointerEvents="box-none">
+      {/* Full-screen scrim rendered beneath the sheet. Opt-in via `showOverlay`;
+          when disabled nothing renders here and touches still fall through. */}
+      {showOverlay ? <Overlay modes={modes} {...(onOverlayPress ? { onPress: onOverlayPress } : {})} /> : null}
       <GestureDetector gesture={gesture}>
         <Animated.View
           style={[

package/src/components/Dropdown/Dropdown.tsx

@@ -15,6 +15,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
@@ -47,7 +48,7 @@ export type DropdownItemProps = {
     /** Optional custom child content (overrides `label`). */
     children?: React.ReactNode
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the item container. */
     style?: StyleProp<ViewStyle>
     /** Style overrides for the item label text. */
@@ -58,7 +59,7 @@ export type DropdownItemProps = {
     accessibilityHint?: string
 }
 
-function useDropdownItemTokens(modes: Record<string, any>) {
+function useDropdownItemTokens(modes: Modes) {
     return useMemo(() => {
         // The `dropdownItem/background` token aliases through the
         // `Dropdown Item State` collection (Idle | Selected), so we resolve
@@ -250,7 +251,7 @@ export type DropdownProps = {
      */
     maxHeight?: number
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the popup container. */
     style?: StyleProp<ViewStyle>
     /** Accessibility label for the menu surface. */
@@ -290,15 +291,33 @@ export function Dropdown({
     const shadowBlur =
         parseInt(getVariableByName('dropdown/shadow/blur', modes), 10) || 16
 
-    const containerStyle: ViewStyle = {
+    // Shadow lives on the OUTER view, which must NOT set `overflow: 'hidden'`.
+    // On native, clipping a view also clips its shadow (iOS clips the layer
+    // shadow; Android clips the elevation shadow), so the soft popup shadow
+    // that renders fine on web (CSS box-shadow paints outside the box) would
+    // get cut off. The rounded-corner clipping is moved to a separate inner
+    // view below.
+    //
+    // The `boxShadow` style prop (RN 0.76+ / react-native-web) is used as the
+    // single source of truth so the designed color/offset/blur are honored on
+    // iOS, Android AND web. We intentionally do NOT also set the legacy
+    // `shadow*` / `elevation` props: on the new architecture (and web) those
+    // are translated into a box-shadow internally, so combining them with an
+    // explicit `boxShadow` would stack two shadows. Android's legacy
+    // `elevation` is also undesirable here because it ignores the shadow color
+    // and only paints a generic gray shadow.
+    const shadowStyle: ViewStyle & { boxShadow?: string } = {
         backgroundColor: background,
+        borderRadius: radius,
+        boxShadow: `${shadowOffsetX}px ${shadowOffsetY}px ${shadowBlur}px 0px ${shadowColor}`,
+    }
+
+    // Inner view carries the rounded corners + clipping so list/scroll content
+    // stays inside the radius without affecting the outer view's shadow.
+    const clipStyle: ViewStyle = {
         borderRadius: radius,
         overflow: 'hidden',
-        shadowColor,
-        shadowOffset: { width: shadowOffsetX, height: shadowOffsetY },
-        shadowOpacity: 1,
-        shadowRadius: shadowBlur / 2,
-        elevation: 4,
+        backgroundColor: background,
     }
 
     const content = (
@@ -309,21 +328,23 @@ export function Dropdown({
 
     return (
         <View
-            style={[containerStyle, style]}
+            style={[shadowStyle, style]}
             accessibilityRole="menu"
             accessibilityLabel={accessibilityLabel || 'Dropdown menu'}
         >
-            {maxHeight != null ? (
-                <ScrollView
-                    style={{ maxHeight }}
-                    showsVerticalScrollIndicator={true}
-                    keyboardShouldPersistTaps="handled"
-                >
-                    {content}
-                </ScrollView>
-            ) : (
-                content
-            )}
+            <View style={clipStyle}>
+                {maxHeight != null ? (
+                    <ScrollView
+                        style={{ maxHeight }}
+                        showsVerticalScrollIndicator={true}
+                        keyboardShouldPersistTaps="handled"
+                    >
+                        {content}
+                    </ScrollView>
+                ) : (
+                    content
+                )}
+            </View>
         </View>
     )
 }

package/src/components/DropdownInput/DropdownInput.tsx

@@ -27,6 +27,7 @@ import Icon from '../../icons/Icon'
 import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Dropdown, { DropdownItem, type DropdownItemProps } from '../Dropdown/Dropdown'
+import type { Modes } from '../../design-tokens'
 
 const IS_WEB = Platform.OS === 'web'
 
@@ -131,7 +132,7 @@ export type DropdownInputProps = {
     /** Whether tapping the backdrop closes the menu. */
     closeOnBackdropPress?: boolean
     /** Modes for design token resolution. */
-    modes?: Record<string, any>
+    modes?: Modes
     /** Style overrides for the outermost wrapper. */
     style?: StyleProp<ViewStyle>
     /** Style overrides for the input row. */
@@ -152,7 +153,7 @@ export type DropdownInputProps = {
 // Token resolution
 // ---------------------------------------------------------------------------
 
-function useChevronTokens(modes: Record<string, any>) {
+function useChevronTokens(modes: Modes) {
     return useMemo(() => {
         const iconSize =
             parseInt(getVariableByName('input/iconSize', modes), 10) || 32
@@ -172,7 +173,7 @@ function toNumber(value: unknown, fallback: number): number {
     return fallback
 }
 
-function useFormFieldTokens(modes: Record<string, any>) {
+function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
             (getVariableByName('formField/label/color', modes) as string) ||
@@ -829,7 +830,7 @@ function DropdownInput({
                 transparent
                 statusBarTranslucent
                 navigationBarTranslucent
-                animationType="fade"
+                animationType="none"
                 onRequestClose={closeMenu}
             >
                 <Pressable

package/src/components/EmptyState/EmptyState.tsx

@@ -5,6 +5,7 @@ import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import IconCapsule from '../IconCapsule/IconCapsule'
 import Button from '../Button/Button'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 export type EmptyStateProps = {
     /**
@@ -35,7 +36,7 @@ export type EmptyStateProps = {
     /**
      * Mode configuration for theming
      */
-    modes?: Record<string, any>;
+    modes?: Modes;
     style?: StyleProp<ViewStyle>;
     testID?: string;
 }

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -10,6 +10,7 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Checkbox from '../Checkbox/Checkbox'
 import Button from '../Button/Button'
+import type { Modes } from '../../design-tokens'
 
 export type ExpandableCheckboxProps = {
   /** Long text label rendered next to the checkbox. */
@@ -35,7 +36,7 @@ export type ExpandableCheckboxProps = {
   /** Number of lines to show when collapsed. Defaults to `1`. */
   collapsedLines?: number
   /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Override outer container styles. */
   style?: StyleProp<ViewStyle>
   /** Override the label text styles. */

package/src/components/FilterBar/FilterBar.tsx

@@ -3,12 +3,13 @@ import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import TextInput from '../TextInput/TextInput'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type RenderInputArgs = {
   placeholder: string;
   value: string;
   onChangeText?: ((text: string) => void) | undefined;
-  modes: Record<string, any>;
+  modes: Modes;
   accessibilityLabel: string;
   accessibilityHint?: string | undefined;
   onFocus?: (e: any) => void;
@@ -30,7 +31,7 @@ type FilterBarProps = {
    * respect the higher-level FilterBar API.
    */
   renderInput?: (args: RenderInputArgs) => React.ReactNode;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;

package/src/components/Form/Form.tsx

@@ -3,6 +3,7 @@ import { View, type StyleProp, type ViewStyle } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { Modes } from '../../design-tokens'
 
 type FormContextValue = {
   validationErrors: Record<string, string | string[]>;
@@ -19,7 +20,7 @@ export type FormProps = {
   children: React.ReactNode;
   validationErrors?: Record<string, string | string[]>;
   onSubmit?: () => void;
-  modes?: Record<string, any>;
+  modes?: Modes;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   testID?: string;

package/src/components/FormField/FormField.tsx

@@ -15,6 +15,7 @@ import SupportText from '../SupportText/SupportText'
 import type { SupportTextStatus } from '../SupportText/SupportTextIcon'
 import Icon from '../../icons/Icon'
 import { useFormContext } from '../Form/Form'
+import type { Modes } from '../../design-tokens'
 
 export type FormFieldType = 'text' | 'password' | 'email' | 'search' | 'number' | 'phone' | 'url'
 
@@ -76,7 +77,7 @@ export type FormFieldProps = {
   /** When true, focuses the input on mount. */
   autoFocus?: boolean
   /** Modes for design token resolution. */
-  modes?: Record<string, any>
+  modes?: Modes
   /** Style overrides for the outermost wrapper. */
   style?: StyleProp<ViewStyle>
   /** Style overrides for the input row container. */
@@ -116,7 +117,7 @@ function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextSt
   return fallback
 }
 
-function useFormFieldTokens(modes: Record<string, any>) {
+function useFormFieldTokens(modes: Modes) {
   return useMemo(() => {
     // Wrapper
     const gap = toNumber(getVariableByName('formField/gap', modes), 8)