@oxyhq/bloom 0.1.32 → 0.1.33

package/src/switch/Switch.tsx

@@ -1,5 +1,5 @@
-import React, { memo, useEffect, useRef } from 'react';
-import { Pressable, Animated } from 'react-native';
+import React, { memo, useCallback, useRef } from 'react';
+import { Pressable, Animated, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
@@ -16,30 +16,39 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
     const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
     const pressAnim = useRef(new Animated.Value(0)).current;
 
-    useEffect(() => {
+    // Track last value to detect external changes and animate accordingly.
+    // This avoids useEffect while still handling controlled value changes.
+    const prevValueRef = useRef(value);
+    if (prevValueRef.current !== value) {
+      prevValueRef.current = value;
       Animated.spring(anim, {
         toValue: value ? 1 : 0,
         useNativeDriver: false,
         ...animation.spring.gentle,
       }).start();
-    }, [value, anim]);
+    }
 
-    const onPressIn = () => {
+    const handlePress = useCallback(() => {
+      if (disabled) return;
+      onValueChange(!value);
+    }, [disabled, value, onValueChange]);
+
+    const onPressIn = useCallback(() => {
       if (disabled) return;
       Animated.spring(pressAnim, {
         toValue: 1,
         useNativeDriver: false,
         ...animation.spring.snappy,
       }).start();
-    };
+    }, [disabled, pressAnim]);
 
-    const onPressOut = () => {
+    const onPressOut = useCallback(() => {
       Animated.spring(pressAnim, {
         toValue: 0,
         useNativeDriver: false,
         ...animation.spring.gentle,
       }).start();
-    };
+    }, [pressAnim]);
 
     const track = TRACK[size];
     const thumb = THUMB[size];
@@ -73,11 +82,11 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
         role="switch"
         aria-checked={value}
         accessibilityState={{ checked: value, disabled }}
-        onPress={() => !disabled && onValueChange(!value)}
+        onPress={handlePress}
         onPressIn={onPressIn}
         onPressOut={onPressOut}
-        style={[{ opacity: disabled ? 0.4 : 1 }, style]}
-        hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+        style={[disabled && styles.disabled, style]}
+        hitSlop={HIT_SLOP}
         testID={testID}
       >
         <Animated.View
@@ -91,18 +100,15 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
           }}
         >
           <Animated.View
-            style={{
-              width: thumb,
-              height: thumbHeight,
-              borderRadius: thumbRadius,
-              backgroundColor: '#fff',
-              transform: [{ translateX: thumbX }],
-              shadowColor: '#000',
-              shadowOffset: { width: 0, height: 2 },
-              shadowOpacity: 0.15,
-              shadowRadius: 3,
-              elevation: 3,
-            }}
+            style={[
+              styles.thumb,
+              {
+                width: thumb,
+                height: thumbHeight,
+                borderRadius: thumbRadius,
+                transform: [{ translateX: thumbX }],
+              },
+            ]}
           />
         </Animated.View>
       </Pressable>
@@ -113,3 +119,19 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 SwitchComponent.displayName = 'Switch';
 
 export const Switch = memo(SwitchComponent);
+
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 } as const;
+
+const styles = StyleSheet.create({
+  disabled: {
+    opacity: 0.4,
+  },
+  thumb: {
+    backgroundColor: '#fff',
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.15,
+    shadowRadius: 3,
+    elevation: 3,
+  },
+});

package/src/tabs/Tabs.tsx

@@ -3,9 +3,7 @@ import React, {
   memo,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
-  useRef,
 } from 'react';
 import {
   View,
@@ -15,11 +13,11 @@ import {
   ScrollView,
   type ViewStyle,
   type TextStyle,
-  type LayoutChangeEvent,
 } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
-import { animation, borderRadius, space } from '../styles/tokens';
+import { usePressAnimation } from '../hooks/usePressAnimation';
+import { borderRadius, space } from '../styles/tokens';
 import type { TabsProps, TabProps, TabPanelProps, TabsVariant } from './types';
 
 interface TabsContextValue {
@@ -101,7 +99,7 @@ const TabComponent: React.FC<TabProps> = ({
   const theme = useTheme();
   const { value: selectedValue, onValueChange, variant } = useContext(TabsContext);
   const isSelected = value === selectedValue;
-  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const { scaleAnim, onPressIn, onPressOut } = usePressAnimation(0.97);
 
   const handlePress = useCallback(() => {
     if (!disabled) {
@@ -109,22 +107,6 @@ const TabComponent: React.FC<TabProps> = ({
     }
   }, [value, disabled, onValueChange]);
 
-  const onPressIn = useCallback(() => {
-    Animated.spring(scaleAnim, {
-      toValue: 0.97,
-      useNativeDriver: true,
-      ...animation.spring.snappy,
-    }).start();
-  }, [scaleAnim]);
-
-  const onPressOut = useCallback(() => {
-    Animated.spring(scaleAnim, {
-      toValue: 1,
-      useNativeDriver: true,
-      ...animation.spring.gentle,
-    }).start();
-  }, [scaleAnim]);
-
   const tabStyle = useMemo((): ViewStyle => {
     const base: ViewStyle = {
       flexDirection: 'row',

package/src/typography/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { memo } from 'react';
 import {
   Text as RNText,
   type TextProps as RNTextProps,
@@ -14,7 +14,7 @@ export type TextProps = RNTextProps;
 /**
  * Base text component with theme-aware default color.
  */
-export function Text({ children, style, ...rest }: TextProps) {
+const TextComponent = function Text({ children, style, ...rest }: TextProps) {
   const { colors } = useTheme();
 
   return (
@@ -24,11 +24,14 @@ export function Text({ children, style, ...rest }: TextProps) {
       {children}
     </RNText>
   );
-}
+};
+
+export const Text = memo(TextComponent);
+Text.displayName = 'Text';
 
 export { Text as Span };
 
-function createHeadingElement({ level }: { level: number }) {
+function createHeadingElement({ level }: { level: number }): React.FC<TextProps> {
   return function HeadingElement({ style, ...rest }: TextProps) {
     const extraProps: Record<string, unknown> =
       Platform.OS === 'web'
@@ -39,11 +42,17 @@ function createHeadingElement({ level }: { level: number }) {
 }
 
 export const H1 = createHeadingElement({ level: 1 });
+H1.displayName = 'H1';
 export const H2 = createHeadingElement({ level: 2 });
+H2.displayName = 'H2';
 export const H3 = createHeadingElement({ level: 3 });
+H3.displayName = 'H3';
 export const H4 = createHeadingElement({ level: 4 });
+H4.displayName = 'H4';
 export const H5 = createHeadingElement({ level: 5 });
+H5.displayName = 'H5';
 export const H6 = createHeadingElement({ level: 6 });
+H6.displayName = 'H6';
 
 export function P({ style, ...rest }: TextProps) {
   const extraProps: Record<string, unknown> =
@@ -56,3 +65,4 @@ export function P({ style, ...rest }: TextProps) {
     />
   );
 }
+P.displayName = 'P';

package/src/utils/lazy-require.ts

@@ -0,0 +1,31 @@
+/**
+ * Creates a lazy-loaded module getter that caches the result.
+ *
+ * Safely handles environments where `require` is not defined (e.g. Vite/browser ESM)
+ * and returns `null` when the module is not installed. The result is cached after the
+ * first call so subsequent calls are zero-cost.
+ *
+ * @example
+ * ```ts
+ * const getSvg = lazyRequire<typeof import('react-native-svg')>('react-native-svg');
+ * const svg = getSvg(); // SvgModuleType | null
+ * ```
+ */
+export function lazyRequire<T>(moduleName: string): () => T | null {
+  let module: T | null = null;
+  let resolved = false;
+
+  return (): T | null => {
+    if (!resolved) {
+      resolved = true;
+      try {
+        if (typeof require !== 'undefined') {
+          module = require(moduleName);
+        }
+      } catch {
+        module = null;
+      }
+    }
+    return module;
+  };
+}

package/lib/commonjs/icons/EnveopeOpen.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_TEMPLATE","require","Envelope_Open_Stroke2_Corner0_Rounded","exports","createSinglePathSVG","path"],"sourceRoot":"../../../src","sources":["icons/EnveopeOpen.tsx"],"mappings":";;;;;;AAAA,IAAAA,SAAA,GAAAC,OAAA;AAEO,MAAMC,qCAAqC,GAAAC,OAAA,CAAAD,qCAAA,GAAG,IAAAE,6BAAmB,EAAC;EACvEC,IAAI,EAAE;AACR,CAAC,CAAC","ignoreList":[]}

package/lib/module/icons/EnveopeOpen.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["createSinglePathSVG","Envelope_Open_Stroke2_Corner0_Rounded","path"],"sourceRoot":"../../../src","sources":["icons/EnveopeOpen.tsx"],"mappings":";;AAAA,SAAQA,mBAAmB,QAAO,eAAY;AAE9C,OAAO,MAAMC,qCAAqC,GAAGD,mBAAmB,CAAC;EACvEE,IAAI,EAAE;AACR,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/commonjs/icons/EnveopeOpen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EnveopeOpen.d.ts","sourceRoot":"","sources":["../../../../src/icons/EnveopeOpen.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,qCAAqC;;;;;oIAEhD,CAAA"}

package/lib/typescript/module/icons/EnveopeOpen.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EnveopeOpen.d.ts","sourceRoot":"","sources":["../../../../src/icons/EnveopeOpen.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,qCAAqC;;;;;oIAEhD,CAAA"}