@oxyhq/bloom 0.1.21 → 0.1.23

package/src/button/types.ts

@@ -22,4 +22,5 @@ export interface ButtonProps {
   hitSlop?: { top: number; bottom: number; left: number; right: number };
   activeOpacity?: number;
   testID?: string;
+  className?: string;
 }

package/src/loading/Loading.tsx

@@ -38,6 +38,7 @@ function getReanimated(): ReanimatedType | null {
 const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
   size = 'medium',
   color,
+  className,
   text,
   textStyle,
   style,
@@ -49,12 +50,12 @@ const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
   const theme = useTheme();
   const sizeConfig = SIZE_CONFIG[size];
   const effectiveIconSize = iconSize ?? sizeConfig.spinner;
-  const spinnerColor = color ?? theme.colors.primary;
+  const spinnerColor = className ? 'currentColor' : (color ?? theme.colors.primary);
   const textColor = color ?? theme.colors.textSecondary;
 
   return (
     <View style={[styles.container, style]} testID={testID}>
-      {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} />}
+      {spinnerIcon ?? <SpinnerIcon size={effectiveIconSize} color={spinnerColor} className={className} />}
       {showText && text && (
         <Text
           style={[
@@ -262,9 +263,9 @@ Loading.displayName = 'Loading';
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
+    padding: 16,
   },
   text: {
     textAlign: 'center',

package/src/loading/SpinnerIcon.tsx

@@ -38,10 +38,12 @@ function getReanimated(): ReanimatedType | null {
 interface SpinnerIconProps {
   size?: number;
   color?: string;
+  className?: string;
   style?: ViewStyle;
 }
 
-type AnimatedSpinnerProps = SpinnerIconProps & {
+type AnimatedSpinnerProps = Omit<SpinnerIconProps, 'className'> & {
+  className?: string;
   svg: NonNullable<SvgModuleType>;
   reanimated: NonNullable<ReanimatedType>;
 };
@@ -51,8 +53,9 @@ type AnimatedSpinnerProps = SpinnerIconProps & {
  * Only rendered when both react-native-svg and react-native-reanimated are available.
  */
 const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
-  color = '#005c67',
+  color = 'currentColor',
   size = 26,
+  className,
   style,
   svg,
   reanimated,
@@ -97,7 +100,8 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
         style,
       ]}
     >
-      <Svg viewBox="0 0 100 100" width={size} height={size}>
+      {/* @ts-expect-error className is added by NativeWind cssInterop at runtime */}
+      <Svg viewBox="0 0 100 100" width={size} height={size} className={className}>
         <Rect fill={color} height="10" opacity="0" rx="5" ry="5" transform="rotate(-90 50 50)" width="28" x="67" y="45" />
         <Rect fill={color} height="10" opacity="0.125" rx="5" ry="5" transform="rotate(-45 50 50)" width="28" x="67" y="45" />
         <Rect fill={color} height="10" opacity="0.25" rx="5" ry="5" transform="rotate(0 50 50)" width="28" x="67" y="45" />
@@ -117,8 +121,9 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
  * Falls back to ActivityIndicator if either is missing.
  */
 export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
-  color = '#005c67',
+  color = 'currentColor',
   size = 26,
+  className,
   style,
 }) => {
   const svg = getSvgModule();
@@ -132,6 +137,7 @@ export const SpinnerIcon: React.FC<SpinnerIconProps> = ({
     <AnimatedSpinner
       color={color}
       size={size}
+      className={className}
       style={style}
       svg={svg}
       reanimated={reanimated}

package/src/loading/types.ts

@@ -11,6 +11,8 @@ interface BaseLoadingProps {
   size?: LoadingSize;
   /** Custom color (defaults to theme primary) */
   color?: string;
+  /** NativeWind className for spinner color (e.g. "text-primary"). Overrides color prop. */
+  className?: string;
   /** Custom container style */
   style?: ViewStyle;
   /** Whether loading is active (for animated variants) */

package/src/theme/BloomThemeProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useCallback, useEffect, useMemo } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo } from 'react';
 import { useColorScheme as useRNColorScheme, Platform } from 'react-native';
 import { APP_COLOR_PRESETS, type AppColorName } from './color-presets';
 import { getAdaptiveColors } from './adaptive-colors';
@@ -23,6 +23,78 @@ function hsl(h: number, s: number, l: number): string {
   return `hsl(${h}, ${s}%, ${l}%)`;
 }
 
+/** Build a Theme object from a color preset name and resolved light/dark mode. */
+export function buildTheme(appColor: AppColorName, resolved: 'light' | 'dark', isAdaptive: boolean = false): Theme {
+  const isDark = resolved === 'dark';
+
+  let themeColors: ThemeColors | undefined;
+
+  if (isAdaptive && Platform.OS !== 'web') {
+    const adaptive = getAdaptiveColors();
+    if (adaptive) {
+      themeColors = adaptive;
+    }
+  }
+
+  if (!themeColors) {
+    const preset = APP_COLOR_PRESETS[appColor];
+    const vars = resolved === 'light' ? preset.light : preset.dark;
+    const primaryHue = extractHue(vars['--primary']!);
+    const destructiveHue = extractHue(vars['--destructive']!);
+
+    const surface = hslVarToCSS(vars['--surface']!);
+    const background = hslVarToCSS(vars['--background']!);
+    const mutedForeground = hslVarToCSS(vars['--muted-foreground']!);
+
+    themeColors = {
+      background,
+      backgroundSecondary: surface,
+      backgroundTertiary: hslVarToCSS(vars['--muted']!),
+
+      text: hslVarToCSS(vars['--foreground']!),
+      textSecondary: mutedForeground,
+      textTertiary: mutedForeground,
+
+      border: hslVarToCSS(vars['--border']!),
+      borderLight: hslVarToCSS(vars['--input']!),
+
+      primary: preset.hex,
+      primaryLight: surface,
+      primaryDark: background,
+
+      secondary: preset.hex,
+
+      tint: preset.hex,
+      icon: mutedForeground,
+      iconActive: preset.hex,
+
+      success: '#10B981',
+      error: '#EF4444',
+      warning: '#F59E0B',
+      info: '#3B82F6',
+
+      primarySubtle: isDark ? hsl(primaryHue, 50, 10) : hsl(primaryHue, 70, 93),
+      primarySubtleForeground: isDark ? hsl(primaryHue, 70, 65) : hsl(primaryHue, 90, 25),
+      negative: hsl(destructiveHue, 84, 45),
+      negativeForeground: '#FFFFFF',
+      negativeSubtle: isDark ? hsl(destructiveHue, 50, 10) : hsl(destructiveHue, 90, 95),
+      negativeSubtleForeground: isDark ? hsl(destructiveHue, 70, 65) : hsl(destructiveHue, 80, 40),
+      contrast50: isDark ? hsl(primaryHue, 15, 12) : hsl(primaryHue, 10, 93),
+
+      card: surface,
+      shadow: isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)',
+      overlay: 'rgba(0, 0, 0, 0.5)',
+    };
+  }
+
+  return {
+    mode: resolved,
+    colors: themeColors,
+    isDark,
+    isLight: !isDark,
+  };
+}
+
 export interface BloomThemeContextValue {
   theme: Theme;
   mode: ThemeMode;
@@ -80,77 +152,42 @@ export function BloomThemeProvider({
   );
 
   const contextValue = useMemo<BloomThemeContextValue>(() => {
-    const isDark = resolved === 'dark';
+    const theme = buildTheme(appColor, resolved, isAdaptive);
+    return { theme, mode, colorPreset: appColor, setMode, setColorPreset };
+  }, [resolved, appColor, isAdaptive, mode, setMode, setColorPreset]);
 
-    let themeColors: ThemeColors;
+  return (
+    <BloomThemeContext.Provider value={contextValue}>
+      {children}
+    </BloomThemeContext.Provider>
+  );
+}
 
-    if (isAdaptive && Platform.OS !== 'web') {
-      const adaptive = getAdaptiveColors();
-      if (adaptive) {
-        themeColors = adaptive;
-      }
-    }
+/**
+ * Scoped color override for a subtree.
+ * Inherits mode/dark from the parent BloomThemeProvider but overrides the color preset.
+ * Use this to tint a section of the UI (e.g. a visited user's profile) without
+ * affecting the rest of the app.
+ */
+export interface BloomColorScopeProps {
+  colorPreset: AppColorName;
+  children: React.ReactNode;
+}
 
-    if (!themeColors!) {
-      const preset = APP_COLOR_PRESETS[appColor];
-      const vars = resolved === 'light' ? preset.light : preset.dark;
-      const primaryHue = extractHue(vars['--primary']!);
-      const destructiveHue = extractHue(vars['--destructive']!);
-
-      const surface = hslVarToCSS(vars['--surface']!);
-      const background = hslVarToCSS(vars['--background']!);
-      const mutedForeground = hslVarToCSS(vars['--muted-foreground']!);
-
-      themeColors = {
-        background,
-        backgroundSecondary: surface,
-        backgroundTertiary: hslVarToCSS(vars['--muted']!),
-
-        text: hslVarToCSS(vars['--foreground']!),
-        textSecondary: mutedForeground,
-        textTertiary: mutedForeground,
-
-        border: hslVarToCSS(vars['--border']!),
-        borderLight: hslVarToCSS(vars['--input']!),
-
-        primary: preset.hex,
-        primaryLight: surface,
-        primaryDark: background,
-
-        secondary: preset.hex,
-
-        tint: preset.hex,
-        icon: mutedForeground,
-        iconActive: preset.hex,
-
-        success: '#10B981',
-        error: '#EF4444',
-        warning: '#F59E0B',
-        info: '#3B82F6',
-
-        primarySubtle: isDark ? hsl(primaryHue, 50, 10) : hsl(primaryHue, 70, 93),
-        primarySubtleForeground: isDark ? hsl(primaryHue, 70, 65) : hsl(primaryHue, 90, 25),
-        negative: hsl(destructiveHue, 84, 45),
-        negativeForeground: '#FFFFFF',
-        negativeSubtle: isDark ? hsl(destructiveHue, 50, 10) : hsl(destructiveHue, 90, 95),
-        negativeSubtleForeground: isDark ? hsl(destructiveHue, 70, 65) : hsl(destructiveHue, 80, 40),
-        contrast50: isDark ? hsl(primaryHue, 15, 12) : hsl(primaryHue, 10, 93),
-
-        card: surface,
-        shadow: isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)',
-        overlay: 'rgba(0, 0, 0, 0.5)',
-      };
-    }
+export function BloomColorScope({ colorPreset, children }: BloomColorScopeProps) {
+  const parent = useContext(BloomThemeContext);
+  if (!parent) {
+    throw new Error('BloomColorScope must be used within a <BloomThemeProvider>');
+  }
 
-    const theme: Theme = {
-      mode: resolved,
-      colors: themeColors,
-      isDark,
-      isLight: !isDark,
+  const contextValue = useMemo<BloomThemeContextValue>(() => {
+    const theme = buildTheme(colorPreset, parent.theme.mode as 'light' | 'dark');
+    return {
+      ...parent,
+      theme,
+      colorPreset,
     };
-
-    return { theme, mode, colorPreset: appColor, setMode, setColorPreset };
-  }, [resolved, appColor, isAdaptive, mode, setMode, setColorPreset]);
+  }, [colorPreset, parent]);
 
   return (
     <BloomThemeContext.Provider value={contextValue}>

package/src/theme/index.ts

@@ -1,5 +1,5 @@
-export { BloomThemeProvider } from './BloomThemeProvider';
-export type { BloomThemeProviderProps, BloomThemeContextValue } from './BloomThemeProvider';
+export { BloomThemeProvider, BloomColorScope, buildTheme } from './BloomThemeProvider';
+export type { BloomThemeProviderProps, BloomThemeContextValue, BloomColorScopeProps } from './BloomThemeProvider';
 export { useTheme, useThemeColor, useBloomTheme } from './use-theme';
 export type { Theme, ThemeColors, ThemeMode } from './types';
 export type { AppColorName, AppColorPreset } from './color-presets';