jfs-components 0.1.18 → 0.1.23

package/src/components/Card/Card.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, isValidElement, cloneElement, useMemo } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import { View, Text, Pressable, type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import type { Modes } from '../../design-tokens'
@@ -39,6 +39,15 @@ export interface CardProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 
 /**
@@ -63,6 +72,9 @@ export function Card({
     modes = EMPTY_MODES,
     mediaAspectRatio = 154 / 116,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: CardProps) {
     // Resolve Card Container Tokens
     const backgroundColor = getVariableByName('card/background/color', modes);
@@ -124,23 +136,42 @@ export function Card({
         paddingVertical: contentPaddingVertical,
     };
 
+    const content = (
+        <>
+            {header && (
+                <View style={headerWrapperStyle}>
+                    {headerWithModes}
+                </View>
+            )}
+            {media && (
+                <View style={mediaWrapperStyle}>
+                    {mediaWithModes}
+                </View>
+            )}
+            <View style={contentWrapperStyle}>
+                {children}
+            </View>
+        </>
+    );
+
     return (
         <CardContext.Provider value={{ modes }}>
-            <View style={[containerStyle, style]}>
-                {header && (
-                    <View style={headerWrapperStyle}>
-                        {headerWithModes}
-                    </View>
-                )}
-                {media && (
-                    <View style={mediaWrapperStyle}>
-                        {mediaWithModes}
-                    </View>
-                )}
-                <View style={contentWrapperStyle}>
-                    {children}
+            {onPress ? (
+                <Pressable
+                    style={[containerStyle, style]}
+                    onPress={onPress}
+                    disabled={disabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={accessibilityLabel}
+                    accessibilityState={{ disabled: !!disabled }}
+                >
+                    {content}
+                </Pressable>
+            ) : (
+                <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+                    {content}
                 </View>
-            </View>
+            )}
         </CardContext.Provider>
     );
 }

package/src/components/CardFeedback/CardFeedback.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, isValidElement, cloneElement } from 'react';
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
+import { View, Text, Pressable, type ViewStyle, type TextStyle, type StyleProp, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
 import IconComponent from '../../icons/Icon';
 import type { Modes } from '../../design-tokens'
@@ -22,6 +22,15 @@ export interface CardFeedbackProps {
      * Style overrides for the card container.
      */
     style?: StyleProp<ViewStyle>;
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void;
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean;
+    /** Accessibility label forwarded to the pressable wrapper. */
+    accessibilityLabel?: string;
 }
 
 /**
@@ -33,6 +42,9 @@ export function CardFeedback({
     children,
     modes: propModes,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: CardFeedbackProps) {
     const modes = {
         'Appearance.System': 'positive',
@@ -61,9 +73,22 @@ export function CardFeedback({
 
     return (
         <CardFeedbackContext.Provider value={{ modes }}>
-            <View style={[containerStyle, style]}>
-                {children}
-            </View>
+            {onPress ? (
+                <Pressable
+                    style={[containerStyle, style]}
+                    onPress={onPress}
+                    disabled={disabled}
+                    accessibilityRole="button"
+                    accessibilityLabel={accessibilityLabel}
+                    accessibilityState={{ disabled: !!disabled }}
+                >
+                    {children}
+                </Pressable>
+            ) : (
+                <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+                    {children}
+                </View>
+            )}
         </CardFeedbackContext.Provider>
     );
 }

package/src/components/CardInsight/CardInsight.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import {
     View,
     Text,
+    Pressable,
     type StyleProp,
     type ViewStyle,
     type TextStyle,
@@ -45,6 +46,15 @@ export type CardInsightProps = {
     modes?: Modes
     /** Override container styles. */
     style?: StyleProp<ViewStyle>
+    /**
+     * Press handler for the whole card. When set, the card becomes pressable
+     * (rendered through a `Pressable` with `accessibilityRole="button"`).
+     */
+    onPress?: () => void
+    /** Disable interaction when `onPress` is set. */
+    disabled?: boolean
+    /** Accessibility label forwarded to the pressable wrapper (defaults to `title`). */
+    accessibilityLabel?: string
 }
 
 /**
@@ -67,6 +77,9 @@ function CardInsight({
     divider,
     modes = EMPTY_MODES,
     style,
+    onPress,
+    disabled,
+    accessibilityLabel,
 }: CardInsightProps) {
     const background =
         (getVariableByName('cardInsight/background', modes) as string | null) ?? '#ffffff'
@@ -160,23 +173,20 @@ function CardInsight({
     const footerNode = renderFooter()
     const showDivider = footerNode !== null && divider !== false && divider !== null
 
-    return (
-        <View
-            style={[
-                {
-                    backgroundColor: background,
-                    borderRadius: radius,
-                    borderWidth,
-                    borderColor,
-                    paddingHorizontal,
-                    paddingVertical,
-                    gap,
-                    overflow: 'hidden',
-                    alignItems: 'stretch',
-                },
-                style,
-            ]}
-        >
+    const containerStyle: ViewStyle = {
+        backgroundColor: background,
+        borderRadius: radius,
+        borderWidth,
+        borderColor,
+        paddingHorizontal,
+        paddingVertical,
+        gap,
+        overflow: 'hidden',
+        alignItems: 'stretch',
+    }
+
+    const content = (
+        <>
             <View
                 style={{
                     flexDirection: 'row',
@@ -237,6 +247,27 @@ function CardInsight({
             {showDivider ? renderDivider() : null}
 
             {footerNode}
+        </>
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={[containerStyle, style]}
+                onPress={onPress}
+                disabled={disabled}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                accessibilityState={{ disabled: !!disabled }}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
         </View>
     )
 }

package/src/components/CardProviderInfo/CardProviderInfo.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
+import { View, Pressable, type ViewStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import ProductLabel from '../ProductLabel/ProductLabel'
 import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
@@ -16,6 +16,15 @@ export type CardProviderInfoProps = {
   modes?: Modes
   /** Override container styles. */
   style?: StyleProp<ViewStyle>
+  /**
+   * Press handler for the whole card. When set, the card becomes pressable
+   * (rendered through a `Pressable` with `accessibilityRole="button"`).
+   */
+  onPress?: () => void
+  /** Disable interaction when `onPress` is set. */
+  disabled?: boolean
+  /** Accessibility label forwarded to the pressable wrapper (defaults to `label`). */
+  accessibilityLabel?: string
 }
 
 /**
@@ -31,6 +40,9 @@ function CardProviderInfo({
   children,
   modes = EMPTY_MODES,
   style,
+  onPress,
+  disabled,
+  accessibilityLabel,
 }: CardProviderInfoProps) {
   const background = getVariableByName('card/providerInfo/background', modes) ?? '#fef4e5'
   const border = getVariableByName('card/providerInfo/border', modes) ?? '#fef4e5'
@@ -59,8 +71,8 @@ function CardProviderInfo({
     rows.push(childArray.slice(i, i + 2))
   }
 
-  return (
-    <View style={[containerStyle, style]}>
+  const content = (
+    <>
       <ProductLabel label={label} imageSource={imageSource} modes={modes} />
       {childArray.length > 0 && (
         <View style={{ rowGap: gridGapNum }}>
@@ -75,6 +87,27 @@ function CardProviderInfo({
           ))}
         </View>
       )}
+    </>
+  )
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={[containerStyle, style]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityState={{ disabled: !!disabled }}
+      >
+        {content}
+      </Pressable>
+    )
+  }
+
+  return (
+    <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+      {content}
     </View>
   )
 }

package/src/components/CheckboxItem/CheckboxItem.tsx

@@ -21,7 +21,25 @@ export type CheckboxItemProps = {
   onValueChange?: (checked: boolean) => void
   /** Whether the row is disabled — both the checkbox and row press handler are disabled. */
   disabled?: boolean
-  /** The label text rendered next to the checkbox. */
+  /**
+   * Content rendered in the row's label slot (between the leading and trailing
+   * edges). This is the primary way to supply the label and mirrors the Figma
+   * "slot" — pass a plain string for the default token-styled label, or any
+   * custom node (e.g. a `<Text>`, a row of `<Text>` + `<Badge>`, etc.) for full
+   * control. Custom nodes receive the same `modes` as the parent.
+   *
+   * When both `children` and the legacy {@link label} prop are provided,
+   * `children` wins.
+   */
+  children?: React.ReactNode
+  /**
+   * The label content rendered next to the checkbox.
+   *
+   * @deprecated Prefer the `children` slot instead
+   * (`<CheckboxItem>Fixed deposit • 0245</CheckboxItem>`). `label` is kept for
+   * backward compatibility and behaves identically — it is used only when no
+   * `children` are provided.
+   */
   label?: React.ReactNode
   /**
    * Position of the checkbox control relative to the label.
@@ -71,13 +89,18 @@ export type CheckboxItemProps = {
  * ```tsx
  * const [checked, setChecked] = useState(false)
  *
+ * // Recommended: pass the label via the children slot.
  * <CheckboxItem
- *   label="Fixed deposit • 0245"
  *   checked={checked}
  *   onValueChange={setChecked}
  *   control="leading"
  *   modes={{ 'Color Mode': 'Light' }}
- * />
+ * >
+ *   Fixed deposit • 0245
+ * </CheckboxItem>
+ *
+ * // Still supported (deprecated): the `label` prop.
+ * <CheckboxItem label="Fixed deposit • 0245" />
  * ```
  */
 const CheckboxItem = forwardRef<View, CheckboxItemProps>(function CheckboxItem({
@@ -85,7 +108,8 @@ const CheckboxItem = forwardRef<View, CheckboxItemProps>(function CheckboxItem({
   defaultChecked = false,
   onValueChange,
   disabled = false,
-  label = 'Fixed deposit • 0245',
+  children,
+  label,
   control = 'leading',
   endSlot,
   endSlotWidth = 80,
@@ -94,6 +118,20 @@ const CheckboxItem = forwardRef<View, CheckboxItemProps>(function CheckboxItem({
   labelStyle,
   accessibilityLabel,
 }: CheckboxItemProps, ref: React.Ref<View>) {
+  // Label slot resolution — the `children` slot is the primary API; the legacy
+  // `label` prop is a backward-compatible fallback. Precedence:
+  //   1. `children`, when provided (non-null / non-false).
+  //   2. otherwise the legacy `label` prop, whenever it was passed at all —
+  //      including an explicit `null`/`false`, which (as before) hides the
+  //      label entirely.
+  //   3. otherwise the Figma placeholder, so the default story still renders
+  //      something meaningful.
+  const hasChildren = children != null && children !== false
+  const slotContent: React.ReactNode = hasChildren
+    ? children
+    : label !== undefined
+      ? label
+      : 'Fixed deposit • 0245'
   const isTrailing = control === 'trailing'
   const isControlled = controlledChecked !== undefined
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
@@ -146,7 +184,7 @@ const CheckboxItem = forwardRef<View, CheckboxItemProps>(function CheckboxItem({
   }
 
   const a11yLabel =
-    accessibilityLabel ?? (typeof label === 'string' ? label : undefined)
+    accessibilityLabel ?? (typeof slotContent === 'string' ? slotContent : undefined)
 
   const checkboxNode = (
     <Checkbox
@@ -158,16 +196,23 @@ const CheckboxItem = forwardRef<View, CheckboxItemProps>(function CheckboxItem({
     />
   )
 
+  // A plain string/number renders with the token-driven label style. Any other
+  // node is treated as custom slot content: it fills the label region and
+  // receives the parent `modes` (so nested design-system components theme
+  // correctly). An explicit null/false hides the label entirely (legacy
+  // behaviour of the `label` prop).
+  const isTextSlot =
+    typeof slotContent === 'string' || typeof slotContent === 'number'
   const labelNode =
-    label != null && label !== false ? (
-      typeof label === 'string' || typeof label === 'number' ? (
-        <Text style={[resolvedLabelStyle, labelStyle]} selectable={false}>
-          {label}
-        </Text>
-      ) : (
-        <View style={{ flex: 1, minWidth: 0 }}>{label}</View>
-      )
-    ) : null
+    slotContent == null || slotContent === false ? null : isTextSlot ? (
+      <Text style={[resolvedLabelStyle, labelStyle]} selectable={false}>
+        {slotContent}
+      </Text>
+    ) : (
+      <View style={{ flex: 1, minWidth: 0 }}>
+        {cloneChildrenWithModes(slotContent, modes)}
+      </View>
+    )
 
   const endSlotNode = endSlot ? (
     <View

package/src/components/ContentSheet/ContentSheet.tsx

@@ -0,0 +1,217 @@
+import React, { useContext, useMemo } from 'react'
+import {
+  Platform,
+  View,
+  type StyleProp,
+  type ViewProps,
+  type ViewStyle,
+} 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 type { Modes } from '../../design-tokens'
+
+const IS_WEB = Platform.OS === 'web'
+
+export type ContentSheetProps = {
+  /**
+   * Sheet content. The sheet is one big slot: whatever you place here is
+   * stacked in a column (separated by the `contentSheet/gap` token) inside the
+   * sheet's padding. The sheet has **no fixed height** — it grows and shrinks
+   * to fit these children automatically.
+   */
+  children?: React.ReactNode
+  /**
+   * Design-token modes. Cascaded to every slot child via
+   * {@link cloneChildrenWithModes} so nested `ListItem`/`Section`/etc. resolve
+   * the same theme without you wiring `modes` onto each one.
+   */
+  modes?: Modes
+  /**
+   * 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
+   * back. The follow animation is driven entirely on the UI thread
+   * (`useAnimatedKeyboard`) so it never schedules a React re-render and stays
+   * in perfect sync with the keyboard on both iOS and Android.
+   *
+   * On web this is a no-op (soft keyboards there don't overlay content).
+   * Default `true`.
+   */
+  avoidKeyboard?: boolean
+  /**
+   * Extra gap (px) inserted between the top of the keyboard and the bottom of
+   * the sheet while the keyboard is open. Default `0` (sheet sits flush on the
+   * keyboard).
+   */
+  keyboardSpacing?: number
+  /**
+   * Add the device's bottom safe-area inset (home indicator) on top of the
+   * sheet's bottom padding, so content never sits under the indicator when the
+   * sheet rests at the bottom of the screen. Default `true`.
+   */
+  safeAreaBottom?: boolean
+  /**
+   * Pin the sheet to the bottom of its parent (absolute, full width). This is
+   * the default behaviour — the sheet "just stays at the bottom".
+   *
+   * Set to `false` to render the sheet in normal flow instead (e.g. when you
+   * compose it inside your own layout container). Keyboard avoidance still
+   * works in both modes.
+   */
+  pinToBottom?: boolean
+  /** Optional style override applied to the sheet container. */
+  style?: StyleProp<ViewStyle>
+} & Omit<ViewProps, 'style' | 'children'>
+
+interface ContentSheetStyle {
+  container: ViewStyle
+  paddingBottom: number
+}
+
+function resolveContentSheetStyle(modes: Modes): ContentSheetStyle {
+  const backgroundColor = getVariableByName('contentSheet/bg', modes) as string
+  const gap = getVariableByName('contentSheet/gap', modes) as number
+  const paddingHorizontal = getVariableByName('contentSheet/padding/horizontal', modes) as number
+  const paddingTop = getVariableByName('contentSheet/padding/top', modes) as number
+  const paddingBottom = getVariableByName('contentSheet/padding/bottom', modes) as number
+  const radiusTop = getVariableByName('contentSheet/padding/radius/top', modes) as number
+  const radiusBottom = getVariableByName('contentSheet/padding/radius/bottom', modes) as number
+
+  return {
+    container: {
+      backgroundColor,
+      gap,
+      paddingHorizontal,
+      paddingTop,
+      // paddingBottom is applied separately so the safe-area inset can be added.
+      borderTopLeftRadius: radiusTop,
+      borderTopRightRadius: radiusTop,
+      borderBottomLeftRadius: radiusBottom,
+      borderBottomRightRadius: radiusBottom,
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      overflow: 'hidden',
+    },
+    paddingBottom,
+  }
+}
+
+const pinnedStyle: ViewStyle = {
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  bottom: 0,
+}
+
+/**
+ * ContentSheet — a bottom-anchored surface that is essentially one big slot
+ * with padding and rounded top corners, mirroring the Figma "Content Sheet".
+ *
+ * Behaviour highlights:
+ *  - **Auto height (free & automatic).** The sheet never sets an explicit
+ *    height. React Native's layout engine (Yoga) sizes it to its children on
+ *    the native thread, so when the slot content grows or shrinks the sheet
+ *    follows with zero JS measurement and zero extra re-renders — the most
+ *    performant option possible.
+ *  - **Keyboard avoidance** on iOS and Android via `avoidKeyboard` (UI-thread
+ *    `useAnimatedKeyboard`, no re-renders).
+ *  - **Bottom pinned** by default; opt out with `pinToBottom={false}`.
+ *  - **Token-driven** styling via `getVariableByName` + `modes`, with `modes`
+ *    cascaded to all slot children.
+ */
+function ContentSheet({
+  children,
+  modes = EMPTY_MODES,
+  avoidKeyboard = true,
+  keyboardSpacing = 0,
+  safeAreaBottom = true,
+  pinToBottom = true,
+  style,
+  ...rest
+}: ContentSheetProps) {
+  // Read the safe-area inset directly from context (rather than
+  // `useSafeAreaInsets`, which throws when no provider is mounted). This keeps
+  // the sheet usable without a `SafeAreaProvider` — it simply falls back to 0.
+  const safeAreaInsets = useContext(SafeAreaInsetsContext)
+  const bottomInset = safeAreaInsets?.bottom ?? 0
+  const resolved = useMemo(() => resolveContentSheetStyle(modes), [modes])
+
+  const processedChildren = useMemo(
+    () => cloneChildrenWithModes(flattenChildren(children), modes),
+    [children, modes]
+  )
+
+  const paddingBottom =
+    resolved.paddingBottom + (safeAreaBottom ? bottomInset : 0)
+
+  const containerStyle = useMemo<StyleProp<ViewStyle>>(
+    () => [
+      pinToBottom ? pinnedStyle : null,
+      resolved.container,
+      { paddingBottom },
+      style,
+    ],
+    [pinToBottom, resolved.container, paddingBottom, style]
+  )
+
+  // Switching between the keyboard-aware and plain implementation is keyed off
+  // `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.
+  if (avoidKeyboard && !IS_WEB) {
+    return (
+      <KeyboardAwareSheet
+        style={containerStyle}
+        spacing={keyboardSpacing}
+        {...rest}
+      >
+        {processedChildren}
+      </KeyboardAwareSheet>
+    )
+  }
+
+  return (
+    <View style={containerStyle} {...rest}>
+      {processedChildren}
+    </View>
+  )
+}
+
+type KeyboardAwareSheetProps = {
+  style: StyleProp<ViewStyle>
+  spacing: number
+  children: React.ReactNode
+} & Omit<ViewProps, 'style' | 'children'>
+
+/**
+ * Native-only wrapper that lifts the sheet by the live keyboard height. The
+ * translation is computed on the UI thread from `useAnimatedKeyboard`, so the
+ * sheet tracks the keyboard frame-for-frame without any JS work.
+ */
+function KeyboardAwareSheet({
+  style,
+  spacing,
+  children,
+  ...rest
+}: KeyboardAwareSheetProps) {
+  const keyboard = useAnimatedKeyboard()
+
+  const keyboardStyle = useAnimatedStyle(() => {
+    const height = keyboard.height.value
+    return {
+      transform: [{ translateY: height > 0 ? -(height + spacing) : 0 }],
+    }
+  })
+
+  return (
+    <Animated.View style={[style, keyboardStyle]} {...rest}>
+      {children}
+    </Animated.View>
+  )
+}
+
+export default ContentSheet