jfs-components 0.0.63 → 0.0.65

package/src/components/Drawer/Drawer.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState, useRef } from 'react'
-import { Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import { Platform, StyleSheet, Text, useWindowDimensions, View, ViewStyle } from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -79,6 +79,11 @@ type DrawerProps = {
    * as a tab bar.  Defaults to 80.
    */
   bottomInset?: number
+  /**
+   * Called whenever the drawer settles into a new state (collapsed or
+   * expanded), so parent components can react programmatically.
+   */
+  onStateChange?: (state: 'collapsed' | 'expanded') => void
 }
 
 /**
@@ -102,6 +107,7 @@ function Drawer({
   contentContainerStyle,
   showsVerticalScrollIndicator = false,
   bottomInset = 80,
+  onStateChange,
 }: DrawerProps) {
   const { height: screenHeight } = useWindowDimensions()
 
@@ -164,13 +170,27 @@ function Drawer({
 
   // Update JS state for accessibility/logic if needed
   const updateMode = useCallback((newMode: 'collapsed' | 'expanded') => {
-    setMode(newMode)
-  }, [])
-
+    setMode((prev) => {
+      if (prev !== newMode) {
+        onStateChange?.(newMode)
+      }
+      return newMode
+    })
+  }, [onStateChange])
+
+  // Gesture policy:
+  //  • activeOffsetY: require a clear *vertical* drag (10px) before this
+  //    pan claims the gesture.  Matches typical iOS scroll activation feel.
+  //  • failOffsetX:  if the finger crosses ~16px horizontally *before* we
+  //    activate, surrender the gesture entirely so any horizontal child
+  //    (FlatList horizontal, swiper, slider, etc.) can scroll cleanly
+  //    without the drawer also translating on Y.
+  //  • simultaneousWithExternalGesture(scrollRef): cooperate with the
+  //    drawer's own internal vertical ScrollView for nested scrolling.
   const gesture = Gesture.Pan()
     .simultaneousWithExternalGesture(scrollRef)
-    .activeOffsetY([-5, 5])
-    .activeOffsetX([-5, 5])
+    .activeOffsetY([-10, 10])
+    .failOffsetX([-16, 16])
     .onStart(() => {
       context.value = { y: translateY.value }
       isDrawerActive.value = true
@@ -179,6 +199,16 @@ function Drawer({
       scrollTopTranslationOffset.value = 0
     })
     .onUpdate((event) => {
+      // Defense-in-depth: even after vertical activation, if the *current*
+      // motion is dominantly horizontal (e.g., the user activated with a
+      // small Y nudge and then curved into a horizontal swipe on a child
+      // carousel), don't translate the drawer this frame.  failOffsetX
+      // already prevents activation in pure-horizontal swipes; this guards
+      // the diagonal-then-horizontal case.
+      if (Math.abs(event.translationX) > Math.abs(event.translationY) * 1.5) {
+        return
+      }
+
       // Logic for nested scrolling:
       // If we are at the expanded position (minTranslateY) AND content is
       // scrolled down (scrollY > 0), let the ScrollView handle the gesture.
@@ -299,6 +329,36 @@ function Drawer({
   const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) || 17
   const titlePaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) || 8
 
+  // Drop shadow — Figma layers two shadows (primary + secondary) sharing
+  // the same offsetY/blur but with their own offsetX and color.
+  const shadowPrimaryOffsetX = (getVariableByName('drawer/shadow/primary/offsetX', modes) ?? 0) as number
+  const shadowPrimaryOffsetY = (getVariableByName('drawer/shadow/primary/offsetY', modes) ?? 16) as number
+  const shadowPrimaryBlur = (getVariableByName('drawer/shadow/primary/blur', modes) ?? 48) as number
+  const shadowPrimaryColor = (getVariableByName('drawer/shadow/primary/color', modes) ?? 'rgba(12, 13, 16, 0.16)') as string
+  const shadowSecondaryOffsetX = (getVariableByName('drawer/shadow/secondary/offsetX', modes) ?? 0) as number
+  const shadowSecondaryColor = (getVariableByName('drawer/shadow/secondary/color', modes) ?? 'rgba(12, 13, 16, 0.12)') as string
+
+  // Cross-platform shadow style. Web supports stacking two shadows via
+  // boxShadow. iOS only supports a single native shadow per view, so we
+  // apply the more prominent (primary) one. Android uses elevation.
+  const shadowStyle: ViewStyle = Platform.select({
+    web: {
+      boxShadow:
+        `${shadowSecondaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowSecondaryColor}, ` +
+        `${shadowPrimaryOffsetX}px ${shadowPrimaryOffsetY}px ${shadowPrimaryBlur}px 0px ${shadowPrimaryColor}`,
+    } as ViewStyle,
+    ios: {
+      shadowColor: shadowPrimaryColor,
+      shadowOffset: { width: shadowPrimaryOffsetX, height: shadowPrimaryOffsetY },
+      shadowOpacity: 1,
+      shadowRadius: shadowPrimaryBlur / 2,
+    },
+    android: {
+      elevation: 16,
+    },
+    default: {},
+  }) as ViewStyle
+
   const defaultAccessibilityLabel = accessibilityLabel || title || 'Drawer'
 
   return (
@@ -314,11 +374,8 @@ function Drawer({
               backgroundColor,
               borderTopLeftRadius: radius,
               borderTopRightRadius: radius,
-              paddingLeft,
-              paddingRight,
-              paddingBottom,
-              rowGap: drawerGap,
             },
+            shadowStyle,
             sheetStyle,
             animatedStyle,
           ]}
@@ -327,57 +384,73 @@ function Drawer({
           accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint || 'Swipe up to expand, swipe down to collapse'}
         >
-          {/* Handle Area */}
-          <View style={[styles.handleArea, (!title && !header) && { paddingBottom: 0 }]}>
-            <View
-              style={[
-                {
-                  backgroundColor: handleColor,
-                  width: handleWidth,
-                  height: handleHeight,
-                  borderRadius: handleRadius
-                },
-              ]}
-            />
-          </View>
-
-          {/* Custom Header Slot */}
-          {header}
-
-          {/* Title (Legacy/Simple Mode) */}
-          {title && (
-            <Text
-              style={[
-                {
-                  color: titleColor,
-                  fontSize: titleSize,
-                  fontWeight: titleWeight as any,
-                  lineHeight: titleLineHeight,
-                  marginBottom: titlePaddingBottom,
-                }
-              ]}
-            >
-              {title}
-            </Text>
-          )}
-
-          {/* Scrollable Content */}
-          <AnimatedScrollView
-            ref={scrollRef}
-            style={[styles.content, contentStyle]}
-            contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
-            showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            animatedProps={animatedScrollProps}
-            alwaysBounceVertical={false}
-            overScrollMode="always"
-            onScroll={useAnimatedScrollHandler((event) => {
-              scrollY.value = event.contentOffset.y
-            })}
-            scrollEventThrottle={16}
+          {/* Inner clip layer — keeps overflow:'hidden' off the shadow-carrying
+              outer view so iOS doesn't clip the drop shadow. */}
+          <View
+            style={[
+              styles.sheetInner,
+              {
+                borderTopLeftRadius: radius,
+                borderTopRightRadius: radius,
+                paddingLeft,
+                paddingRight,
+                paddingBottom,
+                rowGap: drawerGap,
+              },
+            ]}
           >
-            {/* Prevent touch propagation for text selection if needed */}
-            {children}
-          </AnimatedScrollView>
+            {/* Handle Area */}
+            <View style={[styles.handleArea, (!title && !header) && { paddingBottom: 0 }]}>
+              <View
+                style={[
+                  {
+                    backgroundColor: handleColor,
+                    width: handleWidth,
+                    height: handleHeight,
+                    borderRadius: handleRadius
+                  },
+                ]}
+              />
+            </View>
+
+            {/* Custom Header Slot */}
+            {header}
+
+            {/* Title (Legacy/Simple Mode) */}
+            {title && (
+              <Text
+                style={[
+                  {
+                    color: titleColor,
+                    fontSize: titleSize,
+                    fontWeight: titleWeight as any,
+                    lineHeight: titleLineHeight,
+                    marginBottom: titlePaddingBottom,
+                  }
+                ]}
+              >
+                {title}
+              </Text>
+            )}
+
+            {/* Scrollable Content */}
+            <AnimatedScrollView
+              ref={scrollRef}
+              style={[styles.content, contentStyle]}
+              contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
+              showsVerticalScrollIndicator={showsVerticalScrollIndicator}
+              animatedProps={animatedScrollProps}
+              alwaysBounceVertical={false}
+              overScrollMode="always"
+              onScroll={useAnimatedScrollHandler((event) => {
+                scrollY.value = event.contentOffset.y
+              })}
+              scrollEventThrottle={16}
+            >
+              {/* Prevent touch propagation for text selection if needed */}
+              {children}
+            </AnimatedScrollView>
+          </View>
         </Animated.View>
       </GestureDetector>
     </GestureHandlerRootView>
@@ -399,6 +472,9 @@ const styles = StyleSheet.create({
     width: '100%',
     position: 'absolute',
     top: 0,
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden',
   },
   handleArea: {

package/src/components/IconButton/IconButton.tsx

@@ -11,9 +11,19 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Icon from '../../icons/Icon'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import type { UnifiedSource } from '../../utils/MediaSource'
 
 type IconButtonProps = SafePressableProps & {
+  /** Built-in icon name from the registry (default state). */
   iconName?: string;
+  /**
+   * Unified fallback source for the default state, used when `iconName` is
+   * missing or not in the registry. Accepts a remote URI, an inline SVG XML
+   * string, a `require()` asset, an SVG React component, or a React element.
+   * The result is tinted with the button's mode-resolved icon color so it
+   * follows design tokens just like a built-in icon. See {@link UnifiedSource}.
+   */
+  source?: UnifiedSource;
   modes?: Record<string, any>;
   onPress?: () => void;
   disabled?: boolean;
@@ -29,10 +39,24 @@ type IconButtonProps = SafePressableProps & {
    * Icon to display when isToggle is true and isActive is true
    */
   activeIcon?: string;
+  /**
+   * Unified fallback source for the active state. Used when `activeIcon` is
+   * missing or not in the registry (and only when `isToggle` is true and
+   * `isActive` is true). Falls back to the default `source` if not provided.
+   * See {@link UnifiedSource}.
+   */
+  activeSource?: UnifiedSource;
   /**
    * Icon to display when isToggle is true and isActive is false
    */
   inactiveIcon?: string;
+  /**
+   * Unified fallback source for the inactive state. Used when `inactiveIcon`
+   * is missing or not in the registry (and only when `isToggle` is true and
+   * `isActive` is false). Falls back to the default `source` if not provided.
+   * See {@link UnifiedSource}.
+   */
+  inactiveSource?: UnifiedSource;
   /**
    * Whether the toggle button is in active state (only used when isToggle is true)
    */
@@ -109,8 +133,14 @@ function resolveIconButtonTokens(modes: Record<string, any>, disabled: boolean):
  *    pressed transform mirrored via React state) — removed.
  *  - Wrapped in `React.memo`.
  */
+// Legacy default icon used when neither a `name` nor a `source` is supplied
+// for the resolved slot. Kept as a constant rather than a destructuring
+// default so source-only call sites don't accidentally render `'ic_card'`.
+const LEGACY_DEFAULT_ICON_NAME = 'ic_card'
+
 function IconButton({
-  iconName = 'ic_card',
+  iconName,
+  source,
   modes = EMPTY_MODES,
   onPress,
   disabled = false,
@@ -121,7 +151,9 @@ function IconButton({
   webAccessibilityProps,
   isToggle = false,
   activeIcon,
+  activeSource,
   inactiveIcon,
+  inactiveSource,
   isActive = false,
   ...rest
 }: IconButtonProps) {
@@ -160,16 +192,42 @@ function IconButton({
   userHandlersRef.current.onHoverIn = (rest as any)?.onHoverIn
   userHandlersRef.current.onHoverOut = (rest as any)?.onHoverOut
 
-  // Determine which icon to display
-  const finalIconName =
-    isToggle
-      ? (isActive && activeIcon
-        ? activeIcon
-        : (!isActive && inactiveIcon ? inactiveIcon : iconName))
-      : iconName
+  // Resolve the active (name + source) pair for the current slot. Toggle
+  // mode picks active/inactive based on `isActive`; per-state overrides
+  // fall back to the default `iconName` / `source` when omitted. We then
+  // apply the legacy default icon only as a last resort, so a source-only
+  // call site (`<IconButton source="…" />`) renders the source instead of
+  // bleeding through to `'ic_card'`.
+  let resolvedIconName: string | undefined
+  let resolvedSource: UnifiedSource | undefined
+  if (isToggle) {
+    if (isActive) {
+      resolvedIconName = activeIcon ?? iconName
+      resolvedSource = activeSource ?? source
+    } else {
+      resolvedIconName = inactiveIcon ?? iconName
+      resolvedSource = inactiveSource ?? source
+    }
+  } else {
+    resolvedIconName = iconName
+    resolvedSource = source
+  }
+  if (!resolvedIconName && resolvedSource === undefined) {
+    resolvedIconName = LEGACY_DEFAULT_ICON_NAME
+  }
 
-  // Generate default accessibility label from icon name if not provided
-  const defaultAccessibilityLabel = accessibilityLabel || iconName.replace(/^ic_/, '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())
+  // Generate default accessibility label from the resolved icon name when
+  // possible. Source-only call sites should provide an explicit
+  // `accessibilityLabel`; we fall back to a generic 'Icon button' so we
+  // never crash on `iconName.replace(...)` when only a `source` is supplied.
+  const defaultAccessibilityLabel =
+    accessibilityLabel ||
+    (resolvedIconName
+      ? resolvedIconName
+          .replace(/^ic_/, '')
+          .replace(/_/g, ' ')
+          .replace(/\b\w/g, (l) => l.toUpperCase())
+      : 'Icon button')
 
   const webProps = usePressableWebSupport({
     restProps: rest,
@@ -235,7 +293,8 @@ function IconButton({
       {...webProps}
     >
       <Icon
-        name={finalIconName}
+        {...(resolvedIconName !== undefined ? { name: resolvedIconName } : {})}
+        {...(resolvedSource !== undefined ? { source: resolvedSource } : {})}
         size={tokens.iconSize}
         color={tokens.iconColor}
         accessibilityElementsHidden={true}

package/src/components/IconCapsule/IconCapsule.tsx

@@ -4,9 +4,19 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import type { UnifiedSource } from '../../utils/MediaSource'
 
 type IconCapsuleProps = {
   iconName?: string;
+  /**
+   * Unified fallback source rendered when `iconName` is missing or not in the
+   * registry. Accepts a remote URI, an inline SVG XML string, a `require()`
+   * asset, an SVG React component, or an already-rendered element. The
+   * resulting media is tinted with the capsule's mode-resolved icon color so
+   * it follows design tokens just like a built-in icon. See
+   * {@link UnifiedSource}.
+   */
+  source?: UnifiedSource;
   modes?: Record<string, any>;
   accessibilityLabel?: string;
   accessibilityRole?: string;
@@ -55,6 +65,7 @@ function resolveIconCapsuleTokens(modes: Record<string, any>): IconCapsuleTokens
  * @component
  * @param {Object} props - Component props
  * @param {string} [props.iconName="ic_card"] - The name of the icon to display from the icon registry
+ * @param {UnifiedSource} [props.source] - Fallback source (remote URI, inline SVG XML, `require()` asset, SVG React component, or React element). Used when `iconName` is missing or unknown. Tinted with the mode-resolved icon color so it follows design tokens just like a built-in icon.
  * @param {Object} [props.modes={}] - Mode configuration for design tokens (e.g., {"Appearance": "Primary"})
  * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers
  * @param {string} [props.accessibilityRole] - Accessibility role (defaults to "image" for decorative icons)
@@ -68,6 +79,7 @@ function resolveIconCapsuleTokens(modes: Record<string, any>): IconCapsuleTokens
  */
 function IconCapsule({
   iconName = 'ic_card',
+  source,
   modes: propModes = EMPTY_MODES,
   // accessibilityLabel is accepted on the type for API back-compat but the
   // component intentionally renders `accessibilityLabel={undefined}` (icons
@@ -105,6 +117,7 @@ function IconCapsule({
     >
       <Icon
         name={iconName}
+        {...(source !== undefined ? { source } : {})}
         size={tokens.iconSize}
         color={tokens.iconColor}
         accessibilityElementsHidden={true}

package/src/components/Popup/Popup.tsx

@@ -162,12 +162,12 @@ const Popup = forwardRef<PopupRef, PopupProps>(function Popup(
                 <View style={styles.overlay}>
                     <Animated.View
                         style={[
-                            StyleSheet.absoluteFillObject,
+                            StyleSheet.absoluteFill,
                             { backgroundColor: backdropColor, opacity: backdropAnim },
                         ]}
                     >
                         <Pressable
-                            style={StyleSheet.absoluteFillObject}
+                            style={StyleSheet.absoluteFill}
                             onPress={closeOnBackdropPress ? handleClose : undefined}
                             accessibilityRole="button"
                             accessibilityLabel="Close popup"