@oxyhq/bloom 0.1.25 → 0.1.27

package/src/assets.d.ts

@@ -0,0 +1,26 @@
+/** Ambient module declarations for static image assets (Metro + web bundlers). */
+
+declare module '*.jpg' {
+  const value: number; // Metro returns a numeric asset ID; web bundlers return a URL string at runtime
+  export default value;
+}
+
+declare module '*.jpeg' {
+  const value: number;
+  export default value;
+}
+
+declare module '*.png' {
+  const value: number;
+  export default value;
+}
+
+declare module '*.gif' {
+  const value: number;
+  export default value;
+}
+
+declare module '*.webp' {
+  const value: number;
+  export default value;
+}

package/src/avatar/Avatar.tsx

@@ -7,7 +7,8 @@ import { useAvatarPlaceholder } from './placeholder-context';
 import type { AvatarProps } from './types';
 
 // Built-in default avatar image — used when no source, fallbackSource, or placeholderIcon is provided
-const DEFAULT_AVATAR_IMAGE = require('./default-avatar.jpg');
+// ESM static import works in both Metro (RN 0.72+) and web bundlers (Vite, webpack).
+import DEFAULT_AVATAR_IMAGE from './default-avatar.jpg';
 
 // Squircle clip path normalized to 0–1 coordinate space (viewBox="0 0 1 1").
 const SQUIRCLE_PATH =
@@ -28,7 +29,12 @@ function getSvgModule(): SvgModuleType | null {
   if (!svgModuleResolved) {
     svgModuleResolved = true;
     try {
-      svgModule = require('react-native-svg');
+      // Guard for ESM environments (Vite/browser) where require is not defined.
+      // In React Native (Metro), require is always available.
+      if (typeof require !== 'undefined') {
+        const moduleName = 'react-native-svg';
+        svgModule = require(moduleName);
+      }
     } catch {
       svgModule = null;
     }

package/src/avatar/index.ts

@@ -3,5 +3,8 @@ export { AvatarPlaceholderProvider } from './placeholder-context';
 export type { AvatarPlaceholderConfig } from './placeholder-context';
 export type { AvatarProps, AvatarShape } from './types';
 
+// ESM static import works in both Metro (RN 0.72+) and web bundlers (Vite, webpack).
+import defaultAvatar from './default-avatar.jpg';
+
 /** Default avatar placeholder image — use as `fallbackSource` on Avatar or in AvatarPlaceholderProvider */
-export const defaultAvatarSource = require('./default-avatar.jpg');
+export const defaultAvatarSource = defaultAvatar;

package/src/bottom-sheet/index.tsx

@@ -26,10 +26,10 @@ import { useTheme } from '../theme/use-theme';
 // Keyboard handler — only on native platforms. On web, keyboard events are handled by the browser.
 const noopKeyboardHandler = (_handlers: Record<string, (e: { height: number }) => void>, _deps: unknown[]) => {};
 let useKeyboardHandler: (handlers: Record<string, (e: { height: number }) => void>, deps: unknown[]) => void = noopKeyboardHandler;
-if (Platform.OS !== 'web') {
+if (Platform.OS !== 'web' && typeof require !== 'undefined') {
     try {
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
+        const moduleName = 'react-native-keyboard-controller';
+        useKeyboardHandler = require(moduleName).useKeyboardHandler;
     } catch {
         // react-native-keyboard-controller not available
     }

package/src/loading/Loading.tsx

@@ -27,7 +27,11 @@ function getReanimated(): ReanimatedType | null {
   if (!reanimatedResolved) {
     reanimatedResolved = true;
     try {
-      reanimatedModule = require('react-native-reanimated');
+      // 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;
     }

package/src/loading/SpinnerIcon.tsx

@@ -15,7 +15,11 @@ function getSvgModule(): SvgModuleType | null {
   if (!svgModuleResolved) {
     svgModuleResolved = true;
     try {
-      svgModule = require('react-native-svg');
+      // 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;
     }
@@ -27,7 +31,11 @@ function getReanimated(): ReanimatedType | null {
   if (!reanimatedResolved) {
     reanimatedResolved = true;
     try {
-      reanimatedModule = require('react-native-reanimated');
+      // 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;
     }

package/src/theme/adaptive-colors.ts

@@ -5,7 +5,9 @@ const c = (v: unknown): string => v as string;
 
 function getAndroidColors(): ThemeColors | null {
   try {
-    const { Color } = require('expo-router');
+    if (typeof require === 'undefined') return null;
+    const moduleName = 'expo-router';
+    const { Color } = require(moduleName);
     const d = Color.android.dynamic;
     return {
       background: c(d.surface),
@@ -45,7 +47,9 @@ function getAndroidColors(): ThemeColors | null {
 
 function getIOSColors(): ThemeColors | null {
   try {
-    const { Color } = require('expo-router');
+    if (typeof require === 'undefined') return null;
+    const moduleName = 'expo-router';
+    const { Color } = require(moduleName);
     const i = Color.ios;
     return {
       background: c(i.systemBackground),

package/src/theme/color-presets.ts

@@ -1,4 +1,4 @@
-export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy';
+export type AppColorName = 'teal' | 'blue' | 'green' | 'amber' | 'yellow' | 'red' | 'purple' | 'pink' | 'sky' | 'orange' | 'mint' | 'oxy';
 
 export interface AppColorPreset {
   name: AppColorName;
@@ -7,13 +7,14 @@ export interface AppColorPreset {
   dark: Record<string, string>;
 }
 
-export const APP_COLOR_NAMES: AppColorName[] = ['teal', 'blue', 'green', 'amber', 'red', 'purple', 'pink', 'sky', 'orange', 'mint'];
+export const APP_COLOR_NAMES: AppColorName[] = ['teal', 'blue', 'green', 'amber', 'yellow', 'red', 'purple', 'pink', 'sky', 'orange', 'mint'];
 
 export const HEX_TO_APP_COLOR: Record<string, AppColorName> = {
   '#005c67': 'teal',
   '#1d9bf0': 'blue',
   '#10b981': 'green',
   '#f59e0b': 'amber',
+  '#ffc300': 'yellow',
   '#ef4444': 'red',
   '#8b5cf6': 'purple',
   '#ec4899': 'pink',
@@ -216,6 +217,53 @@ export const APP_COLOR_PRESETS: Record<AppColorName, AppColorPreset> = {
     },
   },
 
+  yellow: {
+    name: 'yellow',
+    hex: '#ffc300',
+    light: {
+      '--background': '0 0% 99%',
+      '--foreground': '0 0% 12%',
+      '--surface': '46 10% 97%',
+      '--surface-foreground': '0 0% 12%',
+      '--popover': '0 0% 100%',
+      '--popover-foreground': '0 0% 12%',
+      '--primary': '46 100% 50%',
+      '--primary-foreground': '0 0% 0%',
+      '--secondary': '46 8% 95%',
+      '--secondary-foreground': '0 0% 12%',
+      '--muted': '46 8% 95%',
+      '--muted-foreground': '46 5% 42%',
+      '--accent': '46 8% 95%',
+      '--accent-foreground': '0 0% 12%',
+      '--destructive': '0 84% 60%',
+      '--border': '46 8% 88%',
+      '--input': '46 8% 88%',
+      '--ring': '46 100% 50%',
+      '--sidebar': '46 10% 97%',
+    },
+    dark: {
+      '--background': '46 50% 5%',
+      '--foreground': '0 0% 93%',
+      '--surface': '46 20% 18%',
+      '--surface-foreground': '0 0% 93%',
+      '--popover': '46 20% 18%',
+      '--popover-foreground': '0 0% 93%',
+      '--primary': '46 100% 50%',
+      '--primary-foreground': '0 0% 0%',
+      '--secondary': '46 20% 18%',
+      '--secondary-foreground': '0 0% 93%',
+      '--muted': '46 18% 20%',
+      '--muted-foreground': '0 0% 70%',
+      '--accent': '46 18% 20%',
+      '--accent-foreground': '0 0% 93%',
+      '--destructive': '0 84% 60%',
+      '--border': '46 12% 20%',
+      '--input': '46 10% 23%',
+      '--ring': '46 100% 50%',
+      '--sidebar': '46 30% 8%',
+    },
+  },
+
   red: {
     name: 'red',
     hex: '#EF4444',