jfs-components 0.1.25 → 0.1.28

package/lib/module/components/AutoplayControl/AutoplayControl.js

@@ -0,0 +1,60 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import Icon from '../../icons/Icon';
+import { jsx as _jsx } from "react/jsx-runtime";
+function resolveAutoplayControlTokens(modes, disabled) {
+  const width = getVariableByName('autoplayControl/width', modes) ?? 36;
+  const height = getVariableByName('autoplayControl/height', modes) ?? 36;
+  const radiusRaw = getVariableByName('autoplayControl/radius', modes) ?? 9999;
+  const backgroundColor = getVariableByName('autoplayControl/background/color', modes) ?? '#ffffff';
+  const iconColor = getVariableByName('autoplayControl/icon/color', modes) ?? '#000000';
+  const borderRadius = radiusRaw === 9999 ? width / 2 : radiusRaw;
+  return {
+    containerStyle: {
+      width,
+      height,
+      borderRadius,
+      backgroundColor,
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1
+    },
+    iconColor
+  };
+}
+
+/**
+ * AutoplayControl is a button component that toggles between play and pause states.
+ * All styling values are resolved from Figma design tokens.
+ */
+export default function AutoplayControl({
+  state = 'pause',
+  modes,
+  onPress,
+  disabled = false,
+  style
+}) {
+  const tokens = useMemo(() => resolveAutoplayControlTokens(modes ?? {}, disabled), [modes, disabled]);
+  const iconName = state === 'play' ? 'ic_play' : 'ic_pause';
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: disabled ? undefined : onPress,
+    disabled: disabled,
+    style: ({
+      pressed
+    }) => [tokens.containerStyle, pressed && {
+      opacity: 0.7
+    }, style],
+    accessibilityRole: "button",
+    accessibilityState: {
+      disabled
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      name: iconName,
+      size: 24,
+      color: tokens.iconColor
+    })
+  });
+}

package/lib/module/components/Carousel/Carousel.js

@@ -4,6 +4,8 @@ import React, { createContext, useContext, useRef, useState, useEffect, useCallb
 import { View, ScrollView, Animated, Pressable } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
+import AutoplayControl from '../AutoplayControl/AutoplayControl';
+import NumberPagination from '../NumberPagination/NumberPagination';
 
 // ---------------------------------------------------------------------------
 // Context
@@ -37,9 +39,11 @@ export function Carousel({
   itemWidth: itemWidthProp,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  type = 'Default',
   onIndexChange,
   style
 }) {
+  const isNumbered = type === 'Numbered';
   // ---- Token resolution ----
   const tokenGap = parseFloat(getVariableByName('carousel/gap', modes));
   const gap = gapProp ?? tokenGap;
@@ -47,27 +51,43 @@ export function Carousel({
   const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes));
   // Outer container max height per Figma (`carousel/maxHeight`).
   const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes));
+  // Gap between AutoplayControl and NumberPagination in the Numbered overlay.
+  const controlGap = parseFloat(getVariableByName('carouselControl/gap', modes));
+
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
   // ---- Refs & state ----
   const scrollRef = useRef(null);
   const [activeIndex, setActiveIndex] = useState(0);
+  const activeIndexRef = useRef(0);
   const [containerWidth, setContainerWidth] = useState(0);
   const autoPlayTimer = useRef(null);
   const userInteracting = useRef(false);
+  // Guard: suppress handleScroll index updates during programmatic scrollTo
+  // animations so intermediate offsets don't flicker activeIndex back.
+  const programmaticScroll = useRef(false);
+  const programmaticTimer = useRef(null);
+  useEffect(() => {
+    activeIndexRef.current = activeIndex;
+  }, [activeIndex]);
+
+  // Interactive play/pause state for the Numbered variant.
+  const [isPlaying, setIsPlaying] = useState(autoPlay);
 
   // 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
+  // Effective item width: provided prop, or full container width minus peek offsets.
+  // For the Numbered variant the items are full-bleed (no peek padding).
   const effectiveItemWidth = useMemo(() => {
     if (itemWidthProp != null) return itemWidthProp;
     if (containerWidth === 0) return 0;
+    if (isNumbered) return containerWidth;
     // Full-width minus peekOffset on each side
     return containerWidth - containerPaddingH * 4;
-  }, [itemWidthProp, containerWidth, containerPaddingH]);
+  }, [itemWidthProp, containerWidth, containerPaddingH, isNumbered]);
 
   // Snap interval = item width + gap
   const snapInterval = effectiveItemWidth + gap;
@@ -81,6 +101,17 @@ export function Carousel({
     } else {
       targetIndex = Math.max(0, Math.min(index, totalItems - 1));
     }
+    // Lock out handleScroll during the animated scroll so intermediate
+    // offsets don't flicker activeIndex back to the old value.
+    if (animated) {
+      programmaticScroll.current = true;
+      if (programmaticTimer.current != null) {
+        clearTimeout(programmaticTimer.current);
+      }
+      programmaticTimer.current = setTimeout(() => {
+        programmaticScroll.current = false;
+      }, 500);
+    }
     scrollRef.current?.scrollTo({
       x: targetIndex * snapInterval,
       animated
@@ -95,6 +126,9 @@ export function Carousel({
   // ---- Scroll event handler ----
   const handleScroll = useCallback(event => {
     if (snapInterval === 0) return;
+    // Skip index recalculation during programmatic scrollTo animations
+    // to prevent the active indicator from flickering back to the old page.
+    if (programmaticScroll.current) return;
     const offsetX = event.nativeEvent.contentOffset.x;
     const newIndex = Math.round(offsetX / snapInterval);
     const clampedIndex = Math.max(0, Math.min(newIndex, totalItems - 1));
@@ -112,22 +146,19 @@ export function Carousel({
     }
   }, []);
   const startAutoPlay = useCallback(() => {
-    if (!autoPlay || totalItems <= 1) return;
+    if (!autoPlay && !isPlaying || totalItems <= 1) return;
+    if (!isPlaying) 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;
-        });
+        const prev = activeIndexRef.current;
+        const next = loop ? (prev + 1) % totalItems : Math.min(prev + 1, totalItems - 1);
+        // Route through scrollToIndex so the programmaticScroll guard
+        // suppresses intermediate handleScroll offsets during the animation.
+        scrollToIndex(next, true);
       }
     }, autoPlayInterval);
-  }, [autoPlay, totalItems, loop, snapInterval, autoPlayInterval, clearAutoPlay, onIndexChange]);
+  }, [autoPlay, isPlaying, totalItems, loop, autoPlayInterval, clearAutoPlay, scrollToIndex]);
   useEffect(() => {
     startAutoPlay();
     return clearAutoPlay;
@@ -138,8 +169,23 @@ export function Carousel({
   const handleScrollEndDrag = useCallback(() => {
     userInteracting.current = false;
     // Reset autoplay timer after interaction
-    if (autoPlay) startAutoPlay();
-  }, [autoPlay, startAutoPlay]);
+    if (autoPlay || isPlaying) startAutoPlay();
+  }, [autoPlay, isPlaying, startAutoPlay]);
+  const finishProgrammaticScroll = useCallback(event => {
+    programmaticScroll.current = false;
+    if (programmaticTimer.current != null) {
+      clearTimeout(programmaticTimer.current);
+      programmaticTimer.current = null;
+    }
+    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 !== activeIndexRef.current) {
+      setActiveIndex(clampedIndex);
+      onIndexChange?.(clampedIndex);
+    }
+  }, [snapInterval, totalItems, onIndexChange]);
 
   // ---- Layout ----
   const handleLayout = useCallback(e => {
@@ -156,14 +202,37 @@ export function Carousel({
     goPrev
   }), [modes, activeIndex, totalItems, goTo, goNext, goPrev]);
 
+  // ---- Toggle handler for Numbered variant ----
+  const handleToggleAutoplay = useCallback(() => {
+    setIsPlaying(prev => {
+      if (prev) {
+        // Pausing
+        clearAutoPlay();
+        return false;
+      }
+      // Resuming — autoplay will restart via the effect
+      return true;
+    });
+  }, [clearAutoPlay]);
+
+  // Restart autoplay whenever isPlaying flips to true
+  useEffect(() => {
+    if (isPlaying) startAutoPlay();else clearAutoPlay();
+  }, [isPlaying, startAutoPlay, clearAutoPlay]);
+
   // ---- Render ----
   // Explicit padding props win verbatim; otherwise fall back to the
   // token-derived values (horizontal keeps its legacy ×2 "peek" multiplier).
-  const effectivePaddingH = paddingHorizontalProp ?? containerPaddingH;
-  const effectivePaddingV = paddingVerticalProp ?? containerPaddingV;
+  // Numbered variant is full-bleed: zero padding.
+  const effectivePaddingH = isNumbered ? 0 : paddingHorizontalProp ?? containerPaddingH;
+  const effectivePaddingV = isNumbered ? 0 : paddingVerticalProp ?? containerPaddingV;
   const outerStyle = {
     paddingVertical: effectivePaddingV,
-    maxHeight
+    maxHeight: isNumbered ? undefined : maxHeight,
+    // Numbered needs relative positioning for the floating controls overlay.
+    ...(isNumbered ? {
+      overflow: 'hidden'
+    } : {})
   };
   const contentContainerStyle = {
     paddingHorizontal: effectivePaddingH,
@@ -189,6 +258,7 @@ export function Carousel({
         scrollEventThrottle: 16,
         onScrollBeginDrag: handleScrollBeginDrag,
         onScrollEndDrag: handleScrollEndDrag,
+        onMomentumScrollEnd: finishProgrammaticScroll,
         children: items.map((child, index) => {
           // Strict slot box: width must be honored; never grow or shrink with
           // content, and clip anything that misbehaves (e.g. a child whose
@@ -225,11 +295,33 @@ export function Carousel({
             children: childWithModes
           }, index);
         })
-      }), showPagination && totalItems > 1 && /*#__PURE__*/_jsx(Pagination, {
+      }), !isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/_jsx(Pagination, {
         modes: modes,
         style: {
           marginTop: paginationOffset
         }
+      }), isNumbered && showPagination && totalItems > 1 && /*#__PURE__*/_jsxs(View, {
+        style: {
+          position: 'absolute',
+          bottom: 12,
+          left: 0,
+          right: 0,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: controlGap
+        },
+        pointerEvents: "box-none",
+        children: [/*#__PURE__*/_jsx(AutoplayControl, {
+          state: isPlaying ? 'pause' : 'play',
+          onPress: handleToggleAutoplay,
+          modes: modes
+        }), /*#__PURE__*/_jsx(NumberPagination, {
+          activePage: activeIndex + 1,
+          totalPages: totalItems,
+          onPageChange: page => goTo(page - 1),
+          modes: modes
+        })]
       })]
     })
   });

package/lib/module/components/ContentSheet/ContentSheet.js

@@ -1,12 +1,12 @@
 "use strict";
 
 import React, { useContext, useMemo } from 'react';
-import { Platform, View } from 'react-native';
+import { Platform, Text, View } from 'react-native';
 import Animated, { useAnimatedKeyboard, useAnimatedStyle } from 'react-native-reanimated';
 import { SafeAreaInsetsContext } from 'react-native-safe-area-context';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES, cloneChildrenWithModes, flattenChildren } from '../../utils/react-utils';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const IS_WEB = Platform.OS === 'web';
 function resolveContentSheetStyle(modes) {
   const backgroundColor = getVariableByName('contentSheet/bg', modes);
@@ -16,6 +16,18 @@ function resolveContentSheetStyle(modes) {
   const paddingBottom = getVariableByName('contentSheet/padding/bottom', modes);
   const radiusTop = getVariableByName('contentSheet/padding/radius/top', modes);
   const radiusBottom = getVariableByName('contentSheet/padding/radius/bottom', modes);
+
+  // Title tokens mirror the Drawer title so the two bottom-sheet surfaces stay
+  // visually aligned.
+  const titleColor = getVariableByName('drawer/title/color', modes);
+  const titleSize = getVariableByName('drawer/title/fontSize', modes);
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes);
+  const titleFontFamily = getVariableByName('drawer/title/fontFamily', modes);
+  const titleFontWeightRaw = getVariableByName('drawer/title/fontWeight', modes);
+  const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw;
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes);
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes);
+  const titleWrapPaddingHorizontal = getVariableByName('drawer/titleWrap/padding/horizontal', modes);
   return {
     container: {
       backgroundColor,
@@ -31,7 +43,21 @@ function resolveContentSheetStyle(modes) {
       alignItems: 'stretch',
       overflow: 'hidden'
     },
-    paddingBottom
+    paddingBottom,
+    headerStyle: {
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal,
+      alignItems: 'center'
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight,
+      textAlign: 'center'
+    }
   };
 }
 const pinnedStyle = {
@@ -60,6 +86,7 @@ const pinnedStyle = {
 function ContentSheet({
   children,
   modes = EMPTY_MODES,
+  title,
   avoidKeyboard = true,
   keyboardSpacing = 0,
   safeAreaBottom = true,
@@ -83,18 +110,25 @@ function ContentSheet({
   // `avoidKeyboard` (and platform). Because they are distinct component types,
   // React remounts on toggle, so the conditional `useAnimatedKeyboard` hook
   // inside `KeyboardAwareSheet` always runs in a stable hook order.
+  const header = title ? /*#__PURE__*/_jsx(View, {
+    style: resolved.headerStyle,
+    children: /*#__PURE__*/_jsx(Text, {
+      style: resolved.titleStyle,
+      children: title
+    })
+  }) : null;
   if (avoidKeyboard && !IS_WEB) {
-    return /*#__PURE__*/_jsx(KeyboardAwareSheet, {
+    return /*#__PURE__*/_jsxs(KeyboardAwareSheet, {
       style: containerStyle,
       spacing: keyboardSpacing,
       ...rest,
-      children: processedChildren
+      children: [header, processedChildren]
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsxs(View, {
     style: containerStyle,
     ...rest,
-    children: processedChildren
+    children: [header, processedChildren]
   });
 }
 /**

package/lib/module/components/FormUpload/Additem.js

@@ -0,0 +1,162 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Pressable, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES } from '../../utils/react-utils';
+import Image from '../Image/Image';
+import IconCapsule from '../IconCapsule/IconCapsule';
+
+/**
+ * Callback that opens a platform picker and resolves with the selected assets.
+ * This is the integration point for libraries like `react-native-image-picker`,
+ * `expo-image-picker`, or `react-native-document-picker`.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+function toNumber(value, fallback) {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string') {
+    const parsed = parseFloat(value);
+    if (Number.isFinite(parsed)) return parsed;
+  }
+  return fallback;
+}
+function resolveAdditemTokens(modes) {
+  const backgroundColor = getVariableByName('compareCardItem/background', modes);
+  const borderRadius = toNumber(getVariableByName('compareCardItem/radius', modes), 8);
+  const paddingHorizontal = toNumber(getVariableByName('compareCardItem/padding/horizontal', modes), 6);
+  const paddingVertical = toNumber(getVariableByName('compareCardItem/padding/vertical', modes), 8);
+  // The Figma design uses a fixed 44 × 44 dp cell. There is no
+  // `compareCardItem/size` token in the variables JSON, so we keep the size
+  // constant to match the design exactly.
+  const size = 44;
+  return {
+    backgroundColor,
+    borderRadius,
+    paddingHorizontal,
+    paddingVertical,
+    size
+  };
+}
+
+/** Figma defaults for the inner `IconCapsule` icons. Overridable via `modes`. */
+const ADDITEM_DEFAULT_MODES = Object.freeze({
+  AppearanceBrand: 'Neutral',
+  Emphasis: 'Low',
+  'Icon Capsule Size': 'S'
+});
+
+/**
+ * `Additem` — a small, reusable upload/preview cell used inside form uploaders.
+ *
+ * In its default `'empty'` state it shows a centered add/upload icon. In
+ * `'preview'` state it renders a thumbnail with a removable overlay. The
+ * component is intentionally unopinionated about *how* files are picked: pass a
+ * `picker` callback that wraps `react-native-image-picker`,
+ * `expo-image-picker`, `react-native-document-picker`, or any custom selector,
+ * and the cell will invoke it, surface the result via `onAssetsPicked`, and
+ * handle cancellation/errors gracefully.
+ */
+function Additem({
+  state = 'empty',
+  imageSource,
+  onPress,
+  onRemove,
+  picker,
+  onAssetsPicked,
+  modes: propModes = EMPTY_MODES,
+  accessibilityLabel,
+  isDisabled = false,
+  testID
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? ADDITEM_DEFAULT_MODES : {
+    ...ADDITEM_DEFAULT_MODES,
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveAdditemTokens(modes), [modes]);
+  const handlePress = React.useCallback(async () => {
+    if (isDisabled) return;
+    if (state === 'empty' && picker) {
+      try {
+        const result = await picker();
+        if (result.didCancel) return;
+        if (result.error) {
+          if (__DEV__) {
+            console.warn('[Additem] picker error:', result.error);
+          }
+          return;
+        }
+        if (result.assets.length > 0) {
+          onAssetsPicked?.(result.assets);
+        }
+      } catch (err) {
+        if (__DEV__) {
+          console.warn('[Additem] unexpected picker error:', err);
+        }
+      }
+      return;
+    }
+    onPress?.();
+  }, [isDisabled, onPress, onAssetsPicked, picker, state]);
+  const handleRemove = React.useCallback(() => {
+    if (!isDisabled) {
+      onRemove?.();
+    }
+  }, [isDisabled, onRemove]);
+  const resolvedAccessibilityLabel = accessibilityLabel ?? (state === 'empty' ? 'Add attachment' : 'Attachment preview');
+  const containerStyle = useMemo(() => ({
+    width: tokens.size,
+    height: tokens.size,
+    borderRadius: tokens.borderRadius,
+    backgroundColor: tokens.backgroundColor,
+    paddingHorizontal: tokens.paddingHorizontal,
+    paddingVertical: tokens.paddingVertical,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+    opacity: isDisabled ? 0.5 : 1
+  }), [tokens, isDisabled]);
+  const isPreview = state === 'preview';
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: handlePress,
+    disabled: isDisabled,
+    accessibilityRole: "button",
+    accessibilityLabel: resolvedAccessibilityLabel,
+    accessibilityState: {
+      disabled: isDisabled
+    },
+    testID: testID,
+    style: containerStyle,
+    children: isPreview ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Image, {
+        imageSource: imageSource,
+        width: "100%",
+        height: tokens.size - tokens.paddingVertical * 2,
+        resizeMode: "cover",
+        borderRadius: tokens.borderRadius - 2
+      }), onRemove != null && /*#__PURE__*/_jsx(View, {
+        style: {
+          position: 'absolute',
+          top: 2,
+          right: 2
+        },
+        children: /*#__PURE__*/_jsx(IconCapsule, {
+          iconName: "ic_close",
+          modes: modes,
+          onTouchEnd: handleRemove,
+          accessibilityRole: "button",
+          accessibilityLabel: "Remove attachment"
+        })
+      })]
+    }) : /*#__PURE__*/_jsx(IconCapsule, {
+      iconName: "ic_add",
+      modes: modes
+    })
+  });
+}
+export default /*#__PURE__*/React.memo(Additem);