jfs-components 0.0.53 → 0.0.55

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

@@ -3,32 +3,37 @@ import { View, type StyleProp, type ViewStyle } from 'react-native';
 type ListGroupProps = {
     label?: string;
     listGroupSlot?: React.ReactNode;
+    children?: React.ReactNode;
     modes?: Record<string, any>;
     style?: StyleProp<ViewStyle>;
     accessibilityLabel?: string;
     accessibilityHint?: string;
-} & React.ComponentProps<typeof View>;
+} & Omit<React.ComponentProps<typeof View>, 'children'>;
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
  *
  * This component supports:
  *  - **label** text at the top
- *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **listGroupSlot** or **children** for content (typically ListItem components)
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "List group" → `listGroupSlot`
+ * Content can be provided in two interchangeable ways:
+ *  - Via the `listGroupSlot` prop (Figma Slot "List group")
+ *  - Via `children`
+ *
+ * Both produce identical results. If both are provided, they are merged
+ * (listGroupSlot items render first, then children).
  *
  * @component
  * @param {Object} props
  * @param {string} [props.label=''] - Label text displayed at the top of the list group
- * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.listGroupSlot] - Slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.children] - Children for list items (equivalent to listGroupSlot)
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the list group. If not provided, uses label
  * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
  */
-declare function ListGroup({ label, listGroupSlot, modes, style, accessibilityLabel, accessibilityHint, ...rest }: ListGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function ListGroup({ label, listGroupSlot, children, modes, style, accessibilityLabel, accessibilityHint, ...rest }: ListGroupProps): import("react/jsx-runtime").JSX.Element;
 export default ListGroup;
 //# sourceMappingURL=ListGroup.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-13T10:56:51.920Z
+ * Generated: 2026-04-13T20:48:16.865Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jfs-components",
-  "version": "0.0.53",
+  "version": "0.0.55",
   "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 { StyleSheet, Text, useWindowDimensions, View } from 'react-native'
+import { Platform, StyleSheet, Text, useWindowDimensions, View } from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -232,17 +232,25 @@ function Drawer({
         ? (translateY.value - minTranslateY) / totalRange
         : 0
 
-      // Fast fling → always follow the fling direction
-      if (event.velocityY < -500) {
+      // How far the drawer sheet itself moved from its position at gesture
+      // start.  When the scroll view consumed the gesture (content was not
+      // at the top), the drawer stays put and displacement ≈ 0 — even
+      // though the finger moved fast.  We must NOT use velocity to snap in
+      // that case; otherwise a fast content-scroll collapses the drawer.
+      const drawerDisplacement = Math.abs(translateY.value - context.value.y)
+      const drawerMovedEnough = drawerDisplacement > 10
+
+      if (drawerMovedEnough && event.velocityY < -500) {
         scrollTo(minTranslateY)
         isFullyExpanded.value = true
         runOnJS(updateMode)('expanded')
-      } else if (event.velocityY > 500) {
+      } else if (drawerMovedEnough && event.velocityY > 500) {
         scrollTo(maxTranslateY)
         isFullyExpanded.value = false
         runOnJS(updateMode)('collapsed')
       } else {
-        // Slow / medium gesture → use asymmetric snap thresholds.
+        // Slow / medium gesture, or the drawer barely moved → position
+        // based snap with asymmetric thresholds.
         // Down stroke: must cross 75% to collapse (hard to dismiss).
         // Up stroke: must reach top 35% to expand (35% from top).
         const isDraggingDown = event.velocityY >= 0
@@ -314,7 +322,7 @@ function Drawer({
             animatedStyle,
           ]}
           accessible={true}
-          accessibilityRole={'dialog' as any}
+          {...(Platform.OS === 'web' ? { accessibilityRole: 'dialog' as any } : undefined)}
           accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint || 'Swipe up to expand, swipe down to collapse'}
         >

package/src/components/ListGroup/ListGroup.tsx

@@ -11,28 +11,33 @@ import { cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils
 type ListGroupProps = {
   label?: string;
   listGroupSlot?: React.ReactNode;
+  children?: React.ReactNode;
   modes?: Record<string, any>;
   style?: StyleProp<ViewStyle>;
   accessibilityLabel?: string;
   accessibilityHint?: string;
-} & React.ComponentProps<typeof View>;
+} & Omit<React.ComponentProps<typeof View>, 'children'>;
 
 /**
  * ListGroup component that mirrors the Figma "List Group" component.
  *
  * This component supports:
  *  - **label** text at the top
- *  - **listGroupSlot** for custom content (typically ListItem components)
+ *  - **listGroupSlot** or **children** for content (typically ListItem components)
  *  - **design-token driven styling** via `getVariableByName` and `modes`
  *
- * Wherever the Figma layer name contains "Slot", this component exposes a
- * dedicated React "slot" prop:
- *  - Slot "List group" → `listGroupSlot`
+ * Content can be provided in two interchangeable ways:
+ *  - Via the `listGroupSlot` prop (Figma Slot "List group")
+ *  - Via `children`
+ *
+ * Both produce identical results. If both are provided, they are merged
+ * (listGroupSlot items render first, then children).
  *
  * @component
  * @param {Object} props
  * @param {string} [props.label=''] - Label text displayed at the top of the list group
- * @param {React.ReactNode} [props.listGroupSlot] - Optional custom slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.listGroupSlot] - Slot for list items (Figma Slot "List group")
+ * @param {React.ReactNode} [props.children] - Children for list items (equivalent to listGroupSlot)
  * @param {Object} [props.modes={}] - Modes object passed to `getVariableByName` for all design tokens
  * @param {Object} [props.style] - Optional container style overrides
  * @param {string} [props.accessibilityLabel] - Accessibility label for the list group. If not provided, uses label
@@ -41,6 +46,7 @@ type ListGroupProps = {
 function ListGroup({
   label = '',
   listGroupSlot,
+  children,
   modes = {},
   style,
   accessibilityLabel,
@@ -79,11 +85,15 @@ function ListGroup({
     fontWeight: labelFontWeight,
   }
 
-  // Clone listGroupSlot children and pass modes to all children that accept it
-  // We flatten children first so that if a Fragment is passed, the items inside
-  // become direct children of the container, allowing `gap` to apply correctly between them.
-  const processedSlot = listGroupSlot
-    ? cloneChildrenWithModes(flattenChildren(listGroupSlot), modes)
+  // Merge listGroupSlot and children into a single list, then flatten and
+  // propagate modes.  Both props are interchangeable; when both are provided
+  // the slot items render first, followed by children.
+  const rawItems = [
+    ...(listGroupSlot ? flattenChildren(listGroupSlot) : []),
+    ...(children ? flattenChildren(children) : []),
+  ]
+  const processedSlot = rawItems.length > 0
+    ? cloneChildrenWithModes(rawItems, modes)
     : null
 
   // Use provided accessibilityLabel or fall back to label

package/src/components/Section/Section.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { View, Text, Pressable, type StyleProp, type ViewStyle, type PressableStateCallbackType } from 'react-native'
+import { View, Text, Pressable, Platform, type StyleProp, type ViewStyle, type PressableStateCallbackType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
@@ -182,7 +182,7 @@ function Section({
   return (
     <View
       style={[containerStyle, style]}
-      accessibilityRole={'region' as any}
+      {...(Platform.OS === 'web' ? { accessibilityRole: 'region' as any } : undefined)}
       accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
@@ -314,7 +314,7 @@ function SectionBento({
   return (
     <View
       style={[containerStyle, style]}
-      accessibilityRole={'region' as any}
+      {...(Platform.OS === 'web' ? { accessibilityRole: 'region' as any } : undefined)}
       accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}

package/src/icons/registry.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-13T10:56:51.920Z
+ * Generated: 2026-04-13T20:48:16.865Z
  */
 
 // Icon name to SVG data mapping