jfs-components 0.1.2 → 0.1.8

package/src/components/CcCard/CcCard.tsx

@@ -0,0 +1,598 @@
+import React, { useMemo } from 'react'
+import {
+    View,
+    Text,
+    Pressable,
+    StyleSheet,
+    type ViewStyle,
+    type TextStyle,
+    type StyleProp,
+    type ImageSourcePropType,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import Badge from '../Badge/Badge'
+import Avatar from '../Avatar/Avatar'
+import Image from '../Image/Image'
+import Icon from '../Icon/Icon'
+import Title from '../Title/Title'
+import ListItem from '../ListItem/ListItem'
+import TextSegment, { type TextSegmentRun } from '../TextSegment/TextSegment'
+import Button from '../Button/Button'
+import type { Modes } from '../../design-tokens'
+
+/**
+ * A single coloured chip rendered in the card header. Each badge resolves its
+ * own design tokens through `modes`, so different appearances (brand, tonal,
+ * etc.) can sit side-by-side in the same group.
+ */
+export interface CcCardBadge {
+    /** Visible label text. */
+    label: string
+    /** Per-badge mode overrides (e.g. `{ AppearanceBrand: 'Tertiary' }`). */
+    modes?: Modes
+    /** Background color override (wins over the token-resolved value). */
+    color?: string
+    /** Label color override (wins over the token-resolved value). */
+    labelColor?: string
+}
+
+/**
+ * A single benefit row in the card's list, rendered through the shared
+ * {@link ListItem} primitive (leading icon + title).
+ */
+export interface CcCardListItem {
+    /**
+     * Registry icon name for the leading glyph. Defaults to `'ic_card'`. Pass
+     * `null` to omit the leading icon.
+     */
+    icon?: string | null
+    /** Per-row override for the leading icon color. */
+    iconColor?: string
+    /** Full override for the leading node. Takes precedence over `icon`. */
+    leading?: React.ReactNode
+    /** Row title (e.g. `"4 domestic + 2 intl. lounge access yearly"`). */
+    title: string
+    /** Makes the row pressable. */
+    onPress?: () => void
+}
+
+export interface CcCardProps {
+    /**
+     * Compact variant. Renders only the leading media slot (an `Avatar` by
+     * default) followed by the footer **without** its CTA button — a condensed
+     * representation of the card. Mirrors the Figma `compact` property.
+     */
+    compact?: boolean
+
+    // ---- Header (non-compact only) ----------------------------------------
+    /** Toggles the header badge row. Defaults to `true`. */
+    showHeader?: boolean
+    /** Leading (left) badge group. */
+    badges?: CcCardBadge[]
+    /** Trailing (right-aligned) badge group. */
+    trailingBadges?: CcCardBadge[]
+    /** Full override for the header. Takes precedence over `badges`/`trailingBadges`. */
+    header?: React.ReactNode
+
+    // ---- Media slot -------------------------------------------------------
+    /**
+     * Image source for the default media slot. Accepts a URL string or any RN
+     * `ImageSourcePropType`. Ignored when `media` is provided.
+     */
+    imageSource?: ImageSourcePropType | string
+    /** Default media image width. Defaults to the Figma spec (`88`). */
+    imageWidth?: number
+    /** Default media image height. Defaults to the Figma spec (`54`). */
+    imageHeight?: number
+    /** Product title rendered next to the media slot (non-compact only). */
+    title?: string
+    /** Product subtitle rendered below the title (non-compact only). */
+    subtitle?: string
+    /**
+     * Full override for the media slot's visual. Whatever you pass here is
+     * rendered **in both the compact and non-compact variants** — e.g. pass an
+     * `Avatar` and it stays an avatar in both, pass an `Image` and it stays an
+     * image in both. `modes` cascade into it automatically. Defaults to an
+     * `Image` driven by `imageSource`.
+     */
+    media?: React.ReactNode
+
+    // ---- List (non-compact only) ------------------------------------------
+    /** Benefit rows rendered in the list. Defaults to three sample rows. */
+    items?: CcCardListItem[]
+
+    // ---- Nudge (non-compact only) -----------------------------------------
+    /** Toggles the upsell nudge row. Defaults to `true`. */
+    showNudge?: boolean
+    /**
+     * Declarative content for the nudge's inline text. Defaults to a sample
+     * "Upsell message JioFinance+" string with the last run brand-coloured.
+     */
+    nudgeSegments?: TextSegmentRun[]
+    /** Avatar image source shown at the start of the nudge row. */
+    nudgeAvatarSource?: ImageSourcePropType | string
+    /** Full override for the nudge row. Takes precedence over the declarative props. */
+    nudge?: React.ReactNode
+
+    // ---- Footer -----------------------------------------------------------
+    /** Small muted label above the footer title (`ccCard/headline/*`). */
+    headline?: string
+    /** Bold footer value (`ccCard/title/*`). */
+    description?: string
+    /** Muted caption rendered inline after the description (`ccCard/subtitle/*`). */
+    footerSubtitle?: string
+    /** Full override for the footer text block. */
+    footer?: React.ReactNode
+
+    // ---- Footer CTA (non-compact only) ------------------------------------
+    /** CTA button label. Defaults to `"Button"`. */
+    buttonLabel?: string
+    /** CTA press handler. */
+    onButtonPress?: () => void
+    /** Full override for the CTA. Takes precedence over `buttonLabel`. */
+    button?: React.ReactNode
+    /** Toggles the CTA button (non-compact). Defaults to `true`. */
+    showButton?: boolean
+
+    // ---- Card -------------------------------------------------------------
+    /** Press handler for the whole card. When set, the card becomes pressable. */
+    onPress?: () => void
+    /** Card width. Defaults to the Figma spec (`343`). Pass `'100%'` to fill the parent. */
+    width?: number | `${number}%`
+    /** Modes object for design-token resolution. Cascaded to all children. */
+    modes?: Modes
+    /** Style overrides for the card container. */
+    style?: StyleProp<ViewStyle>
+    /** Accessibility label for the card. */
+    accessibilityLabel?: string
+}
+
+/**
+ * CcCard — Figma node 5434:1992 ("Cc Card").
+ *
+ * A white, rounded credit-card product card composed entirely from the shared
+ * design-system primitives so it stays in sync with the rest of the library:
+ *
+ *  - **Header** — two {@link Badge} groups (a leading group + a right-aligned
+ *    trailing group), e.g. `Pre-qualified` / `Lifetime free`.
+ *  - **Media** — a product `Image` + a {@link Title} (title + subtitle resolved
+ *    through the `context7: Card` mode → 14px/12px).
+ *  - **List** — a column of benefit {@link ListItem}s (`List Item Style:
+ *    Minimal`) with leading icons.
+ *  - **Nudge** — an inline upsell row: an {@link Avatar} + a {@link TextSegment}.
+ *  - **Footer** — a headline + description + subtitle text block alongside a
+ *    small {@link Button} (`Button / Size: S`, `AppearanceBrand: Secondary`).
+ *
+ * The {@link CcCardProps.compact} variant collapses the card to just the
+ * leading avatar slot + the footer text block (no CTA button). All defaults can
+ * be overridden via `modes`.
+ */
+function CcCard({
+    compact = false,
+    showHeader = true,
+    badges = DEFAULT_BADGES,
+    trailingBadges,
+    header,
+    imageSource,
+    imageWidth = 88,
+    imageHeight = 54,
+    title = 'Title',
+    subtitle = 'Subtitle',
+    media,
+    items = DEFAULT_ITEMS,
+    showNudge = true,
+    nudgeSegments = DEFAULT_NUDGE_SEGMENTS,
+    nudgeAvatarSource,
+    nudge,
+    headline = 'Headline',
+    description = 'Description',
+    footerSubtitle = 'Subtitle',
+    footer,
+    buttonLabel = 'Button',
+    onButtonPress,
+    button,
+    showButton = true,
+    onPress,
+    width = 343,
+    modes = EMPTY_MODES,
+    style,
+    accessibilityLabel,
+}: CcCardProps) {
+    const tokens = useMemo(() => resolveTokens(modes), [modes])
+
+    // The product title uses the card-sized type ramp (14px bold + 12px
+    // subtitle) via the `context7: Card` mode. Consumer modes still win.
+    const titleModes = useMemo<Modes>(() => ({ context7: 'Card', ...modes }), [modes])
+    // List rows use the minimal style (12px / regular, no padding).
+    const listItemModes = useMemo<Modes>(() => ({ 'List Item Style': 'Minimal', ...modes }), [modes])
+    // The nudge avatar is the smallest size token.
+    const nudgeAvatarModes = useMemo<Modes>(() => ({ 'Avatar Size': 'XS', ...modes }), [modes])
+    // The CTA is the small, brand-secondary (lilac→purple) button.
+    const ctaModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Secondary', 'Button / Size': 'S', ...modes }),
+        [modes]
+    )
+
+    // ---- Header -----------------------------------------------------------
+    const headerNode = header
+        ? cloneChildrenWithModes(header, modes)
+        : showHeader && (badges?.length || trailingBadges?.length) ? (
+            <View style={styles.header}>
+                <BadgeGroup badges={badges} modes={modes} />
+                {trailingBadges?.length ? (
+                    <BadgeGroup badges={trailingBadges} modes={modes} />
+                ) : null}
+            </View>
+        ) : null
+
+    // ---- Media slot (shared by both compact + non-compact) ----------------
+    // Whatever lives in the slot is rendered identically in both variants; only
+    // the surrounding sections differ. The default is an Image driven by
+    // `imageSource`, but a consumer can pass an Avatar (or any node) via `media`.
+    const mediaSlotContent = media ? (
+        cloneChildrenWithModes(media, modes)
+    ) : (
+        <Image
+            imageSource={imageSource}
+            width={imageWidth}
+            height={imageHeight}
+            borderRadius={tokens.imageRadius}
+            resizeMode="cover"
+            accessibilityElementsHidden
+            importantForAccessibility="no"
+        />
+    )
+
+    // Non-compact lays the slot out in a row next to the product Title.
+    const mediaRow = (
+        <View style={styles.mediaSlot}>
+            {mediaSlotContent}
+            <View style={styles.titleWrap}>
+                <Title
+                    title={title}
+                    subtitle={subtitle}
+                    textAlign="Left"
+                    modes={titleModes}
+                    style={styles.titleInner}
+                />
+            </View>
+        </View>
+    )
+
+    // ---- List -------------------------------------------------------------
+    const listNode =
+        items.length > 0 ? (
+            <View style={tokens.listGroup}>
+                {items.map((item, index) => {
+                    const leading =
+                        item.leading ??
+                        (item.icon !== null ? (
+                            <Icon iconName={item.icon ?? 'ic_card'} color={item.iconColor} modes={listItemModes} />
+                        ) : null)
+                    return (
+                        <ListItem
+                            key={index}
+                            layout="Horizontal"
+                            navArrow={false}
+                            showSupportText={false}
+                            title={item.title}
+                            leading={leading}
+                            onPress={item.onPress}
+                            modes={listItemModes}
+                        />
+                    )
+                })}
+            </View>
+        ) : null
+
+    // ---- Nudge ------------------------------------------------------------
+    const nudgeNode = nudge
+        ? cloneChildrenWithModes(nudge, modes)
+        : showNudge ? (
+            <View style={tokens.nudge}>
+                <Avatar imageSource={nudgeAvatarSource} modes={nudgeAvatarModes} />
+                <View style={styles.nudgeContent}>
+                    <TextSegment segments={nudgeSegments} modes={modes} />
+                </View>
+            </View>
+        ) : null
+
+    // ---- Footer -----------------------------------------------------------
+    const ctaNode = button ? (
+        cloneChildrenWithModes(button, ctaModes)
+    ) : (
+        <Button label={buttonLabel} modes={ctaModes} onPress={onButtonPress} />
+    )
+
+    const footerTextBlock = footer ? (
+        cloneChildrenWithModes(footer, modes)
+    ) : (
+        <View style={tokens.footerTextWrap}>
+            {headline != null ? <Text style={tokens.headline}>{headline}</Text> : null}
+            <View style={compact ? tokens.titleWrapCompact : tokens.titleWrapDefault}>
+                {description != null ? <Text style={tokens.footerTitle}>{description}</Text> : null}
+                {footerSubtitle != null ? <Text style={tokens.footerSubtitle}>{footerSubtitle}</Text> : null}
+            </View>
+        </View>
+    )
+
+    const footerNode = (
+        <View style={compact ? tokens.footerRowCompact : tokens.footerRowDefault}>
+            {footerTextBlock}
+            {!compact && showButton ? ctaNode : null}
+        </View>
+    )
+
+    // ---- Compose ----------------------------------------------------------
+    const content = compact ? (
+        <>
+            <View style={styles.compactSlot}>{mediaSlotContent}</View>
+            {footerNode}
+        </>
+    ) : (
+        <>
+            {headerNode}
+            {mediaRow}
+            {listNode}
+            {nudgeNode}
+            {footerNode}
+        </>
+    )
+
+    const containerStyle = useMemo<ViewStyle>(
+        () => ({ ...tokens.container, width }),
+        [tokens.container, width]
+    )
+
+    if (onPress) {
+        return (
+            <Pressable
+                style={({ pressed }) => [containerStyle, pressed ? styles.pressed : null, style]}
+                accessibilityRole="button"
+                accessibilityLabel={accessibilityLabel ?? title}
+                onPress={onPress}
+            >
+                {content}
+            </Pressable>
+        )
+    }
+
+    return (
+        <View style={[containerStyle, style]} accessibilityLabel={accessibilityLabel}>
+            {content}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// BadgeGroup — internal wrapping row of badges
+// ---------------------------------------------------------------------------
+
+function BadgeGroup({ badges, modes }: { badges: CcCardBadge[]; modes: Modes }) {
+    return (
+        <View style={styles.badgeGroup}>
+            {badges.map((badge, index) => {
+                const badgeModes = badge.modes ? { ...modes, ...badge.modes } : modes
+                return (
+                    <Badge
+                        key={index}
+                        label={badge.label}
+                        modes={badgeModes}
+                        style={badge.color ? { backgroundColor: badge.color } : undefined}
+                        labelStyle={badge.labelColor ? { color: badge.labelColor } : undefined}
+                    />
+                )
+            })}
+        </View>
+    )
+}
+
+// ---------------------------------------------------------------------------
+// Tokens / static styles
+// ---------------------------------------------------------------------------
+
+interface ResolvedTokens {
+    container: ViewStyle
+    imageRadius: number
+    listGroup: ViewStyle
+    nudge: ViewStyle
+    footerRowDefault: ViewStyle
+    footerRowCompact: ViewStyle
+    footerTextWrap: ViewStyle
+    titleWrapDefault: ViewStyle
+    titleWrapCompact: ViewStyle
+    headline: TextStyle
+    footerTitle: TextStyle
+    footerSubtitle: TextStyle
+}
+
+function asNum(raw: unknown, fallback: number): number {
+    const n = typeof raw === 'number' ? raw : parseFloat(raw as string)
+    return Number.isFinite(n) ? n : fallback
+}
+
+function asStr(raw: unknown, fallback: string): string {
+    return raw != null ? String(raw) : fallback
+}
+
+function resolveTokens(modes: Modes): ResolvedTokens {
+    // NOTE: token names are passed as string literals DIRECTLY to
+    // getVariableByName so the `extract-component-tokens` script can statically
+    // collect them for the generated docs. Do not refactor these into a helper
+    // that receives the name as a variable.
+    const background = asStr(getVariableByName('ccCard/bg', modes), '#ffffff')
+    const borderColor = asStr(getVariableByName('ccCard/border/color', modes), '#e3e4e4')
+    const borderWidth = asNum(getVariableByName('ccCard/border/size', modes), 1)
+    const radius = asNum(getVariableByName('ccCard/radius', modes), 12)
+    const paddingHorizontal = asNum(getVariableByName('ccCard/padding/horizontal', modes), 12)
+    const paddingVertical = asNum(getVariableByName('ccCard/padding/vertical', modes), 12)
+    const gap = asNum(getVariableByName('ccCard/padding/gap', modes), 8)
+
+    const imageRadius = asNum(getVariableByName('image/radius', modes), 0)
+    const listGroupGap = asNum(getVariableByName('listGroup/gap', modes), 4)
+    const nudgeGap = asNum(getVariableByName('nudge/gap', modes), 6)
+
+    const footerGap = asNum(getVariableByName('ccCard/footer/gap', modes), 8)
+    const textWrapGap = asNum(getVariableByName('ccCard/footer/textWrap/gap', modes), 4)
+    const titleWrapGap = asNum(getVariableByName('ccCard/footer/titleWrap/gap', modes), 8)
+
+    const headlineColor = asStr(getVariableByName('ccCard/headline/color', modes), '#707275')
+    const headlineSize = asNum(getVariableByName('ccCard/headline/fontSize', modes), 10)
+    const headlineFamily = asStr(getVariableByName('ccCard/headline/fontFamily', modes), 'JioType Var')
+    const headlineLineHeight = asNum(getVariableByName('ccCard/headline/lineHeight', modes), 13)
+    const headlineWeight = asStr(getVariableByName('ccCard/headline/fontWeight', modes), '500')
+
+    const titleColor = asStr(getVariableByName('ccCard/title/color', modes), '#081007')
+    const titleSize = asNum(getVariableByName('ccCard/title/fontSize', modes), 14)
+    const titleFamily = asStr(getVariableByName('ccCard/title/fontFamily', modes), 'JioType Var')
+    const titleLineHeight = asNum(getVariableByName('ccCard/title/lineHeight', modes), 15)
+    const titleWeight = asStr(getVariableByName('ccCard/title/fontWeight', modes), '700')
+
+    const subtitleColor = asStr(getVariableByName('ccCard/subtitle/color', modes), '#707275')
+    const subtitleSize = asNum(getVariableByName('ccCard/subtitle/fontSize', modes), 10)
+    const subtitleFamily = asStr(getVariableByName('ccCard/subtitle/fontFamily', modes), 'JioType Var')
+    const subtitleLineHeight = asNum(getVariableByName('ccCard/subtitle/lineHeight', modes), 13)
+    const subtitleWeight = asStr(getVariableByName('ccCard/subtitle/fontWeight', modes), '500')
+
+    return {
+        container: {
+            backgroundColor: background,
+            borderColor,
+            borderWidth,
+            borderRadius: radius,
+            paddingHorizontal,
+            paddingVertical,
+            gap,
+            flexDirection: 'column',
+            alignItems: 'flex-start',
+            overflow: 'hidden',
+        },
+        imageRadius,
+        listGroup: {
+            alignSelf: 'stretch',
+            gap: listGroupGap,
+        },
+        nudge: {
+            alignSelf: 'stretch',
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: nudgeGap,
+        },
+        footerRowDefault: {
+            alignSelf: 'stretch',
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            gap: footerGap,
+        },
+        footerRowCompact: {
+            alignSelf: 'stretch',
+            flexDirection: 'row',
+            alignItems: 'center',
+        },
+        footerTextWrap: {
+            flex: 1,
+            minWidth: 1,
+            alignItems: 'flex-start',
+            gap: textWrapGap,
+        },
+        titleWrapDefault: {
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            gap: textWrapGap,
+        },
+        titleWrapCompact: {
+            flexDirection: 'row',
+            alignItems: 'flex-end',
+            gap: titleWrapGap,
+        },
+        headline: {
+            color: headlineColor,
+            fontSize: headlineSize,
+            fontFamily: headlineFamily,
+            fontWeight: headlineWeight as TextStyle['fontWeight'],
+            lineHeight: Math.max(headlineLineHeight, Math.ceil(headlineSize * 1.2)),
+            includeFontPadding: false as any,
+        },
+        footerTitle: {
+            color: titleColor,
+            fontSize: titleSize,
+            fontFamily: titleFamily,
+            fontWeight: titleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.max(titleLineHeight, Math.ceil(titleSize * 1.2)),
+            includeFontPadding: false as any,
+        },
+        footerSubtitle: {
+            color: subtitleColor,
+            fontSize: subtitleSize,
+            fontFamily: subtitleFamily,
+            fontWeight: subtitleWeight as TextStyle['fontWeight'],
+            lineHeight: Math.max(subtitleLineHeight, Math.ceil(subtitleSize * 1.2)),
+            includeFontPadding: false as any,
+        },
+    }
+}
+
+const DEFAULT_BADGES: CcCardBadge[] = [
+    { label: 'Pre-qualified', modes: { AppearanceBrand: 'Tertiary' }, labelColor: '#ffffff' },
+    { label: 'Lifetime free', modes: { AppearanceBrand: 'Tertiary' }, labelColor: '#ffffff' },
+]
+
+const DEFAULT_ITEMS: CcCardListItem[] = [
+    { icon: 'ic_card', title: '4 domestic + 2 intl. lounge access yearly' },
+    { icon: 'ic_card', title: '5% cashback on dining & travel' },
+    { icon: 'ic_card', title: 'No annual fee for the first year' },
+]
+
+const DEFAULT_NUDGE_SEGMENTS: TextSegmentRun[] = [
+    { text: 'Upsell message ' },
+    { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+]
+
+const styles = StyleSheet.create({
+    header: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        gap: 8,
+    },
+    badgeGroup: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: 4,
+        flexShrink: 1,
+    },
+    mediaSlot: {
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    titleWrap: {
+        flex: 1,
+        minWidth: 1,
+    },
+    // The shared Title falls back to 16/8 padding when its tokens resolve to 0
+    // (0 is falsy). Zero it out so the only horizontal gap to the media slot is
+    // the mediaSlot's hard-coded 8px.
+    titleInner: {
+        paddingHorizontal: 0,
+        paddingVertical: 0,
+    },
+    // Compact media wrapper hugs its child so the slot sizes to the avatar /
+    // image's intrinsic dimensions instead of stretching to the card width.
+    compactSlot: {
+        alignSelf: 'flex-start',
+    },
+    nudgeContent: {
+        flex: 1,
+        minWidth: 1,
+    },
+    pressed: {
+        opacity: 0.92,
+    },
+})
+
+export default CcCard

package/src/components/Checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useCallback, useEffect, useRef, useState } from 'react'
 import {
   Pressable,
   Platform,
@@ -98,7 +98,7 @@ export interface CheckboxProps {
  * @component
  * @param {CheckboxProps} props
  */
-function Checkbox({
+const Checkbox = forwardRef<View, CheckboxProps>(function Checkbox({
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -106,7 +106,7 @@ function Checkbox({
   modes = EMPTY_MODES,
   style,
   accessibilityLabel,
-}: CheckboxProps) {
+}: CheckboxProps, ref: React.Ref<View>) {
   const isControlled = controlledChecked !== undefined
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
   const isChecked = isControlled ? controlledChecked : internalChecked
@@ -230,6 +230,7 @@ function Checkbox({
 
   return (
     <Pressable
+      ref={ref}
       style={[touchTargetStyle, style]}
       hitSlop={hitSlop}
       onPress={handlePress}
@@ -253,7 +254,7 @@ function Checkbox({
       </View>
     </Pressable>
   )
-}
+})
 
 function boxShadow(value: string): ViewStyle {
   if (Platform.OS === 'web') {

package/src/components/CheckboxItem/CheckboxItem.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { forwardRef, useCallback, useState } from 'react'
 import {
   View,
   Text,
@@ -80,7 +80,7 @@ export type CheckboxItemProps = {
  * />
  * ```
  */
-function CheckboxItem({
+const CheckboxItem = forwardRef<View, CheckboxItemProps>(function CheckboxItem({
   checked: controlledChecked,
   defaultChecked = false,
   onValueChange,
@@ -93,7 +93,7 @@ function CheckboxItem({
   style,
   labelStyle,
   accessibilityLabel,
-}: CheckboxItemProps) {
+}: CheckboxItemProps, ref: React.Ref<View>) {
   const isTrailing = control === 'trailing'
   const isControlled = controlledChecked !== undefined
   const [internalChecked, setInternalChecked] = useState(defaultChecked)
@@ -183,6 +183,7 @@ function CheckboxItem({
 
   return (
     <Pressable
+      ref={ref}
       style={[containerStyle, style]}
       onPress={handleToggle}
       disabled={disabled}
@@ -205,6 +206,6 @@ function CheckboxItem({
       )}
     </Pressable>
   )
-}
+})
 
 export default CheckboxItem