@oxyhq/bloom 0.1.32 → 0.1.34

package/src/grouped-buttons/GroupedButtons.tsx

@@ -1,45 +1,14 @@
-import React, { Children } from 'react';
-import { View, Text, TouchableOpacity } from 'react-native';
+import React, { Children, memo } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import type { GroupedButtonsProps, GroupedButtonItemProps } from './types';
 
 export type { GroupedButtonsProps, GroupedButtonItemProps } from './types';
 
-export function GroupedButtons({ children, style }: GroupedButtonsProps) {
-  const theme = useTheme();
-  const childArray = Children.toArray(children);
+// ── Item (defined first so it can be attached to GroupedButtons) ─
 
-  return (
-    <View
-      style={[
-        {
-          borderRadius: 12,
-          backgroundColor: theme.colors.card,
-          overflow: 'hidden',
-        },
-        style,
-      ]}
-    >
-      {childArray.map((child, index) => (
-        <React.Fragment key={index}>
-          {child}
-          {index < childArray.length - 1 && (
-            <View
-              style={{
-                height: 1,
-                backgroundColor: theme.colors.borderLight,
-                marginLeft: 16,
-              }}
-            />
-          )}
-        </React.Fragment>
-      ))}
-    </View>
-  );
-}
-
-export function Item({
+function ItemComponent({
   label,
   description,
   icon,
@@ -49,7 +18,6 @@ export function Item({
   testID,
 }: GroupedButtonItemProps) {
   const theme = useTheme();
-
   const labelColor = destructive ? theme.colors.negative : theme.colors.text;
 
   return (
@@ -58,31 +26,13 @@ export function Item({
       disabled={disabled}
       activeOpacity={0.6}
       testID={testID}
-      style={{
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingVertical: 12,
-        paddingHorizontal: 16,
-        opacity: disabled ? 0.5 : 1,
-      }}
+      style={[styles.item, disabled && styles.disabled]}
     >
-      {icon && (
-        <View style={{ marginRight: 12 }}>
-          {icon}
-        </View>
-      )}
-      <View style={{ flex: 1 }}>
-        <Text style={{ fontSize: 16, color: labelColor }}>
-          {label}
-        </Text>
+      {icon && <View style={styles.iconWrapper}>{icon}</View>}
+      <View style={styles.textWrapper}>
+        <Text style={[styles.label, { color: labelColor }]}>{label}</Text>
         {description && (
-          <Text
-            style={{
-              fontSize: 13,
-              color: theme.colors.textSecondary,
-              marginTop: 2,
-            }}
-          >
+          <Text style={[styles.description, { color: theme.colors.textSecondary }]}>
             {description}
           </Text>
         )}
@@ -91,4 +41,73 @@ export function Item({
   );
 }
 
-GroupedButtons.Item = Item;
+export const Item = memo(ItemComponent);
+Item.displayName = 'GroupedButtons.Item';
+
+// ── GroupedButtons ───────────────────────────────────────────────
+
+function GroupedButtonsComponent({ children, style }: GroupedButtonsProps) {
+  const theme = useTheme();
+  const childArray = Children.toArray(children);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme.colors.card },
+        style,
+      ]}
+    >
+      {childArray.map((child, index) => (
+        <React.Fragment key={index}>
+          {child}
+          {index < childArray.length - 1 && (
+            <View
+              style={[styles.divider, { backgroundColor: theme.colors.borderLight }]}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+}
+
+const GroupedButtonsMemo = memo(GroupedButtonsComponent);
+GroupedButtonsMemo.displayName = 'GroupedButtons';
+
+export const GroupedButtons = Object.assign(GroupedButtonsMemo, { Item });
+
+// ── Styles ──────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  divider: {
+    height: 1,
+    marginLeft: 16,
+  },
+  item: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  iconWrapper: {
+    marginRight: 12,
+  },
+  textWrapper: {
+    flex: 1,
+  },
+  label: {
+    fontSize: 16,
+  },
+  description: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+});

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
-export { useInteractionState } from './useInteractionState';
+export { useInteractionState, useInteractionStates } from './useInteractionState';
 export { useDelayedLoading } from './useDelayedLoading';
 export { useThrottledValue } from './useThrottledValue';
+export { usePressAnimation } from './usePressAnimation';
 export { mergeRefs } from './mergeRefs';

package/src/hooks/useInteractionState.ts

@@ -12,3 +12,24 @@ export function useInteractionState() {
 
   return { state, onIn, onOut };
 }
+
+/**
+ * Tracks multiple interaction states (hovered, focused, pressed) in one hook.
+ *
+ * Returns stable handler objects suitable for spreading onto Pressable-like components.
+ * On web, `hoverHandlers` can be spread as `onMouseEnter`/`onMouseLeave`.
+ */
+export function useInteractionStates() {
+  const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
+  const { state: focused, onIn: onFocus, onOut: onBlur } = useInteractionState();
+  const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
+
+  return {
+    hovered,
+    focused,
+    pressed,
+    hoverHandlers: { onHoverIn, onHoverOut } as const,
+    focusHandlers: { onFocus, onBlur } as const,
+    pressHandlers: { onPressIn, onPressOut } as const,
+  };
+}

package/src/hooks/usePressAnimation.ts

@@ -0,0 +1,37 @@
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+import { animation } from '../styles/tokens';
+
+/**
+ * Hook that provides press-scale animation feedback.
+ *
+ * Returns an `Animated.Value` for the scale transform and press-in/press-out
+ * handlers that spring the value between 1 and the target scale.
+ *
+ * @param pressScale - Scale value when pressed (e.g. 0.97). Pass `undefined` to disable.
+ */
+export function usePressAnimation(pressScale: number | undefined = 0.97) {
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+  const enabled = pressScale !== undefined;
+
+  const onPressIn = useCallback(() => {
+    if (!enabled) return;
+    Animated.spring(scaleAnim, {
+      toValue: pressScale!,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [scaleAnim, enabled, pressScale]);
+
+  const onPressOut = useCallback(() => {
+    if (!enabled) return;
+    Animated.spring(scaleAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [scaleAnim, enabled]);
+
+  return { scaleAnim, onPressIn, onPressOut, enabled } as const;
+}

package/src/icon-circle/index.tsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { memo } from 'react';
 import { View, type ViewStyle } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { type Props as IconProps } from '../icons/common';
 
-export function IconCircle({
+const IconCircleComponent = function IconCircle({
   icon: Icon,
   size = 'xl',
   style,
@@ -33,4 +33,7 @@ export function IconCircle({
       <Icon size={size} style={[{ color: colors.primary }, iconStyle]} />
     </View>
   );
-}
+};
+
+export const IconCircle = memo(IconCircleComponent);
+IconCircle.displayName = 'IconCircle';

package/src/icons/TEMPLATE.tsx

@@ -46,7 +46,7 @@ export function createSinglePathSVG({
   });
 }
 
-export function createMultiPathSVG({ paths }: { paths: string[] }) {
+export function createMultiPathSVG({ paths, viewBox }: { paths: string[]; viewBox?: string }) {
   return forwardRef<Svg, Props>(function IconImpl(props, ref) {
     const { fill, size, style, gradient, ...rest } = useCommonSVGProps(props);
 
@@ -55,7 +55,7 @@ export function createMultiPathSVG({ paths }: { paths: string[] }) {
         fill="none"
         {...rest}
         ref={ref}
-        viewBox="0 0 24 24"
+        viewBox={viewBox || '0 0 24 24'}
         width={size}
         height={size}
         style={[style]}>

package/src/icons/VerifiedCheck.tsx

@@ -4,8 +4,8 @@ import Svg, {Circle, Path} from 'react-native-svg'
 import {type Props, useCommonSVGProps} from './common'
 
 export const VerifiedCheck = forwardRef<Svg, Props>(
-  function LogoImpl(props, ref) {
-    const {fill, size, style, ...rest} = useCommonSVGProps(props)
+  function VerifiedCheckImpl(props, ref) {
+    const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     return (
       <Svg
@@ -16,6 +16,7 @@ export const VerifiedCheck = forwardRef<Svg, Props>(
         width={size}
         height={size}
         style={[style]}>
+        {gradient}
         <Circle cx="12" cy="12" r="11.5" fill={fill} />
         <Path
           fill="#fff"

package/src/icons/VerifierCheck.tsx

@@ -4,8 +4,8 @@ import Svg, {Path} from 'react-native-svg'
 import {type Props, useCommonSVGProps} from './common'
 
 export const VerifierCheck = forwardRef<Svg, Props>(
-  function LogoImpl(props, ref) {
-    const {fill, size, style, ...rest} = useCommonSVGProps(props)
+  function VerifierCheckImpl(props, ref) {
+    const {fill, size, style, gradient, ...rest} = useCommonSVGProps(props)
 
     return (
       <Svg
@@ -16,6 +16,7 @@ export const VerifierCheck = forwardRef<Svg, Props>(
         width={size}
         height={size}
         style={[style]}>
+        {gradient}
         <Path
           fill={fill}
           fillRule="evenodd"

package/src/icons/index.ts

@@ -58,7 +58,7 @@ export * from './Download';
 export * from './EditBig';
 export * from './Emoji';
 export * from './Envelope';
-export * from './EnveopeOpen';
+export * from './EnvelopeOpen';
 export * from './Explosion';
 export * from './Eye';
 export * from './EyeSlash';

package/src/loading/Loading.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { animation } from '../styles/tokens';
+import { lazyRequire } from '../utils/lazy-require';
 import { SpinnerIcon } from './SpinnerIcon';
 import type {
   LoadingProps,
@@ -20,24 +21,7 @@ const SIZE_CONFIG = {
 
 // Lazy-loaded reanimated for the top variant
 type ReanimatedType = typeof import('react-native-reanimated');
-let reanimatedModule: ReanimatedType | null = null;
-let reanimatedResolved = false;
-
-function getReanimated(): ReanimatedType | null {
-  if (!reanimatedResolved) {
-    reanimatedResolved = true;
-    try {
-      // Guard for ESM environments (Vite/browser) where require is not defined.
-      if (typeof require !== 'undefined') {
-        const moduleName = 'react-native-reanimated';
-        reanimatedModule = require(moduleName);
-      }
-    } catch {
-      reanimatedModule = null;
-    }
-  }
-  return reanimatedModule;
-}
+const getReanimated = lazyRequire<ReanimatedType>('react-native-reanimated');
 
 const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
   size = 'medium',

package/src/loading/SpinnerIcon.tsx

@@ -1,47 +1,15 @@
 import React, { useEffect } from 'react';
 import { ActivityIndicator, type ViewStyle } from 'react-native';
 
+import { lazyRequire } from '../utils/lazy-require';
+
 // Lazy-loaded dependencies for the SVG spinner.
 // Falls back to ActivityIndicator if react-native-svg or react-native-reanimated are not installed.
 type SvgModuleType = typeof import('react-native-svg');
 type ReanimatedType = typeof import('react-native-reanimated');
 
-let svgModule: SvgModuleType | null = null;
-let svgModuleResolved = false;
-let reanimatedModule: ReanimatedType | null = null;
-let reanimatedResolved = false;
-
-function getSvgModule(): SvgModuleType | null {
-  if (!svgModuleResolved) {
-    svgModuleResolved = true;
-    try {
-      // Guard for ESM environments (Vite/browser) where require is not defined.
-      if (typeof require !== 'undefined') {
-        const moduleName = 'react-native-svg';
-        svgModule = require(moduleName);
-      }
-    } catch {
-      svgModule = null;
-    }
-  }
-  return svgModule;
-}
-
-function getReanimated(): ReanimatedType | null {
-  if (!reanimatedResolved) {
-    reanimatedResolved = true;
-    try {
-      // Guard for ESM environments (Vite/browser) where require is not defined.
-      if (typeof require !== 'undefined') {
-        const moduleName = 'react-native-reanimated';
-        reanimatedModule = require(moduleName);
-      }
-    } catch {
-      reanimatedModule = null;
-    }
-  }
-  return reanimatedModule;
-}
+const getSvgModule = lazyRequire<SvgModuleType>('react-native-svg');
+const getReanimated = lazyRequire<ReanimatedType>('react-native-reanimated');
 
 interface SpinnerIconProps {
   size?: number;

package/src/prompt-input/Actions.tsx

@@ -43,3 +43,4 @@ export function PromptInputActions({
     </View>
   );
 }
+PromptInputActions.displayName = 'PromptInputActions';

package/src/prompt-input/Attachments.tsx

@@ -262,3 +262,4 @@ export function PromptInputAttachments({
     </ScrollView>
   );
 }
+PromptInputAttachments.displayName = 'PromptInputAttachments';

package/src/prompt-input/PromptInput.tsx

@@ -261,3 +261,4 @@ export function PromptInput({
     </PromptInputContext.Provider>
   );
 }
+PromptInput.displayName = 'PromptInput';

package/src/prompt-input/SubmitButton.tsx

@@ -72,3 +72,4 @@ export function PromptInputSubmitButton({
     </TouchableOpacity>
   );
 }
+PromptInputSubmitButton.displayName = 'PromptInputSubmitButton';

package/src/prompt-input/Textarea.tsx

@@ -100,3 +100,4 @@ export function PromptInputTextarea({
 
   return <View style={style}>{textInput}</View>;
 }
+PromptInputTextarea.displayName = 'PromptInputTextarea';

package/src/prompt-input/Textarea.web.tsx

@@ -152,3 +152,4 @@ export function PromptInputTextarea({
 
   return <View style={style}>{textInput}</View>;
 }
+PromptInputTextarea.displayName = 'PromptInputTextarea';

package/src/search-input/index.tsx

@@ -70,3 +70,4 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
     );
   },
 );
+SearchInput.displayName = 'SearchInput';

package/src/settings-list/SettingsList.tsx

@@ -1,6 +1,5 @@
 import React, { memo } from 'react';
 import { View, Text, Pressable, StyleSheet } from 'react-native';
-import Svg, { Path } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
 import type {
@@ -9,14 +8,19 @@ import type {
   SettingsListDividerProps,
 } from './types';
 
-// ── Chevron icon (inline to avoid external dependency) ──────────
+// ── Chevron icon (unicode-based, no SVG dependency) ─────────────
 const Chevron = memo(({ size = 16, color }: { size?: number; color: string }) => (
-  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
-    <Path
-      d="M9.29 6.71c-.39.39-.39 1.02 0 1.41L13.17 12l-3.88 3.88c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l4.59-4.59c.39-.39.39-1.02 0-1.41L10.7 6.7c-.38-.38-1.02-.38-1.41.01z"
-      fill={color}
-    />
-  </Svg>
+  <Text
+    style={{
+      fontSize: size,
+      color,
+      lineHeight: size,
+      textAlign: 'center',
+      width: size,
+    }}
+  >
+    {'\u203A'}
+  </Text>
 ));
 Chevron.displayName = 'Chevron';
 

package/src/skeleton/index.tsx

@@ -65,6 +65,7 @@ export function Text({
     </View>
   );
 }
+Text.displayName = 'Skeleton.Text';
 
 export function Circle({
   children,
@@ -96,6 +97,7 @@ export function Circle({
     </Animated.View>
   );
 }
+Circle.displayName = 'Skeleton.Circle';
 
 export function Pill({
   size,
@@ -124,6 +126,7 @@ export function Pill({
     />
   );
 }
+Pill.displayName = 'Skeleton.Pill';
 
 export function Col({
   children,
@@ -134,6 +137,7 @@ export function Col({
 }) {
   return <View style={[styles.col, style]}>{children}</View>;
 }
+Col.displayName = 'Skeleton.Col';
 
 export function Row({
   children,
@@ -144,6 +148,7 @@ export function Row({
 }) {
   return <View style={[styles.row, style]}>{children}</View>;
 }
+Row.displayName = 'Skeleton.Row';
 
 const styles = StyleSheet.create({
   textOuter: {

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,
+  },
+});