@webority-technologies/mobile 0.0.15 → 0.0.20

package/lib/commonjs/components/OTPInput/OTPInput.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactNative = require("react-native");
 var _index = require("../../theme/index.js");
 var _index2 = require("../../utils/index.js");
+var _FieldBase = require("../FieldBase/FieldBase.js");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const sizeMap = {
@@ -65,21 +66,28 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
   const previousErrorRef = (0, _react.useRef)(null);
   const shake = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
-  const underlines = (0, _react.useRef)(Array.from({
-    length
-  }, () => new _reactNative.Animated.Value(0))).current;
-  const previousFocusedIndexRef = (0, _react.useRef)(-1);
-
-  // Resize underline array if length prop changes between renders.
-  if (underlines.length !== length) {
-    if (underlines.length < length) {
-      for (let i = underlines.length; i < length; i += 1) {
-        underlines.push(new _reactNative.Animated.Value(0));
+  const underlinesMapRef = (0, _react.useRef)(new Map());
+  const underlines = (0, _react.useMemo)(() => {
+    const map = underlinesMapRef.current;
+    const out = [];
+    for (let i = 0; i < length; i += 1) {
+      let v = map.get(i);
+      if (!v) {
+        v = new _reactNative.Animated.Value(0);
+        map.set(i, v);
       }
-    } else {
-      underlines.length = length;
+      out.push(v);
     }
-  }
+    // Trim stale entries beyond current length.
+    for (const key of Array.from(map.keys())) {
+      if (key >= length) map.delete(key);
+    }
+    return out;
+  }, [length]);
+  const previousFocusedIndexRef = (0, _react.useRef)(-1);
+  const shakeOnError = theme.components.otpInput?.shakeOnError ?? false;
+  const errorHaptic = theme.components.otpInput?.errorHaptic ?? false;
+  const selectionHaptic = theme.components.otpInput?.selectionHaptic ?? false;
   const hasError = Boolean(error);
   const errorMessage = typeof error === 'string' ? error : undefined;
 
@@ -88,32 +96,34 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   (0, _react.useEffect)(() => {
     const isFirstRun = previousErrorRef.current === null;
     if (!isFirstRun && hasError && !previousErrorRef.current) {
-      (0, _index2.triggerHaptic)('notificationError');
-      (0, _index.setNativeValue)(shake, 0);
-      _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
-        toValue: 1,
-        duration: 75,
-        easing: _reactNative.Easing.linear,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shake, {
-        toValue: -1,
-        duration: 75,
-        easing: _reactNative.Easing.linear,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shake, {
-        toValue: 1,
-        duration: 75,
-        easing: _reactNative.Easing.linear,
-        useNativeDriver: true
-      }), _reactNative.Animated.timing(shake, {
-        toValue: 0,
-        duration: 75,
-        easing: _reactNative.Easing.linear,
-        useNativeDriver: true
-      })]).start();
+      if (errorHaptic) (0, _index2.triggerHaptic)('notificationError');
+      if (shakeOnError) {
+        (0, _index.setNativeValue)(shake, 0);
+        _reactNative.Animated.sequence([_reactNative.Animated.timing(shake, {
+          toValue: 1,
+          duration: 75,
+          easing: _reactNative.Easing.linear,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shake, {
+          toValue: -1,
+          duration: 75,
+          easing: _reactNative.Easing.linear,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shake, {
+          toValue: 1,
+          duration: 75,
+          easing: _reactNative.Easing.linear,
+          useNativeDriver: true
+        }), _reactNative.Animated.timing(shake, {
+          toValue: 0,
+          duration: 75,
+          easing: _reactNative.Easing.linear,
+          useNativeDriver: true
+        })]).start();
+      }
     }
     previousErrorRef.current = hasError;
-  }, [hasError, shake]);
+  }, [hasError, shake, shakeOnError, errorHaptic]);
 
   // Animate underline opacity for the focused cell. Skip on first mount
   // (no prior focus state) — values are already at 0 and there's nothing to animate.
@@ -205,7 +215,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     const next = chars.join('').slice(0, length);
     const previousLength = value.length;
     updateValue(next);
-    if (next.length !== previousLength) {
+    if (next.length !== previousLength && selectionHaptic) {
       (0, _index2.triggerHaptic)('selection');
     }
 
@@ -216,7 +226,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
     } else {
       focusCell(nextFocus);
     }
-  }, [cells, focusCell, keyboardType, length, updateValue, value]);
+  }, [cells, focusCell, keyboardType, length, selectionHaptic, updateValue, value]);
   const handleKeyPress = (0, _react.useCallback)((index, e) => {
     const key = e.nativeEvent.key;
     if (key !== 'Backspace') return;
@@ -281,23 +291,26 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
         children: cells.map((char, index) => {
           const isFocused = focusedIndex === index;
           const isFilled = char.length > 0;
-          const borderColor = hasError ? theme.colors.border.error : isFocused ? theme.colors.border.focus : theme.colors.border.primary;
-          const backgroundColor = disabled ? theme.colors.surface.disabled : theme.colors.background.secondary;
           const underlineColor = hasError ? theme.colors.border.error : theme.colors.border.focus;
-          const underlineOpacity = underlines[index] ?? new _reactNative.Animated.Value(0);
+          const underlineOpacity = underlines[index];
+          if (!underlineOpacity) return null;
           const display = secure && isFilled ? '●' : char;
           return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
             style: styles.cellWrapper,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-              style: [styles.cell, {
-                width: sizeStyles.cell,
-                height: sizeStyles.cell,
-                borderRadius: sizeStyles.borderRadius,
-                backgroundColor,
-                borderColor
-              }, cellStyle],
-              accessibilityElementsHidden: true,
-              importantForAccessibility: "no-hide-descendants",
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_FieldBase.FieldBase, {
+              size: size,
+              width: sizeStyles.cell,
+              height: sizeStyles.cell,
+              borderRadius: sizeStyles.borderRadius,
+              borderWidth: 1.5,
+              focused: isFocused,
+              error: hasError,
+              filled: isFilled,
+              disabled: disabled,
+              paddingHorizontal: 0,
+              paddingVertical: 0,
+              gap: 0,
+              style: cellStyle,
               children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
                 ref: node => {
                   inputsRef.current[index] = node;
@@ -367,12 +380,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   cellWrapper: {
     alignItems: 'center'
   },
-  cell: {
-    borderWidth: 1.5,
-    alignItems: 'center',
-    justifyContent: 'center',
-    overflow: 'hidden'
-  },
   input: {
     width: '100%',
     height: '100%',

package/lib/commonjs/components/PickerTrigger/PickerTrigger.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PickerTrigger = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _index2 = require("../FieldBase/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * PickerTrigger — the tappable input field that opens a modal picker.
+ *
+ * Standalone read-only field built on FieldBase, used by DatePicker,
+ * TimePicker and DateRangePicker (and any consumer-built picker) to render
+ * the closed-state row that matches Input / Select pixel-for-pixel.
+ *
+ * The component is purely visual + interactive — it does not own picker
+ * state. Consumers either:
+ *   - Use the built-in trigger mode on a picker, which composes this
+ *     internally and manages its own open/close.
+ *   - Render PickerTrigger themselves alongside a controlled picker.
+ */
+
+const PickerTrigger = exports.PickerTrigger = /*#__PURE__*/(0, _react.forwardRef)((props, _ref) => {
+  const {
+    value,
+    placeholder,
+    label,
+    helperText,
+    error,
+    required = false,
+    onPress,
+    clearable = false,
+    onClear,
+    leadingIcon,
+    trailing,
+    disabled = false,
+    size = 'md',
+    variant,
+    style,
+    triggerStyle,
+    valueStyle,
+    labelStyle,
+    messageStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const sizeTokens = (0, _index2.resolveFieldSize)(theme, size);
+  const fieldText = (0, _index2.resolveFieldTextStyle)(theme, {
+    disabled
+  });
+  const hasValue = typeof value === 'string' && value.length > 0;
+  const hasError = typeof error === 'string' && error.length > 0;
+  const displayText = hasValue ? value : placeholder ?? 'Select…';
+  const valueColor = hasValue ? fieldText.color : fieldText.placeholderColor;
+  const a11ySummary = hasValue ? `${label ?? 'Selection'}: ${value}` : placeholder ?? 'No selection';
+  const a11yLabel = accessibilityLabel ?? a11ySummary;
+  const a11yState = {
+    disabled
+  };
+  const handleClear = () => {
+    if (disabled) return;
+    onClear?.();
+  };
+  const showChevron = trailing === undefined;
+  const showClear = clearable && hasValue && !disabled;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.root, style],
+    testID: testID,
+    children: [label ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
+      style: [styles.label, {
+        color: hasError ? theme.colors.error : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.sm,
+        ...(0, _index.fontFor)(theme, 'medium'),
+        marginBottom: theme.spacing.xxs
+      }, labelStyle],
+      children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: {
+          color: theme.colors.error
+        },
+        children: " *"
+      }) : null]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.FieldBase, {
+      size: size,
+      variant: variant,
+      disabled: disabled,
+      error: hasError,
+      filled: hasValue,
+      onPress: onPress,
+      leading: leadingIcon,
+      trailing: showClear || showChevron || trailing !== null ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: styles.trailingRow,
+        children: [showClear ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          onPress: handleClear,
+          accessibilityRole: "button",
+          accessibilityLabel: "Clear",
+          style: {
+            fontSize: sizeTokens.iconSize,
+            color: theme.colors.text.secondary,
+            paddingHorizontal: 4
+          },
+          children: "\xD7"
+        }) : null, trailing !== undefined ? trailing : showChevron ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Chevron, {
+          size: sizeTokens.iconSize,
+          color: disabled ? theme.colors.text.disabled : theme.colors.text.tertiary
+        }) : null]
+      }) : null,
+      accessibilityLabel: a11yLabel,
+      accessibilityState: a11yState,
+      accessibilityRole: "button",
+      style: triggerStyle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        numberOfLines: 1,
+        style: [styles.valueText, {
+          color: valueColor,
+          fontSize: sizeTokens.fontSize,
+          ...fieldText.weightStyle
+        }, valueStyle],
+        children: displayText
+      })
+    }), hasError || helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+      style: [styles.message, {
+        color: hasError ? theme.colors.error : theme.colors.text.secondary,
+        fontSize: theme.typography.fontSize.xs,
+        marginTop: theme.spacing.xxs
+      }, messageStyle],
+      accessibilityLiveRegion: hasError ? 'polite' : 'none',
+      children: hasError ? error : helperText
+    }) : null]
+  });
+});
+PickerTrigger.displayName = 'PickerTrigger';
+const Chevron = ({
+  size,
+  color
+}) => {
+  // Simple down-pointing triangle drawn with borders — no icon dependency.
+  const half = size / 2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: size,
+      height: size,
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: {
+        width: 0,
+        height: 0,
+        borderLeftWidth: half * 0.7,
+        borderRightWidth: half * 0.7,
+        borderTopWidth: half * 0.7,
+        borderLeftColor: 'transparent',
+        borderRightColor: 'transparent',
+        borderTopColor: color
+      }
+    })
+  });
+};
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  root: {
+    width: '100%'
+  },
+  label: {
+    includeFontPadding: false
+  },
+  valueText: {
+    flex: 1,
+    includeFontPadding: false
+  },
+  message: {
+    includeFontPadding: false
+  },
+  trailingRow: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+var _default = exports.default = PickerTrigger;
+//# sourceMappingURL=PickerTrigger.js.map

package/lib/commonjs/components/{AppIcon → PickerTrigger}/index.js

@@ -3,18 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "AppIcon", {
+Object.defineProperty(exports, "PickerTrigger", {
   enumerable: true,
   get: function () {
-    return _AppIcon.AppIcon;
+    return _PickerTrigger.PickerTrigger;
   }
 });
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
-    return _AppIcon.default;
+    return _PickerTrigger.default;
   }
 });
-var _AppIcon = _interopRequireWildcard(require("./AppIcon.js"));
+var _PickerTrigger = _interopRequireWildcard(require("./PickerTrigger.js"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 //# sourceMappingURL=index.js.map

package/lib/commonjs/components/ProgressBar/ProgressBar.js

@@ -40,6 +40,8 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
     barColor,
     animated = true,
     style,
+    containerStyle,
+    barStyle,
     accessibilityLabel,
     testID
   } = props;
@@ -47,7 +49,11 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
   const clamped = clampProgress(progress);
   const fillAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(clamped)).current;
   const loopAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const widthAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const widthRef = (0, _react.useRef)(0);
+  const determinateDuration = theme.components.progressBar?.determinateAnimationDuration ?? 400;
+  const indeterminateDuration = theme.components.progressBar?.indeterminateLoopDuration ?? 1500;
+  const indeterminateWidth = theme.components.progressBar?.indeterminateWidth ?? '30%';
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const resolvedRadius = radius ?? theme.radius.full;
   const resolvedTrack = trackColor ?? theme.colors.surface.disabled;
@@ -60,17 +66,17 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
     }
     _reactNative.Animated.timing(fillAnim, {
       toValue: clamped,
-      duration: 400,
+      duration: determinateDuration,
       easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
       useNativeDriver: false
     }).start();
-  }, [animated, clamped, fillAnim, isIndeterminate, theme]);
+  }, [animated, clamped, determinateDuration, fillAnim, isIndeterminate, theme]);
   (0, _react.useEffect)(() => {
     if (!isIndeterminate) return;
     (0, _index.setNativeValue)(loopAnim, 0);
     const animation = _reactNative.Animated.loop(_reactNative.Animated.timing(loopAnim, {
       toValue: 1,
-      duration: 1500,
+      duration: indeterminateDuration,
       easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
       useNativeDriver: true
     }));
@@ -78,7 +84,7 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
     return () => {
       animation.stop();
     };
-  }, [isIndeterminate, loopAnim]);
+  }, [isIndeterminate, loopAnim, indeterminateDuration]);
   const determinateWidth = fillAnim.interpolate({
     inputRange: [0, 1],
     outputRange: ['0%', '100%']
@@ -88,7 +94,9 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
     outputRange: [-1, 1]
   });
   const onLayout = event => {
-    widthRef.current = event.nativeEvent.layout.width;
+    const w = event.nativeEvent.layout.width;
+    widthRef.current = w;
+    (0, _index.setNativeValue)(widthAnim, w);
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
     ref: ref,
@@ -107,23 +115,24 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
       height,
       borderRadius: resolvedRadius,
       backgroundColor: resolvedTrack
-    }, style],
+    }, style, containerStyle],
     children: isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [styles.indeterminateBar, {
         height,
         borderRadius: resolvedRadius,
         backgroundColor: resolvedBar,
+        width: indeterminateWidth,
         transform: [{
-          translateX: _reactNative.Animated.multiply(indeterminateTranslate, new _reactNative.Animated.Value(widthRef.current || 0))
+          translateX: _reactNative.Animated.multiply(indeterminateTranslate, widthAnim)
         }]
-      }]
+      }, barStyle]
     }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       style: [styles.determinateBar, {
         height,
         borderRadius: resolvedRadius,
         backgroundColor: resolvedBar,
         width: determinateWidth
-      }]
+      }, barStyle]
     })
   });
 });
@@ -141,8 +150,7 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
   indeterminateBar: {
     position: 'absolute',
     left: 0,
-    top: 0,
-    width: '30%'
+    top: 0
   }
 });
 var _default = exports.default = ProgressBar;

package/lib/commonjs/components/Radio/Radio.js

@@ -50,9 +50,12 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     size = 'md',
     tone = 'primary',
     accessibilityLabel,
-    haptic = 'selection',
+    haptic,
     style,
+    containerStyle,
     circleStyle,
+    dotStyle,
+    labelStyle,
     testID,
     ...rest
   } = props;
@@ -65,8 +68,10 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const sizeOverrides = theme.components.radio?.[size];
   const outer = sizeOverrides?.outer ?? sizeMap[size].outer;
   const inner = sizeOverrides?.inner ?? sizeMap[size].inner;
-  const radioBorderWidth = theme.components.radio?.borderWidth ?? 1.5;
+  const radioBorderWidth = theme.colors.border.width;
   const radioLabelGap = theme.components.radio?.labelGap ?? 10;
+  const pressHapticEnabled = theme.components.radio?.pressHaptic ?? false;
+  const resolvedHaptic = haptic === undefined ? pressHapticEnabled ? 'selection' : false : haptic;
   const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
@@ -83,7 +88,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   });
   const handlePress = event => {
     if (disabled) return;
-    if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
+    if (resolvedHaptic !== false) (0, _hapticUtils.triggerHaptic)(resolvedHaptic);
     if (ctx) {
       ctx.onSelect(value);
     } else {
@@ -110,7 +115,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       pressed
     }) => [styles.row, {
       opacity: disabled ? 0.55 : pressed ? 0.85 : 1
-    }, style],
+    }, style, containerStyle],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.outer, {
         width: outer,
@@ -129,14 +134,14 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
           transform: [{
             scale
           }]
-        }]
+        }, dotStyle]
       })
     }), label ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
       style: [styles.label, {
         marginLeft: radioLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
-      }],
+      }, labelStyle],
       numberOfLines: 2,
       children: label
     }) : null]