@webority-technologies/mobile 0.0.7 → 0.0.9

package/lib/module/components/Input/Input.js

@@ -5,7 +5,7 @@ import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from '
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore - react-native-vector-icons ships no bundled types in this version
 import Feather from 'react-native-vector-icons/Feather';
-import { useTheme } from "../../theme/index.js";
+import { createAnimatedValue, fontFor, useTheme } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -55,6 +55,8 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
     variant = 'outlined',
     required = false,
     maxLength,
+    format,
+    parse,
     style,
     inputStyle,
     labelStyle,
@@ -67,7 +69,10 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.input?.[size] ?? {})
+  };
   const [isFocused, setIsFocused] = useState(false);
   const [isPasswordVisible, setIsPasswordVisible] = useState(false);
   const hasValue = typeof value === 'string' && value.length > 0;
@@ -77,11 +82,11 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
   const showFloatingLabel = Boolean(label) && !multiline;
 
   // Animations
-  const focusAnim = useRef(new Animated.Value(0)).current; // 0 -> blurred, 1 -> focused
-  const errorAnim = useRef(new Animated.Value(0)).current; // 0 -> no error, 1 -> error
-  const labelAnim = useRef(new Animated.Value(shouldFloat ? 1 : 0)).current;
-  const shakeAnim = useRef(new Animated.Value(0)).current;
-  const messageAnim = useRef(new Animated.Value(hasError || helperText ? 1 : 0)).current;
+  const focusAnim = useRef(createAnimatedValue(0)).current;
+  const errorAnim = useRef(createAnimatedValue(0)).current;
+  const labelAnim = useRef(createAnimatedValue(shouldFloat ? 1 : 0)).current;
+  const shakeAnim = useRef(createAnimatedValue(0)).current;
+  const messageAnim = useRef(createAnimatedValue(hasError || helperText ? 1 : 0)).current;
 
   // Focus border animation
   useEffect(() => {
@@ -217,7 +222,7 @@ const Input = /*#__PURE__*/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,
+        ...fontFor(theme, 'medium'),
         marginBottom: theme.spacing.xxs
       }, labelStyle],
       children: [label, required ? /*#__PURE__*/_jsx(Text, {
@@ -251,7 +256,7 @@ const Input = /*#__PURE__*/forwardRef((props, ref) => {
           left: leftPad,
           color: labelColor,
           fontSize: sizeStyles.fontSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...fontFor(theme, 'medium'),
           backgroundColor: shouldFloat && variant === 'outlined' ? theme.colors.background.primary : 'transparent',
           paddingHorizontal: shouldFloat && variant === 'outlined' ? 4 : 0,
           transform: [{
@@ -277,8 +282,11 @@ const Input = /*#__PURE__*/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/module/components/ListItem/ListItem.js

@@ -2,38 +2,44 @@
 
 import React, { forwardRef, useMemo } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme } from "../../theme/index.js";
 import { usePressAnimation } from "../../hooks/usePressAnimation.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { Swipeable } from "../Swipeable/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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__*/_jsx(Text, {
@@ -101,7 +107,7 @@ const ListItem = /*#__PURE__*/forwardRef((props, ref) => {
       children: [/*#__PURE__*/_jsx(Text, {
         style: [styles.title, {
           fontSize: sz.titleSize,
-          fontWeight: theme.typography.fontWeight.medium,
+          ...fontFor(theme, 'medium'),
           color: disabled ? theme.colors.text.disabled : theme.colors.text.primary
         }],
         numberOfLines: 1,
@@ -232,11 +238,11 @@ const buildStyles = theme => StyleSheet.create({
   },
   subtitle: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...fontFor(theme, 'normal')
   },
   description: {
     marginTop: 2,
-    fontWeight: theme.typography.fontWeight.normal
+    ...fontFor(theme, 'normal')
   }
 });
 export { ListItem };

package/lib/module/components/Modal/Modal.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { AccessibilityInfo, Animated, Dimensions, findNodeHandle, Modal as RNModal, Pressable, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Modal = /*#__PURE__*/forwardRef((props, ref) => {
@@ -24,10 +24,10 @@ const Modal = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const duration = animationDuration ?? theme.motion.duration.normal;
   const screenHeight = Dimensions.get('window').height;
-  const backdropAnim = useRef(new Animated.Value(0)).current;
-  const scaleAnim = useRef(new Animated.Value(0.9)).current;
-  const opacityAnim = useRef(new Animated.Value(0)).current;
-  const translateYAnim = useRef(new Animated.Value(screenHeight)).current;
+  const backdropAnim = useRef(createAnimatedValue(0)).current;
+  const scaleAnim = useRef(createAnimatedValue(0.9)).current;
+  const opacityAnim = useRef(createAnimatedValue(0)).current;
+  const translateYAnim = useRef(createAnimatedValue(screenHeight)).current;
   const containerRef = useRef(null);
   const wasVisibleRef = useRef(false);
   const styles = useMemo(() => buildStyles(theme), [theme]);

package/lib/module/components/OTPInput/OTPInput.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -52,11 +52,14 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.otpInput?.[size] ?? {})
+  };
   const inputsRef = useRef([]);
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const previousErrorRef = useRef(null);
-  const shake = useRef(new Animated.Value(0)).current;
+  const shake = useRef(createAnimatedValue(0)).current;
   const underlines = useRef(Array.from({
     length
   }, () => new Animated.Value(0))).current;
@@ -297,7 +300,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
                 style: [styles.input, {
                   fontSize: sizeStyles.fontSize,
                   color: theme.colors.text.primary,
-                  fontWeight: theme.typography.fontWeight.semibold
+                  ...fontFor(theme, 'semibold')
                 }, textStyle]
               }), secure && isFilled ? /*#__PURE__*/_jsx(View, {
                 pointerEvents: "none",
@@ -306,7 +309,7 @@ const OTPInput = /*#__PURE__*/forwardRef((props, ref) => {
                   style: [{
                     fontSize: sizeStyles.fontSize,
                     color: theme.colors.text.primary,
-                    fontWeight: theme.typography.fontWeight.semibold
+                    ...fontFor(theme, 'semibold')
                   }, textStyle],
                   children: display
                 })

package/lib/module/components/ProgressBar/ProgressBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const toneColor = (theme, tone) => {
   switch (tone) {
@@ -40,8 +40,8 @@ const ProgressBar = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const isIndeterminate = indeterminateProp ?? typeof progress !== 'number';
   const clamped = clampProgress(progress);
-  const fillAnim = useRef(new Animated.Value(clamped)).current;
-  const loopAnim = useRef(new Animated.Value(0)).current;
+  const fillAnim = useRef(createAnimatedValue(clamped)).current;
+  const loopAnim = useRef(createAnimatedValue(0)).current;
   const widthRef = useRef(0);
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const resolvedRadius = radius ?? theme.radius.full;

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

@@ -2,7 +2,7 @@
 
 import React, { createContext, forwardRef, useContext, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const RadioGroupContext = /*#__PURE__*/createContext(null);
@@ -56,11 +56,12 @@ const Radio = /*#__PURE__*/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 = useRef(new 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 = useRef(createAnimatedValue(selected ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
       toValue: selected ? 1 : 0,
@@ -108,6 +109,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       style: [styles.outer, {
         width: outer,
         height: outer,
+        borderWidth: radioBorderWidth,
         borderRadius: outer / 2,
         borderColor
       }, circleStyle],
@@ -125,6 +127,7 @@ const Radio = /*#__PURE__*/forwardRef((props, ref) => {
       })
     }), label ? /*#__PURE__*/_jsx(Text, {
       style: [styles.label, {
+        marginLeft: radioLabelGap,
         color: disabled ? theme.colors.text.disabled : theme.colors.text.primary,
         fontSize: theme.typography.fontSize.base
       }],
@@ -140,13 +143,11 @@ const buildStyles = _theme => StyleSheet.create({
     alignItems: 'center'
   },
   outer: {
-    borderWidth: 1.5,
     alignItems: 'center',
     justifyContent: 'center'
   },
   inner: {},
   label: {
-    marginLeft: 10,
     flexShrink: 1
   }
 });

package/lib/module/components/SearchBar/SearchBar.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { useDebounce } from "../../hooks/useDebounce.js";
 import { AppIcon } from "../AppIcon/index.js";
@@ -53,12 +53,16 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.searchBar?.[size] ?? {})
+  };
+  const cancelWidth = theme.components.searchBar?.cancelButtonWidth ?? CANCEL_WIDTH;
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const [isFocused, setIsFocused] = useState(false);
   const [internalValue, setInternalValue] = useState(value);
   const debouncedValue = useDebounce(internalValue, debounceMs ?? 0);
-  const cancelAnim = useRef(new Animated.Value(0)).current;
+  const cancelAnim = useRef(createAnimatedValue(0)).current;
 
   // Keep internal value in sync with controlled value when debouncing.
   useEffect(() => {
@@ -122,7 +126,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
   // 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__*/_jsxs(View, {
@@ -139,7 +143,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
         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",
@@ -194,7 +198,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
     }), showCancel ? /*#__PURE__*/_jsx(Animated.View, {
       pointerEvents: showCancelButton ? 'auto' : 'none',
       style: [styles.cancelWrap, {
-        width: CANCEL_WIDTH,
+        width: cancelWidth,
         transform: [{
           translateX: cancelTranslateX
         }],
@@ -210,7 +214,7 @@ const SearchBar = /*#__PURE__*/forwardRef((props, ref) => {
           style: [styles.cancelText, {
             color: theme.colors.primary,
             fontSize: sizeStyles.fontSize,
-            fontWeight: theme.typography.fontWeight.medium
+            ...fontFor(theme, 'medium')
           }],
           numberOfLines: 1,
           children: cancelLabel

package/lib/module/components/SegmentedControl/SegmentedControl.js

@@ -10,7 +10,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -47,8 +47,8 @@ const SegmentedControl = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Total track width — measured from onLayout; thumb width = trackWidth / segments.length.
   const trackWidthRef = useRef(0);
-  const thumbTranslateX = useRef(new Animated.Value(0)).current;
-  const thumbWidth = useRef(new Animated.Value(0)).current;
+  const thumbTranslateX = useRef(createAnimatedValue(0)).current;
+  const thumbWidth = useRef(createAnimatedValue(0)).current;
   const activeIndex = Math.max(0, segments.findIndex(s => s.value === value));
   const animateThumb = useCallback((index, totalWidth) => {
     if (totalWidth <= 0 || segments.length === 0) return;

package/lib/module/components/Select/Select.js

@@ -10,7 +10,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Dimensions, Easing, FlatList, Modal, Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -64,8 +64,8 @@ const Select = /*#__PURE__*/forwardRef((props, ref) => {
   const sheetMaxHeight = Math.round(screenHeight * 0.7);
 
   // Animations: backdrop fade + sheet slide-up.
-  const backdropAnim = useRef(new Animated.Value(0)).current;
-  const sheetAnim = useRef(new Animated.Value(sheetMaxHeight)).current;
+  const backdropAnim = useRef(createAnimatedValue(0)).current;
+  const sheetAnim = useRef(createAnimatedValue(sheetMaxHeight)).current;
   useEffect(() => {
     if (open) {
       Animated.parallel([Animated.timing(backdropAnim, {
@@ -390,7 +390,7 @@ const Chevron = ({
   size,
   open
 }) => {
-  const rotate = useRef(new Animated.Value(open ? 1 : 0)).current;
+  const rotate = useRef(createAnimatedValue(open ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(rotate, {
       toValue: open ? 1 : 0,

package/lib/module/components/Skeleton/Skeleton.js

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, StyleSheet, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { Responsive } from "../../utils/index.js";
 import { useSkeletonDefaults } from "./SkeletonProvider.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -47,7 +47,7 @@ const Skeleton = ({
   const borderRadius = resolveRadius(theme, resolvedRadiusToken);
   const resolvedWidth = resolveWidth(width);
   const resolvedHeight = Responsive.size(height);
-  const progress = useRef(new Animated.Value(0)).current;
+  const progress = useRef(createAnimatedValue(0)).current;
   const [containerWidth, setContainerWidth] = useState(0);
   useEffect(() => {
     progress.setValue(0);

package/lib/module/components/Slider/Slider.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, PanResponder, Platform, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE_MAP = {
@@ -65,16 +65,16 @@ const Slider = /*#__PURE__*/forwardRef((props, ref) => {
   const lastReportedHigh = useRef(highRef.current);
 
   // Animated x positions (px) for thumbs.
-  const lowX = useRef(new Animated.Value(0)).current;
-  const highX = useRef(new Animated.Value(0)).current;
+  const lowX = useRef(createAnimatedValue(0)).current;
+  const highX = useRef(createAnimatedValue(0)).current;
 
   // Press / drag scale animations.
-  const lowScale = useRef(new Animated.Value(1)).current;
-  const highScale = useRef(new Animated.Value(1)).current;
+  const lowScale = useRef(createAnimatedValue(1)).current;
+  const highScale = useRef(createAnimatedValue(1)).current;
 
   // Label opacity per thumb.
-  const lowLabelOpacity = useRef(new Animated.Value(0)).current;
-  const highLabelOpacity = useRef(new Animated.Value(0)).current;
+  const lowLabelOpacity = useRef(createAnimatedValue(0)).current;
+  const highLabelOpacity = useRef(createAnimatedValue(0)).current;
 
   // Track which thumb is actively dragging (to anchor gesture math).
   const dragOffsetRef = useRef(0);

package/lib/module/components/Spinner/Spinner.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { ActivityIndicator, Animated, Easing, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
   small: 20,
@@ -18,7 +18,7 @@ const Dot = ({
   delay,
   duration
 }) => {
-  const scale = useRef(new Animated.Value(1)).current;
+  const scale = useRef(createAnimatedValue(1)).current;
   useEffect(() => {
     const animation = Animated.loop(Animated.sequence([Animated.delay(delay), Animated.timing(scale, {
       toValue: 1.4,
@@ -61,7 +61,7 @@ const Spinner = /*#__PURE__*/forwardRef((props, ref) => {
     testID
   } = props;
   const theme = useTheme();
-  const fade = useRef(new Animated.Value(0)).current;
+  const fade = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     Animated.timing(fade, {
       toValue: 1,

package/lib/module/components/Stepper/Stepper.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -30,8 +30,8 @@ const StepCircle = ({
   onPress
 }) => {
   const isActive = status === 'active';
-  const pulseScale = useRef(new Animated.Value(1)).current;
-  const pulseOpacity = useRef(new Animated.Value(0.5)).current;
+  const pulseScale = useRef(createAnimatedValue(1)).current;
+  const pulseOpacity = useRef(createAnimatedValue(0.5)).current;
   useEffect(() => {
     if (!isActive) {
       pulseScale.setValue(1);
@@ -176,7 +176,7 @@ const Stepper = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Connector progress: animates as activeStep changes.
   const initialProgress = total <= 1 ? 0 : activeStep / (total - 1);
-  const progress = useRef(new Animated.Value(initialProgress)).current;
+  const progress = useRef(createAnimatedValue(initialProgress)).current;
   const lastTargetRef = useRef(initialProgress);
   useEffect(() => {
     const target = total <= 1 ? 0 : activeStep / (total - 1);

package/lib/module/components/Switch/Switch.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, Pressable, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/hapticUtils.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -48,6 +48,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     label,
     accessibilityLabel,
     haptic = 'selection',
+    bounce = false,
     style,
     trackStyle,
     thumbStyle,
@@ -55,11 +56,15 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const theme = useTheme();
-  const sizeStyles = sizeMap[size];
+  const sizeStyles = {
+    ...sizeMap[size],
+    ...(theme.components.switch?.[size] ?? {})
+  };
+  const switchThumbColor = theme.components.switch?.thumbColor ?? '#FFFFFF';
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const offTrackColor = theme.mode === 'dark' ? theme.colors.secondary : theme.colors.surface.disabled;
   const onTrackColor = toneColor(theme, tone);
-  const progress = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const progress = useRef(createAnimatedValue(value ? 1 : 0)).current;
   useEffect(() => {
     Animated.spring(progress, {
       toValue: value ? 1 : 0,
@@ -69,7 +74,7 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       useNativeDriver: true
     }).start();
   }, [value, progress, theme.motion.spring.snappy]);
-  const trackBgAnim = useRef(new Animated.Value(value ? 1 : 0)).current;
+  const trackBgAnim = useRef(createAnimatedValue(value ? 1 : 0)).current;
   useEffect(() => {
     Animated.timing(trackBgAnim, {
       toValue: value ? 1 : 0,
@@ -88,6 +93,28 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
+  const bounceScale = useRef(createAnimatedValue(1)).current;
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (!bounce) return;
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+    Animated.sequence([Animated.spring(bounceScale, {
+      toValue: 1.15,
+      damping: 10,
+      stiffness: 220,
+      mass: 1,
+      useNativeDriver: true
+    }), 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) triggerHaptic(haptic);
@@ -122,11 +149,14 @@ const Switch = /*#__PURE__*/forwardRef((props, ref) => {
       }, trackStyle],
       children: /*#__PURE__*/_jsx(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]
       })
@@ -155,7 +185,6 @@ const buildStyles = _theme => StyleSheet.create({
     justifyContent: 'center'
   },
   thumb: {
-    backgroundColor: '#FFFFFF',
     position: 'absolute',
     top: 2
   },

package/lib/module/components/Tabs/Tabs.js

@@ -13,7 +13,7 @@
 
 import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { triggerHaptic } from "../../utils/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
@@ -34,8 +34,8 @@ const Tabs = /*#__PURE__*/forwardRef((props, ref) => {
 
   // Per-tab measured layouts (key → {x, width}).
   const [layouts, setLayouts] = useState({});
-  const indicatorTranslateX = useRef(new Animated.Value(0)).current;
-  const indicatorWidth = useRef(new Animated.Value(0)).current;
+  const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
+  const indicatorWidth = useRef(createAnimatedValue(0)).current;
   const activeLayout = layouts[activeKey];
 
   // Animate indicator whenever activeKey or its layout changes.