jfs-components 0.0.21 → 0.0.25

package/src/components/Carousel/Carousel.tsx

@@ -0,0 +1,472 @@
+import React, {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+  useMemo,
+} from 'react'
+import {
+  View,
+  ScrollView,
+  Animated,
+  Pressable,
+  type ViewStyle,
+  type StyleProp,
+  type NativeSyntheticEvent,
+  type NativeScrollEvent,
+  type LayoutChangeEvent,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+interface CarouselContextValue {
+  modes: Record<string, any>
+  activeIndex: number
+  totalItems: number
+  goTo: (index: number) => void
+  goNext: () => void
+  goPrev: () => void
+}
+
+const CarouselContext = createContext<CarouselContextValue>({
+  modes: {},
+  activeIndex: 0,
+  totalItems: 0,
+  goTo: () => {},
+  goNext: () => {},
+  goPrev: () => {},
+})
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+export interface CarouselProps {
+  /** Content items to display (should be Carousel.Item or any React nodes). */
+  children?: React.ReactNode
+  /** Modes object for design-token resolution. */
+  modes?: Record<string, any>
+  /** Enable auto-play. Default: false. */
+  autoPlay?: boolean
+  /** Auto-play interval in ms. Default: 4000. */
+  autoPlayInterval?: number
+  /** Show pagination dots. Default: true. */
+  showPagination?: boolean
+  /** Enable looping (jumps back to first after last). Default: true. */
+  loop?: boolean
+  /** Gap between items in px. Resolved from token `carousel/gap` or defaults to 12. */
+  gap?: number
+  /** Width of each carousel item. When undefined, items take full container width. */
+  itemWidth?: number
+  /** Horizontal padding around the carousel track, allowing peek of adjacent items. Defaults to 0. */
+  peekOffset?: number
+  /** Called when the active index changes. */
+  onIndexChange?: (index: number) => void
+  /** Style overrides for the outermost container. */
+  style?: StyleProp<ViewStyle>
+}
+
+// ---------------------------------------------------------------------------
+// Carousel
+// ---------------------------------------------------------------------------
+
+export function Carousel({
+  children,
+  modes = {},
+  autoPlay = false,
+  autoPlayInterval = 4000,
+  showPagination = true,
+  loop = true,
+  gap: gapProp,
+  itemWidth: itemWidthProp,
+  peekOffset: peekOffsetProp,
+  onIndexChange,
+  style,
+}: CarouselProps) {
+  // ---- Token resolution ----
+  const tokenGap = parseFloat(
+    getVariableByName('carousel/gap', modes) || '12',
+  )
+  const gap = gapProp ?? tokenGap
+
+  const tokenPeekOffset = parseFloat(
+    getVariableByName('carousel/peekOffset', modes) || '0',
+  )
+  const peekOffset = peekOffsetProp ?? tokenPeekOffset
+
+  const containerPaddingH = parseFloat(
+    getVariableByName('carousel/padding/horizontal', modes) || '0',
+  )
+  const containerPaddingV = parseFloat(
+    getVariableByName('carousel/padding/vertical', modes) || '0',
+  )
+  const paginationGap = parseFloat(
+    getVariableByName('carousel/pagination/gap', modes) || '12',
+  )
+
+  // ---- Refs & state ----
+  const scrollRef = useRef<ScrollView>(null)
+  const [activeIndex, setActiveIndex] = useState(0)
+  const [containerWidth, setContainerWidth] = useState(0)
+  const autoPlayTimer = useRef<ReturnType<typeof setInterval> | null>(null)
+  const userInteracting = useRef(false)
+
+  // Flatten children so we can count items
+  const items = useMemo(
+    () => React.Children.toArray(children).filter(React.isValidElement),
+    [children],
+  )
+
+  const totalItems = items.length
+
+  // Effective item width: provided prop, or full container width minus peek offsets
+  const effectiveItemWidth = useMemo(() => {
+    if (itemWidthProp != null) return itemWidthProp
+    if (containerWidth === 0) return 0
+    // Full-width minus peekOffset on each side
+    return containerWidth - peekOffset * 2 - containerPaddingH * 2
+  }, [itemWidthProp, containerWidth, peekOffset, containerPaddingH])
+
+  // Snap interval = item width + gap
+  const snapInterval = effectiveItemWidth + gap
+
+  // ---- Navigation helpers ----
+  const scrollToIndex = useCallback(
+    (index: number, animated = true) => {
+      if (totalItems === 0 || snapInterval === 0) return
+      let targetIndex = index
+      if (loop) {
+        targetIndex = ((index % totalItems) + totalItems) % totalItems
+      } else {
+        targetIndex = Math.max(0, Math.min(index, totalItems - 1))
+      }
+      scrollRef.current?.scrollTo({
+        x: targetIndex * snapInterval,
+        animated,
+      })
+      setActiveIndex(targetIndex)
+      onIndexChange?.(targetIndex)
+    },
+    [totalItems, snapInterval, loop, onIndexChange],
+  )
+
+  const goTo = useCallback(
+    (index: number) => scrollToIndex(index),
+    [scrollToIndex],
+  )
+  const goNext = useCallback(
+    () => scrollToIndex(activeIndex + 1),
+    [scrollToIndex, activeIndex],
+  )
+  const goPrev = useCallback(
+    () => scrollToIndex(activeIndex - 1),
+    [scrollToIndex, activeIndex],
+  )
+
+  // ---- Scroll event handler ----
+  const handleScroll = useCallback(
+    (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+      if (snapInterval === 0) return
+      const offsetX = event.nativeEvent.contentOffset.x
+      const newIndex = Math.round(offsetX / snapInterval)
+      const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1))
+      if (clampedIndex !== activeIndex) {
+        setActiveIndex(clampedIndex)
+        onIndexChange?.(clampedIndex)
+      }
+    },
+    [snapInterval, totalItems, activeIndex, onIndexChange],
+  )
+
+  // ---- Auto-play ----
+  const clearAutoPlay = useCallback(() => {
+    if (autoPlayTimer.current != null) {
+      clearInterval(autoPlayTimer.current)
+      autoPlayTimer.current = null
+    }
+  }, [])
+
+  const startAutoPlay = useCallback(() => {
+    if (!autoPlay || totalItems <= 1) return
+    clearAutoPlay()
+    autoPlayTimer.current = setInterval(() => {
+      if (!userInteracting.current) {
+        setActiveIndex((prev) => {
+          const next = loop
+            ? (prev + 1) % totalItems
+            : Math.min(prev + 1, totalItems - 1)
+          scrollRef.current?.scrollTo({
+            x: next * snapInterval,
+            animated: true,
+          })
+          onIndexChange?.(next)
+          return next
+        })
+      }
+    }, autoPlayInterval)
+  }, [
+    autoPlay,
+    totalItems,
+    loop,
+    snapInterval,
+    autoPlayInterval,
+    clearAutoPlay,
+    onIndexChange,
+  ])
+
+  useEffect(() => {
+    startAutoPlay()
+    return clearAutoPlay
+  }, [startAutoPlay, clearAutoPlay])
+
+  const handleScrollBeginDrag = useCallback(() => {
+    userInteracting.current = true
+  }, [])
+
+  const handleScrollEndDrag = useCallback(() => {
+    userInteracting.current = false
+    // Reset autoplay timer after interaction
+    if (autoPlay) startAutoPlay()
+  }, [autoPlay, startAutoPlay])
+
+  // ---- Layout ----
+  const handleLayout = useCallback((e: LayoutChangeEvent) => {
+    setContainerWidth(e.nativeEvent.layout.width)
+  }, [])
+
+  // ---- Context value ----
+  const contextValue = useMemo<CarouselContextValue>(
+    () => ({
+      modes,
+      activeIndex,
+      totalItems,
+      goTo,
+      goNext,
+      goPrev,
+    }),
+    [modes, activeIndex, totalItems, goTo, goNext, goPrev],
+  )
+
+  // ---- Render ----
+  const outerStyle: ViewStyle = {
+    paddingVertical: containerPaddingV,
+  }
+
+  const contentContainerStyle: ViewStyle = {
+    paddingHorizontal: peekOffset + containerPaddingH,
+    gap,
+    // Align items to the start so snap works correctly
+    alignItems: 'flex-start',
+  }
+
+  return (
+    <CarouselContext.Provider value={contextValue}>
+      <View style={[outerStyle, style]} onLayout={handleLayout}>
+        <ScrollView
+          ref={scrollRef}
+          horizontal
+          pagingEnabled={false}
+          showsHorizontalScrollIndicator={false}
+          decelerationRate="fast"
+          snapToInterval={snapInterval > 0 ? snapInterval : undefined}
+          snapToAlignment="start"
+          contentContainerStyle={contentContainerStyle}
+          onScroll={handleScroll}
+          scrollEventThrottle={16}
+          onScrollBeginDrag={handleScrollBeginDrag}
+          onScrollEndDrag={handleScrollEndDrag}
+          
+        >
+          {items.map((child, index) => {
+            const itemStyle: ViewStyle = {
+              width: effectiveItemWidth > 0 ? effectiveItemWidth : undefined,
+            }
+
+            // Pass modes down to children
+            const childWithModes = React.isValidElement(child)
+              ? React.cloneElement(child as React.ReactElement<any>, {
+                  modes: {
+                    ...((child.props as any)?.modes || {}),
+                    ...modes,
+                  },
+                  style: [itemStyle, (child.props as any)?.style],
+                })
+              : child
+
+            return (
+              <View key={index} style={itemStyle}>
+                {childWithModes}
+              </View>
+            )
+          })}
+        </ScrollView>
+
+        {showPagination && totalItems > 1 && (
+          <Pagination
+            modes={modes}
+            style={{ marginTop: paginationGap }}
+          />
+        )}
+      </View>
+    </CarouselContext.Provider>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Carousel.Item
+// ---------------------------------------------------------------------------
+
+export interface CarouselItemProps {
+  children?: React.ReactNode
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+/**
+ * Optional wrapper for carousel items. Not strictly required — any
+ * React node works as a direct child of `<Carousel>`.
+ */
+export function Item({ children, modes: _modes, style }: CarouselItemProps) {
+  return <View style={style}>{children}</View>
+}
+
+// ---------------------------------------------------------------------------
+// Carousel.Pagination
+// ---------------------------------------------------------------------------
+
+export interface PaginationProps {
+  modes?: Record<string, any>
+  style?: StyleProp<ViewStyle>
+}
+
+export function Pagination({ modes: propModes, style }: PaginationProps) {
+  const { modes: ctxModes, activeIndex, totalItems, goTo } =
+    useContext(CarouselContext)
+  const modes = propModes || ctxModes || {}
+
+  // Token resolution for dots
+  const dotSize = parseFloat(
+    getVariableByName('carousel/pagination/dotSize', modes) || '8',
+  )
+  const dotActiveWidth = parseFloat(
+    getVariableByName('carousel/pagination/dotActiveWidth', modes) || '24',
+  )
+  const dotGap = parseFloat(
+    getVariableByName('carousel/pagination/dotGap', modes) || '8',
+  )
+  const dotColor =
+    (getVariableByName('carousel/pagination/dotColor', modes) as string) ||
+    'rgba(255,255,255,0.35)'
+  const dotActiveColor =
+    (getVariableByName(
+      'carousel/pagination/dotActiveColor',
+      modes,
+    ) as string) || '#ffffff'
+  const dotRadius = parseFloat(
+    getVariableByName('carousel/pagination/dotRadius', modes) || '4',
+  )
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: dotGap,
+  }
+
+  return (
+    <View
+      style={[containerStyle, style]}
+      accessibilityRole="tablist"
+      accessibilityLabel={undefined}
+    >
+      {Array.from({ length: totalItems }).map((_, i) => {
+        const isActive = i === activeIndex
+        return (
+          <Pressable
+            key={i}
+            onPress={() => goTo(i)}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: isActive }}
+            accessibilityLabel={undefined}
+          >
+            <AnimatedDot
+              isActive={isActive}
+              size={dotSize}
+              activeWidth={dotActiveWidth}
+              radius={dotRadius}
+              color={dotColor}
+              activeColor={dotActiveColor}
+            />
+          </Pressable>
+        )
+      })}
+    </View>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// AnimatedDot (internal)
+// ---------------------------------------------------------------------------
+
+interface AnimatedDotProps {
+  isActive: boolean
+  size: number
+  activeWidth: number
+  radius: number
+  color: string
+  activeColor: string
+}
+
+function AnimatedDot({
+  isActive,
+  size,
+  activeWidth,
+  radius,
+  color,
+  activeColor,
+}: AnimatedDotProps) {
+  const animValue = useRef(new Animated.Value(isActive ? 1 : 0)).current
+
+  useEffect(() => {
+    Animated.timing(animValue, {
+      toValue: isActive ? 1 : 0,
+      duration: 250,
+      useNativeDriver: false,
+    }).start()
+  }, [isActive, animValue])
+
+  const width = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [size, activeWidth],
+  })
+
+  const backgroundColor = animValue.interpolate({
+    inputRange: [0, 1],
+    outputRange: [color, activeColor],
+  })
+
+  return (
+    <Animated.View
+      style={{
+        width,
+        height: size,
+        borderRadius: radius,
+        backgroundColor,
+      }}
+    />
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Attach sub-components
+// ---------------------------------------------------------------------------
+
+Carousel.Item = Item
+Carousel.Pagination = Pagination
+
+export default Carousel

package/src/components/Disclaimer/Disclaimer.tsx

@@ -83,7 +83,7 @@ function Disclaimer({
     <View
       style={[containerStyle, style]}
       accessibilityRole="text"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/Divider/Divider.tsx

@@ -58,7 +58,7 @@ function Divider({
   direction = 'horizontal',
   modes = {},
   style,
-  accessibilityLabel = 'Divider',
+  accessibilityLabel = undefined,
 }: DividerProps) {
   // Resolve design tokens
   const size = getVariableByName('divider/size', modes) ?? 1
@@ -82,7 +82,7 @@ function Divider({
     <View
       style={[dividerStyle, style]}
       accessibilityRole="none"
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={undefined}
     />
   )
 }

package/src/components/Drawer/Drawer.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react-native-gesture-handler'
 import Animated, {
   runOnJS,
+  useAnimatedProps,
   useAnimatedScrollHandler,
   useAnimatedStyle,
   useSharedValue,
@@ -116,6 +117,13 @@ 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.
+  const animatedScrollProps = useAnimatedProps(() => ({
+    bounces: scrollY.value > 1,
+  }))
+
   // We need to know if we are currently dragging the drawer or scrolling the content
   // to prevent conflict.
   const isDrawerActive = useSharedValue(false)
@@ -287,7 +295,7 @@ function Drawer({
           ]}
           accessible={true}
           accessibilityRole={'dialog' as any}
-          accessibilityLabel={defaultAccessibilityLabel}
+          accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint || 'Swipe up to expand, swipe down to collapse'}
         >
           {/* Handle Area */}
@@ -330,8 +338,8 @@ function Drawer({
             style={[styles.content, contentStyle]}
             contentContainerStyle={[{ paddingBottom: paddingBottom + bottomInset, gap: drawerGap, flexDirection: 'column', alignItems: 'stretch' }, contentContainerStyle]}
             showsVerticalScrollIndicator={showsVerticalScrollIndicator}
-            bounces={true}
-            alwaysBounceVertical={true}
+            animatedProps={animatedScrollProps}
+            alwaysBounceVertical={false}
             overScrollMode="always"
             onScroll={useAnimatedScrollHandler((event) => {
               scrollY.value = event.contentOffset.y

package/src/components/FilterBar/FilterBar.tsx

@@ -140,7 +140,7 @@ function FilterBar({
       {...(onChangeText !== undefined && { onChangeText })}
       modes={modes}
       style={fullWidthStyle}
-      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityLabel={undefined}
       {...(accessibilityHint !== undefined && { accessibilityHint })}
       onFocus={() => setIsFocused(true)}
       onBlur={() => setIsFocused(false)}
@@ -188,7 +188,7 @@ function FilterBar({
     <View 
       style={[containerStyle, focusStyle, style]}
       accessibilityRole="search"
-      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/IconButton/IconButton.tsx

@@ -69,7 +69,7 @@ type IconButtonProps = SafePressableProps & {
  * <IconButton modes={{"Appearance": "high"}} onPress={() => console.log('pressed')} />
  * 
  * // With accessibility label
- * <IconButton iconName="ic_search" accessibilityLabel="Search" accessibilityHint="Opens the search screen" />
+ * <IconButton iconName="ic_search" accessibilityLabel={undefined} accessibilityHint="Opens the search screen" />
  * ```
  */
 function IconButton({
@@ -157,7 +157,7 @@ function IconButton({
   return (
     <Pressable
       accessibilityRole="button"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       accessibilityState={{
         disabled,

package/src/components/IconCapsule/IconCapsule.tsx

@@ -36,7 +36,7 @@ type IconCapsuleProps = {
  * <IconCapsule modes={{"Appearance": "Secondary"}} />
  * 
  * // With accessibility label
- * <IconCapsule iconName="ic_card" accessibilityLabel="Credit card icon" />
+ * <IconCapsule iconName="ic_card" accessibilityLabel={undefined} />
  * ```
  */
 function IconCapsule({
@@ -80,7 +80,7 @@ function IconCapsule({
     <View
       style={containerStyle}
       accessibilityRole={accessibilityRole}
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       {...rest}
     >
       <Icon

package/src/components/LazyList/LazyList.tsx

@@ -74,7 +74,7 @@ function LazyList({
   listGroupsSlot,
   modes = {},
   style,
-  accessibilityLabel = "List",
+  accessibilityLabel = undefined,
   accessibilityHint,
   ...rest
 }: LazyListProps) {
@@ -103,7 +103,7 @@ function LazyList({
     <View 
       style={[containerStyle, style]}
       accessibilityRole="list"
-      accessibilityLabel={accessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/ListGroup/ListGroup.tsx

@@ -91,7 +91,7 @@ function ListGroup({
     <View
       style={[containerStyle, style]}
       accessibilityRole="list"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/ListItem/ListItem.tsx

@@ -211,7 +211,7 @@ function ListItem({
       ? processedLeading.length === 1
         ? processedLeading[0]
         : processedLeading
-      : <IconCapsule modes={modes} accessibilityLabel={defaultAccessibilityLabel} />
+      : <IconCapsule modes={modes} accessibilityLabel={undefined} />
 
   const renderSupportContent = () => {
     if (supportSlot) {
@@ -290,7 +290,7 @@ function ListItem({
       return (
         <Pressable
           accessibilityRole="button"
-          accessibilityLabel={defaultAccessibilityLabel}
+          accessibilityLabel={undefined}
           accessibilityHint={accessibilityHint}
           accessibilityState={{
             ...accessibilityState
@@ -312,7 +312,7 @@ function ListItem({
     return (
       <View
         accessibilityRole={undefined}
-        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         style={[baseContainerStyle, sharedLayoutStyle, style]}
         {...rest}
@@ -334,7 +334,7 @@ function ListItem({
     return (
       <Pressable
         accessibilityRole="button"
-        accessibilityLabel={defaultAccessibilityLabel}
+        accessibilityLabel={undefined}
         accessibilityHint={accessibilityHint}
         accessibilityState={{
           ...accessibilityState
@@ -356,7 +356,7 @@ function ListItem({
   return (
     <View
       accessibilityRole={undefined}
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       style={[baseContainerStyle, sharedLayoutStyle, style]}
       {...rest}

package/src/components/MerchantProfile/MerchantProfile.tsx

@@ -147,7 +147,7 @@ function MerchantProfile({
     <View
       style={[containerStyle, style]}
       accessibilityRole="header"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
     >
       <Avatar
         style="Image"

package/src/components/MoneyValue/MoneyValue.tsx

@@ -155,7 +155,7 @@ function MoneyValue({
     <View 
       style={[containerStyle, style]}
       accessibilityRole="text"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       accessibilityHint={accessibilityHint}
       {...rest}
     >

package/src/components/NavArrow/NavArrow.tsx

@@ -89,7 +89,7 @@ export default function NavArrow({
     <View
       style={containerStyle}
       accessibilityRole="image"
-      accessibilityLabel={defaultAccessibilityLabel}
+      accessibilityLabel={undefined}
       {...rest}
     >
       <Icon