@webority-technologies/mobile 0.0.7 → 0.0.9

package/lib/commonjs/components/Input/Input.js

@@ -62,6 +62,8 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     variant = 'outlined',
     required = false,
     maxLength,
+    format,
+    parse,
     style,
     inputStyle,
     labelStyle,
@@ -74,7 +76,10 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.input?.[size] ?? {})
+  };
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
   const hasValue = typeof value === 'string' && value.length > 0;
@@ -84,11 +89,11 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const showFloatingLabel = Boolean(label) && !multiline;
 
   // Animations
-  const focusAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current; // 0 -> blurred, 1 -> focused
-  const errorAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current; // 0 -> no error, 1 -> error
-  const labelAnim = (0, _react.useRef)(new _reactNative.Animated.Value(shouldFloat ? 1 : 0)).current;
-  const shakeAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const messageAnim = (0, _react.useRef)(new _reactNative.Animated.Value(hasError || helperText ? 1 : 0)).current;
+  const focusAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const errorAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const labelAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(shouldFloat ? 1 : 0)).current;
+  const shakeAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const messageAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(hasError || helperText ? 1 : 0)).current;
 
   // Focus border animation
   (0, _react.useEffect)(() => {
@@ -224,7 +229,7 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       style: [styles.staticLabel, {
         color: hasError ? theme.colors.error : isFocused ? theme.colors.border.focus : theme.colors.text.secondary,
         fontSize: theme.typography.fontSize.sm,
-        fontWeight: theme.typography.fontWeight.medium,
+        ...(0, _index.fontFor)(theme, 'medium'),
         marginBottom: theme.spacing.xxs
       }, labelStyle],
       children: [label, required ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -258,7 +263,7 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
           left: leftPad,
           color: labelColor,
           fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...(0, _index.fontFor)(theme, 'medium'),
           backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
           paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
           transform: [{
@@ -284,8 +289,11 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
         }, inputStyle],
         placeholder: showFloatingLabel && !shouldFloat ? undefined : placeholder,
         placeholderTextColor: placeholderTextColor,
-        value: value,
-        onChangeText: onChangeText,
+        value: format && value != null ? format(value) : value,
+        onChangeText: text => {
+          if (!onChangeText) return;
+          onChangeText(parse ? parse(text) : text);
+        },
         onFocus: handleFocus,
         onBlur: handleBlur,
         editable: isEditable,

package/lib/commonjs/components/ListItem/ListItem.js

@@ -13,32 +13,38 @@ var _index2 = require("../Swipeable/index.js");
 var _index3 = require("../Skeleton/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); }
-const sizeFor = (theme, size) => {
-  switch (size) {
-    case 'sm':
-      return {
-        paddingVertical: theme.spacing.sm,
-        titleSize: theme.typography.fontSize.sm,
-        subtitleSize: theme.typography.fontSize.xs,
-        minHeight: 44
-      };
-    case 'lg':
-      return {
-        paddingVertical: theme.spacing.lg,
-        titleSize: theme.typography.fontSize.lg,
-        subtitleSize: theme.typography.fontSize.sm,
-        minHeight: 72
-      };
-    case 'md':
-    default:
-      return {
-        paddingVertical: theme.spacing.md,
-        titleSize: theme.typography.fontSize.base,
-        subtitleSize: theme.typography.fontSize.sm,
-        minHeight: 56
-      };
+const SIZE_FALLBACK = {
+  sm: {
+    paddingVertical: 'sm',
+    titleFontSize: 'sm',
+    subtitleFontSize: 'xs',
+    minHeight: 44
+  },
+  md: {
+    paddingVertical: 'md',
+    titleFontSize: 'base',
+    subtitleFontSize: 'sm',
+    minHeight: 56
+  },
+  lg: {
+    paddingVertical: 'lg',
+    titleFontSize: 'lg',
+    subtitleFontSize: 'sm',
+    minHeight: 72
   }
 };
+const sizeFor = (theme, size) => {
+  const tokens = {
+    ...SIZE_FALLBACK[size],
+    ...(theme.components.listItem?.[size] ?? {})
+  };
+  return {
+    paddingVertical: theme.spacing[tokens.paddingVertical],
+    titleSize: theme.typography.fontSize[tokens.titleFontSize],
+    subtitleSize: theme.typography.fontSize[tokens.subtitleFontSize],
+    minHeight: tokens.minHeight
+  };
+};
 const Chevron = ({
   color
 }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -106,7 +112,7 @@ const ListItem = exports.ListItem = /*#__PURE__*/(0, _react.forwardRef)((props,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.title, {
           fontSize: sz.titleSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...(0, _index.fontFor)(theme, 'medium'),
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
         }],
         numberOfLines: 1,
@@ -237,11 +243,11 @@ const buildStyles = theme => _reactNative.StyleSheet.create({
   },
   subtitle: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...(0, _index.fontFor)(theme, 'normal')
   },
   description: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...(0, _index.fontFor)(theme, 'normal')
   }
 });
 var _default = exports.default = ListItem;

package/lib/commonjs/components/Modal/Modal.js

@@ -29,10 +29,10 @@ const Modal = exports.Modal = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const theme = (0, _index.useTheme)();
   const duration = animationDuration ?? theme.motion.duration.normal;
   const screenHeight = _reactNative.Dimensions.get('window').height;
-  const backdropAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const scaleAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0.9)).current;
-  const opacityAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const translateYAnim = (0, _react.useRef)(new _reactNative.Animated.Value(screenHeight)).current;
+  const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const scaleAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0.9)).current;
+  const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const translateYAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(screenHeight)).current;
   const containerRef = (0, _react.useRef)(null);
   const wasVisibleRef = (0, _react.useRef)(false);
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);

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

@@ -57,11 +57,14 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.otpInput?.[size] ?? {})
+  };
   const inputsRef = (0, _react.useRef)([]);
   const [focusedIndex, setFocusedIndex] = (0, _react.useState)(-1);
   const previousErrorRef = (0, _react.useRef)(null);
-  const shake = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const shake = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const underlines = (0, _react.useRef)(Array.from({
     length
   }, () => new _reactNative.Animated.Value(0))).current;
@@ -302,7 +305,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
                 style: [styles.input, {
                   fontSize: sizeStyles.fontSize,
                   color: theme.colors.text.primary,
-                  fontWeight: theme.typography.fontWeight.semibold
+                  ...(0, _index.fontFor)(theme, 'semibold')
                 }, textStyle]
               }), secure && isFilled ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
                 pointerEvents: "none",
@@ -311,7 +314,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
                   style: [{
                     fontSize: sizeStyles.fontSize,
                     color: theme.colors.text.primary,
-                    fontWeight: theme.typography.fontWeight.semibold
+                    ...(0, _index.fontFor)(theme, 'semibold')
                   }, textStyle],
                   children: display
                 })

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

@@ -45,8 +45,8 @@ const ProgressBar = exports.ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((p
   } = props;
   const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
   const clamped = clampProgress(progress);
-  const fillAnim = (0, _react.useRef)(new _reactNative.Animated.Value(clamped)).current;
-  const loopAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const fillAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(clamped)).current;
+  const loopAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const widthRef = (0, _react.useRef)(0);
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const resolvedRadius = radius ?? theme.radius.full;

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

@@ -62,11 +62,12 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const selected = ctx ? ctx.selectedValue === value : !!selectedProp;
   const disabled = ctx ? ctx.disabled || disabledProp : disabledProp;
   const fillColor = toneColor(theme, tone);
-  const {
-    outer,
-    inner
-  } = sizeMap[size];
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(selected ? 1 : 0)).current;
+  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 radioLabelGap = theme.components.radio?.labelGap ?? 10;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
       toValue: selected ? 1 : 0,
@@ -114,6 +115,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       style: [styles.outer, {
         width: outer,
         height: outer,
+        borderWidth: radioBorderWidth,
         borderRadius: outer / 2,
         borderColor
       }, circleStyle],
@@ -131,6 +133,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       })
     }), 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
       }],
@@ -146,13 +149,11 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     alignItems: 'center'
   },
   outer: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
   inner: {},
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/commonjs/components/SearchBar/SearchBar.js

@@ -58,12 +58,16 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     ...rest
   } = props;
   const theme = (0, _index.useTheme)();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [internalValue, setInternalValue] = (0, _react.useState)(value);
   const debouncedValue = (0, _useDebounce.useDebounce)(internalValue, debounceMs ?? 0);
-  const cancelAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const cancelAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
 
   // Keep internal value in sync with controlled value when debouncing.
   (0, _react.useEffect)(() => {
@@ -127,7 +131,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   // Container shrinks left to make room for cancel button on right.
   const cancelTranslateX = cancelAnim.interpolate({
     inputRange: [0, 1],
-    outputRange: [CANCEL_WIDTH, 0]
+    outputRange: [cancelWidth, 0]
   });
   const cancelOpacity = cancelAnim;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -144,7 +148,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
         opacity: disabled ? 0.55 : 1,
         marginRight: cancelAnim.interpolate({
           inputRange: [0, 1],
-          outputRange: [0, CANCEL_WIDTH + theme.spacing.sm]
+          outputRange: [0, cancelWidth + theme.spacing.sm]
         })
       }],
       accessibilityRole: "search",
@@ -199,7 +203,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
     }), showCancel ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
-        width: CANCEL_WIDTH,
+        width: cancelWidth,
         transform: [{
           translateX: cancelTranslateX
         }],
@@ -215,7 +219,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
           style: [styles.cancelText, {
             color: theme.colors.primary,
             fontSize: sizeStyles.fontSize,
-            fontWeight: theme.typography.fontWeight.medium
+            ...(0, _index.fontFor)(theme, 'medium')
           }],
           numberOfLines: 1,
           children: cancelLabel

package/lib/commonjs/components/SegmentedControl/SegmentedControl.js

@@ -52,8 +52,8 @@ const SegmentedControl = exports.SegmentedControl = /*#__PURE__*/(0, _react.forw
 
   // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
   const trackWidthRef = (0, _react.useRef)(0);
-  const thumbTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const thumbWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const thumbTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const thumbWidth = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
   const animateThumb = (0, _react.useCallback)((index, totalWidth) => {
     if (totalWidth <= 0 || segments.length === 0) return;

package/lib/commonjs/components/Select/Select.js

@@ -69,8 +69,8 @@ const Select = exports.Select = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const sheetMaxHeight = Math.round(screenHeight * 0.7);
 
   // Animations: backdrop fade + sheet slide-up.
-  const backdropAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const sheetAnim = (0, _react.useRef)(new _reactNative.Animated.Value(sheetMaxHeight)).current;
+  const backdropAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheetAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(sheetMaxHeight)).current;
   (0, _react.useEffect)(() => {
     if (open) {
       _reactNative.Animated.parallel([_reactNative.Animated.timing(backdropAnim, {
@@ -395,7 +395,7 @@ const Chevron = ({
   size,
   open
 }) => {
-  const rotate = (0, _react.useRef)(new _reactNative.Animated.Value(open ? 1 : 0)).current;
+  const rotate = (0, _react.useRef)((0, _index.createAnimatedValue)(open ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(rotate, {
       toValue: open ? 1 : 0,

package/lib/commonjs/components/Skeleton/Skeleton.js

@@ -52,7 +52,7 @@ const Skeleton = ({
   const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = _index2.Responsive.size(height);
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
   (0, _react.useEffect)(() => {
     progress.setValue(0);

package/lib/commonjs/components/Slider/Slider.js

@@ -70,16 +70,16 @@ const Slider = exports.Slider = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const lastReportedHigh = (0, _react.useRef)(highRef.current);
 
   // Animated x positions (px) for thumbs.
-  const lowX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const highX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const lowX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const highX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
 
   // Press / drag scale animations.
-  const lowScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const highScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const lowScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const highScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
 
   // Label opacity per thumb.
-  const lowLabelOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const highLabelOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const lowLabelOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const highLabelOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
 
   // Track which thumb is actively dragging (to anchor gesture math).
   const dragOffsetRef = (0, _react.useRef)(0);

package/lib/commonjs/components/Spinner/Spinner.js

@@ -23,7 +23,7 @@ const Dot = ({
   delay,
   duration
 }) => {
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
   (0, _react.useEffect)(() => {
     const animation = _reactNative.Animated.loop(_reactNative.Animated.sequence([_reactNative.Animated.delay(delay), _reactNative.Animated.timing(scale, {
       toValue: 1.4,
@@ -66,7 +66,7 @@ const Spinner = exports.Spinner = /*#__PURE__*/(0, _react.forwardRef)((props, re
     testID
   } = props;
   const theme = (0, _index.useTheme)();
-  const fade = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const fade = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(fade, {
       toValue: 1,

package/lib/commonjs/components/Stepper/Stepper.js

@@ -35,8 +35,8 @@ const StepCircle = ({
   onPress
 }) => {
   const isActive = status === 'active';
-  const pulseScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const pulseOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(0.5)).current;
+  const pulseScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const pulseOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0.5)).current;
   (0, _react.useEffect)(() => {
     if (!isActive) {
       pulseScale.setValue(1);
@@ -181,7 +181,7 @@ const Stepper = exports.Stepper = /*#__PURE__*/(0, _react.forwardRef)((props, re
 
   // Connector progress: animates as activeStep changes.
   const initialProgress = total <= 1 ? 0 : activeStep / (total - 1);
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(initialProgress)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(initialProgress)).current;
   const lastTargetRef = (0, _react.useRef)(initialProgress);
   (0, _react.useEffect)(() => {
     const target = total <= 1 ? 0 : activeStep / (total - 1);

package/lib/commonjs/components/Switch/Switch.js

@@ -53,6 +53,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     label,
     accessibilityLabel,
     haptic = 'selection',
+    bounce = false,
     style,
     trackStyle,
     thumbStyle,
@@ -60,11 +61,15 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     ...rest
   } = props;
   const theme = (0, _index.useTheme)();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.switch?.[size] ?? {})
+  };
+  const switchThumbColor = theme.components.switch?.thumbColor ?? '#FFFFFF';
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(value ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
       toValue: value ? 1 : 0,
@@ -74,7 +79,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       useNativeDriver: true
     }).start();
   }, [value, progress, theme.motion.spring.snappy]);
-  const trackBgAnim = (0, _react.useRef)(new _reactNative.Animated.Value(value ? 1 : 0)).current;
+  const trackBgAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(value ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(trackBgAnim, {
       toValue: value ? 1 : 0,
@@ -93,6 +98,28 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
+  const bounceScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const isFirstRender = (0, _react.useRef)(true);
+  (0, _react.useEffect)(() => {
+    if (!bounce) return;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    _reactNative.Animated.sequence([_reactNative.Animated.spring(bounceScale, {
+      toValue: 1.15,
+      damping: 10,
+      stiffness: 220,
+      mass: 1,
+      useNativeDriver: true
+    }), _reactNative.Animated.spring(bounceScale, {
+      toValue: 1,
+      damping: 14,
+      stiffness: 240,
+      mass: 1,
+      useNativeDriver: true
+    })]).start();
+  }, [value, bounce, bounceScale]);
   const handlePress = event => {
     if (disabled) return;
     if (haptic !== false) (0, _hapticUtils.triggerHaptic)(haptic);
@@ -127,11 +154,14 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
       }, trackStyle],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
         style: [styles.thumb, theme.shadows.sm, {
+          backgroundColor: switchThumbColor,
           width: sizeStyles.thumbSize,
           height: sizeStyles.thumbSize,
           borderRadius: sizeStyles.thumbSize / 2,
           transform: [{
             translateX
+          }, {
+            scale: bounceScale
           }]
         }, thumbStyle]
       })
@@ -160,7 +190,6 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     justifyContent: 'center'
   },
   thumb: {
-    backgroundColor: '#FFFFFF',
     position: 'absolute',
     top: 2
   },

package/lib/commonjs/components/Tabs/Tabs.js

@@ -39,8 +39,8 @@ const Tabs = exports.Tabs = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =>
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = (0, _react.useState)({});
-  const indicatorTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const indicatorWidth = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const indicatorWidth = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const activeLayout = layouts[activeKey];
 
   // Animate indicator whenever activeKey or its layout changes.

package/lib/commonjs/components/TimePicker/TimePicker.js

@@ -65,7 +65,7 @@ const Wheel = ({
   testID
 }) => {
   const listRef = (0, _react.useRef)(null);
-  const scrollY = (0, _react.useRef)(new _reactNative.Animated.Value(selectedIndex * ITEM_HEIGHT)).current;
+  const scrollY = (0, _react.useRef)((0, _index.createAnimatedValue)(selectedIndex * ITEM_HEIGHT)).current;
   const lastIndexRef = (0, _react.useRef)(selectedIndex);
   const lastHapticAtRef = (0, _react.useRef)(0);
 
@@ -264,8 +264,8 @@ const TimePicker = ({
   }, [visible, value, format, minuteStep, hours, minutes]);
 
   // Sheet animations.
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(40)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(40)).current;
   (0, _react.useEffect)(() => {
     if (visible) {
       _reactNative.Animated.parallel([_reactNative.Animated.timing(opacity, {

package/lib/commonjs/components/Toast/Toast.js

@@ -23,10 +23,15 @@ const Toast = ({
   const position = toast.position ?? 'bottom';
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
+  const toastTokens = theme.components.toast;
+  const iconCircleSize = toastTokens?.iconCircleSize ?? 28;
+  const iconCircleBorderRadius = toastTokens?.iconCircleBorderRadius ?? 14;
+  const iconGlyphFontSize = toastTokens?.iconGlyphFontSize ?? 16;
+  const tintBarWidth = toastTokens?.tintBarWidth ?? 4;
   const enterFrom = position === 'top' ? -120 : 120;
-  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(enterFrom)).current;
-  const translateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(enterFrom)).current;
+  const translateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const dismissedRef = (0, _react.useRef)(false);
   const dismiss = (animateOut = true) => {
     if (dismissedRef.current) return;
@@ -112,11 +117,15 @@ const Toast = ({
     if (!glyph) return null;
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.iconCircle, {
+        width: iconCircleSize,
+        height: iconCircleSize,
+        borderRadius: iconCircleBorderRadius,
         backgroundColor: tint + '22'
       }],
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
         style: [styles.iconGlyph, {
-          color: tint
+          color: tint,
+          fontSize: iconGlyphFontSize
         }],
         accessible: false,
         children: glyph
@@ -143,9 +152,10 @@ const Toast = ({
       }, {
         scale: stackScale
       }]
-    }],
+    }, toast.style],
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: [styles.tintBar, {
+        width: tintBarWidth,
         backgroundColor: tint
       }]
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
@@ -156,8 +166,8 @@ const Toast = ({
           style: [styles.message, {
             color: theme.colors.text.primary,
             fontSize: theme.typography.fontSize.base,
-            fontWeight: theme.typography.fontWeight.semibold
-          }],
+            ...(0, _index.fontFor)(theme, 'semibold')
+          }, toast.textStyle],
           numberOfLines: 2,
           children: toast.message
         }), toast.description ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
@@ -181,7 +191,7 @@ const Toast = ({
           style: {
             color: tint,
             fontSize: theme.typography.fontSize.sm,
-            fontWeight: theme.typography.fontWeight.semibold
+            ...(0, _index.fontFor)(theme, 'semibold')
           },
           numberOfLines: 1,
           children: toast.action.label
@@ -230,8 +240,7 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     position: 'absolute',
     left: 0,
     top: 0,
-    bottom: 0,
-    width: 4
+    bottom: 0
   },
   row: {
     flexDirection: 'row',
@@ -239,15 +248,11 @@ const buildStyles = _theme => _reactNative.StyleSheet.create({
     paddingLeft: 8
   },
   iconCircle: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
     alignItems: 'center',
     justifyContent: 'center',
     marginRight: 12
   },
   iconGlyph: {
-    fontSize: 16,
     fontWeight: '700',
     lineHeight: 18
   },