jfs-components 0.0.74 → 0.0.78

package/src/components/Avatar/Avatar.tsx

@@ -14,6 +14,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 const avatarImage = require('./31595e70c4181263f9971590224b12934b280c9b.png')
 
@@ -134,6 +136,12 @@ export type AvatarProps = {
   accessibilityLabel?: string;
   onPress?: () => void;
   disabled?: boolean;
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * same-size circular skeleton instead of the avatar. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean;
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel'>;
 
 function Avatar({
@@ -145,11 +153,17 @@ function Avatar({
   // component intentionally renders `accessibilityLabel={undefined}` on the
   // wrapper (the inner Text/Image carry the label instead).
   accessibilityLabel: _accessibilityLabel,
+  loading,
   ...rest
 }: AvatarProps) {
   const isMonogram = style === 'Monogram'
   const tokens = useMemo(() => resolveAvatarTokens(modes, isMonogram), [modes, isMonogram])
 
+  // Skeleton context — read unconditionally; the actual short-circuit
+  // happens AFTER all remaining hooks below.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   // Focus is a sustained visible state — keep mirroring on web; gate the
   // setter so it never fires on native (where focus events don't fire on
   // these elements anyway).
@@ -197,6 +211,18 @@ function Avatar({
     [tokens.containerStyle, isFocused]
   )
 
+  if (isLoading) {
+    const size = tokens.containerStyle.width as number
+    return (
+      <Skeleton
+        kind="other"
+        width={size}
+        height={size}
+        modes={modes}
+      />
+    )
+  }
+
   // The inner content varies; everything else (wrapper, handlers, style) is shared.
   const innerContent = isMonogram ? (
     <View style={monogramContainerStyle}>

package/src/components/Badge/Badge.tsx

@@ -8,6 +8,8 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { EMPTY_MODES } from '../../utils/react-utils'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 type BadgeProps = {
   /** Visible label text shown inside the badge */
@@ -19,6 +21,12 @@ type BadgeProps = {
   accessibilityLabel?: string
   style?: ViewStyle
   labelStyle?: TextStyle
+  /**
+   * Explicit per-instance loading override. When `true`, renders a
+   * badge-shaped skeleton placeholder instead of the badge. Defaults to
+   * inheriting from the surrounding `<SkeletonGroup>`.
+   */
+  loading?: boolean
 } & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityLabel' | 'accessibilityRole'>
 
 function Badge({
@@ -28,6 +36,7 @@ function Badge({
   accessibilityLabel,
   style,
   labelStyle,
+  loading,
   ...rest
 }: BadgeProps) {
   // Resolve token values (fall back to sensible defaults)
@@ -51,6 +60,24 @@ function Badge({
     Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
     Math.round(fontSize * 1.2)
 
+  // Skeleton short-circuit. Size derived from the same tokens the loaded
+  // badge would use so the placeholder occupies the same box.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+  if (isLoading) {
+    const charWidth = fontSize * 0.55
+    const labelWidth = Math.max(label.length, 3) * charWidth
+    return (
+      <Skeleton
+        kind="badge"
+        width={paddingHorizontal * 2 + labelWidth}
+        height={paddingVertical * 2 + lineHeight}
+        style={{ alignSelf: 'flex-start' }}
+        modes={modes}
+      />
+    )
+  }
+
   const Container: any = onPress ? Pressable : View
 
   const containerStyle: ViewStyle = {

package/src/components/Button/Button.tsx

@@ -14,6 +14,8 @@ import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
+import Skeleton from '../../skeleton/Skeleton'
+import { useSkeleton } from '../../skeleton/SkeletonGroup'
 
 export type ButtonProps = SafePressableProps & {
   label?: string;
@@ -54,6 +56,13 @@ export type ButtonProps = SafePressableProps & {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * Explicit per-instance loading override. When `true`, the button renders
+   * as a pill-shaped skeleton of the same size; when `false`, the
+   * surrounding `<SkeletonGroup>` is ignored. Defaults to inheriting from
+   * the group.
+   */
+  loading?: boolean;
 };
 
 // ---------------------------------------------------------------------------
@@ -224,6 +233,7 @@ function ButtonImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  loading,
   ...rest
 }: ButtonProps) {
   // Hover state is web-only in practice; the setter is gated so native taps
@@ -248,6 +258,12 @@ function ButtonImpl({
     [modes, disabled]
   )
 
+  // Skeleton context — read unconditionally so React's hook order stays
+  // stable. The actual short-circuit return happens AFTER all remaining
+  // hooks have been called below.
+  const { active: groupActive } = useSkeleton()
+  const isLoading = loading ?? groupActive
+
   // Active label color: base by default; hover override (web-only) when hovered.
   // Press color is intentionally NOT applied to the label on native — applying
   // it would require a React render per touch and re-introduce the flicker.
@@ -354,6 +370,30 @@ function ButtonImpl({
     }
   }
 
+  if (isLoading) {
+    const { container, baseLabel, iconSize, accessoryOffset } = tokens
+    const paddingHorizontal = (container.paddingHorizontal as number) ?? 20
+    const paddingVertical = (container.paddingVertical as number) ?? 12
+    const lineHeight = (baseLabel.lineHeight as number) ?? 19
+    const fontSize = (baseLabel.fontSize as number) ?? 16
+    const labelText = typeof label === 'string' ? label : 'Button'
+    const charWidth = fontSize * 0.55
+    const labelWidth = Math.max(labelText.length, 4) * charWidth
+    const hasAccessory = !!(leading || trailing || icon)
+    const accessoryWidth = hasAccessory ? iconSize + accessoryOffset * 2 : 0
+    const skeletonWidth = paddingHorizontal * 2 + labelWidth + accessoryWidth
+    const skeletonHeight = paddingVertical * 2 + lineHeight
+    return (
+      <Skeleton
+        kind="other"
+        width={skeletonWidth}
+        height={skeletonHeight}
+        style={style as any}
+        modes={modes}
+      />
+    )
+  }
+
   return (
     <Pressable
       accessibilityRole="button"

package/src/components/Checkbox/Checkbox.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react'
 import {
   Pressable,
   Platform,
+  View,
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
@@ -50,6 +51,16 @@ function useFocusVisible() {
   return { isFocusVisible, focusHandlers: { onFocus, onBlur } }
 }
 
+/** Minimum touch target per iOS HIG / Material accessibility guidance. */
+const MIN_TOUCH_TARGET = 44
+
+const touchTargetStyle: ViewStyle = {
+  minWidth: MIN_TOUCH_TARGET,
+  minHeight: MIN_TOUCH_TARGET,
+  alignItems: 'center',
+  justifyContent: 'center',
+}
+
 export interface CheckboxProps {
   /** Whether the checkbox is checked (controlled) */
   checked?: boolean
@@ -207,7 +218,7 @@ function Checkbox({
 
   return (
     <Pressable
-      style={[resolveStyle(), style]}
+      style={[touchTargetStyle, style]}
       onPress={handlePress}
       disabled={disabled}
       onHoverIn={() => setIsHovered(true)}
@@ -217,14 +228,16 @@ function Checkbox({
       accessibilityState={{ checked: isChecked, disabled }}
       accessibilityLabel={accessibilityLabel}
     >
-      {isChecked && (
-        <Svg width={12} height={9} viewBox="0 0 12 9" fill="none">
-          <Path
-            d="M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z"
-            fill={markColor}
-          />
-        </Svg>
-      )}
+      <View style={resolveStyle()}>
+        {isChecked && (
+          <Svg width={12} height={9} viewBox="0 0 12 9" fill="none">
+            <Path
+              d="M4.00091 8.66939C3.91321 8.6699 3.82628 8.65309 3.74509 8.61991C3.6639 8.58673 3.59006 8.53785 3.52779 8.47606L0.195972 5.14273C0.0704931 5.01719 -1.86978e-09 4.84693 0 4.66939C1.86978e-09 4.49186 0.0704931 4.3216 0.195972 4.19606C0.321451 4.07053 0.491636 4 0.66909 4C0.846544 4 1.01673 4.07053 1.14221 4.19606L4.00091 7.06273L10.8578 0.196061C10.9833 0.0705253 11.1535 0 11.3309 0C11.5084 0 11.6785 0.0705253 11.804 0.196061C11.9295 0.321597 12 0.49186 12 0.669394C12 0.846929 11.9295 1.01719 11.804 1.14273L4.47403 8.47606C4.41176 8.53785 4.33792 8.58673 4.25673 8.61991C4.17554 8.65309 4.08861 8.6699 4.00091 8.66939Z"
+              fill={markColor}
+            />
+          </Svg>
+        )}
+      </View>
     </Pressable>
   )
 }

package/src/components/DropdownInput/DropdownInput.tsx

@@ -162,51 +162,60 @@ function useChevronTokens(modes: Record<string, any>) {
     }, [modes])
 }
 
+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 useFormFieldTokens(modes: Record<string, any>) {
     return useMemo(() => {
         const labelColor =
             (getVariableByName('formField/label/color', modes) as string) ||
-            '#0c0d10'
+            '#000000'
         const labelFontFamily =
             (getVariableByName('formField/label/fontFamily', modes) as string) ||
             'JioType Var'
-        const labelFontSize =
-            parseInt(getVariableByName('formField/label/fontSize', modes), 10) ||
+        const labelFontSize = toNumber(
+            getVariableByName('formField/label/fontSize', modes),
             14
-        const labelLineHeight =
-            parseInt(
-                getVariableByName('formField/label/lineHeight', modes),
-                10
-            ) || 17
+        )
+        const labelLineHeight = toNumber(
+            getVariableByName('formField/label/lineHeight', modes),
+            17
+        )
         const labelFontWeight =
             (getVariableByName('formField/label/fontWeight', modes) as string) ||
             '500'
 
-        const gap = parseInt(getVariableByName('formField/gap', modes), 10) || 8
-
-        const inputPaddingH =
-            parseInt(
-                getVariableByName('formField/input/padding/horizontal', modes),
-                10
-            ) || 12
-        const inputGap =
-            parseInt(getVariableByName('formField/input/gap', modes), 10) || 8
-        const inputRadius =
-            parseInt(getVariableByName('formField/input/radius', modes), 10) ||
+        const gap = toNumber(getVariableByName('formField/gap', modes), 8)
+
+        const inputPaddingH = toNumber(
+            getVariableByName('formField/input/padding/horizontal', modes),
+            12
+        )
+        const inputGap = toNumber(
+            getVariableByName('formField/input/gap', modes),
             8
+        )
+        const inputRadius = toNumber(
+            getVariableByName('formField/input/radius', modes),
+            8
+        )
         const inputBackground =
             (getVariableByName('formField/input/background', modes) as string) ||
             '#ffffff'
-        const inputFontSize =
-            parseInt(
-                getVariableByName('formField/input/label/fontSize', modes),
-                10
-            ) || 16
-        const inputLineHeight =
-            parseInt(
-                getVariableByName('formField/input/label/lineHeight', modes),
-                10
-            ) || 45
+        const inputFontSize = toNumber(
+            getVariableByName('formField/input/label/fontSize', modes),
+            16
+        )
+        const inputLineHeight = toNumber(
+            getVariableByName('formField/input/label/lineHeight', modes),
+            45
+        )
         const inputFontFamily =
             (getVariableByName(
                 'formField/input/label/fontFamily',
@@ -231,11 +240,13 @@ function useFormFieldTokens(modes: Record<string, any>) {
             ) as string) ||
             (getVariableByName('formField/input/border/color', modes) as string) ||
             '#b5b6b7'
-        const inputBorderSize =
-            parseInt(
-                getVariableByName('formField/input/border/size', modes),
-                10
-            ) || 1
+        // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
+        // fractional value — parseInt was truncating it to 1, leaving the
+        // resolved row height ~1px shorter than the Figma reference.
+        const inputBorderSize = toNumber(
+            getVariableByName('formField/input/border/size', modes),
+            1.5
+        )
 
         return {
             labelColor,
@@ -314,7 +325,7 @@ function DropdownInput({
     supportText,
     errorMessage,
     menuMaxHeight = 240,
-    menuOffset = 4,
+    menuOffset = 6,
     matchTriggerWidth = true,
     closeOnBackdropPress = true,
     modes: propModes = EMPTY_MODES,
@@ -594,19 +605,23 @@ function DropdownInput({
     }
 
     // Focus ring uses the resolved input border color from FormField States so
-    // active/error look consistent with TextInput-based FormField. We also lift
-    // border weight to 2 when "Active" to read as a focus ring.
+    // active/error look consistent with TextInput-based FormField. Only the
+    // color changes between states — width stays constant to avoid layout
+    // shift when opening the menu (a shift would invalidate the measured
+    // trigger rect and visually shove the popup).
     const inputRowStyle: ViewStyle = {
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: tokens.inputBackground,
         borderColor: tokens.inputBorderColor,
-        borderWidth: isOpen ? Math.max(tokens.inputBorderSize, 1) : tokens.inputBorderSize,
+        borderWidth: tokens.inputBorderSize,
+        borderStyle: 'solid',
         borderRadius: tokens.inputRadius,
         paddingHorizontal: tokens.inputPaddingH,
         paddingVertical: 0,
         gap: tokens.inputGap,
         minHeight: tokens.inputLineHeight,
+        width: '100%',
     }
 
     const valueTextStyle: TextStyle = {
@@ -763,12 +778,25 @@ function DropdownInput({
                 />
             )}
 
+            {/*
+              IMPORTANT: do NOT pass `statusBarTranslucent` to this Modal.
+              On Android, a `statusBarTranslucent` Modal opens its own window
+              that spans the entire screen (origin at screen-top, including
+              the status bar), but `measureInWindow` on the trigger returns
+              coordinates relative to the *activity* window — which on a
+              default Android setup starts BELOW the status bar. The two
+              coordinate spaces then differ by `StatusBar.currentHeight`, so
+              `triggerRect.y + triggerRect.height + menuOffset` lands roughly
+              one status-bar-height ABOVE the visible input, making the
+              popup overlap the input row. Leaving `statusBarTranslucent`
+              off keeps the Modal's window aligned with the activity
+              window, which is what every measurement here assumes.
+            */}
             <Modal
                 visible={isOpen}
                 transparent
                 animationType="fade"
                 onRequestClose={closeMenu}
-                statusBarTranslucent
             >
                 <Pressable
                     style={StyleSheet.absoluteFill}

package/src/components/ExpandableCheckbox/ExpandableCheckbox.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  View,
+  Text,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import { EMPTY_MODES } from '../../utils/react-utils'
+import Checkbox from '../Checkbox/Checkbox'
+import Button from '../Button/Button'
+
+export type ExpandableCheckboxProps = {
+  /** Long text label rendered next to the checkbox. */
+  label?: string
+  /** Whether the checkbox is checked (controlled). */
+  checked?: boolean
+  /** Initial checked state (uncontrolled). */
+  defaultChecked?: boolean
+  /** Callback fired when the checked state changes. */
+  onValueChange?: (checked: boolean) => void
+  /** Whether the row is expanded to reveal the full label (controlled). */
+  expanded?: boolean
+  /** Initial expanded state (uncontrolled). Defaults to `false` (Idle). */
+  defaultExpanded?: boolean
+  /** Callback fired when the expanded state changes. */
+  onExpandedChange?: (expanded: boolean) => void
+  /** Whether the entire row is disabled. */
+  disabled?: boolean
+  /** Label for the toggle button shown when the row is collapsed. */
+  readMoreLabel?: string
+  /** Label for the toggle button shown when the row is expanded. */
+  readLessLabel?: string
+  /** Number of lines to show when collapsed. Defaults to `1`. */
+  collapsedLines?: number
+  /** Design token modes for theming (e.g. `{ 'Color Mode': 'Light' }`). */
+  modes?: Record<string, any>
+  /** Override outer container styles. */
+  style?: StyleProp<ViewStyle>
+  /** Override the label text styles. */
+  labelStyle?: StyleProp<TextStyle>
+  /** Accessibility label for the checkbox. Falls back to `label`. */
+  accessibilityLabel?: string
+}
+
+/**
+ * Default modes applied to the inner toggle `Button`. These resolve the
+ * tertiary-style pill in the Figma reference (small, transparent background,
+ * brand purple foreground). Any value supplied via the consumer `modes` prop
+ * takes precedence over these defaults.
+ */
+const BUTTON_DEFAULT_MODES = {
+  'Button / Size': 'XS',
+  AppearanceBrand: 'Secondary',
+  Emphasis: 'Low',
+} as const
+
+/**
+ * ExpandableCheckbox composes a `Checkbox`, a long-form label and a
+ * "Read more" / "Read less" toggle. Mirrors the Figma "Expandable Checkbox"
+ * component with two states:
+ *
+ *  - **Idle (collapsed)** — checkbox + truncated label + toggle button arranged
+ *    in a horizontal row (cross-axis centered).
+ *  - **Open (expanded)** — checkbox + full multi-line label, with the toggle
+ *    button right-aligned beneath the row.
+ *
+ * The checkbox and the toggle button have independent press handlers — pressing
+ * the toggle does not affect the checked state, and toggling the checkbox does
+ * not collapse / expand the row.
+ *
+ * @component
+ * @param {ExpandableCheckboxProps} props
+ *
+ * @example
+ * ```tsx
+ * <ExpandableCheckbox
+ *   label="By checking this box, I (a) acknowledge and (b) agree to the full terms…"
+ *   defaultChecked
+ *   onValueChange={setAccepted}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function ExpandableCheckbox({
+  label = '',
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  expanded: controlledExpanded,
+  defaultExpanded = false,
+  onExpandedChange,
+  disabled = false,
+  readMoreLabel = 'Read more',
+  readLessLabel = 'Read less',
+  collapsedLines = 1,
+  modes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+}: ExpandableCheckboxProps) {
+  const isCheckedControlled = controlledChecked !== undefined
+  const [internalChecked, setInternalChecked] = useState(defaultChecked)
+  const isChecked = isCheckedControlled ? controlledChecked : internalChecked
+
+  const isExpandedControlled = controlledExpanded !== undefined
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded)
+  const isExpanded = isExpandedControlled ? controlledExpanded : internalExpanded
+
+  const handleToggleChecked = useCallback(
+    (next: boolean) => {
+      if (disabled) return
+      if (!isCheckedControlled) setInternalChecked(next)
+      onValueChange?.(next)
+    },
+    [disabled, isCheckedControlled, onValueChange]
+  )
+
+  const handleToggleExpanded = useCallback(() => {
+    if (disabled) return
+    const next = !isExpanded
+    if (!isExpandedControlled) setInternalExpanded(next)
+    onExpandedChange?.(next)
+  }, [disabled, isExpanded, isExpandedControlled, onExpandedChange])
+
+  const gap =
+    (getVariableByName('expandableCheckbox/gap', modes) as number | null) ?? 8
+
+  const rowGap =
+    (getVariableByName('checkboxItem/gap', modes) as number | null) ?? 8
+  const rowPaddingHorizontal =
+    (getVariableByName('checkboxItem/padding/horizontal', modes) as number | null) ?? 0
+  const rowPaddingVertical =
+    (getVariableByName('checkboxItem/padding/vertical', modes) as number | null) ?? 0
+
+  const labelColor =
+    (getVariableByName('checkboxItem/foreground', modes) as string | null) ?? '#1a1c1f'
+  const labelFontFamily =
+    (getVariableByName('checkboxItem/label/fontFamily', modes) as string | null) ?? 'JioType Var'
+  const labelFontSize =
+    (getVariableByName('checkboxItem/label/fontSize', modes) as number | null) ?? 14
+  const labelLineHeight =
+    (getVariableByName('checkboxItem/label/lineHeight', modes) as number | null) ?? 19
+  const labelFontWeightRaw =
+    getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400
+  const labelFontWeight = String(labelFontWeightRaw) as TextStyle['fontWeight']
+
+  const containerStyle: ViewStyle = useMemo(
+    () => ({
+      flexDirection: isExpanded ? 'column' : 'row',
+      alignItems: isExpanded ? 'flex-end' : 'center',
+      gap,
+      width: '100%',
+      ...(disabled ? { opacity: 0.6 } : null),
+    }),
+    [isExpanded, gap, disabled]
+  )
+
+  const rowStyle: ViewStyle = useMemo(
+    () => ({
+      flex: isExpanded ? undefined : 1,
+      alignSelf: isExpanded ? 'stretch' : 'auto',
+      minWidth: 0,
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      gap: rowGap,
+      paddingHorizontal: rowPaddingHorizontal,
+      paddingVertical: rowPaddingVertical,
+    }),
+    [isExpanded, rowGap, rowPaddingHorizontal, rowPaddingVertical]
+  )
+
+  const resolvedLabelStyle: TextStyle = useMemo(
+    () => ({
+      flex: 1,
+      minWidth: 0,
+      color: labelColor,
+      fontFamily: labelFontFamily,
+      fontSize: labelFontSize,
+      lineHeight: labelLineHeight,
+      fontWeight: labelFontWeight,
+    }),
+    [
+      labelColor,
+      labelFontFamily,
+      labelFontSize,
+      labelLineHeight,
+      labelFontWeight,
+    ]
+  )
+
+  const buttonModes = useMemo(
+    () => ({ ...BUTTON_DEFAULT_MODES, ...modes }),
+    [modes]
+  )
+
+  const a11yLabel =
+    accessibilityLabel ?? (typeof label === 'string' ? label : undefined)
+  const buttonLabel = isExpanded ? readLessLabel : readMoreLabel
+
+  const labelNumberOfLinesProps =
+    !isExpanded && collapsedLines > 0
+      ? { numberOfLines: collapsedLines, ellipsizeMode: 'tail' as const }
+      : null
+
+  return (
+    <View style={[containerStyle, style]}>
+      <View style={rowStyle}>
+        <Checkbox
+          checked={isChecked}
+          disabled={disabled}
+          onValueChange={handleToggleChecked}
+          modes={modes}
+          {...(a11yLabel !== undefined ? { accessibilityLabel: a11yLabel } : {})}
+        />
+        <Text
+          style={[resolvedLabelStyle, labelStyle]}
+          selectable={false}
+          {...(labelNumberOfLinesProps ?? {})}
+        >
+          {label}
+        </Text>
+      </View>
+      <Button
+        label={buttonLabel}
+        onPress={handleToggleExpanded}
+        disabled={disabled}
+        modes={buttonModes}
+        accessibilityLabel={buttonLabel}
+        accessibilityState={{ expanded: isExpanded }}
+      />
+    </View>
+  )
+}
+
+export default ExpandableCheckbox