@oxyhq/bloom 0.1.13 → 0.1.15

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/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';

package/src/badge/index.ts

@@ -0,0 +1,8 @@
+export { Badge } from './Badge';
+export type {
+  BadgeProps,
+  BadgeVariant,
+  BadgeColor,
+  BadgeSize,
+  BadgePlacement,
+} from './types';

package/src/badge/types.ts

@@ -0,0 +1,30 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type BadgeVariant = 'solid' | 'subtle' | 'outlined';
+export type BadgeColor = 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+export type BadgeSize = 'small' | 'medium' | 'large';
+export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+
+export interface BadgeProps {
+  /** Text or number to display in the badge. */
+  content?: string | number;
+  /** Visual variant. */
+  variant?: BadgeVariant;
+  /** Semantic color. */
+  color?: BadgeColor;
+  /** Size preset. */
+  size?: BadgeSize;
+  /** If true, renders as a small dot without content. */
+  dot?: boolean;
+  /** Maximum number to display. Values above this show "{max}+". */
+  max?: number;
+  /** If true, the badge is hidden. */
+  invisible?: boolean;
+  /** Where to position the badge relative to its child. */
+  placement?: BadgePlacement;
+  /** The element the badge is attached to. */
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/bottom-sheet/index.tsx

@@ -23,18 +23,31 @@ import Animated, {
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useTheme } from '../theme/use-theme';
 
-// Optional dependency — uses a no-op fallback if not installed
-// The hook is always called (Rules of Hooks) but does nothing without the library
+// 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;
-try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
-} catch {
-    // react-native-keyboard-controller not available
+if (Platform.OS !== 'web') {
+    try {
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        useKeyboardHandler = require('react-native-keyboard-controller').useKeyboardHandler;
+    } catch {
+        // react-native-keyboard-controller not available
+    }
 }
 
-const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+/** Hook that returns current screen dimensions and updates on rotation/resize. */
+function useScreenDimensions() {
+    const [dimensions, setDimensions] = useState(() => Dimensions.get('window'));
+
+    useEffect(() => {
+        const subscription = Dimensions.addEventListener('change', ({ window }) => {
+            setDimensions(window);
+        });
+        return () => subscription.remove();
+    }, []);
+
+    return dimensions;
+}
 
 const SPRING_CONFIG = {
     damping: 25,
@@ -77,14 +90,22 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
     } = props;
 
     const insets = useSafeAreaInsets();
-    const { colors } = useTheme();
+    const theme = useTheme();
+    const { colors } = theme;
+    const { height: screenHeight } = useScreenDimensions();
     const [visible, setVisible] = useState(false);
     const [rendered, setRendered] = useState(false); // keep mounted for exit animation
     const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const hasClosedRef = useRef(false);
     const scrollViewRef = useRef<Animated.ScrollView>(null);
 
-    const translateY = useSharedValue(SCREEN_HEIGHT);
+    const screenHeightSV = useSharedValue(screenHeight);
+    // Keep shared value in sync when screen dimensions change (rotation/resize)
+    useEffect(() => {
+        screenHeightSV.value = screenHeight;
+    }, [screenHeight, screenHeightSV]);
+
+    const translateY = useSharedValue(screenHeight);
     const opacity = useSharedValue(0);
     const scrollOffsetY = useSharedValue(0);
     const isScrollAtTop = useSharedValue(true);
@@ -134,7 +155,7 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
                     runOnJS(finishClose)();
                 }
             });
-            translateY.value = withSpring(SCREEN_HEIGHT, { ...SPRING_CONFIG, stiffness: 250 });
+            translateY.value = withSpring(screenHeight, { ...SPRING_CONFIG, stiffness: 250 });
 
             // Fallback timer to ensure close completes (especially on web)
             if (closeTimeoutRef.current) {
@@ -226,14 +247,14 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
                     const velocity = event.velocityY;
                     const distance = translateY.value;
                     // Require a deeper pull to close (more like native bottom sheets)
-                    const closeThreshold = Math.max(140, SCREEN_HEIGHT * 0.25);
+                    const closeThreshold = Math.max(140, screenHeightSV.value * 0.25);
                     const fastSwipeThreshold = 900;
                     const shouldClose =
                         velocity > fastSwipeThreshold ||
                         (distance > closeThreshold && velocity > -300);
 
                     if (shouldClose) {
-                        translateY.value = withSpring(SCREEN_HEIGHT, {
+                        translateY.value = withSpring(screenHeightSV.value, {
                             ...SPRING_CONFIG,
                             velocity: velocity,
                         });
@@ -261,7 +282,7 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
     }));
 
     const sheetStyle = useAnimatedStyle(() => {
-        const scale = interpolate(translateY.value, [0, SCREEN_HEIGHT], [1, 0.95]);
+        const scale = interpolate(translateY.value, [0, screenHeightSV.value], [1, 0.95]);
         return {
             transform: [
                 { translateY: translateY.value - keyboardHeight.value },
@@ -271,7 +292,7 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
     });
 
     const sheetHeightStyle = useAnimatedStyle(() => ({
-        maxHeight: SCREEN_HEIGHT - keyboardHeight.value - insets.top - (detached ? insets.bottom + 16 : 0),
+        maxHeight: screenHeightSV.value - keyboardHeight.value - insets.top - (detached ? insets.bottom + 16 : 0),
     }), [insets.top, insets.bottom, detached]);
 
     const sheetMarginStyle = useAnimatedStyle(() => {
@@ -302,11 +323,10 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
     });
 
     const dynamicStyles = useMemo(() => {
-        const isDark = colors.background === '#000000';
         return StyleSheet.create({
             handle: {
                 ...styles.handle,
-                backgroundColor: isDark ? '#444' : '#C7C7CC',
+                backgroundColor: theme.isDark ? '#444' : '#C7C7CC',
             },
             sheet: {
                 ...styles.sheet,
@@ -319,7 +339,7 @@ const BottomSheet = forwardRef((props: BottomSheetProps, ref: React.ForwardedRef
                 // The sheet extends behind safe area, and screens add padding as needed
             },
         });
-    }, [colors.background, detached]);
+    }, [colors.background, theme.isDark, detached]);
 
     if (!rendered) return null;