jfs-components 0.1.23 → 0.1.28

package/src/components/Carousel/Carousel.tsx

@@ -21,6 +21,8 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
+import AutoplayControl from '../AutoplayControl/AutoplayControl'
+import NumberPagination from '../NumberPagination/NumberPagination'
 
 // ---------------------------------------------------------------------------
 // Context
@@ -75,6 +77,13 @@ export interface CarouselProps {
   paddingHorizontal?: number
   /** Explicit vertical padding (px) for the outer container. Overrides `carousel/padding/vertical`. */
   paddingVertical?: number
+  /**
+   * Carousel visual type.
+   * - `'Default'` — standard carousel with dot pagination below.
+   * - `'Numbered'` — full-bleed carousel with floating AutoplayControl and
+   *   NumberPagination overlaid at the bottom center.
+   */
+  type?: 'Default' | 'Numbered'
 
   /** Called when the active index changes. */
   onIndexChange?: (index: number) => void
@@ -97,10 +106,12 @@ export function Carousel({
   itemWidth: itemWidthProp,
   paddingHorizontal: paddingHorizontalProp,
   paddingVertical: paddingVerticalProp,
+  type = 'Default',
 
   onIndexChange,
   style,
 }: CarouselProps) {
+  const isNumbered = type === 'Numbered'
   // ---- Token resolution ----
   const tokenGap = parseFloat(
     getVariableByName('carousel/gap', modes),
@@ -119,15 +130,32 @@ export function Carousel({
   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<ScrollView>(null)
   const [activeIndex, setActiveIndex] = useState(0)
+  const activeIndexRef = useRef(0)
   const [containerWidth, setContainerWidth] = useState(0)
   const autoPlayTimer = useRef<ReturnType<typeof setInterval> | null>(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<ReturnType<typeof setTimeout> | null>(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(
@@ -137,13 +165,15 @@ export function Carousel({
 
   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
@@ -158,6 +188,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,
@@ -185,6 +226,9 @@ export function Carousel({
   const handleScroll = useCallback(
     (event: NativeSyntheticEvent<NativeScrollEvent>) => {
       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))
@@ -205,31 +249,28 @@ 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,
+    isPlaying,
     totalItems,
     loop,
-    snapInterval,
     autoPlayInterval,
     clearAutoPlay,
-    onIndexChange,
+    scrollToIndex,
   ])
 
   useEffect(() => {
@@ -244,8 +285,27 @@ 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: NativeSyntheticEvent<NativeScrollEvent>) => {
+      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: LayoutChangeEvent) => {
@@ -265,15 +325,37 @@ export function Carousel({
     [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: ViewStyle = {
     paddingVertical: effectivePaddingV,
-    maxHeight,
+    maxHeight: isNumbered ? undefined : maxHeight,
+    // Numbered needs relative positioning for the floating controls overlay.
+    ...(isNumbered ? { overflow: 'hidden' as const } : {}),
   }
 
   const contentContainerStyle: ViewStyle = {
@@ -299,7 +381,7 @@ export function Carousel({
           scrollEventThrottle={16}
           onScrollBeginDrag={handleScrollBeginDrag}
           onScrollEndDrag={handleScrollEndDrag}
-
+          onMomentumScrollEnd={finishProgrammaticScroll}
         >
           {items.map((child, index) => {
             // Strict slot box: width must be honored; never grow or shrink with
@@ -343,12 +425,40 @@ export function Carousel({
           })}
         </ScrollView>
 
-        {showPagination && totalItems > 1 && (
+        {!isNumbered && showPagination && totalItems > 1 && (
           <Pagination
             modes={modes}
             style={{ marginTop: paginationOffset }}
           />
         )}
+
+        {isNumbered && showPagination && totalItems > 1 && (
+          <View
+            style={{
+              position: 'absolute',
+              bottom: 12,
+              left: 0,
+              right: 0,
+              flexDirection: 'row',
+              justifyContent: 'center',
+              alignItems: 'center',
+              gap: controlGap,
+            }}
+            pointerEvents="box-none"
+          >
+            <AutoplayControl
+              state={isPlaying ? 'pause' : 'play'}
+              onPress={handleToggleAutoplay}
+              modes={modes}
+            />
+            <NumberPagination
+              activePage={activeIndex + 1}
+              totalPages={totalItems}
+              onPageChange={(page) => goTo(page - 1)}
+              modes={modes}
+            />
+          </View>
+        )}
       </View>
     </CarouselContext.Provider>
   )

package/src/components/ChipSelect/ChipSelect.tsx

@@ -21,6 +21,11 @@ export type ChipSelectProps = {
      * @default "ic_calendar_week"
      */
     icon?: string;
+    /**
+     * Whether to show the close icon when active.
+     * @default true
+     */
+    showCloseIcon?: boolean;
     /**
      * Modes for design token resolution.
      */
@@ -47,6 +52,7 @@ function ChipSelect({
     label = 'Date',
     active = false,
     icon = 'ic_calendar_week',
+    showCloseIcon = true,
     modes = EMPTY_MODES,
     style,
     labelSlot,
@@ -123,7 +129,7 @@ function ChipSelect({
 
             {renderLabel()}
 
-            {active && (
+            {active && showCloseIcon && (
                 <Icon name="ic_close" size={iconSize} color={textColor} />
             )}
         </TouchableOpacity>

package/src/components/ContentSheet/ContentSheet.tsx

@@ -1,8 +1,10 @@
 import React, { useContext, useMemo } from 'react'
 import {
   Platform,
+  Text,
   View,
   type StyleProp,
+  type TextStyle,
   type ViewProps,
   type ViewStyle,
 } from 'react-native'
@@ -31,6 +33,12 @@ export type ContentSheetProps = {
    * the same theme without you wiring `modes` onto each one.
    */
   modes?: Modes
+  /**
+   * Optional title rendered in a centered, sticky header at the top of the
+   * sheet. Uses the same `drawer/title*` token family as the `Drawer` title so
+   * the two surfaces stay visually consistent.
+   */
+  title?: string
   /**
    * Keep the sheet above the on-screen keyboard. When the keyboard opens the
    * sheet rises by exactly the keyboard height; when it closes the sheet drops
@@ -70,6 +78,8 @@ export type ContentSheetProps = {
 interface ContentSheetStyle {
   container: ViewStyle
   paddingBottom: number
+  headerStyle: ViewStyle
+  titleStyle: TextStyle
 }
 
 function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
@@ -81,6 +91,23 @@ function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
   const radiusTop = getVariableByName('contentSheet/padding/radius/top', modes) as number
   const radiusBottom = getVariableByName('contentSheet/padding/radius/bottom', modes) as number
 
+  // Title tokens mirror the Drawer title so the two bottom-sheet surfaces stay
+  // visually aligned.
+  const titleColor = getVariableByName('drawer/title/color', modes) as string
+  const titleSize = getVariableByName('drawer/title/fontSize', modes) as number
+  const titleLineHeight = getVariableByName('drawer/title/lineHeight', modes) as number
+  const titleFontFamily = getVariableByName('drawer/title/fontFamily', modes) as string
+  const titleFontWeightRaw = getVariableByName('drawer/title/fontWeight', modes)
+  const titleFontWeight =
+    typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
+
+  const titleWrapPaddingTop = getVariableByName('drawer/titleWrap/padding/top', modes) as number
+  const titleWrapPaddingBottom = getVariableByName('drawer/titleWrap/padding/bottom', modes) as number
+  const titleWrapPaddingHorizontal = getVariableByName(
+    'drawer/titleWrap/padding/horizontal',
+    modes
+  ) as number
+
   return {
     container: {
       backgroundColor,
@@ -97,6 +124,20 @@ function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
       overflow: 'hidden',
     },
     paddingBottom,
+    headerStyle: {
+      paddingTop: titleWrapPaddingTop,
+      paddingBottom: titleWrapPaddingBottom,
+      paddingHorizontal: titleWrapPaddingHorizontal,
+      alignItems: 'center',
+    },
+    titleStyle: {
+      color: titleColor,
+      fontSize: titleSize,
+      lineHeight: titleLineHeight,
+      fontFamily: titleFontFamily,
+      fontWeight: titleFontWeight as TextStyle['fontWeight'],
+      textAlign: 'center',
+    },
   }
 }
 
@@ -126,6 +167,7 @@ const pinnedStyle: ViewStyle = {
 function ContentSheet({
   children,
   modes = EMPTY_MODES,
+  title,
   avoidKeyboard = true,
   keyboardSpacing = 0,
   safeAreaBottom = true,
@@ -162,6 +204,12 @@ 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 ? (
+    <View style={resolved.headerStyle}>
+      <Text style={resolved.titleStyle}>{title}</Text>
+    </View>
+  ) : null
+
   if (avoidKeyboard && !IS_WEB) {
     return (
       <KeyboardAwareSheet
@@ -169,6 +217,7 @@ function ContentSheet({
         spacing={keyboardSpacing}
         {...rest}
       >
+        {header}
         {processedChildren}
       </KeyboardAwareSheet>
     )
@@ -176,6 +225,7 @@ function ContentSheet({
 
   return (
     <View style={containerStyle} {...rest}>
+      {header}
       {processedChildren}
     </View>
   )

package/src/components/FormUpload/Additem.tsx

@@ -0,0 +1,262 @@
+import React, { useMemo } from 'react'
+import { Pressable, View, type StyleProp, type ViewStyle, type ImageSourcePropType } 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'
+import type { Modes } from '../../design-tokens'
+
+export type PickedAsset = {
+  /** URI to the selected file (image, video, or document). */
+  uri: string
+  /** Original file name, when available. */
+  name?: string
+  /** MIME type, when available. */
+  type?: string
+  /** File size in bytes, when available. */
+  size?: number
+  /** Image/video width in pixels, when available. */
+  width?: number
+  /** Image/video height in pixels, when available. */
+  height?: number
+}
+
+export type AdditemPickerResult = {
+  /** `true` when the user cancelled the picker. */
+  didCancel?: boolean
+  /** Selected assets. Empty when cancelled. */
+  assets: PickedAsset[]
+  /** Native error message, when something went wrong. */
+  error?: string
+}
+
+/**
+ * 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`.
+ */
+export type AdditemPicker = () => Promise<AdditemPickerResult>
+
+export type AdditemState = 'empty' | 'preview'
+
+export type AdditemProps = {
+  /**
+   * Visual state of the item.
+   * - `'empty'` — shows the add/upload icon (default).
+   * - `'preview'` — shows `imageSource` and a remove icon overlay.
+   */
+  state?: AdditemState
+  /**
+   * Image to preview when `state` is `'preview'`. Accepts the same shapes as
+   * the library's `Image` component (remote URI string, `{ uri }`, or `require()`).
+   */
+  imageSource?: ImageSourcePropType | string | undefined
+  /**
+   * Called when the cell is pressed. In `'empty'` mode this is typically where
+   * the picker is launched; in `'preview'` mode it can open a preview/lightbox.
+   */
+  onPress?: () => void
+  /**
+   * Called when the remove icon overlay is pressed in `'preview'` mode.
+   * Receives the press event so the parent can stop propagation if needed.
+   */
+  onRemove?: () => void
+  /**
+   * Optional picker to invoke when the empty cell is pressed. When provided,
+   * `onPress` is ignored for the empty state and the cell becomes a real
+   * upload trigger that resolves with picked assets via `onAssetsPicked`.
+   */
+  picker?: AdditemPicker
+  /**
+   * Called after a successful picker invocation with the selected assets.
+   */
+  onAssetsPicked?: (assets: PickedAsset[]) => void
+  /**
+   * Modes for design-token resolution. Defaults to Neutral / Low / Icon Capsule
+   * Size S for the inner `IconCapsule` icons; any key supplied here overrides
+   * those defaults.
+   */
+  modes?: Modes
+  /**
+   * Accessibility label. Defaults to a descriptive label based on state.
+   */
+  accessibilityLabel?: string
+  /**
+   * Disables press interaction. Also dims the cell.
+   */
+  isDisabled?: boolean
+  /** Test identifier. */
+  testID?: string
+}
+
+interface AdditemTokens {
+  backgroundColor: string
+  borderRadius: number
+  paddingHorizontal: number
+  paddingVertical: number
+  size: number
+}
+
+function toNumber(value: unknown, fallback: number): number {
+  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: Modes): AdditemTokens {
+  const backgroundColor = getVariableByName('compareCardItem/background', modes) as string
+  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: Readonly<Record<string, string>> = 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,
+}: AdditemProps) {
+  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: StyleProp<ViewStyle> = 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 (
+    <Pressable
+      onPress={handlePress}
+      disabled={isDisabled}
+      accessibilityRole="button"
+      accessibilityLabel={resolvedAccessibilityLabel}
+      accessibilityState={{ disabled: isDisabled }}
+      testID={testID}
+      style={containerStyle}
+    >
+      {isPreview ? (
+        <>
+          <Image
+            imageSource={imageSource}
+            width="100%"
+            height={tokens.size - tokens.paddingVertical * 2}
+            resizeMode="cover"
+            borderRadius={tokens.borderRadius - 2}
+          />
+          {onRemove != null && (
+            <View style={{ position: 'absolute', top: 2, right: 2 }}>
+              <IconCapsule
+                iconName="ic_close"
+                modes={modes}
+                onTouchEnd={handleRemove}
+                accessibilityRole="button"
+                accessibilityLabel="Remove attachment"
+              />
+            </View>
+          )}
+        </>
+      ) : (
+        <IconCapsule iconName="ic_add" modes={modes} />
+      )}
+    </Pressable>
+  )
+}
+
+export default React.memo(Additem)