jfs-components 0.0.71 → 0.0.72

package/lib/module/components/CardAdvisory/CardAdvisory.js

@@ -31,8 +31,8 @@ const toFontWeight = (value, fallback) => {
 function resolveCardAdvisoryTokens(modes) {
   const width = toNumber(getVariableByName('cardAdvisory/width', modes), 360);
   const gap = toNumber(getVariableByName('cardAdvisory/gap', modes), 16);
-  const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 16);
-  const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 12);
+  const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0);
+  const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0);
   const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0);
   const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff';
   const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16);

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/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/HoldingsCard/HoldingsCard.js

@@ -3,7 +3,7 @@
 import React from 'react';
 import { View, Text, Pressable, Image } from 'react-native';
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
-import RadioButton from '../RadioButton/RadioButton';
+import Radio from '../Radio/Radio';
 import { EMPTY_MODES } from '../../utils/react-utils';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const GRID_COLUMNS = 3;
@@ -123,7 +123,7 @@ export default function HoldingsCard({
         }
       }), /*#__PURE__*/_jsx(View, {
         pointerEvents: "none",
-        children: /*#__PURE__*/_jsx(RadioButton, {
+        children: /*#__PURE__*/_jsx(Radio, {
           selected: selected,
           disabled: disabled,
           modes: modes

package/lib/module/components/InstitutionBadge/InstitutionBadge.js

@@ -0,0 +1,127 @@
+"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 MediaSource from '../../utils/MediaSource';
+
+// Default avatar asset (shared with the Avatar component) so that
+// InstitutionBadge has a sensible visual fallback when no `source` is
+// provided in stories or playgrounds.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_AVATAR_IMAGE = require('../Avatar/31595e70c4181263f9971590224b12934b280c9b.png');
+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 resolveInstitutionBadgeTokens(modes) {
+  const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8);
+  const foreground = getVariableByName('institutionBadge/foreground', modes) || '#080d1a';
+  const fontSize = toNumber(getVariableByName('institutionBadge/fontSize', modes), 14);
+  const fontFamily = getVariableByName('institutionBadge/fontFamily', modes) || 'JioType Var';
+  const lineHeight = toNumber(getVariableByName('institutionBadge/lineHeight', modes), 18);
+  const fontWeight = toFontWeight(getVariableByName('institutionBadge/fontWeight', modes), '500');
+
+  // Avatar wrapper styled from shared `avatar/*` tokens so the badge stays
+  // visually consistent with other Avatar-bearing components.
+  const avatarSize = toNumber(getVariableByName('avatar/size', modes), 36);
+  const avatarRadiusRaw = toNumber(getVariableByName('avatar/radius', modes), 9999);
+  // 9999 is the design-token sentinel for "perfect circle".
+  const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw;
+  const avatarBorderColor = getVariableByName('avatar/border/color', modes) || 'rgba(255,255,255,0)';
+  const avatarBorderSize = toNumber(getVariableByName('avatar/border/size', modes), 1);
+  return {
+    containerStyle: {
+      alignItems: 'center',
+      flexDirection: 'row',
+      gap
+    },
+    avatarStyle: {
+      width: avatarSize,
+      height: avatarSize,
+      borderRadius: avatarRadius,
+      borderWidth: avatarBorderSize,
+      borderColor: avatarBorderColor,
+      overflow: 'hidden'
+    },
+    avatarSize,
+    labelStyle: {
+      color: foreground,
+      fontFamily,
+      fontSize,
+      fontWeight,
+      lineHeight
+    }
+  };
+}
+
+// Default Avatar Size = M (36px in tokens) — matches the Figma badge. Callers
+// can override via `modes` if needed.
+const DEFAULT_AVATAR_MODE = 'M';
+function InstitutionBadge({
+  label = 'State Bank of India',
+  source,
+  avatarSlot,
+  modes: propModes = EMPTY_MODES,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  ...rest
+}) {
+  const {
+    modes: globalModes
+  } = useTokens();
+  const modes = useMemo(() => globalModes === EMPTY_MODES && propModes === EMPTY_MODES ? EMPTY_MODES : {
+    ...globalModes,
+    ...propModes
+  }, [globalModes, propModes]);
+  const avatarModes = useMemo(() => ({
+    'Avatar Size': DEFAULT_AVATAR_MODE,
+    ...modes
+  }), [modes]);
+  const tokens = useMemo(() => resolveInstitutionBadgeTokens(avatarModes), [avatarModes]);
+  const processedAvatarSlot = useMemo(() => {
+    if (!avatarSlot) return null;
+    const processed = cloneChildrenWithModes(React.Children.toArray(avatarSlot), avatarModes);
+    return processed.length === 1 ? processed[0] : processed;
+  }, [avatarSlot, avatarModes]);
+  const resolvedSource = source ?? DEFAULT_AVATAR_IMAGE;
+  const defaultAccessibilityLabel = accessibilityLabel ?? label;
+  return /*#__PURE__*/_jsxs(View, {
+    accessibilityLabel: defaultAccessibilityLabel,
+    style: [tokens.containerStyle, style],
+    ...rest,
+    children: [processedAvatarSlot || /*#__PURE__*/_jsx(View, {
+      style: tokens.avatarStyle,
+      children: /*#__PURE__*/_jsx(MediaSource, {
+        source: resolvedSource,
+        size: tokens.avatarSize,
+        resizeMode: "cover",
+        accessibilityElementsHidden: true,
+        importantForAccessibility: "no"
+      })
+    }), /*#__PURE__*/_jsx(Text, {
+      style: [tokens.labelStyle, labelStyle],
+      numberOfLines: 1,
+      children: label
+    })]
+  });
+}
+export default /*#__PURE__*/React.memo(InstitutionBadge);

package/lib/module/components/Radio/Radio.js

@@ -0,0 +1,188 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { Pressable, View, Platform } from 'react-native';
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver';
+import { EMPTY_MODES } from '../../utils/react-utils';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+import { jsx as _jsx } from "react/jsx-runtime";
+// ---------------------------------------------------------------------------
+// Radio
+// ---------------------------------------------------------------------------
+
+export function Radio({
+  selected = false,
+  disabled = false,
+  onPress,
+  modes = EMPTY_MODES,
+  style,
+  testID
+}) {
+  // ---- Refs & State ----
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [pressed, setPressed] = useState(false);
+
+  // ---- Dimensions ----
+  const widthStr = getVariableByName('radio/width', modes) || '18';
+  const heightStr = getVariableByName('radio/height', modes) || '18';
+  const selectorSizeStr = getVariableByName('radio/selector/size', modes) || '10';
+  const width = parseFloat(widthStr?.toString() || '18');
+  const height = parseFloat(heightStr?.toString() || '18');
+  const selectorSize = parseFloat(selectorSizeStr?.toString() || '10');
+
+  // ---- State Logic ----
+  // Priority: Disabled -> Focused -> Hover/Pressed -> Idle
+  // Note: Design treats Active (Pressed) similar to Selected for some styles, 
+  // but usually in Radios, Pressed is a transient state.
+  // We will map:
+  // - Disabled -> 'disabled'
+  // - Focused -> 'focus'
+  // - Hovered -> 'hover'
+  // - Idle -> 'idle'
+
+  // We handle `selected` as a separate dimension derived from state.
+
+  let visualState = 'idle';
+  if (disabled) {
+    visualState = 'disabled';
+  } else if (focused) {
+    visualState = 'focus';
+  } else if (hovered || pressed) {
+    visualState = 'hover';
+  }
+
+  // Construct token paths based on state + selected
+  let prefix = `radio/${visualState}`;
+  if (visualState === 'idle' && selected) {
+    prefix = `radio/selected`;
+  } else if (selected) {
+    prefix = `radio/${visualState}Selected`;
+  }
+
+  // ---- Colors & Border ----
+
+  const resolveColor = (path, fallback) => {
+    return getVariableByName(path, modes) || fallback;
+  };
+
+  // Background Color
+  let bgColorVar = `${prefix}/background/color`;
+  // Fix for disabledSelected weirdness if needed
+  if (visualState === 'disabled' && selected) {
+    // Check specific path from dump: `radio/disabledSelected/background`
+    if (!getVariableByName(`${prefix}/background/color`, modes)) {
+      bgColorVar = `${prefix}/background`;
+    }
+  }
+
+  // Border Color
+  let borderColorVar = `${prefix}/border/color`;
+
+  // Border Width
+  let borderWidthVar = `${prefix}/border/size`;
+  // Fix for huge path: `radio/disabled/radio/disabled/border/size`
+  if (visualState === 'disabled' && !selected) {
+    if (getVariableByName('radio/disabled/radio/disabled/border/size', modes)) {
+      borderWidthVar = 'radio/disabled/radio/disabled/border/size';
+    }
+  }
+
+  // Selector Color
+  let selectorBgVar = `${prefix}/selector/background/color`;
+  if (!selected) {
+    selectorBgVar = 'transparent';
+  }
+
+  // Shadows (Glow)
+  let shadowSizeVar = `${prefix}/boxShadow/size`;
+  let shadowColorVar = `${prefix}/shadow/color`;
+
+  // Resolve Values
+  const backgroundColor = resolveColor(bgColorVar, 'transparent');
+  const borderColor = resolveColor(borderColorVar, 'transparent');
+  const borderWidth = parseFloat(getVariableByName(borderWidthVar, modes)?.toString() || '1');
+  const selectorColor = resolveColor(selectorBgVar, 'transparent');
+  const shadowSize = parseFloat(getVariableByName(shadowSizeVar, modes)?.toString() || '0');
+  const shadowColor = resolveColor(shadowColorVar, 'transparent');
+
+  // Styles
+  const containerStyle = {
+    width,
+    height,
+    borderRadius: width / 2,
+    // 9999px -> circle
+    borderWidth,
+    borderColor,
+    backgroundColor,
+    justifyContent: 'center',
+    alignItems: 'center',
+    // Web shadow (ring)
+    ...(Platform.OS === 'web' && shadowSize > 0 ? {
+      boxShadow: `0px 0px 0px ${shadowSize}px ${shadowColor}`
+    } : {})
+  };
+  const selectorStyle = {
+    width: selectorSize,
+    height: selectorSize,
+    borderRadius: selectorSize / 2,
+    backgroundColor: selectorColor
+  };
+
+  // Dummy block for token extraction (static analysis)
+  if (false) {
+    getVariableByName('radio/idle/background/color');
+    getVariableByName('radio/idle/border/color');
+    getVariableByName('radio/selector/size');
+    getVariableByName('radio/width');
+    getVariableByName('radio/height');
+    getVariableByName('radio/background/color');
+    getVariableByName('radio/hover/background/color');
+    getVariableByName('radio/hover/border/color');
+    getVariableByName('radio/hover/boxShadow/size');
+    getVariableByName('radio/hover/shadow/color');
+    getVariableByName('radio/selected/background/color');
+    getVariableByName('radio/selected/border/color');
+    getVariableByName('radio/selected/selector/background/color');
+    getVariableByName('radio/hoverSelected/background/color');
+    getVariableByName('radio/hoverSelected/border/color');
+    getVariableByName('radio/hoverSelected/boxShadow/size');
+    getVariableByName('radio/hoverSelected/shadow/color');
+    getVariableByName('radio/hoverSelected/selector/background/color');
+    getVariableByName('radio/focus/background/color');
+    getVariableByName('radio/focus/border/color');
+    getVariableByName('radio/focus/border/size');
+    getVariableByName('radio/focus/boxShadow/size');
+    getVariableByName('radio/focus/shadow/color');
+    getVariableByName('radio/focusSelected/background/color');
+    getVariableByName('radio/focusSelected/selector/background/color');
+    getVariableByName('radio/focusSelected/border/size');
+    getVariableByName('radio/disabled/radio/disabled/border/size');
+    getVariableByName('radio/disabled/background/color');
+    getVariableByName('radio/disabled/border/color');
+    getVariableByName('radio/disabledSelected/selector/background/color');
+    getVariableByName('radio/disabledSelected/background');
+    getVariableByName('radio/disabledSelected/border/color');
+  }
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID,
+    disabled: disabled,
+    onPress: onPress,
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    onPressIn: () => setPressed(true),
+    onPressOut: () => setPressed(false),
+    style: ({
+      pressed: isPressed
+    }) => [containerStyle, style],
+    children: /*#__PURE__*/_jsx(View, {
+      style: selectorStyle
+    })
+  });
+}
+export default Radio;