@oxyhq/bloom 0.1.14 → 0.1.16

package/src/__tests__/theme.test.ts

@@ -0,0 +1,148 @@
+import {
+  APP_COLOR_PRESETS,
+  APP_COLOR_NAMES,
+  HEX_TO_APP_COLOR,
+  hexToAppColorName,
+} from '../theme/color-presets';
+import type { Theme, ThemeColors, ThemeMode } from '../theme/types';
+
+describe('Theme system', () => {
+  describe('color presets', () => {
+    it('has all named presets defined', () => {
+      for (const name of APP_COLOR_NAMES) {
+        expect(APP_COLOR_PRESETS[name]).toBeDefined();
+        expect(APP_COLOR_PRESETS[name]!.name).toBe(name);
+        expect(APP_COLOR_PRESETS[name]!.hex).toMatch(/^#[0-9a-f]{6}$/i);
+      }
+    });
+
+    it('each preset has both light and dark color variables', () => {
+      const requiredVars = [
+        '--background',
+        '--foreground',
+        '--surface',
+        '--primary',
+        '--border',
+        '--muted',
+        '--muted-foreground',
+        '--destructive',
+        '--input',
+      ];
+
+      for (const name of APP_COLOR_NAMES) {
+        const preset = APP_COLOR_PRESETS[name]!;
+        for (const v of requiredVars) {
+          expect(preset.light[v]).toBeDefined();
+          expect(preset.dark[v]).toBeDefined();
+        }
+      }
+    });
+
+    it('light and dark variants have different values', () => {
+      for (const name of APP_COLOR_NAMES) {
+        const preset = APP_COLOR_PRESETS[name]!;
+        // Background should differ between light and dark
+        expect(preset.light['--background']).not.toBe(preset.dark['--background']);
+      }
+    });
+  });
+
+  describe('hexToAppColorName', () => {
+    it('maps known hex values to correct color names', () => {
+      expect(hexToAppColorName('#005c67')).toBe('teal');
+      expect(hexToAppColorName('#1d9bf0')).toBe('blue');
+      expect(hexToAppColorName('#10b981')).toBe('green');
+      expect(hexToAppColorName('#ef4444')).toBe('red');
+      expect(hexToAppColorName('#c46ede')).toBe('oxy');
+    });
+
+    it('is case-insensitive', () => {
+      expect(hexToAppColorName('#005C67')).toBe('teal');
+      expect(hexToAppColorName('#1D9BF0')).toBe('blue');
+    });
+
+    it('defaults to teal for unknown hex values', () => {
+      expect(hexToAppColorName('#000000')).toBe('teal');
+      expect(hexToAppColorName('#ffffff')).toBe('teal');
+      expect(hexToAppColorName('#123456')).toBe('teal');
+    });
+  });
+
+  describe('HEX_TO_APP_COLOR mapping', () => {
+    it('has a hex entry for every named preset', () => {
+      const mappedNames = new Set(Object.values(HEX_TO_APP_COLOR));
+      for (const name of APP_COLOR_NAMES) {
+        expect(mappedNames.has(name)).toBe(true);
+      }
+    });
+
+    it('hex keys match the preset hex values', () => {
+      for (const [hex, name] of Object.entries(HEX_TO_APP_COLOR)) {
+        const preset = APP_COLOR_PRESETS[name];
+        expect(preset).toBeDefined();
+        expect(preset!.hex.toLowerCase()).toBe(hex.toLowerCase());
+      }
+    });
+  });
+
+  describe('Theme type shape', () => {
+    it('supports light and dark modes with isDark/isLight flags', () => {
+      const lightTheme: Theme = {
+        mode: 'light',
+        isDark: false,
+        isLight: true,
+        colors: createMockColors(),
+      };
+      expect(lightTheme.isDark).toBe(false);
+      expect(lightTheme.isLight).toBe(true);
+
+      const darkTheme: Theme = {
+        mode: 'dark',
+        isDark: true,
+        isLight: false,
+        colors: createMockColors(),
+      };
+      expect(darkTheme.isDark).toBe(true);
+      expect(darkTheme.isLight).toBe(false);
+    });
+
+    it('ThemeMode includes all expected variants', () => {
+      const modes: ThemeMode[] = ['light', 'dark', 'system', 'adaptive'];
+      expect(modes).toHaveLength(4);
+    });
+  });
+});
+
+function createMockColors(): ThemeColors {
+  return {
+    background: '#fff',
+    backgroundSecondary: '#f5f5f5',
+    backgroundTertiary: '#eee',
+    text: '#000',
+    textSecondary: '#666',
+    textTertiary: '#999',
+    border: '#ccc',
+    borderLight: '#ddd',
+    primary: '#005c67',
+    primaryLight: '#e0f7fa',
+    primaryDark: '#003d44',
+    secondary: '#005c67',
+    tint: '#005c67',
+    icon: '#666',
+    iconActive: '#005c67',
+    success: '#10B981',
+    error: '#EF4444',
+    warning: '#F59E0B',
+    info: '#3B82F6',
+    primarySubtle: '#e0f7fa',
+    primarySubtleForeground: '#003d44',
+    negative: '#B91C1C',
+    negativeForeground: '#FFFFFF',
+    negativeSubtle: '#fef2f2',
+    negativeSubtleForeground: '#B91C1C',
+    contrast50: '#f5f5f5',
+    card: '#f5f5f5',
+    shadow: 'rgba(0,0,0,0.1)',
+    overlay: 'rgba(0,0,0,0.5)',
+  };
+}

package/src/accordion/Accordion.tsx

@@ -0,0 +1,261 @@
+import React, { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
+import { View, Text, Pressable, Animated, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { animation, borderRadius, space } from '../styles/tokens';
+import type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+  AccordionType,
+} from './types';
+
+// ---- Context ----
+
+interface AccordionContextValue {
+  expandedValues: Set<string>;
+  toggle: (value: string) => void;
+  type: AccordionType;
+}
+
+const AccordionContext = createContext<AccordionContextValue>({
+  expandedValues: new Set(),
+  toggle: () => {},
+  type: 'single',
+});
+
+interface AccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+  disabled: boolean;
+}
+
+const AccordionItemContext = createContext<AccordionItemContextValue>({
+  value: '',
+  isExpanded: false,
+  disabled: false,
+});
+
+// ---- Accordion Root ----
+
+const AccordionComponent: React.FC<AccordionProps> = ({
+  value,
+  onValueChange,
+  type = 'single',
+  children,
+  style,
+  testID,
+}) => {
+  const expandedValues = useMemo(() => {
+    if (value == null) return new Set<string>();
+    if (Array.isArray(value)) return new Set(value);
+    return new Set([value]);
+  }, [value]);
+
+  const toggle = useCallback(
+    (itemValue: string) => {
+      if (type === 'single') {
+        const next = expandedValues.has(itemValue) ? undefined : itemValue;
+        onValueChange(next);
+      } else {
+        const next = new Set(expandedValues);
+        if (next.has(itemValue)) {
+          next.delete(itemValue);
+        } else {
+          next.add(itemValue);
+        }
+        onValueChange(Array.from(next));
+      }
+    },
+    [type, expandedValues, onValueChange],
+  );
+
+  const contextValue = useMemo(
+    () => ({ expandedValues, toggle, type }),
+    [expandedValues, toggle, type],
+  );
+
+  return (
+    <AccordionContext.Provider value={contextValue}>
+      <View style={style} testID={testID}>
+        {children}
+      </View>
+    </AccordionContext.Provider>
+  );
+};
+
+// ---- Accordion Item ----
+
+const AccordionItemComponent: React.FC<AccordionItemProps> = ({
+  value,
+  children,
+  disabled = false,
+  style,
+}) => {
+  const { expandedValues } = useContext(AccordionContext);
+  const isExpanded = expandedValues.has(value);
+  const theme = useTheme();
+
+  const itemContext = useMemo(
+    () => ({ value, isExpanded, disabled }),
+    [value, isExpanded, disabled],
+  );
+
+  return (
+    <AccordionItemContext.Provider value={itemContext}>
+      <View
+        style={[
+          {
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.borderLight,
+          },
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </AccordionItemContext.Provider>
+  );
+};
+
+// ---- Accordion Trigger ----
+
+const AccordionTriggerComponent: React.FC<AccordionTriggerProps> = ({
+  children,
+  icon,
+  style,
+  textStyle,
+}) => {
+  const theme = useTheme();
+  const { toggle } = useContext(AccordionContext);
+  const { value, isExpanded, disabled } = useContext(AccordionItemContext);
+  const rotateAnim = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(rotateAnim, {
+      toValue: isExpanded ? 1 : 0,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [isExpanded, rotateAnim]);
+
+  const handlePress = useCallback(() => {
+    if (!disabled) {
+      toggle(value);
+    }
+  }, [value, disabled, toggle]);
+
+  const rotation = rotateAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  });
+
+  return (
+    <Pressable
+      style={({ pressed }) => [
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: space.md,
+          paddingHorizontal: space.xs,
+          gap: space.sm,
+          opacity: disabled ? 0.4 : pressed ? 0.7 : 1,
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      disabled={disabled}
+      accessibilityRole="button"
+      accessibilityState={{ expanded: isExpanded, disabled }}
+    >
+      {icon}
+      <View style={{ flex: 1 }}>
+        {typeof children === 'string' ? (
+          <Text
+            style={[
+              {
+                fontSize: 15,
+                fontWeight: '600',
+                color: theme.colors.text,
+              },
+              textStyle,
+            ]}
+          >
+            {children}
+          </Text>
+        ) : (
+          children
+        )}
+      </View>
+      <Animated.View style={{ transform: [{ rotate: rotation }] }}>
+        <Text
+          style={{
+            fontSize: 16,
+            color: theme.colors.textSecondary,
+            lineHeight: 18,
+          }}
+        >
+          {'\u25BE'}
+        </Text>
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+// ---- Accordion Content ----
+
+const AccordionContentComponent: React.FC<AccordionContentProps> = ({
+  children,
+  style,
+}) => {
+  const { isExpanded } = useContext(AccordionItemContext);
+  const heightAnim = useRef(new Animated.Value(isExpanded ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.spring(heightAnim, {
+      toValue: isExpanded ? 1 : 0,
+      useNativeDriver: false,
+      ...animation.spring.gentle,
+    }).start();
+  }, [isExpanded, heightAnim]);
+
+  const opacity = heightAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 1],
+  });
+
+  const maxHeight = heightAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, 500], // reasonable max; content will use its natural height
+  });
+
+  return (
+    <Animated.View
+      style={[
+        {
+          overflow: 'hidden',
+          opacity,
+          maxHeight,
+        },
+        style,
+      ]}
+    >
+      <View style={{ paddingBottom: space.md, paddingHorizontal: space.xs }}>
+        {children}
+      </View>
+    </Animated.View>
+  );
+};
+
+export const Accordion = memo(AccordionComponent);
+Accordion.displayName = 'Accordion';
+
+export const AccordionItem = memo(AccordionItemComponent);
+AccordionItem.displayName = 'AccordionItem';
+
+export const AccordionTrigger = memo(AccordionTriggerComponent);
+AccordionTrigger.displayName = 'AccordionTrigger';
+
+export const AccordionContent = memo(AccordionContentComponent);
+AccordionContent.displayName = 'AccordionContent';

package/src/accordion/index.ts

@@ -0,0 +1,8 @@
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './Accordion';
+export type {
+  AccordionProps,
+  AccordionItemProps,
+  AccordionTriggerProps,
+  AccordionContentProps,
+  AccordionType,
+} from './types';

package/src/accordion/types.ts

@@ -0,0 +1,42 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type AccordionType = 'single' | 'multiple';
+
+export interface AccordionProps {
+  /** Controls which items are expanded. For 'single' type, pass a string or undefined.
+   *  For 'multiple' type, pass an array of strings. */
+  value: string | string[] | undefined;
+  /** Called when expanded items change. */
+  onValueChange: (value: string | string[] | undefined) => void;
+  /** Whether only one item can be expanded at a time. */
+  type?: AccordionType;
+  /** Accordion items. */
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface AccordionItemProps {
+  /** Unique value identifying this item. */
+  value: string;
+  /** Item content: should be AccordionTrigger and AccordionContent. */
+  children: React.ReactNode;
+  /** Whether this item is disabled. */
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface AccordionTriggerProps {
+  /** Trigger content (label text). */
+  children: React.ReactNode;
+  /** Icon to show on the left side. */
+  icon?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export interface AccordionContentProps {
+  /** Content to show when expanded. */
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}

package/src/avatar/Avatar.tsx

@@ -37,18 +37,20 @@ function SquircleImage({
   fallbackSource,
   size,
   fallbackColor,
+  placeholderIcon,
   onError,
 }: {
   uri?: string;
   fallbackSource?: AvatarProps['fallbackSource'];
   size: number;
   fallbackColor: string;
+  placeholderIcon?: React.ReactNode;
   onError: () => void;
 }) {
   const svg = getSvgModule();
   if (!svg) {
     // Fallback to circle if react-native-svg is not installed
-    return <CircleFallback size={size} fallbackColor={fallbackColor} />;
+    return <CircleFallback size={size} fallbackColor={fallbackColor} icon={placeholderIcon} />;
   }
 
   const { default: Svg, Defs, ClipPath, Path, Image: SvgImage } = svg;
@@ -56,7 +58,7 @@ function SquircleImage({
 
   const href = uri ? { uri } : fallbackSource;
   if (!href) {
-    return <CircleFallback size={size} fallbackColor={fallbackColor} />;
+    return <CircleFallback size={size} fallbackColor={fallbackColor} icon={placeholderIcon} />;
   }
 
   return (
@@ -87,7 +89,7 @@ function SquircleImage({
   );
 }
 
-function CircleFallback({ size, fallbackColor }: { size: number; fallbackColor: string }) {
+function CircleFallback({ size, fallbackColor, icon }: { size: number; fallbackColor: string; icon?: React.ReactNode }) {
   const radius = size / 2;
   return (
     <View
@@ -96,8 +98,13 @@ function CircleFallback({ size, fallbackColor }: { size: number; fallbackColor:
         height: size,
         borderRadius: radius,
         backgroundColor: fallbackColor,
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
       }}
-    />
+    >
+      {icon ?? null}
+    </View>
   );
 }
 
@@ -111,13 +118,15 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   shape = 'circle',
   style,
   imageStyle,
+  placeholderColor,
+  placeholderIcon,
   onPress,
   testID,
 }) => {
   const [errored, setErrored] = useState(false);
   const theme = useTheme();
   const radius = size / 2;
-  const fallbackColor = theme.colors.backgroundTertiary;
+  const fallbackColor = placeholderColor || theme.colors.backgroundTertiary;
 
   // Reset error state when source changes (e.g., list item recycling
   // or async URL resolution replacing an initial file ID).
@@ -168,6 +177,7 @@ const AvatarComponent: React.FC<AvatarProps> = ({
           fallbackSource={fallbackSource}
           size={size}
           fallbackColor={fallbackColor}
+          placeholderIcon={placeholderIcon}
           onError={() => setErrored(true)}
         />
       ) : (
@@ -180,7 +190,7 @@ const AvatarComponent: React.FC<AvatarProps> = ({
               style={[StyleSheet.absoluteFillObject, { borderRadius: radius }, imageStyle]}
             />
           ) : (
-            <CircleFallback size={size} fallbackColor={fallbackColor} />
+            <CircleFallback size={size} fallbackColor={fallbackColor} icon={placeholderIcon} />
           )}
         </View>
       )}

package/src/avatar/types.ts

@@ -26,6 +26,10 @@ export interface AvatarProps {
   style?: StyleProp<ViewStyle>;
   /** Image style (circle shape only) */
   imageStyle?: StyleProp<ImageStyle>;
+  /** Custom background color for the placeholder circle (overrides theme default) */
+  placeholderColor?: string;
+  /** Custom icon rendered inside the placeholder circle when no image is available */
+  placeholderIcon?: ReactNode;
   /** Press handler — wraps avatar in TouchableOpacity when provided */
   onPress?: () => void;
   testID?: string;

package/src/badge/Badge.tsx

@@ -0,0 +1,151 @@
+import React, { memo, useMemo } from 'react';
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { BadgeProps, BadgeColor, BadgeVariant } from './types';
+
+const SIZE_CONFIG = {
+  small: { minWidth: 16, height: 16, fontSize: 10, paddingHorizontal: 4, dotSize: 6 },
+  medium: { minWidth: 20, height: 20, fontSize: 12, paddingHorizontal: 6, dotSize: 8 },
+  large: { minWidth: 24, height: 24, fontSize: 14, paddingHorizontal: 8, dotSize: 10 },
+} as const;
+
+const PLACEMENT_CONFIG = {
+  'top-right': { top: -4, right: -4 },
+  'top-left': { top: -4, left: -4 },
+  'bottom-right': { bottom: -4, right: -4 },
+  'bottom-left': { bottom: -4, left: -4 },
+} as const;
+
+function useColorPair(
+  color: BadgeColor,
+  variant: BadgeVariant,
+  theme: ReturnType<typeof useTheme>,
+): { bg: string; fg: string } {
+  const colorMap: Record<BadgeColor, string> = {
+    default: theme.colors.textSecondary,
+    primary: theme.colors.primary,
+    success: theme.colors.success,
+    warning: theme.colors.warning,
+    error: theme.colors.error,
+    info: theme.colors.info,
+  };
+
+  const base = colorMap[color];
+
+  switch (variant) {
+    case 'solid':
+      return { bg: base, fg: '#fff' };
+    case 'subtle':
+      return { bg: base + '20', fg: base };
+    case 'outlined':
+      return { bg: 'transparent', fg: base };
+  }
+}
+
+const BadgeComponent: React.FC<BadgeProps> = ({
+  content,
+  variant = 'solid',
+  color = 'error',
+  size = 'medium',
+  dot = false,
+  max,
+  invisible = false,
+  placement = 'top-right',
+  children,
+  style,
+  textStyle,
+  testID,
+}) => {
+  const theme = useTheme();
+  const colors = useColorPair(color, variant, theme);
+  const sizeConfig = SIZE_CONFIG[size];
+
+  const displayContent = useMemo(() => {
+    if (dot) return null;
+    if (content == null) return null;
+    if (typeof content === 'number' && max != null && content > max) {
+      return `${max}+`;
+    }
+    return String(content);
+  }, [content, dot, max]);
+
+  const badgeStyle = useMemo((): ViewStyle => {
+    if (dot) {
+      return {
+        width: sizeConfig.dotSize,
+        height: sizeConfig.dotSize,
+        borderRadius: sizeConfig.dotSize / 2,
+        backgroundColor: colors.bg,
+      };
+    }
+
+    const base: ViewStyle = {
+      minWidth: sizeConfig.height,
+      height: sizeConfig.height,
+      borderRadius: sizeConfig.height / 2,
+      paddingHorizontal: sizeConfig.paddingHorizontal,
+      backgroundColor: colors.bg,
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+
+    if (variant === 'outlined') {
+      base.borderWidth = 1;
+      base.borderColor = colors.fg;
+    }
+
+    return base;
+  }, [dot, sizeConfig, colors, variant]);
+
+  const badgeTextStyle = useMemo(
+    (): TextStyle => ({
+      fontSize: sizeConfig.fontSize,
+      fontWeight: '600',
+      color: colors.fg,
+      textAlign: 'center',
+      lineHeight: sizeConfig.height,
+    }),
+    [sizeConfig, colors],
+  );
+
+  // Standalone badge (no children)
+  if (!children) {
+    if (invisible) return null;
+
+    return (
+      <View style={[badgeStyle, style]} testID={testID}>
+        {displayContent != null && (
+          <Text style={[badgeTextStyle, textStyle]}>{displayContent}</Text>
+        )}
+      </View>
+    );
+  }
+
+  // Positioned badge wrapping children
+  return (
+    <View style={{ position: 'relative', alignSelf: 'flex-start' }} testID={testID}>
+      {children}
+      {!invisible && (
+        <View
+          style={[
+            {
+              position: 'absolute',
+              zIndex: 1,
+              ...PLACEMENT_CONFIG[placement],
+            },
+            badgeStyle,
+            style,
+          ]}
+        >
+          {displayContent != null && (
+            <Text style={[badgeTextStyle, textStyle]}>{displayContent}</Text>
+          )}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export const Badge = memo(BadgeComponent);
+Badge.displayName = 'Badge';