@webority-technologies/mobile 0.0.8 → 0.0.10

package/lib/commonjs/components/Accordion/Accordion.js

@@ -104,9 +104,9 @@ const Accordion = props => {
   const groupExpanded = group && id ? group.isExpanded(id) : null;
   const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
   const [measuredHeight, setMeasuredHeight] = (0, _react.useState)(null);
-  const heightAnim = (0, _react.useRef)(new _reactNative.Animated.Value(expanded ? 1 : 0)).current;
-  const opacityAnim = (0, _react.useRef)(new _reactNative.Animated.Value(expanded ? 1 : 0)).current;
-  const rotateAnim = (0, _react.useRef)(new _reactNative.Animated.Value(expanded ? 1 : 0)).current;
+  const heightAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const opacityAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
+  const rotateAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(expanded ? 1 : 0)).current;
   const lastExpandedRef = (0, _react.useRef)(expanded);
   (0, _react.useEffect)(() => {
     // Skip animation when state matches the previous value (e.g. on mount).

package/lib/commonjs/components/Avatar/Avatar.js

@@ -181,7 +181,7 @@ const AvatarGroupItem = ({
   borderWidth,
   children
 }) => {
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(opacity, {
       toValue: 1,

package/lib/commonjs/components/Badge/Badge.js

@@ -128,7 +128,7 @@ const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   const badgeAnchorOffset = theme.components.badge?.anchorOffset ?? 4;
   const formatted = variant === 'dot' ? null : formatValue(value, max);
   const shouldRender = !invisible && (variant === 'dot' || formatted !== null);
-  const pulseScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const pulseScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
   (0, _react.useEffect)(() => {
     if (!pulse || !shouldRender) {
       pulseScale.setValue(1);

package/lib/commonjs/components/Banner/Banner.js

@@ -29,8 +29,8 @@ const Banner = exports.Banner = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const tint = (0, _react.useMemo)(() => tintFor(theme, variant), [theme, variant]);
-  const translateY = (0, _react.useRef)(new _reactNative.Animated.Value(animateMount && visible ? -20 : 0)).current;
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const translateY = (0, _react.useRef)((0, _index.createAnimatedValue)(animateMount && visible ? -20 : 0)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(animateMount && visible ? 0 : visible ? 1 : 0)).current;
   const [mounted, setMounted] = (0, _react.useState)(visible);
   const isFirstRun = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {

package/lib/commonjs/components/BottomNavigation/BottomNavigation.js

@@ -63,7 +63,7 @@ const BottomNavigation = exports.BottomNavigation = /*#__PURE__*/(0, _react.forw
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
   const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
   const [tabWidth, setTabWidth] = _react.default.useState(0);
-  const indicatorTranslateX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const indicatorTranslateX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const iconScales = (0, _react.useRef)({});
 
   // Ensure each tab has a persistent scale value

package/lib/commonjs/components/Carousel/Carousel.js

@@ -65,7 +65,7 @@ const CarouselInner = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const resolvedItemWidth = itemWidth === 'screen' ? containerWidth : itemWidth;
   const slideStride = resolvedItemWidth + spacing;
   const flatListRef = (0, _react.useRef)(null);
-  const scrollX = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const scrollX = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   const initialIndex = clamp(isControlled ? controlledIndex : defaultIndex, 0, Math.max(0, data.length - 1));
   const [currentIndex, setCurrentIndex] = (0, _react.useState)(initialIndex);
 
@@ -386,7 +386,7 @@ const ThumbnailItem = ({
   onPress,
   theme
 }) => {
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(isActive ? 1.1 : 1)).current;
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1.1 : 1)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(scale, {
       toValue: isActive ? 1.1 : 1,

package/lib/commonjs/components/Checkbox/Checkbox.js

@@ -51,7 +51,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/(0, _react.forwardRef)((props,
   const checkboxLabelGap = theme.components.checkbox?.labelGap ?? 10;
   const fillColor = toneColor(theme, tone);
   const isActive = checked || indeterminate;
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(isActive ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(isActive ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
       toValue: isActive ? 1 : 0,

package/lib/commonjs/components/DatePicker/DatePicker.js

@@ -111,14 +111,14 @@ const DatePicker = props => {
   const [viewMode, setViewMode] = (0, _react.useState)('days');
 
   // Animations
-  const backdrop = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const sheet = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthSlide = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthFade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const selectScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const viewFade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const viewScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
-  const headerScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const backdrop = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheet = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthSlide = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const selectScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const viewFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const viewScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
+  const headerScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
 
   // Sync anchor / pending when value prop changes.
   (0, _react.useEffect)(() => {

package/lib/commonjs/components/DateRangePicker/DateRangePicker.js

@@ -96,10 +96,10 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/(0, _react.forwar
   const [pendingEnd, setPendingEnd] = (0, _react.useState)(value.end ? startOfDay(value.end) : null);
 
   // Animations
-  const backdrop = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const sheet = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthSlide = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
-  const monthFade = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const backdrop = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const sheet = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthSlide = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
+  const monthFade = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
 
   // Sync external value -> pending state when it changes.
   (0, _react.useEffect)(() => {

package/lib/commonjs/components/FloatingActionButton/FloatingActionButton.js

@@ -83,7 +83,7 @@ const FloatingActionButton = exports.FloatingActionButton = /*#__PURE__*/(0, _re
   } = (0, _usePressAnimation.usePressAnimation)({
     enabled: !disabled
   });
-  const hideAnim = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const hideAnim = (0, _react.useRef)((0, _index.createAnimatedValue)(0)).current;
   (0, _react.useEffect)(() => {
     if (!hideOnScroll) {
       hideAnim.setValue(0);
@@ -239,7 +239,7 @@ const FloatingActionButtonGroup = props => {
   const isOpen = isControlled ? controlledOpen : internalOpen;
 
   // Animation drivers
-  const progress = (0, _react.useRef)(new _reactNative.Animated.Value(isOpen ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(isOpen ? 1 : 0)).current;
   const itemAnims = (0, _react.useRef)([]);
 
   // Resize per-item anim array if action count changes

package/lib/commonjs/components/FormField/FormField.js

@@ -26,7 +26,7 @@ const FormField = exports.FormField = /*#__PURE__*/(0, _react.forwardRef)((props
   } = props;
   const theme = (0, _index.useTheme)();
   const styles = (0, _react.useMemo)(() => buildStyles(theme), [theme]);
-  const errorOpacity = (0, _react.useRef)(new _reactNative.Animated.Value(error ? 1 : 0)).current;
+  const errorOpacity = (0, _react.useRef)((0, _index.createAnimatedValue)(error ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.timing(errorOpacity, {
       toValue: error ? 1 : 0,

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

@@ -59,7 +59,8 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     leftIcon,
     rightIcon,
     size = 'md',
-    variant = 'outlined',
+    variant: variantProp,
+    labelMode: labelModeProp,
     required = false,
     maxLength,
     format,
@@ -80,20 +81,27 @@ const Input = exports.Input = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     ...sizeMap[size],
     ...(theme.components.input?.[size] ?? {})
   };
+
+  // Per-call-site prop wins; otherwise theme defaults; otherwise library defaults.
+  const variant = variantProp ?? theme.components.input?.defaultVariant ?? 'outlined';
+  const labelMode = labelModeProp ?? theme.components.input?.defaultLabelMode ?? 'float';
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
   const [isPasswordVisible, setIsPasswordVisible] = (0, _react.useState)(false);
   const hasValue = typeof value === 'string' && value.length > 0;
   const hasError = typeof error === 'string' && error.length > 0;
   const isEditable = !disabled && editable !== false;
   const shouldFloat = isFocused || hasValue;
-  const showFloatingLabel = Boolean(label) && !multiline;
+  // Floating label only when explicitly opted into via labelMode='float' AND the
+  // field is single-line. labelMode='top' OR multiline both force a static label
+  // above the field — the staticLabel branch below handles both.
+  const showFloatingLabel = Boolean(label) && !multiline && labelMode === 'float';
 
   // 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)(() => {

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

@@ -64,7 +64,7 @@ const OTPInput = exports.OTPInput = /*#__PURE__*/(0, _react.forwardRef)((props,
   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;

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

@@ -67,7 +67,7 @@ const Radio = exports.Radio = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
   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)(new _reactNative.Animated.Value(selected ? 1 : 0)).current;
+  const progress = (0, _react.useRef)((0, _index.createAnimatedValue)(selected ? 1 : 0)).current;
   (0, _react.useEffect)(() => {
     _reactNative.Animated.spring(progress, {
       toValue: selected ? 1 : 0,

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

@@ -67,7 +67,7 @@ const SearchBar = exports.SearchBar = /*#__PURE__*/(0, _react.forwardRef)((props
   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)(() => {

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

@@ -69,7 +69,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
   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,
@@ -79,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,
@@ -98,7 +98,7 @@ const Switch = exports.Switch = /*#__PURE__*/(0, _react.forwardRef)((props, ref)
     inputRange: [0, 1],
     outputRange: [offTrackColor, onTrackColor]
   });
-  const bounceScale = (0, _react.useRef)(new _reactNative.Animated.Value(1)).current;
+  const bounceScale = (0, _react.useRef)((0, _index.createAnimatedValue)(1)).current;
   const isFirstRender = (0, _react.useRef)(true);
   (0, _react.useEffect)(() => {
     if (!bounce) return;

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

@@ -29,9 +29,9 @@ const Toast = ({
   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;

package/lib/commonjs/components/Tooltip/Tooltip.js

@@ -41,8 +41,8 @@ const Tooltip = props => {
     height: 0
   });
   const wrapperRef = (0, _react.useRef)(null);
-  const scale = (0, _react.useRef)(new _reactNative.Animated.Value(visible ? 1 : 0.85)).current;
-  const opacity = (0, _react.useRef)(new _reactNative.Animated.Value(visible ? 1 : 0)).current;
+  const scale = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0.85)).current;
+  const opacity = (0, _react.useRef)((0, _index.createAnimatedValue)(visible ? 1 : 0)).current;
   const autoHideTimer = (0, _react.useRef)(null);
   const didMount = (0, _react.useRef)(false);
   const setVisible = (0, _react.useCallback)(next => {

package/lib/commonjs/theme/animatedValue.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createAnimatedValue = void 0;
+var _reactNative = require("react-native");
+/**
+ * Create an `Animated.Value` that survives RN 0.85's dev-mode prop deepFreeze.
+ *
+ * RN's Fabric renderer deep-freezes prop trees on host components. If an
+ * `Animated.Value` is reachable from a `style` prop via interpolation chains
+ * (the `_parent` ref on `AnimatedInterpolation` nodes), the recursive freeze
+ * converts the value's `_animation` slot into a throwing setter — the next
+ * `Animated.timing(v).start()` then crashes with
+ *   "_animation: object that is meant to be immutable".
+ *
+ * Sealing the value at construction makes `Object.isSealed(v) === true`,
+ * which causes `deepFreezeAndThrowOnMutationInDev` to skip-and-return at
+ * its top guard. Existing-property mutation (`_animation`, `_value`,
+ * `_listeners`, `_tracking`) keeps working — seal only blocks adding NEW
+ * properties, and `Animated.Value` doesn't add any post-construction.
+ *
+ * Use everywhere the library would otherwise call `new Animated.Value(...)`.
+ */
+const createAnimatedValue = (initial, config) => Object.seal(new _reactNative.Animated.Value(initial, config));
+exports.createAnimatedValue = createAnimatedValue;
+//# sourceMappingURL=animatedValue.js.map

package/lib/commonjs/theme/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeContext.ThemeProvider;
   }
 });
+Object.defineProperty(exports, "createAnimatedValue", {
+  enumerable: true,
+  get: function () {
+    return _animatedValue.createAnimatedValue;
+  }
+});
 Object.defineProperty(exports, "darkTheme", {
   enumerable: true,
   get: function () {
@@ -63,6 +69,7 @@ var _tokens = require("./tokens.js");
 var _merge = require("./merge.js");
 var _ThemeContext = require("./ThemeContext.js");
 var _textStyle = require("./textStyle.js");
+var _animatedValue = require("./animatedValue.js");
 var _Gradient = require("./Gradient.js");
 let currentMode = 'light';
 let currentTheme = _tokens.lightTheme;

package/lib/module/components/Accordion/Accordion.js

@@ -2,7 +2,7 @@
 
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, LayoutAnimation, 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";
@@ -98,9 +98,9 @@ const Accordion = props => {
   const groupExpanded = group && id ? group.isExpanded(id) : null;
   const expanded = groupExpanded !== null ? groupExpanded : isControlled ? !!expandedProp : internalExpanded;
   const [measuredHeight, setMeasuredHeight] = useState(null);
-  const heightAnim = useRef(new Animated.Value(expanded ? 1 : 0)).current;
-  const opacityAnim = useRef(new Animated.Value(expanded ? 1 : 0)).current;
-  const rotateAnim = useRef(new Animated.Value(expanded ? 1 : 0)).current;
+  const heightAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const opacityAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
+  const rotateAnim = useRef(createAnimatedValue(expanded ? 1 : 0)).current;
   const lastExpandedRef = useRef(expanded);
   useEffect(() => {
     // Skip animation when state matches the previous value (e.g. on mount).

package/lib/module/components/Avatar/Avatar.js

@@ -2,7 +2,7 @@
 
 import React, { Children, cloneElement, forwardRef, isValidElement, useEffect, useMemo, useRef, useState } from 'react';
 import { Animated, Easing, Image, StyleSheet, Text, View } from 'react-native';
-import { useTheme } from "../../theme/index.js";
+import { useTheme, createAnimatedValue } from "../../theme/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeMap = {
@@ -176,7 +176,7 @@ const AvatarGroupItem = ({
   borderWidth,
   children
 }) => {
-  const opacity = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(createAnimatedValue(0)).current;
   useEffect(() => {
     Animated.timing(opacity, {
       toValue: 1,

package/lib/module/components/Badge/Badge.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
-import { fontFor, useTheme } from "../../theme/index.js";
+import { fontFor, useTheme, createAnimatedValue } from "../../theme/index.js";
 import { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const toneFor = (theme, tone) => {
@@ -123,7 +123,7 @@ const Badge = /*#__PURE__*/forwardRef((props, ref) => {
   const badgeAnchorOffset = theme.components.badge?.anchorOffset ?? 4;
   const formatted = variant === 'dot' ? null : formatValue(value, max);
   const shouldRender = !invisible && (variant === 'dot' || formatted !== null);
-  const pulseScale = useRef(new Animated.Value(1)).current;
+  const pulseScale = useRef(createAnimatedValue(1)).current;
   useEffect(() => {
     if (!pulse || !shouldRender) {
       pulseScale.setValue(1);

package/lib/module/components/Banner/Banner.js

@@ -2,7 +2,7 @@
 
 import React, { forwardRef, useEffect, useMemo, useRef, useState } 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 { SkeletonContent } from "../Skeleton/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Banner = /*#__PURE__*/forwardRef((props, ref) => {
@@ -24,8 +24,8 @@ const Banner = /*#__PURE__*/forwardRef((props, ref) => {
   const theme = useTheme();
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const tint = useMemo(() => tintFor(theme, variant), [theme, variant]);
-  const translateY = useRef(new Animated.Value(animateMount && visible ? -20 : 0)).current;
-  const opacity = useRef(new Animated.Value(animateMount && visible ? 0 : visible ? 1 : 0)).current;
+  const translateY = useRef(createAnimatedValue(animateMount && visible ? -20 : 0)).current;
+  const opacity = useRef(createAnimatedValue(animateMount && visible ? 0 : visible ? 1 : 0)).current;
   const [mounted, setMounted] = useState(visible);
   const isFirstRun = useRef(true);
   useEffect(() => {

package/lib/module/components/BottomNavigation/BottomNavigation.js

@@ -3,7 +3,7 @@
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
 import { Animated, Pressable, StyleSheet, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-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 ICON_SIZE = 24;
@@ -58,7 +58,7 @@ const BottomNavigation = /*#__PURE__*/forwardRef((props, ref) => {
   const styles = useMemo(() => buildStyles(theme), [theme]);
   const activeIndex = Math.max(0, tabs.findIndex(tab => tab.key === activeTab));
   const [tabWidth, setTabWidth] = React.useState(0);
-  const indicatorTranslateX = useRef(new Animated.Value(0)).current;
+  const indicatorTranslateX = useRef(createAnimatedValue(0)).current;
   const iconScales = useRef({});
 
   // Ensure each tab has a persistent scale value