@oxyhq/bloom 0.1.6 → 0.1.8

package/src/loading/Loading.tsx

@@ -2,6 +2,7 @@ import React, { memo, useEffect, useMemo } from 'react';
 import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
 import { SpinnerIcon } from './SpinnerIcon';
 import type {
   LoadingProps,
@@ -108,7 +109,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   // eslint-disable-next-line react-hooks/rules-of-hooks
   const translateY = useSharedValue(showLoading ? 0 : -targetHeight);
 
-  const timingConfig = { duration: 250, easing: Easing.out(Easing.cubic) };
+  const timingConfig = { duration: animation.duration.slow, easing: Easing.out(Easing.cubic) };
 
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

package/src/skeleton/index.tsx

@@ -1,11 +1,36 @@
-import React from 'react';
-import { View, type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, type ViewStyle, type TextStyle, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 
-type SkeletonProps = {
-  blend?: boolean;
-};
+const SHIMMER_DURATION = 1500;
+const SHIMMER_MIN_OPACITY = 0.4;
+const SHIMMER_MAX_OPACITY = 1;
+
+function useShimmer() {
+  const opacity = useRef(new Animated.Value(SHIMMER_MAX_OPACITY)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity, {
+          toValue: SHIMMER_MIN_OPACITY,
+          duration: SHIMMER_DURATION / 2,
+          useNativeDriver: true,
+        }),
+        Animated.timing(opacity, {
+          toValue: SHIMMER_MAX_OPACITY,
+          duration: SHIMMER_DURATION / 2,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+    loop.start();
+    return () => loop.stop();
+  }, [opacity]);
+
+  return opacity;
+}
 
 export function Text({
   blend,
@@ -15,6 +40,7 @@ export function Text({
   blend?: boolean;
 }) {
   const { colors } = useTheme();
+  const shimmer = useShimmer();
   const flattened = StyleSheet.flatten(style);
   const width = (flattened as ViewStyle)?.width;
   const lineHeight = (flattened?.lineHeight as number) || 14;
@@ -26,13 +52,13 @@ export function Text({
         { maxWidth: width as number },
         { paddingVertical: lineHeight * 0.15 },
       ]}>
-      <View
+      <Animated.View
         style={[
           styles.textInner,
           {
             backgroundColor: colors.contrast50,
             height: lineHeight * 0.7,
-            opacity: blend ? 0.6 : 1,
+            opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
           },
         ]}
       />
@@ -52,20 +78,22 @@ export function Circle({
   style?: ViewStyle | ViewStyle[];
 }) {
   const { colors } = useTheme();
+  const shimmer = useShimmer();
+
   return (
-    <View
+    <Animated.View
       style={[
         styles.circle,
         {
           backgroundColor: colors.contrast50,
           width: size,
           height: size,
-          opacity: blend ? 0.6 : 1,
+          opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
         },
         style,
       ]}>
       {children}
-    </View>
+    </Animated.View>
   );
 }
 
@@ -79,15 +107,17 @@ export function Pill({
   style?: ViewStyle | ViewStyle[];
 }) {
   const { colors } = useTheme();
+  const shimmer = useShimmer();
+
   return (
-    <View
+    <Animated.View
       style={[
         styles.pill,
         {
           backgroundColor: colors.contrast50,
           width: size * 1.618,
           height: size,
-          opacity: blend ? 0.6 : 1,
+          opacity: Animated.multiply(shimmer, blend ? 0.6 : 1),
         },
         style,
       ]}

package/src/styles/tokens.ts

@@ -57,6 +57,27 @@ export const borderRadius = {
   full: 999,
 } as const;
 
+/**
+ * Gradient definitions for icon system.
+ */
+/**
+ * Animation timing and spring tokens.
+ * Centralized values ensure consistent motion across all components.
+ */
+export const animation = {
+  duration: {
+    instant: 100,
+    fast: 150,
+    normal: 200,
+    slow: 300,
+  },
+  spring: {
+    snappy: { friction: 8, tension: 100 },
+    gentle: { friction: 8, tension: 60 },
+    bouncy: { friction: 6, tension: 120 },
+  },
+} as const;
+
 /**
  * Gradient definitions for icon system.
  */

package/src/switch/Switch.tsx

@@ -2,6 +2,7 @@ import React, { memo, useEffect, useRef } from 'react';
 import { Pressable, Animated } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
+import { animation } from '../styles/tokens';
 import type { SwitchProps } from './types';
 
 const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
@@ -19,8 +20,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       Animated.spring(anim, {
         toValue: value ? 1 : 0,
         useNativeDriver: false,
-        friction: 8,
-        tension: 60,
+        ...animation.spring.gentle,
       }).start();
     }, [value, anim]);
 
@@ -29,8 +29,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       Animated.spring(pressAnim, {
         toValue: 1,
         useNativeDriver: false,
-        friction: 8,
-        tension: 100,
+        ...animation.spring.snappy,
       }).start();
     };
 
@@ -38,8 +37,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       Animated.spring(pressAnim, {
         toValue: 0,
         useNativeDriver: false,
-        friction: 8,
-        tension: 60,
+        ...animation.spring.gentle,
       }).start();
     };
 
@@ -79,7 +77,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
         onPressIn={onPressIn}
         onPressOut={onPressOut}
         style={[{ opacity: disabled ? 0.4 : 1 }, style]}
-        hitSlop={4}
+        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
         testID={testID}
       >
         <Animated.View