@webority-technologies/mobile-ui 0.0.1

package/lib/commonjs/components/PhoneNumberInput/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DEFAULT_CALLING_CODES", {
+  enumerable: true,
+  get: function () {
+    return _PhoneNumberInput.DEFAULT_CALLING_CODES;
+  }
+});
+Object.defineProperty(exports, "PhoneNumberInput", {
+  enumerable: true,
+  get: function () {
+    return _PhoneNumberInput.PhoneNumberInput;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PhoneNumberInput.default;
+  }
+});
+Object.defineProperty(exports, "formatE164", {
+  enumerable: true,
+  get: function () {
+    return _PhoneNumberInput.formatE164;
+  }
+});
+var _PhoneNumberInput = _interopRequireWildcard(require("./PhoneNumberInput.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/PickerTrigger/PickerTrigger.js

@@ -0,0 +1,156 @@
+"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 _Chevron = require("../FieldBase/Chevron.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)(_index2.RequiredMark, {}) : 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.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 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/PickerTrigger/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "PickerTrigger", {
+  enumerable: true,
+  get: function () {
+    return _PickerTrigger.PickerTrigger;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _PickerTrigger.default;
+  }
+});
+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

@@ -0,0 +1,198 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ProgressBar = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const clampProgress = value => {
+  if (typeof value !== 'number' || Number.isNaN(value)) {
+    return 0;
+  }
+  if (value < 0) {
+    return 0;
+  }
+  if (value > 1) {
+    return 1;
+  }
+  return value;
+};
+const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const theme = (0, _index.useTheme)();
+  const {
+    progress,
+    indeterminate: indeterminateProp,
+    height = 6,
+    radius,
+    tone = 'primary',
+    trackColor,
+    barColor,
+    gradient,
+    segments,
+    animated = true,
+    style,
+    containerStyle,
+    barStyle,
+    accessibilityLabel,
+    testID
+  } = props;
+  const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
+  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;
+  const resolvedBar = barColor ?? toneColor(theme, tone);
+  const resolvedGradient = (0, _react.useMemo)(() => {
+    if (!gradient) {
+      return null;
+    }
+    if (typeof gradient === 'string') {
+      return theme.gradients[gradient] ?? null;
+    }
+    return gradient;
+  }, [gradient, theme.gradients]);
+  const hasSegments = Array.isArray(segments) && segments.length > 0;
+  (0, _react.useEffect)(() => {
+    if (isIndeterminate) {
+      return;
+    }
+    if (!animated) {
+      fillAnim.setValue(clamped);
+      return;
+    }
+    _reactNative.Animated.timing(fillAnim, {
+      toValue: clamped,
+      duration: determinateDuration,
+      easing: _reactNative.Easing.bezier(...theme.motion.easing.standard),
+      useNativeDriver: false
+    }).start();
+  }, [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: indeterminateDuration,
+      easing: _reactNative.Easing.inOut(_reactNative.Easing.ease),
+      useNativeDriver: true
+    }));
+    animation.start();
+    return () => {
+      animation.stop();
+    };
+  }, [isIndeterminate, loopAnim, indeterminateDuration]);
+  const determinateWidth = fillAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0%', '100%']
+  });
+  const indeterminateTranslate = loopAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [-1, 1]
+  });
+  const onLayout = event => {
+    const w = event.nativeEvent.layout.width;
+    widthRef.current = w;
+    (0, _index.setNativeValue)(widthAnim, w);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    ref: ref,
+    accessibilityRole: "progressbar",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityValue: isIndeterminate ? {
+      text: 'Loading'
+    } : {
+      min: 0,
+      max: 100,
+      now: Math.round(clamped * 100)
+    },
+    testID: testID,
+    onLayout: onLayout,
+    style: [styles.track, {
+      height,
+      borderRadius: resolvedRadius,
+      backgroundColor: resolvedTrack
+    }, style, containerStyle],
+    children: hasSegments ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.segments, {
+        height
+      }],
+      children: (segments ?? []).map((s, i) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: `${clampProgress(s.value) * 100}%`,
+          height,
+          backgroundColor: s.color ?? toneColor(theme, s.tone ?? 'primary')
+        }
+      }, i))
+    }) : isIndeterminate ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.indeterminateBar, {
+        height,
+        borderRadius: resolvedRadius,
+        backgroundColor: resolvedBar,
+        width: indeterminateWidth,
+        transform: [{
+          translateX: _reactNative.Animated.multiply(indeterminateTranslate, widthAnim)
+        }]
+      }, barStyle]
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [styles.determinateBar, {
+        height,
+        borderRadius: resolvedRadius,
+        backgroundColor: resolvedGradient ? 'transparent' : resolvedBar,
+        width: determinateWidth,
+        overflow: resolvedGradient ? 'hidden' : undefined
+      }, barStyle],
+      children: resolvedGradient ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Gradient, {
+        gradient: resolvedGradient,
+        style: _reactNative.StyleSheet.absoluteFill
+      }) : null
+    })
+  });
+});
+ProgressBar.displayName = 'ProgressBar';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  track: {
+    width: '100%',
+    overflow: 'hidden'
+  },
+  determinateBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  indeterminateBar: {
+    position: 'absolute',
+    left: 0,
+    top: 0
+  },
+  segments: {
+    flexDirection: 'row',
+    width: '100%'
+  }
+});
+var _default = exports.default = ProgressBar;
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProgressBar", {
+  enumerable: true,
+  get: function () {
+    return _ProgressBar.ProgressBar;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ProgressBar.default;
+  }
+});
+var _ProgressBar = _interopRequireWildcard(require("./ProgressBar.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/Radio/Radio.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRadioGroup = exports.default = exports.RadioGroupContext = exports.Radio = void 0;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _index = require("../../theme/index.js");
+var _hapticUtils = require("../../utils/hapticUtils.js");
+var _RadioDot = require("./RadioDot.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const RadioGroupContext = exports.RadioGroupContext = /*#__PURE__*/(0, _react.createContext)(null);
+const useRadioGroup = () => (0, _react.useContext)(RadioGroupContext);
+exports.useRadioGroup = useRadioGroup;
+const toneColor = (theme, tone) => {
+  switch (tone) {
+    case 'success':
+      return theme.colors.success;
+    case 'warning':
+      return theme.colors.warning;
+    case 'error':
+      return theme.colors.error;
+    case 'primary':
+    default:
+      return theme.colors.primary;
+  }
+};
+const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    value,
+    selected: selectedProp,
+    onChange,
+    disabled: disabledProp = false,
+    label,
+    size = 'md',
+    tone = 'primary',
+    accessibilityLabel,
+    haptic,
+    style,
+    containerStyle,
+    circleStyle,
+    dotStyle,
+    labelStyle,
+    testID,
+    ...rest
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
+  const ctx = useRadioGroup();
+  const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
+  const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
+  const fillColor = toneColor(theme, tone);
+  const radioLabelGap = theme.components.radio?.labelGap ?? 10;
+  const handlePress = _event => {
+    if (disabled) {
+      return;
+    }
+    const h = (0, _hapticUtils.resolveHaptic)(haptic, 'selection');
+    if (h) {
+      (0, _hapticUtils.triggerHaptic)(h);
+    }
+    if (ctx) {
+      ctx.onChange(value);
+    } else {
+      onChange?.(value);
+    }
+  };
+  const accessibleLabel = accessibilityLabel ?? label;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Pressable, {
+    ref: ref,
+    onPress: handlePress,
+    disabled: disabled,
+    accessibilityRole: "radio",
+    accessibilityLabel: accessibleLabel,
+    accessibilityState: {
+      checked: selected,
+      disabled
+    },
+    testID: testID,
+    hitSlop: 6,
+    ...rest,
+    style: ({
+      pressed
+    }) => [styles.row, {
+      opacity: disabled ? 0.55 : pressed ? 0.85 : 1
+    }, style, containerStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioDot.RadioDot, {
+      selected: selected,
+      color: fillColor,
+      disabled: disabled,
+      size: size,
+      style: circleStyle,
+      dotStyle: 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]
+  });
+});
+Radio.displayName = 'Radio';
+const buildStyles = _theme => _reactNative.StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  label: {
+    flexShrink: 1
+  }
+});
+var _default = exports.default = Radio;
+//# sourceMappingURL=Radio.js.map

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.RadioDot = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("../../theme/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); }
+/**
+ * RadioDot — the bare animated radio indicator (ring + spring-scaled dot).
+ *
+ * Extracted from Radio so custom option templates (ChoiceGroup `renderOption`,
+ * bespoke cards) can embed the standard indicator without rebuilding the
+ * animation or the disabled/selected colour rules. Purely visual — no press
+ * handling, no a11y role; the parent control owns those.
+ */
+
+const sizeMap = {
+  sm: {
+    outer: 16,
+    inner: 8
+  },
+  md: {
+    outer: 20,
+    inner: 10
+  },
+  lg: {
+    outer: 24,
+    inner: 12
+  }
+};
+const RadioDot = props => {
+  const {
+    selected,
+    color,
+    disabled = false,
+    size = 'md',
+    style,
+    dotStyle
+  } = props;
+  const theme = (0, _index.useTheme)();
+  const styles = (0, _react.useMemo)(() => buildStyles(), []);
+  const fillColor = color ?? theme.colors.primary;
+  let outer;
+  let inner;
+  if (typeof size === 'number') {
+    outer = size;
+    inner = Math.round(size / 2);
+  } else {
+    const overrides = theme.components.radio?.[size];
+    outer = overrides?.outer ?? sizeMap[size].outer;
+    inner = overrides?.inner ?? sizeMap[size].inner;
+  }
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
+  (0, _react.useEffect)(() => {
+    const anim = _reactNative.Animated.spring(progress, {
+      toValue: selected ? 1 : 0,
+      damping: theme.motion.spring.snappy.damping,
+      stiffness: theme.motion.spring.snappy.stiffness,
+      mass: theme.motion.spring.snappy.mass,
+      useNativeDriver: true
+    });
+    anim.start();
+    return () => anim.stop();
+  }, [selected, progress, theme.motion.spring.snappy]);
+  const scale = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1]
+  });
+  const borderColor = disabled ? theme.colors.border.primary : selected ? fillColor : theme.colors.border.primary;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: [styles.outer, {
+      width: outer,
+      height: outer,
+      borderWidth: theme.colors.border.width,
+      borderRadius: outer / 2,
+      borderColor
+    }, style],
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
+      style: [{
+        width: inner,
+        height: inner,
+        borderRadius: inner / 2,
+        backgroundColor: disabled ? theme.colors.text.disabled : fillColor,
+        opacity: progress,
+        transform: [{
+          scale
+        }]
+      }, dotStyle]
+    })
+  });
+};
+exports.RadioDot = RadioDot;
+RadioDot.displayName = 'RadioDot';
+const buildStyles = () => _reactNative.StyleSheet.create({
+  outer: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = RadioDot;
+//# sourceMappingURL=RadioDot.js.map