jfs-components 0.0.63 → 0.0.64

package/lib/typescript/src/components/Section/Section.d.ts

@@ -22,6 +22,10 @@ declare function Section({ title, supportText, showSupportText, slot, slotDirect
 declare namespace Section {
     var Bento: typeof SectionBento;
 }
+type BentoToggleRenderState = {
+    expanded: boolean;
+    toggle: () => void;
+};
 type SectionBentoProps = {
     navSlot?: React.ReactNode;
     upiSlot?: React.ReactNode;
@@ -33,7 +37,44 @@ type SectionBentoProps = {
      * Web-specific accessibility props (only used on web platform)
      */
     webAccessibilityProps?: WebAccessibilityProps;
+    /**
+     * Total cell count visible when collapsed (real items + the toggle cell).
+     * Defaults to {@link SLOT_GRID_MAX_COLUMNS} (4) so the collapsed state fills
+     * exactly one row. When `navSlot.length <= collapsedCount`, expansion is
+     * disabled (no toggle injected, no animation wrappers — identical to the
+     * legacy behavior for back-compat).
+     */
+    collapsedCount?: number;
+    /**
+     * Uncontrolled initial expanded state. Ignored when `expanded` is provided.
+     * Defaults to `false`.
+     */
+    defaultExpanded?: boolean;
+    /**
+     * Controlled expanded state. When provided, `onExpandedChange` should also
+     * be provided so the component can request changes.
+     */
+    expanded?: boolean;
+    /**
+     * Called when the user taps the toggle. Required in controlled mode; ignored
+     * in uncontrolled mode unless you want to observe the change.
+     */
+    onExpandedChange?: (next: boolean) => void;
+    /** Label shown on the toggle cell when collapsed. Default `'More'`. */
+    toggleMoreLabel?: string;
+    /** Label shown on the toggle cell when expanded. Default `'Less'`. */
+    toggleLessLabel?: string;
+    /** Icon name shown on the toggle when collapsed. Default `'ic_chevron_down'`. */
+    toggleMoreIcon?: string;
+    /** Icon name shown on the toggle when expanded. Default `'ic_chevron_up'`. */
+    toggleLessIcon?: string;
+    /**
+     * Escape hatch: render a custom toggle cell instead of the default ListItem.
+     * The provided node is rendered in the toggle's grid slot. Wire `toggle()` to
+     * any tap interaction inside it. Height + per-cell animations still apply.
+     */
+    renderToggle?: (state: BentoToggleRenderState) => React.ReactNode;
 } & React.ComponentProps<typeof View>;
-declare function SectionBento({ navSlot, upiSlot, modes, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, ...rest }: SectionBentoProps): import("react/jsx-runtime").JSX.Element;
+declare function SectionBento({ navSlot, upiSlot, modes, style, accessibilityLabel: _accessibilityLabel, accessibilityHint, collapsedCount, defaultExpanded, expanded: controlledExpanded, onExpandedChange, toggleMoreLabel, toggleLessLabel, toggleMoreIcon, toggleLessIcon, renderToggle, ...rest }: SectionBentoProps): import("react/jsx-runtime").JSX.Element;
 export default Section;
 //# sourceMappingURL=Section.d.ts.map

package/lib/typescript/src/icons/registry.d.ts

@@ -4,7 +4,7 @@
  * Auto-generated from SVG files in src/icons/
  * DO NOT EDIT MANUALLY - Run "npm run icons:generate" to regenerate
  *
- * Generated: 2026-04-20T08:18:55.051Z
+ * Generated: 2026-04-20T20:41:14.535Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.63",
+  "version": "0.0.64",
   "description": "React Native Jio Finance Components Library",
   "author": "sunshuaiqi@gmail.com",
   "license": "MIT",

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,
@@ -167,10 +167,19 @@ function Drawer({
     setMode(newMode)
   }, [])
 
+  // 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 +188,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 +318,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 +363,8 @@ function Drawer({
               backgroundColor,
               borderTopLeftRadius: radius,
               borderTopRightRadius: radius,
-              paddingLeft,
-              paddingRight,
-              paddingBottom,
-              rowGap: drawerGap,
             },
+            shadowStyle,
             sheetStyle,
             animatedStyle,
           ]}
@@ -327,57 +373,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 +461,9 @@ const styles = StyleSheet.create({
     width: '100%',
     position: 'absolute',
     top: 0,
+  },
+  sheetInner: {
+    flex: 1,
     overflow: 'hidden',
   },
   handleArea: {