jfs-components 0.0.71 → 0.0.73

package/lib/module/components/CardFinancialCondition/CardFinancialCondition.js

@@ -0,0 +1,207 @@
+"use strict";
+
+import React, { useMemo } from 'react';
+import { Text, View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { useTokens } from '../../design-tokens/JFSThemeProvider';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Button from '../Button/Button';
+import CircularProgressBar from '../CircularProgressBar/CircularProgressBar';
+import Divider from '../Divider/Divider';
+import Nudge from '../Nudge/Nudge';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const toNumber = (value, fallback) => {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : fallback;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+  }
+  return fallback;
+};
+const toFontWeight = (value, fallback) => {
+  if (typeof value === 'number') {
+    return String(value);
+  }
+  if (typeof value === 'string') {
+    return value;
+  }
+  return fallback;
+};
+function resolveCardFinancialConditionTokens(modes) {
+  const background = getVariableByName('financialConditionCard/background', modes) || '#ffffff';
+  const radius = toNumber(getVariableByName('financialConditionCard/radius', modes), 16);
+  const paddingH = toNumber(getVariableByName('financialConditionCard/padding/horizontal', modes), 16);
+  const paddingV = toNumber(getVariableByName('financialConditionCard/padding/vertical', modes), 16);
+  const gap = toNumber(getVariableByName('financialConditionCard/gap', modes), 8);
+  const headerGap = toNumber(getVariableByName('financialConditionCard/header/gap', modes), 16);
+  const textContentGap = toNumber(getVariableByName('financialConditionCard/textContent/gap', modes), 8);
+  const titleColor = getVariableByName('financialConditionCard/title/color', modes) || '#0c0d10';
+  const titleFontSize = toNumber(getVariableByName('financialConditionCard/title/fontSize', modes), 16);
+  const titleFontFamily = getVariableByName('financialConditionCard/title/fontFamily', modes) || 'JioType Var';
+  const titleLineHeight = toNumber(getVariableByName('financialConditionCard/title/lineHeight', modes), 18);
+  const titleFontWeight = toFontWeight(getVariableByName('financialConditionCard/title/fontWeight', modes), '700');
+  const bodyColor = getVariableByName('financialConditionCard/body/color', modes) || '#0c0d10';
+  const bodyFontSize = toNumber(getVariableByName('financialConditionCard/body/fontSize', modes), 14);
+  const bodyFontFamily = getVariableByName('financialConditionCard/body/fontFamily', modes) || 'JioType Var';
+  const bodyLineHeight = toNumber(getVariableByName('financialConditionCard/body/lineHeight', modes), 17);
+  const bodyFontWeight = toFontWeight(getVariableByName('financialConditionCard/body/fontWeight', modes), '400');
+  const nudgeBodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f';
+  const nudgeBodyFontSize = toNumber(getVariableByName('nudge/body/fontSize', modes), 12);
+  const nudgeBodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'JioType Var';
+  const nudgeBodyLineHeight = toNumber(getVariableByName('nudge/body/lineHeight', modes), 16);
+  const nudgeBodyFontWeight = toFontWeight(getVariableByName('nudge/body/fontWeight', modes), '500');
+  return {
+    containerStyle: {
+      alignItems: 'flex-start',
+      backgroundColor: background,
+      borderRadius: radius,
+      gap,
+      justifyContent: 'center',
+      overflow: 'hidden',
+      paddingHorizontal: paddingH,
+      paddingVertical: paddingV
+    },
+    headerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap: headerGap,
+      width: '100%'
+    },
+    textContentStyle: {
+      alignItems: 'flex-start',
+      flex: 1,
+      gap: textContentGap,
+      minWidth: 1
+    },
+    titleStyle: {
+      color: titleColor,
+      fontFamily: titleFontFamily,
+      fontSize: titleFontSize,
+      fontWeight: titleFontWeight,
+      lineHeight: titleLineHeight
+    },
+    bodyStyle: {
+      color: bodyColor,
+      fontFamily: bodyFontFamily,
+      fontSize: bodyFontSize,
+      fontWeight: bodyFontWeight,
+      lineHeight: bodyLineHeight
+    },
+    nudgeBodyStyle: {
+      color: nudgeBodyColor,
+      fontFamily: nudgeBodyFontFamily,
+      fontSize: nudgeBodyFontSize,
+      fontWeight: nudgeBodyFontWeight,
+      lineHeight: nudgeBodyLineHeight
+    },
+    buttonWrapStyle: {
+      alignSelf: 'stretch',
+      alignItems: 'flex-start'
+    }
+  };
+}
+function CardFinancialCondition({
+  title = 'Protection',
+  body = 'Check your coverage and gaps',
+  value = 0,
+  progressState = 'Inactive',
+  valueLabel,
+  showNudge = true,
+  nudgeBody = 'There may be gaps in your health or life cover\nAdd coverage to stay financially secure',
+  showDivider = true,
+  showButton = true,
+  buttonLabel = 'View Details',
+  onPressButton,
+  progressSlot,
+  nudgeSlot,
+  buttonSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  headerStyle,
+  titleStyle,
+  bodyStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const tokens = useMemo(() => resolveCardFinancialConditionTokens(modes), [modes]);
+
+  // Match Figma: the action button is the primary call-to-action and uses the
+  // Secondary brand (purple) regardless of the card's overall AppearanceBrand,
+  // while Nudge / CircularProgressBar still follow the user-supplied modes.
+  const buttonModes = useMemo(() => ({
+    ...modes,
+    AppearanceBrand: 'Secondary'
+  }), [modes]);
+  const processedProgressSlot = useMemo(() => {
+    if (!progressSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(progressSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [progressSlot, modes]);
+  const processedNudgeSlot = useMemo(() => {
+    if (!nudgeSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(nudgeSlot), modes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [nudgeSlot, modes]);
+  const processedButtonSlot = useMemo(() => {
+    if (!buttonSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(buttonSlot), buttonModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [buttonSlot, buttonModes]);
+  const defaultAccessibilityLabel = accessibilityLabel ?? `${title}. ${body}.`;
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: [tokens.headerStyle, headerStyle],
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: tokens.textContentStyle,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: [tokens.titleStyle, titleStyle],
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: [tokens.bodyStyle, bodyStyle],
+          children: body
+        })]
+      }), processedProgressSlot || /*#__PURE__*/_jsx(CircularProgressBar, {
+        state: progressState,
+        value: value,
+        modes: modes,
+        ...(valueLabel ? {
+          valueLabel
+        } : {})
+      })]
+    }), showNudge ? processedNudgeSlot || /*#__PURE__*/_jsx(Nudge, {
+      type: "inline-compact",
+      modes: modes,
+      style: {
+        width: '100%'
+      },
+      children: /*#__PURE__*/_jsx(Text, {
+        style: tokens.nudgeBodyStyle,
+        children: nudgeBody
+      })
+    }) : null, showDivider ? /*#__PURE__*/_jsx(Divider, {
+      modes: modes
+    }) : null, showButton ? /*#__PURE__*/_jsx(View, {
+      style: tokens.buttonWrapStyle,
+      children: processedButtonSlot || /*#__PURE__*/_jsx(Button, {
+        label: buttonLabel,
+        modes: buttonModes,
+        ...(onPressButton ? {
+          onPress: onPressButton
+        } : {})
+      })
+    }) : null]
+  });
+}
+export default /*#__PURE__*/React.memo(CardFinancialCondition);

package/lib/module/components/CardInsight/CardInsight.js

@@ -0,0 +1,161 @@
+"use strict";
+
+import React from 'react';
+import { View, Text } 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 Divider from '../Divider/Divider';
+import Nudge from '../Nudge/Nudge';
+import SavingsGoalSummary from '../SavingsGoalSummary/SavingsGoalSummary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * `CardInsight` renders a single insight card composed of:
+ *
+ * 1. A header with a title, subtitle and a trailing `Badge`.
+ * 2. A flexible content slot — defaults to `SavingsGoalSummary`.
+ * 3. A `Divider` separating the slot from the footer.
+ * 4. A footer slot — defaults to an inline-compact `Nudge`.
+ *
+ * @component
+ * @param {CardInsightProps} props
+ */
+function CardInsight({
+  title = 'Emergency savings',
+  subtitle = 'One line explanation here.',
+  badge = 'Label',
+  children,
+  footer,
+  divider,
+  modes = EMPTY_MODES,
+  style
+}) {
+  const background = getVariableByName('cardInsight/background', modes) ?? '#ffffff';
+  const radius = getVariableByName('cardInsight/radius', modes) ?? 16;
+  const paddingHorizontal = getVariableByName('cardInsight/padding/horizontal', modes) ?? 12;
+  const paddingVertical = getVariableByName('cardInsight/padding/vertical', modes) ?? 16;
+  const gap = getVariableByName('cardInsight/gap', modes) ?? 12;
+  const contentGap = getVariableByName('cardInsight/contentGap', modes) ?? 8;
+  const width = getVariableByName('cardInsight/width', modes) ?? 356;
+  const slotBackground = getVariableByName('cardInsight/slot/background', modes) ?? '#ffffff';
+  const headerGap = getVariableByName('cardInsight/header/gap', modes) ?? 8;
+  const textGap = getVariableByName('cardInsight/text/gap', modes) ?? 4;
+  const titleColor = getVariableByName('cardInsight/title/color', modes) ?? '#0d0d0f';
+  const titleFontFamily = getVariableByName('cardInsight/title/fontFamily', modes) ?? 'JioType Var';
+  const titleFontSize = getVariableByName('cardInsight/title/fontSize', modes) ?? 16;
+  const titleLineHeight = getVariableByName('cardInsight/title/lineHeight', modes) ?? 17.6;
+  const titleFontWeightRaw = getVariableByName('cardInsight/title/fontWeight', modes) ?? 700;
+  const titleFontWeight = String(titleFontWeightRaw);
+  const bodyColor = getVariableByName('cardInsight/body/color', modes) ?? '#0d0d0f';
+  const bodyFontFamily = getVariableByName('cardInsight/body/fontFamily', modes) ?? 'JioType Var';
+  const bodyFontSize = getVariableByName('cardInsight/body/fontSize', modes) ?? 12;
+  const bodyLineHeight = getVariableByName('cardInsight/body/lineHeight', modes) ?? 15.6;
+  const bodyFontWeightRaw = getVariableByName('cardInsight/body/fontWeight', modes) ?? 400;
+  const bodyFontWeight = String(bodyFontWeightRaw);
+  const renderBadge = () => {
+    if (badge === false || badge === null || badge === undefined) return null;
+    if (typeof badge === 'string') {
+      return /*#__PURE__*/_jsx(Badge, {
+        label: badge,
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(badge, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderSlot = () => {
+    if (!children) {
+      return /*#__PURE__*/_jsx(SavingsGoalSummary, {
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(children, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderFooter = () => {
+    if (footer === false || footer === null) return null;
+    if (footer === undefined) {
+      return /*#__PURE__*/_jsx(Nudge, {
+        type: "inline-compact",
+        modes: {
+          AppearanceBrand: 'Neutral',
+          Context: 'Nudge&Alert',
+          ...modes
+        }
+      });
+    }
+    const processed = cloneChildrenWithModes(footer, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const renderDivider = () => {
+    if (divider === false || divider === null) return null;
+    if (divider === undefined || divider === true) {
+      return /*#__PURE__*/_jsx(Divider, {
+        modes: modes
+      });
+    }
+    const processed = cloneChildrenWithModes(divider, modes);
+    return processed.length === 1 ? processed[0] : processed;
+  };
+  const footerNode = renderFooter();
+  const showDivider = footerNode !== null && divider !== false && divider !== null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      width,
+      backgroundColor: background,
+      borderRadius: radius,
+      paddingHorizontal,
+      paddingVertical,
+      gap,
+      overflow: 'hidden',
+      alignItems: 'stretch'
+    }, style],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        gap: headerGap,
+        width: '100%'
+      },
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          gap: textGap,
+          alignItems: 'flex-start'
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: {
+            color: titleColor,
+            fontFamily: titleFontFamily,
+            fontSize: titleFontSize,
+            lineHeight: titleLineHeight,
+            fontWeight: titleFontWeight,
+            width: '100%'
+          },
+          children: title
+        }), /*#__PURE__*/_jsx(Text, {
+          style: {
+            color: bodyColor,
+            fontFamily: bodyFontFamily,
+            fontSize: bodyFontSize,
+            lineHeight: bodyLineHeight,
+            fontWeight: bodyFontWeight,
+            width: '100%'
+          },
+          children: subtitle
+        })]
+      }), renderBadge()]
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        width: '100%',
+        backgroundColor: slotBackground,
+        gap: contentGap,
+        overflow: 'hidden',
+        alignItems: 'stretch'
+      },
+      children: renderSlot()
+    }), showDivider ? renderDivider() : null, footerNode]
+  });
+}
+export default CardInsight;

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

@@ -43,6 +43,8 @@ export function Carousel({
   const gap = gapProp ?? tokenGap;
   const containerPaddingH = parseFloat(getVariableByName('carousel/padding/horizontal', modes) || '0');
   const containerPaddingV = parseFloat(getVariableByName('carousel/padding/vertical', modes) || '0');
+  // Outer container max height per Figma (`carousel/maxHeight`).
+  const maxHeight = parseFloat(getVariableByName('carousel/maxHeight', modes) || '280');
   // Spacing between the cards row and the pagination dots uses `carousel/gap`.
   const paginationOffset = gap;
 
@@ -154,7 +156,8 @@ export function Carousel({
 
   // ---- Render ----
   const outerStyle = {
-    paddingVertical: containerPaddingV
+    paddingVertical: containerPaddingV,
+    maxHeight
   };
   const contentContainerStyle = {
     paddingHorizontal: containerPaddingH * 2,
@@ -262,13 +265,12 @@ export function Pagination({
   const modes = propModes || ctxModes || {};
 
   // Token resolution for dots — matches Figma tokens
-  // (carousel/pagination/gap, carousel/pagination/indicator/{activecolor,inactivecolor,radius}).
-  // Dot dimensions are fixed per Figma spec: inactive 6x6, active 16x6.
-  const dotSize = 6;
-  const dotActiveWidth = 16;
+  // (carousel/pagination/gap, carousel/pagination/indicator/{activeColor,inactiveColor,radius,size,activeWidth}).
+  const dotSize = parseFloat(getVariableByName('carousel/pagination/indicator/size', modes) || '6');
+  const dotActiveWidth = parseFloat(getVariableByName('carousel/pagination/indicator/activeWidth', modes) || '16');
   const dotGap = parseFloat(getVariableByName('carousel/pagination/gap', modes) || '4');
-  const dotColor = getVariableByName('carousel/pagination/indicator/inactivecolor', modes) || 'rgba(0,0,0,0.3)';
-  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activecolor', modes) || '#170d0a';
+  const dotColor = getVariableByName('carousel/pagination/indicator/inactiveColor', modes) || 'rgba(0,0,0,0.3)';
+  const dotActiveColor = getVariableByName('carousel/pagination/indicator/activeColor', modes) || '#170d0a';
   const dotRadius = parseFloat(getVariableByName('carousel/pagination/indicator/radius', modes) || '9999');
   const containerStyle = {
     flexDirection: 'row',

package/lib/module/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,62 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import CheckboxItem from '../CheckboxItem/CheckboxItem';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CheckboxGroup composes a vertical stack of `CheckboxItem`s. Spacing and
+ * padding are driven by the `checkboxGroup/*` design tokens so groups stay
+ * visually consistent across screens.
+ *
+ * The `modes` prop is forwarded recursively to all children — including
+ * `CheckboxItem`s and any element rendered inside their `endSlot`.
+ *
+ * @component
+ * @param {CheckboxGroupProps} props
+ *
+ * @example
+ * ```tsx
+ * <CheckboxGroup modes={{ 'Color Mode': 'Light' }}>
+ *   <CheckboxItem label="Fixed deposit • 0245" />
+ *   <CheckboxItem label="Recurring deposit • 1182" />
+ *   <CheckboxItem label="Mutual fund • Equity" />
+ * </CheckboxGroup>
+ * ```
+ */
+function CheckboxGroup({
+  children,
+  modes = EMPTY_MODES,
+  style,
+  accessibilityLabel
+}) {
+  const gap = getVariableByName('checkboxGroup/gap', modes) ?? 12;
+  const paddingHorizontal = getVariableByName('checkboxGroup/padding/horizontal', modes) ?? 0;
+  const paddingVertical = getVariableByName('checkboxGroup/padding/vertical', modes) ?? 0;
+  const containerStyle = {
+    width: '100%',
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    gap,
+    paddingHorizontal,
+    paddingVertical
+  };
+  const items = children ? cloneChildrenWithModes(children, modes) : /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(CheckboxItem, {
+      modes: modes
+    }), /*#__PURE__*/_jsx(CheckboxItem, {
+      modes: modes
+    }), /*#__PURE__*/_jsx(CheckboxItem, {
+      modes: modes
+    })]
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: [containerStyle, style],
+    accessibilityRole: "list",
+    accessibilityLabel: accessibilityLabel,
+    children: items
+  });
+}
+export default CheckboxGroup;

package/lib/module/components/CheckboxItem/CheckboxItem.js

@@ -0,0 +1,119 @@
+"use strict";
+
+import React, { useCallback, useState } from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils';
+import Checkbox from '../Checkbox/Checkbox';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CheckboxItem composes a `Checkbox`, a label and an optional `endSlot` into a
+ * single horizontal pressable row. Pressing anywhere on the row (outside of the
+ * `endSlot`) toggles the checkbox, mirroring the typical native form pattern.
+ *
+ * Mirrors the Figma "Checkbox Item" component and uses the `checkboxItem/*`
+ * design tokens for typography and spacing.
+ *
+ * @component
+ * @param {CheckboxItemProps} props
+ *
+ * @example
+ * ```tsx
+ * const [checked, setChecked] = useState(false)
+ *
+ * <CheckboxItem
+ *   label="Fixed deposit • 0245"
+ *   checked={checked}
+ *   onValueChange={setChecked}
+ *   modes={{ 'Color Mode': 'Light' }}
+ * />
+ * ```
+ */
+function CheckboxItem({
+  checked: controlledChecked,
+  defaultChecked = false,
+  onValueChange,
+  disabled = false,
+  label = 'Fixed deposit • 0245',
+  endSlot,
+  endSlotWidth = 80,
+  modes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel
+}) {
+  const isControlled = controlledChecked !== undefined;
+  const [internalChecked, setInternalChecked] = useState(defaultChecked);
+  const isChecked = isControlled ? controlledChecked : internalChecked;
+  const handleToggle = useCallback(() => {
+    if (disabled) return;
+    const next = !isChecked;
+    if (!isControlled) {
+      setInternalChecked(next);
+    }
+    onValueChange?.(next);
+  }, [disabled, isChecked, isControlled, onValueChange]);
+  const gap = getVariableByName('checkboxItem/gap', modes) ?? 8;
+  const paddingHorizontal = getVariableByName('checkboxItem/padding/horizontal', modes) ?? 0;
+  const paddingVertical = getVariableByName('checkboxItem/padding/vertical', modes) ?? 0;
+  const labelColor = getVariableByName('checkboxItem/foreground', modes) ?? '#1a1c1f';
+  const labelFontFamily = getVariableByName('checkboxItem/label/fontFamily', modes) ?? 'JioType Var';
+  const labelFontSize = getVariableByName('checkboxItem/label/fontSize', modes) ?? 14;
+  const labelLineHeight = getVariableByName('checkboxItem/label/lineHeight', modes) ?? 19;
+  const labelFontWeightRaw = getVariableByName('checkboxItem/label/fontWeight', modes) ?? 400;
+  const labelFontWeight = String(labelFontWeightRaw);
+  const containerStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap,
+    paddingHorizontal,
+    paddingVertical,
+    width: '100%'
+  };
+  const resolvedLabelStyle = {
+    flex: 1,
+    minWidth: 0,
+    color: labelColor,
+    fontFamily: labelFontFamily,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontWeight: labelFontWeight
+  };
+  const a11yLabel = accessibilityLabel ?? (typeof label === 'string' ? label : undefined);
+  return /*#__PURE__*/_jsxs(Pressable, {
+    style: [containerStyle, style],
+    onPress: handleToggle,
+    disabled: disabled,
+    accessibilityRole: "checkbox",
+    accessibilityState: {
+      checked: isChecked,
+      disabled
+    },
+    accessibilityLabel: a11yLabel,
+    children: [/*#__PURE__*/_jsx(Checkbox, {
+      checked: isChecked,
+      disabled: disabled,
+      onValueChange: handleToggle,
+      modes: modes,
+      accessibilityLabel: a11yLabel
+    }), label != null && label !== false ? typeof label === 'string' || typeof label === 'number' ? /*#__PURE__*/_jsx(Text, {
+      style: [resolvedLabelStyle, labelStyle],
+      selectable: false,
+      children: label
+    }) : /*#__PURE__*/_jsx(View, {
+      style: {
+        flex: 1,
+        minWidth: 0
+      },
+      children: label
+    }) : null, endSlot ? /*#__PURE__*/_jsx(View, {
+      style: {
+        width: endSlotWidth,
+        flexShrink: 0,
+        alignItems: 'stretch'
+      },
+      children: cloneChildrenWithModes(endSlot, modes)
+    }) : null]
+  });
+}
+export default CheckboxItem;