jfs-components 0.0.25 → 0.0.27

package/lib/typescript/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAsDvE,KAAK,WAAW,GAAG;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,cAAc,EAAE,SAAS,CAAC,OAAO,cAAc,EAAE,SAAS,CAAC,CAAA;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,UAAU,CAAC,EAAE,GAAG,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,cAAc,EAAE,SAAS,CAAC,OAAO,cAAc,EAAE,SAAS,CAAC,CAAA;IAC1F,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAEd,KAAU,EACV,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,eAAqB,EACrB,aAAoB,EACpB,YAA0B,EAC1B,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,4BAAmC,EACnC,WAAgB,GACjB,EAAE,WAAW,2CA4Pb;AA8BD,eAAe,MAAM,CAAA"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAA;AAsDvE,KAAK,WAAW,GAAG;IAEjB,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC3B,KAAK,CAAC,EAAE,OAAO,cAAc,EAAE,SAAS,CAAC,OAAO,cAAc,EAAE,SAAS,CAAC,CAAA;IAC1E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,WAAW,GAAG,UAAU,CAAA;IACvC,YAAY,CAAC,EAAE,GAAG,CAAA;IAClB,UAAU,CAAC,EAAE,GAAG,CAAA;IAChB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,qBAAqB,CAAC,EAAE,OAAO,cAAc,EAAE,SAAS,CAAC,OAAO,cAAc,EAAE,SAAS,CAAC,CAAA;IAC1F,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,CAAA;AAED;;;GAGG;AACH,iBAAS,MAAM,CAAC,EAEd,KAAU,EACV,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,eAAqB,EACrB,aAAoB,EACpB,YAA0B,EAC1B,YAAY,EACZ,UAAU,EACV,kBAAkB,EAClB,iBAAiB,EACjB,qBAAqB,EACrB,4BAAoC,EACpC,WAAgB,GACjB,EAAE,WAAW,2CAgRb;AA8BD,eAAe,MAAM,CAAA"}

package/lib/typescript/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-02-10T14:09:41.694Z
+ * Generated: 2026-02-11T09:51:16.534Z
  */
 export declare const iconRegistry: Record<string, {
     path: string;

package/package.json

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

package/src/components/AppBar/AppBar.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import { View, type StyleProp, type ViewStyle, Pressable } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import IconButton from '../IconButton/IconButton'
+
 import Avatar from '../Avatar/Avatar'
 import NavArrow from '../NavArrow/NavArrow'
 // We might need to import Image or Svg if we had the assets locally, but for now we'll use placeholders or standard icons for defaults.
@@ -104,7 +104,7 @@ export default function AppBar({
   ...rest
 }: AppBarProps) {
   const { modes: globalModes } = useTokens()
-  const modes = { ...globalModes, ...propModes }
+  const modes = { Context2: 'AppBar', ...globalModes, ...propModes }
 
   const isMain = type === 'MainPage'
   const isSub = type === 'SubPage'
@@ -149,7 +149,7 @@ export default function AppBar({
   // but usually a component library provides sensible defaults.)
 
   // Actually, let's implement the specific defaults mentioned in the plan/analysis
-  // SubPage: NavArrow props (icon, etc). We'll use IconButton with 'ic_chevron_left' as a close approximation.
+  // SubPage: NavArrow props (icon, etc).
 
   let defaultLeading: React.ReactNode = null
   if (leadingSlot === undefined) {

package/src/components/Drawer/Drawer.tsx

@@ -99,7 +99,7 @@ function Drawer({
   accessibilityLabel,
   accessibilityHint,
   contentContainerStyle,
-  showsVerticalScrollIndicator = true,
+  showsVerticalScrollIndicator = false,
   bottomInset = 80,
 }: DrawerProps) {
   const { height: screenHeight } = useWindowDimensions()
@@ -117,11 +117,19 @@ function Drawer({
   const scrollY = useSharedValue(0)
   const scrollRef = useRef(null)
 
-  // Dynamically disable top bounce so a downward swipe at the top of
-  // the content drags the whole drawer instead of rubber-banding the
-  // scroll view.  Bottom bounce is preserved when the user has scrolled.
+  // Whether the drawer is currently snapped to the fully-expanded position.
+  // Set in onEnd — used to gate scroll so that an upward swipe from the
+  // collapsed state only moves the drawer (scroll kicks in after expansion).
+  const isFullyExpanded = useSharedValue(initialState === 'expanded')
+
+  // Dynamically control native ScrollView props on the UI thread:
+  //  • bounces: disabled at the top so a downward swipe drags the drawer
+  //    instead of rubber-banding the scroll view.  Bottom bounce preserved.
+  //  • scrollEnabled: disabled while the drawer is not fully expanded so
+  //    that an upward swipe only raises the drawer (no simultaneous scroll).
   const animatedScrollProps = useAnimatedProps(() => ({
     bounces: scrollY.value > 1,
+    scrollEnabled: isFullyExpanded.value,
   }))
 
   // We need to know if we are currently dragging the drawer or scrolling the content
@@ -224,19 +232,31 @@ function Drawer({
         ? (translateY.value - minTranslateY) / totalRange
         : 0
 
-      // Fast upward fling → always expand
+      // Fast fling → always follow the fling direction
       if (event.velocityY < -500) {
         scrollTo(minTranslateY)
+        isFullyExpanded.value = true
         runOnJS(updateMode)('expanded')
-      } else if (currentRatio >= 0.5) {
-        // Handle position past 50% of range → collapse
+      } else if (event.velocityY > 500) {
         scrollTo(maxTranslateY)
+        isFullyExpanded.value = false
         runOnJS(updateMode)('collapsed')
       } else {
-        // Handle position still in upper half → snap back to expanded
-        // (resilient to accidental collapse — position MUST cross 50%)
-        scrollTo(minTranslateY)
-        runOnJS(updateMode)('expanded')
+        // Slow / medium gesture → use asymmetric snap 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
+        const threshold = isDraggingDown ? 0.75 : 0.35
+
+        if (currentRatio >= threshold) {
+          scrollTo(maxTranslateY)
+          isFullyExpanded.value = false
+          runOnJS(updateMode)('collapsed')
+        } else {
+          scrollTo(minTranslateY)
+          isFullyExpanded.value = true
+          runOnJS(updateMode)('expanded')
+        }
       }
     })
 

package/src/components/HStack/HStack.tsx

@@ -55,11 +55,11 @@ export const HStack = ({
     const { modes: globalModes } = useTokens()
     const modes = { ...globalModes, ...propModes }
 
-    const paddingTop = getVariableByName('hstack/padding/top', modes)
-    const paddingBottom = getVariableByName('hstack/padding/bottom', modes)
-    const paddingLeft = getVariableByName('hstack/padding/left', modes)
-    const paddingRight = getVariableByName('hstack/padding/right', modes)
-    const gap = getVariableByName('hstack/gap', modes)
+    const paddingTop = getVariableByName('hStack/padding/top', modes)
+    const paddingBottom = getVariableByName('hStack/padding/bottom', modes)
+    const paddingLeft = getVariableByName('hStack/padding/left', modes)
+    const paddingRight = getVariableByName('hStack/padding/right', modes)
+    const gap = getVariableByName('hStack/gap', modes)
 
     const flexWrap = typeof wrap === 'boolean' ? (wrap ? 'wrap' : 'nowrap') : wrap
 

package/src/components/RadioButton/RadioButton.mdx

@@ -15,7 +15,6 @@ This component uses the following design token collections. Each collection supp
 ### Colors Router
 - **Modes:** POC | Old
 - **Default:** POC
-
 ## Usage
 
 # RadioButton
@@ -88,5 +87,4 @@ This component uses the following design tokens, resolved through `getVariableBy
 - **`radio/selector/size`**
 - **`radio/width`**
 
-All tokens support mode-based theming through the `modes` prop.
-
+All tokens support mode-based theming through the `modes` prop.