@oxyhq/bloom 0.1.14 → 0.1.16

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

@@ -35,7 +35,19 @@ if (Platform.OS !== 'web') {
     }
 }
 
-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,
@@ -78,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);
@@ -135,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) {
@@ -227,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,
                         });
@@ -262,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 },
@@ -272,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(() => {
@@ -303,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,
@@ -320,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;
 

package/src/card/Card.tsx

@@ -0,0 +1,197 @@
+import React, { memo, useMemo } from 'react';
+import { View, Text, Pressable, Platform, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { borderRadius, space } from '../styles/tokens';
+import type {
+  CardProps,
+  CardHeaderProps,
+  CardBodyProps,
+  CardFooterProps,
+  CardTitleProps,
+  CardDescriptionProps,
+} from './types';
+
+const CardRootComponent: React.FC<CardProps> = ({
+  children,
+  variant = 'elevated',
+  style,
+  onPress,
+  disabled = false,
+  accessibilityLabel,
+  testID,
+}) => {
+  const theme = useTheme();
+
+  const containerStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      borderRadius: borderRadius.md,
+      overflow: 'hidden',
+    };
+
+    switch (variant) {
+      case 'elevated':
+        base.backgroundColor = theme.colors.card;
+        if (Platform.OS === 'web') {
+          base.boxShadow = `0px 1px 3px ${theme.colors.shadow}`;
+        } else {
+          base.shadowColor = theme.colors.shadow;
+          base.shadowOffset = { width: 0, height: 1 };
+          base.shadowOpacity = 0.2;
+          base.shadowRadius = 3;
+          base.elevation = 2;
+        }
+        break;
+      case 'outlined':
+        base.backgroundColor = theme.colors.card;
+        base.borderWidth = 1;
+        base.borderColor = theme.colors.border;
+        break;
+      case 'filled':
+        base.backgroundColor = theme.colors.backgroundSecondary;
+        break;
+    }
+
+    return base;
+  }, [variant, theme]);
+
+  if (onPress) {
+    return (
+      <Pressable
+        style={({ pressed }) => [
+          containerStyle,
+          pressed && { opacity: 0.85 },
+          disabled && { opacity: 0.5 },
+          style,
+        ]}
+        onPress={onPress}
+        disabled={disabled}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        accessibilityState={{ disabled }}
+        testID={testID}
+      >
+        {children}
+      </Pressable>
+    );
+  }
+
+  return (
+    <View
+      style={[containerStyle, disabled && { opacity: 0.5 }, style]}
+      accessibilityLabel={accessibilityLabel}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+};
+
+const CardHeaderComponent: React.FC<CardHeaderProps> = ({ children, style }) => (
+  <View
+    style={[
+      {
+        paddingHorizontal: space.lg,
+        paddingTop: space.lg,
+        paddingBottom: space.sm,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const CardBodyComponent: React.FC<CardBodyProps> = ({ children, style }) => (
+  <View
+    style={[
+      {
+        paddingHorizontal: space.lg,
+        paddingVertical: space.sm,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const CardFooterComponent: React.FC<CardFooterProps> = ({ children, style }) => (
+  <View
+    style={[
+      {
+        paddingHorizontal: space.lg,
+        paddingTop: space.sm,
+        paddingBottom: space.lg,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        gap: space.sm,
+      },
+      style,
+    ]}
+  >
+    {children}
+  </View>
+);
+
+const CardTitleComponent: React.FC<CardTitleProps> = ({ children, style, numberOfLines }) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[
+        {
+          fontSize: 17,
+          fontWeight: '600',
+          color: theme.colors.text,
+          lineHeight: 22,
+        },
+        style,
+      ]}
+      numberOfLines={numberOfLines}
+    >
+      {children}
+    </Text>
+  );
+};
+
+const CardDescriptionComponent: React.FC<CardDescriptionProps> = ({
+  children,
+  style,
+  numberOfLines,
+}) => {
+  const theme = useTheme();
+  return (
+    <Text
+      style={[
+        {
+          fontSize: 14,
+          color: theme.colors.textSecondary,
+          lineHeight: 20,
+        },
+        style,
+      ]}
+      numberOfLines={numberOfLines}
+    >
+      {children}
+    </Text>
+  );
+};
+
+export const Card = memo(CardRootComponent);
+Card.displayName = 'Card';
+
+export const CardHeader = memo(CardHeaderComponent);
+CardHeader.displayName = 'CardHeader';
+
+export const CardBody = memo(CardBodyComponent);
+CardBody.displayName = 'CardBody';
+
+export const CardFooter = memo(CardFooterComponent);
+CardFooter.displayName = 'CardFooter';
+
+export const CardTitle = memo(CardTitleComponent);
+CardTitle.displayName = 'CardTitle';
+
+export const CardDescription = memo(CardDescriptionComponent);
+CardDescription.displayName = 'CardDescription';

package/src/card/index.ts

@@ -0,0 +1,10 @@
+export { Card, CardHeader, CardBody, CardFooter, CardTitle, CardDescription } from './Card';
+export type {
+  CardProps,
+  CardVariant,
+  CardHeaderProps,
+  CardBodyProps,
+  CardFooterProps,
+  CardTitleProps,
+  CardDescriptionProps,
+} from './types';

package/src/card/types.ts

@@ -0,0 +1,40 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type CardVariant = 'elevated' | 'outlined' | 'filled';
+
+export interface CardProps {
+  children?: React.ReactNode;
+  variant?: CardVariant;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+  disabled?: boolean;
+  accessibilityLabel?: string;
+  testID?: string;
+}
+
+export interface CardHeaderProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardBodyProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardFooterProps {
+  children?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface CardTitleProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+}
+
+export interface CardDescriptionProps {
+  children?: React.ReactNode;
+  style?: StyleProp<TextStyle>;
+  numberOfLines?: number;
+}

package/src/checkbox/Checkbox.tsx

@@ -0,0 +1,166 @@
+import React, { memo, useCallback, 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 { CheckboxProps } from './types';
+
+const SIZE_CONFIG = {
+  small: { box: 18, checkmark: 10, fontSize: 14, lineHeight: 20, descFontSize: 12 },
+  medium: { box: 22, checkmark: 12, fontSize: 15, lineHeight: 22, descFontSize: 13 },
+  large: { box: 26, checkmark: 14, fontSize: 16, lineHeight: 24, descFontSize: 14 },
+} as const;
+
+const CheckboxComponent: React.FC<CheckboxProps> = ({
+  checked,
+  onCheckedChange,
+  label,
+  description,
+  size = 'medium',
+  disabled = false,
+  indeterminate = false,
+  color,
+  style,
+  labelStyle,
+  accessibilityLabel,
+  testID,
+}) => {
+  const theme = useTheme();
+  const scaleAnim = useRef(new Animated.Value(checked ? 1 : 0)).current;
+  const pressAnim = useRef(new Animated.Value(1)).current;
+  const sizeConfig = SIZE_CONFIG[size];
+  const checkColor = color ?? theme.colors.primary;
+
+  useEffect(() => {
+    Animated.spring(scaleAnim, {
+      toValue: checked || indeterminate ? 1 : 0,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [checked, indeterminate, scaleAnim]);
+
+  const handlePress = useCallback(() => {
+    if (!disabled) {
+      onCheckedChange(!checked);
+    }
+  }, [checked, disabled, onCheckedChange]);
+
+  const onPressIn = useCallback(() => {
+    Animated.spring(pressAnim, {
+      toValue: 0.9,
+      useNativeDriver: true,
+      ...animation.spring.snappy,
+    }).start();
+  }, [pressAnim]);
+
+  const onPressOut = useCallback(() => {
+    Animated.spring(pressAnim, {
+      toValue: 1,
+      useNativeDriver: true,
+      ...animation.spring.gentle,
+    }).start();
+  }, [pressAnim]);
+
+  const boxStyle = useMemo((): ViewStyle => {
+    const base: ViewStyle = {
+      width: sizeConfig.box,
+      height: sizeConfig.box,
+      borderRadius: borderRadius._2xs + 2,
+      borderWidth: 2,
+      alignItems: 'center',
+      justifyContent: 'center',
+    };
+
+    if (checked || indeterminate) {
+      base.backgroundColor = checkColor;
+      base.borderColor = checkColor;
+    } else {
+      base.backgroundColor = 'transparent';
+      base.borderColor = theme.colors.border;
+    }
+
+    return base;
+  }, [sizeConfig, checked, indeterminate, checkColor, theme]);
+
+  // Checkmark using unicode characters for zero-dependency rendering
+  const checkmarkContent = indeterminate ? '\u2014' : '\u2713';
+
+  return (
+    <Pressable
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'flex-start',
+          gap: space.sm,
+          opacity: disabled ? 0.4 : 1,
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: indeterminate ? 'mixed' : checked, disabled }}
+      accessibilityLabel={accessibilityLabel ?? label}
+      hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+      testID={testID}
+    >
+      <Animated.View style={[boxStyle, { transform: [{ scale: pressAnim }] }]}>
+        <Animated.View
+          style={{
+            opacity: scaleAnim,
+            transform: [{ scale: scaleAnim }],
+          }}
+        >
+          <Text
+            style={{
+              fontSize: sizeConfig.checkmark,
+              color: '#fff',
+              fontWeight: '700',
+              lineHeight: sizeConfig.checkmark + 2,
+              textAlign: 'center',
+            }}
+          >
+            {checkmarkContent}
+          </Text>
+        </Animated.View>
+      </Animated.View>
+
+      {(label || description) && (
+        <View style={{ flex: 1, paddingTop: 1 }}>
+          {label && (
+            <Text
+              style={[
+                {
+                  fontSize: sizeConfig.fontSize,
+                  lineHeight: sizeConfig.lineHeight,
+                  color: theme.colors.text,
+                  fontWeight: '500',
+                },
+                labelStyle,
+              ]}
+            >
+              {label}
+            </Text>
+          )}
+          {description && (
+            <Text
+              style={{
+                fontSize: sizeConfig.descFontSize,
+                color: theme.colors.textSecondary,
+                lineHeight: sizeConfig.descFontSize + 6,
+                marginTop: 2,
+              }}
+            >
+              {description}
+            </Text>
+          )}
+        </View>
+      )}
+    </Pressable>
+  );
+};
+
+export const Checkbox = memo(CheckboxComponent);
+Checkbox.displayName = 'Checkbox';

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './types';

package/src/checkbox/types.ts

@@ -0,0 +1,26 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type CheckboxSize = 'small' | 'medium' | 'large';
+
+export interface CheckboxProps {
+  /** Whether the checkbox is checked. */
+  checked: boolean;
+  /** Called when the checked state changes. */
+  onCheckedChange: (checked: boolean) => void;
+  /** Optional label text. */
+  label?: string;
+  /** Optional description shown below the label. */
+  description?: string;
+  /** Size preset. */
+  size?: CheckboxSize;
+  /** Whether the checkbox is disabled. */
+  disabled?: boolean;
+  /** Whether the checkbox is in an indeterminate state. */
+  indeterminate?: boolean;
+  /** Semantic color when checked. Uses theme primary by default. */
+  color?: string;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  accessibilityLabel?: string;
+  testID?: string;
+}