jfs-components 0.1.0 → 0.1.8

package/src/components/ComparisonBar/ComparisonBar.tsx

@@ -0,0 +1,356 @@
+import React, { useMemo } from 'react'
+import {
+  Pressable,
+  View,
+  type ImageSourcePropType,
+  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 { usePressableWebSupport } from '../../utils/web-platform-utils'
+import Button from '../Button/Button'
+import Image from '../Image/Image'
+import IconCapsule from '../IconCapsule/IconCapsule'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single slot in the {@link ComparisonBar}. Each item is either empty (the
+ * "Add" state — a tappable `+` capsule) or filled with an image (the
+ * "Image Added" state — the image plus a dismiss capsule in the corner).
+ *
+ * The presence of {@link ComparisonBarItem.imageSource} is what toggles the
+ * state: provide a source to show the image, leave it `undefined`/`null` to
+ * show the empty add slot. This keeps the component fully controlled — the
+ * `ComparisonBar` never owns the image state itself, so the consumer decides
+ * (e.g. after opening a file/asset picker) when and how an item flips between
+ * the two states.
+ */
+export type ComparisonBarItem = {
+  /**
+   * Stable identifier for this slot. Returned to callbacks so the consumer
+   * can target the exact item that was interacted with. Falls back to the
+   * array index when omitted.
+   */
+  id?: string | number
+  /**
+   * Image to render in the slot. When provided the slot renders in the
+   * "Image Added" state; when omitted/`null` it renders the empty "Add" state.
+   * Accepts the same shapes as the library `Image` component (remote URL
+   * string, `{ uri }`, or a `require()`d asset).
+   */
+  imageSource?: ImageSourcePropType | string | null
+  /** Accessibility label for the slot. Defaults to a generic add/remove label. */
+  accessibilityLabel?: string
+}
+
+export type ComparisonBarProps = {
+  /**
+   * The slots rendered before the Compare button. Each entry controls its own
+   * add/image state via {@link ComparisonBarItem.imageSource}.
+   */
+  items: ComparisonBarItem[]
+  /**
+   * Fired when an empty (Add) slot is tapped. The consumer is expected to react
+   * by opening whatever picker is appropriate and then updating that item's
+   * `imageSource` to flip it into the "Image Added" state — the component does
+   * not know how images are sourced. Receives the item's `id` (or index when no
+   * id was supplied) and the slot index.
+   */
+  onItemPress?: (id: ComparisonBarItem['id'], index: number) => void
+  /**
+   * Fired when a filled slot is tapped. For better mobile ergonomics the
+   * *entire* filled slot is the remove target (the dismiss capsule is just a
+   * visual affordance), so a fingertip anywhere on the item triggers this. The
+   * consumer is expected to clear that item's `imageSource` to return it to the
+   * "Add" state. Receives the item's `id` (or index) and the slot index.
+   */
+  onItemRemove?: (id: ComparisonBarItem['id'], index: number) => void
+  /** Fired when the Compare button is pressed. */
+  onCompare?: () => void
+  /** Label for the trailing action button. Defaults to `"Compare"`. */
+  compareLabel?: string
+  /**
+   * Explicitly controls the Compare button's *functional* disabled state — a
+   * truly disabled button is non-interactive (its `onPress` never fires), not
+   * just dimmed. Note that `modes` only affects appearance, so dimming the
+   * button via tokens does NOT stop taps; that is what this prop is for.
+   *
+   * When provided (a boolean), it always wins over
+   * {@link ComparisonBarProps.disableCompareWhenEmpty}. Leave it `undefined`
+   * to fall back to the auto behavior.
+   */
+  compareDisabled?: boolean
+  /**
+   * When `true` (default) the Compare button is automatically (and truly)
+   * disabled while no slot has an image — there is nothing to compare yet. Set
+   * to `false` to keep it tappable even when empty. Ignored when
+   * {@link ComparisonBarProps.compareDisabled} is set explicitly.
+   */
+  disableCompareWhenEmpty?: boolean
+  /** Mode configuration passed to the token resolver. */
+  modes?: Modes
+  /** Style overrides for the outer floating card. */
+  style?: StyleProp<ViewStyle>
+}
+
+const ITEM_WIDTH = 45
+const ITEM_HEIGHT = 44
+
+interface ComparisonBarTokens {
+  card: ViewStyle
+  item: ViewStyle
+  itemImageState: ViewStyle
+  imageRadius: number
+}
+
+function resolveTokens(modes: Modes): ComparisonBarTokens {
+  const cardGap = (getVariableByName('compareFloatCard/gap', modes) ?? 12) as number
+  const cardPadH = (getVariableByName('compareFloatCard/padding/horizontal', modes) ?? 12) as number
+  const cardPadV = (getVariableByName('compareFloatCard/padding/vertical', modes) ?? 10) as number
+  const cardRadius = (getVariableByName('compareFloatCard/radius', modes) ?? 12) as number
+  const cardBackground = (getVariableByName('compareFloatCard/background', modes) ?? '#ffffff') as string
+  const cardBorderColor = (getVariableByName('compareFloatCard/border/color', modes) ?? '#f5f5f5') as string
+
+  const itemPadH = (getVariableByName('compareCardItem/padding/horizontal', modes) ?? 6) as number
+  const itemPadV = (getVariableByName('compareCardItem/padding/vertical', modes) ?? 8) as number
+  const itemRadius = (getVariableByName('compareCardItem/radius', modes) ?? 8) as number
+  const itemBackground = (getVariableByName('compareCardItem/background', modes) ?? '#ebebed') as string
+
+  const imageRadius = (getVariableByName('image/radius', modes) ?? 8) as number
+
+  return {
+    card: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: cardGap,
+      paddingHorizontal: cardPadH,
+      paddingVertical: cardPadV,
+      borderRadius: cardRadius,
+      borderWidth: 1,
+      borderColor: cardBorderColor,
+      backgroundColor: cardBackground,
+      alignSelf: 'flex-start',
+    },
+    item: {
+      width: ITEM_WIDTH,
+      height: ITEM_HEIGHT,
+      borderRadius: itemRadius,
+      backgroundColor: itemBackground,
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    itemImageState: {
+      paddingHorizontal: itemPadH,
+      paddingVertical: itemPadV,
+    },
+    imageRadius,
+  }
+}
+
+type AdditemProps = {
+  item: ComparisonBarItem
+  index: number
+  tokens: ComparisonBarTokens
+  addCapsuleModes: Modes
+  closeCapsuleModes: Modes
+  onPress?: ComparisonBarProps['onItemPress']
+  onRemove?: ComparisonBarProps['onItemRemove']
+}
+
+/**
+ * Internal slot renderer for {@link ComparisonBar}. Intentionally NOT exported
+ * — it is meaningless outside of a `ComparisonBar` (its layout, sizing and
+ * remove affordance all assume the surrounding card) and is kept private so
+ * the public surface stays a single, cohesive component.
+ */
+function Additem({ item, index, tokens, addCapsuleModes, closeCapsuleModes, onPress, onRemove }: AdditemProps) {
+  const hasImage = item.imageSource != null && item.imageSource !== ''
+  const id = item.id ?? index
+
+  const addWebProps = usePressableWebSupport({
+    restProps: {},
+    onPress: () => onPress?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Add item to comparison',
+  })
+
+  const removeWebProps = usePressableWebSupport({
+    restProps: {},
+    onPress: () => onRemove?.(id, index),
+    disabled: false,
+    accessibilityLabel: item.accessibilityLabel ?? 'Remove item from comparison',
+  })
+
+  if (!hasImage) {
+    return (
+      <Pressable
+        style={tokens.item}
+        accessibilityRole="button"
+        accessibilityLabel={item.accessibilityLabel ?? 'Add item to comparison'}
+        onPress={() => onPress?.(id, index)}
+        {...addWebProps}
+      >
+        <IconCapsule iconName="ic_add" modes={addCapsuleModes} style={ADD_CAPSULE_STYLE} />
+      </Pressable>
+    )
+  }
+
+  // Mobile-first: the entire filled slot is the remove target, not just the
+  // tiny close capsule (which a fingertip struggles to hit). The capsule stays
+  // purely as a visual affordance and is marked non-interactive so it never
+  // intercepts the press from the surrounding Pressable.
+  return (
+    <Pressable
+      style={[tokens.item, tokens.itemImageState]}
+      accessibilityRole="button"
+      accessibilityLabel={item.accessibilityLabel ?? 'Remove item from comparison'}
+      onPress={() => onRemove?.(id, index)}
+      {...removeWebProps}
+    >
+      <Image
+        imageSource={item.imageSource as any}
+        width="100%"
+        height="100%"
+        borderRadius={tokens.imageRadius}
+        resizeMode="cover"
+        accessibilityLabel={item.accessibilityLabel ?? 'Comparison item image'}
+      />
+      <View style={CLOSE_CAPSULE_WRAPPER_STYLE} pointerEvents="none">
+        <IconCapsule iconName="ic_close" modes={closeCapsuleModes} />
+      </View>
+    </Pressable>
+  )
+}
+
+// The Add capsule is the transparent IconCapsule variant from Figma (the gray
+// item box is the visible surface); its size/icon come from the resolved
+// `Icon Capsule Size: S` tokens, we only flatten the background/border here.
+const ADD_CAPSULE_STYLE: ViewStyle = {
+  backgroundColor: 'transparent',
+  borderColor: 'transparent',
+}
+
+// Positions the dismiss IconCapsule in the slot's top-right corner. The capsule
+// itself (size/background/icon) is fully token-driven via `closeCapsuleModes`.
+const CLOSE_CAPSULE_WRAPPER_STYLE: ViewStyle = {
+  position: 'absolute',
+  top: 1,
+  right: 1,
+}
+
+// Mode overrides applied on top of the consumer's `modes` for each capsule.
+// These mirror the Figma component's IconCapsule variant selections so the
+// sizing and colours come from design tokens instead of magic numbers.
+const ADD_CAPSULE_MODE_OVERRIDES: Modes = { 'Icon Capsule Size': 'XS' }
+const CLOSE_CAPSULE_MODE_OVERRIDES: Modes = {
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Medium',
+  'Icon Capsule Size': 'XS',
+}
+
+/**
+ * ComparisonBar — a floating card that lets a user assemble a set of items to
+ * compare, then trigger the comparison.
+ *
+ * Each slot is fully controlled via its `imageSource`: an empty slot shows a
+ * tappable `+` (the "Add" state) and a filled slot shows the image with a
+ * dismiss capsule (the "Image Added" state). The component never sources or
+ * stores images itself — when an empty slot is pressed it fires `onItemPress`
+ * with the item's id/index so the consumer can open whatever picker is
+ * appropriate and then update that item's `imageSource` to flip its state.
+ * Tapping a filled slot (anywhere on it — a mobile-friendly hit target, with
+ * the dismiss capsule as a visual affordance) fires `onItemRemove` so the
+ * consumer can clear the source again.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState<ComparisonBarItem[]>([
+ *   { id: 'a' }, { id: 'b' }, { id: 'c' }, { id: 'd' },
+ * ])
+ *
+ * <ComparisonBar
+ *   items={items}
+ *   onItemPress={async (id) => {
+ *     const uri = await openImagePicker()
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: uri } : it))
+ *   }}
+ *   onItemRemove={(id) =>
+ *     setItems(prev => prev.map(it => it.id === id ? { ...it, imageSource: null } : it))
+ *   }
+ *   onCompare={runComparison}
+ * />
+ * ```
+ */
+function ComparisonBar({
+  items,
+  onItemPress,
+  onItemRemove,
+  onCompare,
+  compareLabel = 'Compare',
+  compareDisabled,
+  disableCompareWhenEmpty = true,
+  modes: propModes = EMPTY_MODES,
+  style,
+}: ComparisonBarProps) {
+  const { modes: globalModes } = useTokens()
+  const modes = useMemo(
+    () =>
+      globalModes === EMPTY_MODES && propModes === EMPTY_MODES
+        ? EMPTY_MODES
+        : { ...globalModes, ...propModes },
+    [globalModes, propModes]
+  )
+
+  const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+  // Capsule modes = consumer modes + this component's fixed IconCapsule variant
+  // selections. Memoized so each `Additem`'s `IconCapsule` keeps a stable
+  // `modes` identity and hits the resolver cache.
+  const addCapsuleModes = useMemo(
+    () => ({ ...modes, ...ADD_CAPSULE_MODE_OVERRIDES }),
+    [modes]
+  )
+  const closeCapsuleModes = useMemo(
+    () => ({ ...modes, ...CLOSE_CAPSULE_MODE_OVERRIDES }),
+    [modes]
+  )
+
+  // An explicit `compareDisabled` always wins (functional disable — the tap is
+  // truly blocked, not merely dimmed). Otherwise auto-disable while no slot has
+  // an image, since there is nothing to compare yet.
+  const hasAnyImage = useMemo(
+    () => items.some((it) => it.imageSource != null && it.imageSource !== ''),
+    [items]
+  )
+  const isCompareDisabled =
+    compareDisabled ?? (disableCompareWhenEmpty && !hasAnyImage)
+
+  return (
+    <View style={[tokens.card, style]}>
+      {items.map((item, index) => (
+        <Additem
+          key={item.id ?? index}
+          item={item}
+          index={index}
+          tokens={tokens}
+          addCapsuleModes={addCapsuleModes}
+          closeCapsuleModes={closeCapsuleModes}
+          onPress={onItemPress}
+          onRemove={onItemRemove}
+        />
+      ))}
+      <Button
+        label={compareLabel}
+        modes={modes}
+        disabled={isCompareDisabled}
+        {...(onCompare !== undefined ? { onPress: onCompare } : {})}
+      />
+    </View>
+  )
+}
+
+export default React.memo(ComparisonBar)

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. */