@oxyhq/bloom 0.1.0

package/src/dialog/context.ts

@@ -0,0 +1,34 @@
+import { createContext, useContext, useId, useMemo, useRef } from 'react';
+import type { DialogContextProps, DialogControlRefProps, DialogControlProps } from './types';
+
+export const Context = createContext<DialogContextProps>({
+  close: () => {},
+  isWithinDialog: false,
+});
+Context.displayName = 'BloomDialogContext';
+
+export function useDialogContext(): DialogContextProps {
+  return useContext(Context);
+}
+
+export function useDialogControl(): DialogControlProps {
+  const id = useId();
+  const control = useRef<DialogControlRefProps | null>({
+    open: () => {},
+    close: () => {},
+  });
+
+  return useMemo<DialogControlProps>(
+    () => ({
+      id,
+      ref: control,
+      open: (options) => {
+        control.current?.open(options);
+      },
+      close: (cb) => {
+        control.current?.close(cb);
+      },
+    }),
+    [id],
+  );
+}

package/src/dialog/index.ts

@@ -0,0 +1,3 @@
+export { Outer, Inner, ScrollableInner, Handle, Close, Backdrop } from './Dialog';
+export { useDialogContext, useDialogControl } from './context';
+export type { DialogControlProps, DialogOuterProps, DialogInnerProps, DialogContextProps } from './types';

package/src/dialog/types.ts

@@ -0,0 +1,34 @@
+import type { ScrollViewProps, StyleProp, ViewStyle } from 'react-native';
+
+export type DialogControlRefProps = {
+  open: (options?: Record<string, unknown>) => void;
+  close: (callback?: () => void) => void;
+};
+
+export type DialogControlProps = DialogControlRefProps & {
+  id: string;
+  ref: React.RefObject<DialogControlRefProps | null>;
+};
+
+export type DialogContextProps = {
+  close: DialogControlProps['close'];
+  isWithinDialog: boolean;
+};
+
+export type DialogOuterProps = {
+  control: DialogControlProps;
+  onClose?: () => void;
+  testID?: string;
+  webOptions?: {
+    alignCenter?: boolean;
+  };
+  preventExpansion?: boolean;
+};
+
+export type DialogInnerProps = React.PropsWithChildren<{
+  style?: StyleProp<ViewStyle>;
+  label?: string;
+  header?: React.ReactNode;
+  contentContainerStyle?: StyleProp<ViewStyle>;
+  keyboardDismissMode?: ScrollViewProps['keyboardDismissMode'];
+}>;

package/src/divider/Divider.tsx

@@ -0,0 +1,42 @@
+import React, { memo } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { DividerProps } from './types';
+
+const DividerComponent: React.FC<DividerProps> = ({
+  color,
+  thickness = StyleSheet.hairlineWidth,
+  vertical = false,
+  spacing = 0,
+  style,
+  testID,
+}) => {
+  const theme = useTheme();
+  const resolvedColor = color ?? theme.colors.border;
+
+  return (
+    <View
+      testID={testID}
+      style={[
+        vertical
+          ? {
+              width: thickness,
+              alignSelf: 'stretch',
+              backgroundColor: resolvedColor,
+              marginHorizontal: spacing,
+            }
+          : {
+              height: thickness,
+              width: '100%',
+              backgroundColor: resolvedColor,
+              marginVertical: spacing,
+            },
+        style,
+      ]}
+    />
+  );
+};
+
+export const Divider = memo(DividerComponent);
+Divider.displayName = 'Divider';

package/src/divider/index.ts

@@ -0,0 +1,2 @@
+export { Divider } from './Divider';
+export type { DividerProps } from './types';

package/src/divider/types.ts

@@ -0,0 +1,15 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface DividerProps {
+  /** Custom color (defaults to theme.colors.border) */
+  color?: string;
+  /** Line thickness (defaults to StyleSheet.hairlineWidth) */
+  thickness?: number;
+  /** If true, renders a vertical divider */
+  vertical?: boolean;
+  /** Spacing around the divider (marginVertical for horizontal, marginHorizontal for vertical) */
+  spacing?: number;
+  /** Custom style */
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/error-boundary/ErrorBoundary.tsx

@@ -0,0 +1,112 @@
+import React, { Component, type ErrorInfo, type ReactNode } from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { ErrorBoundaryProps } from './types';
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+function DefaultFallback({
+  title,
+  message,
+  retryLabel,
+  onRetry,
+}: {
+  title: string;
+  message: string;
+  retryLabel: string;
+  onRetry: () => void;
+}) {
+  const theme = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: theme.colors.background }]}>
+      <Text style={[styles.title, { color: theme.colors.text }]}>{title}</Text>
+      <Text style={[styles.message, { color: theme.colors.textSecondary }]}>{message}</Text>
+      <TouchableOpacity
+        style={[styles.retryButton, { backgroundColor: theme.colors.primary }]}
+        onPress={onRetry}
+        activeOpacity={0.7}
+      >
+        <Text style={styles.retryText}>{retryLabel}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  static displayName = 'ErrorBoundary';
+
+  state: ErrorBoundaryState = {
+    hasError: false,
+    error: null,
+  };
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.props.onError?.(error, errorInfo);
+  }
+
+  private handleRetry = (): void => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <DefaultFallback
+          title={this.props.title ?? 'Something went wrong'}
+          message={this.props.message ?? 'An unexpected error occurred'}
+          retryLabel={this.props.retryLabel ?? 'Try Again'}
+          onRetry={this.handleRetry}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 20,
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 12,
+    textAlign: 'center',
+  },
+  message: {
+    fontSize: 16,
+    textAlign: 'center',
+    marginBottom: 24,
+    lineHeight: 22,
+    paddingHorizontal: 16,
+  },
+  retryButton: {
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    borderRadius: 12,
+    minWidth: 120,
+    alignItems: 'center',
+  },
+  retryText: {
+    color: '#FFFFFF',
+    fontSize: 16,
+    fontWeight: '600',
+  },
+});

package/src/error-boundary/index.ts

@@ -0,0 +1,2 @@
+export { ErrorBoundary } from './ErrorBoundary';
+export type { ErrorBoundaryProps } from './types';

package/src/error-boundary/types.ts

@@ -0,0 +1,16 @@
+import type { ReactNode, ErrorInfo } from 'react';
+
+export interface ErrorBoundaryProps {
+  children: ReactNode;
+  /** Custom fallback UI to render on error */
+  fallback?: ReactNode;
+  /** Error title (defaults to "Something went wrong") */
+  title?: string;
+  /** Error message (defaults to "An unexpected error occurred") */
+  message?: string;
+  /** Retry button label (defaults to "Try Again") */
+  retryLabel?: string;
+  /** Callback when an error is caught */
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  testID?: string;
+}

package/src/grouped-buttons/GroupedButtons.tsx

@@ -0,0 +1,94 @@
+import React, { Children } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { GroupedButtonsProps, GroupedButtonItemProps } from './types';
+
+export type { GroupedButtonsProps, GroupedButtonItemProps } from './types';
+
+export function GroupedButtons({ children, style }: GroupedButtonsProps) {
+  const theme = useTheme();
+  const childArray = Children.toArray(children);
+
+  return (
+    <View
+      style={[
+        {
+          borderRadius: 12,
+          backgroundColor: theme.colors.card,
+          overflow: 'hidden',
+        },
+        style,
+      ]}
+    >
+      {childArray.map((child, index) => (
+        <React.Fragment key={index}>
+          {child}
+          {index < childArray.length - 1 && (
+            <View
+              style={{
+                height: 1,
+                backgroundColor: theme.colors.borderLight,
+                marginLeft: 16,
+              }}
+            />
+          )}
+        </React.Fragment>
+      ))}
+    </View>
+  );
+}
+
+export function Item({
+  label,
+  description,
+  icon,
+  onPress,
+  destructive = false,
+  disabled = false,
+  testID,
+}: GroupedButtonItemProps) {
+  const theme = useTheme();
+
+  const labelColor = destructive ? theme.colors.negative : theme.colors.text;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.6}
+      testID={testID}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        opacity: disabled ? 0.5 : 1,
+      }}
+    >
+      {icon && (
+        <View style={{ marginRight: 12 }}>
+          {icon}
+        </View>
+      )}
+      <View style={{ flex: 1 }}>
+        <Text style={{ fontSize: 16, color: labelColor }}>
+          {label}
+        </Text>
+        {description && (
+          <Text
+            style={{
+              fontSize: 13,
+              color: theme.colors.textSecondary,
+              marginTop: 2,
+            }}
+          >
+            {description}
+          </Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+}
+
+GroupedButtons.Item = Item;

package/src/grouped-buttons/index.ts

@@ -0,0 +1,2 @@
+export { GroupedButtons, Item } from './GroupedButtons';
+export type { GroupedButtonsProps, GroupedButtonItemProps } from './types';

package/src/grouped-buttons/types.ts

@@ -0,0 +1,16 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface GroupedButtonsProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface GroupedButtonItemProps {
+  label: string;
+  description?: string;
+  icon?: React.ReactNode;
+  onPress: () => void;
+  destructive?: boolean;
+  disabled?: boolean;
+  testID?: string;
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+export * from './theme';
+export * from './portal';
+export * as Dialog from './dialog';
+export * as Prompt from './prompt';
+export * from './button';
+export * from './grouped-buttons';
+export * from './divider';
+export * from './radio-indicator';
+export * from './collapsible';
+export { ErrorBoundary } from './error-boundary';
+export type { ErrorBoundaryProps } from './error-boundary';
+export * from './avatar';
+export * from './loading';
+export * as PromptInput from './prompt-input';

package/src/loading/Loading.tsx

@@ -0,0 +1,258 @@
+import React, { memo, useEffect, useMemo } from 'react';
+import { View, Text, ActivityIndicator, StyleSheet, type DimensionValue } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type {
+  LoadingProps,
+  SpinnerLoadingProps,
+  TopLoadingProps,
+  SkeletonLoadingProps,
+  InlineLoadingProps,
+} from './types';
+
+const SIZE_CONFIG = {
+  small: { spinner: 20, text: 13 },
+  medium: { spinner: 24, text: 15 },
+  large: { spinner: 44, text: 16 },
+} as const;
+
+// Lazy-loaded reanimated for the top variant
+type ReanimatedType = typeof import('react-native-reanimated');
+let reanimatedModule: ReanimatedType | null = null;
+let reanimatedResolved = false;
+
+function getReanimated(): ReanimatedType | null {
+  if (!reanimatedResolved) {
+    reanimatedResolved = true;
+    try {
+      reanimatedModule = require('react-native-reanimated');
+    } catch {
+      reanimatedModule = null;
+    }
+  }
+  return reanimatedModule;
+}
+
+const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
+  size = 'medium',
+  color,
+  text,
+  textStyle,
+  style,
+  showText = true,
+  iconSize,
+  spinnerIcon,
+  testID,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
+  const spinnerColor = color ?? theme.colors.primary;
+  const textColor = color ?? theme.colors.textSecondary;
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      {spinnerIcon ?? <ActivityIndicator size={effectiveIconSize > 30 ? 'large' : 'small'} color={spinnerColor} />}
+      {showText && text && (
+        <Text
+          style={[
+            styles.text,
+            { color: textColor, fontSize: sizeConfig.text, marginTop: 8 },
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const TopLoading: React.FC<TopLoadingProps> = ({
+  size = 'medium',
+  color,
+  style,
+  showLoading = true,
+  iconSize,
+  heightOffset = 0,
+  spinnerIcon,
+  testID,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const effectiveIconSize = iconSize ?? sizeConfig.spinner;
+  const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
+  const spinnerColor = color ?? theme.colors.primary;
+
+  const reanimated = getReanimated();
+
+  // Non-animated fallback when reanimated is not available
+  if (!reanimated) {
+    if (!showLoading) return null;
+    return (
+      <View style={[styles.topContainer, { height: targetHeight }, style]} testID={testID}>
+        <View style={[styles.topLoadingView, { height: targetHeight }]}>
+          {spinnerIcon ?? <ActivityIndicator size={effectiveIconSize > 30 ? 'large' : 'small'} color={spinnerColor} />}
+        </View>
+      </View>
+    );
+  }
+
+  const { default: Animated, useAnimatedStyle, useSharedValue, withTiming, Easing } = reanimated;
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const height = useSharedValue(showLoading ? targetHeight : 0);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const opacity = useSharedValue(showLoading ? 1 : 0);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const translateY = useSharedValue(showLoading ? 0 : -targetHeight);
+
+  const timingConfig = { duration: 250, easing: Easing.out(Easing.cubic) };
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useEffect(() => {
+    height.value = withTiming(showLoading ? targetHeight : 0, timingConfig);
+    opacity.value = withTiming(showLoading ? 1 : 0, timingConfig);
+    translateY.value = withTiming(showLoading ? 0 : -targetHeight, timingConfig);
+  }, [showLoading, targetHeight, height, opacity, translateY]);
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const containerAnimated = useAnimatedStyle(() => ({
+    height: height.value,
+  }));
+
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const innerAnimated = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{ translateY: translateY.value }],
+  }));
+
+  return (
+    <Animated.View style={[styles.topContainer, containerAnimated]} testID={testID}>
+      <Animated.View style={[styles.topLoadingView, { height: targetHeight }, innerAnimated, style]}>
+        {spinnerIcon ?? <ActivityIndicator size={effectiveIconSize > 30 ? 'large' : 'small'} color={spinnerColor} />}
+      </Animated.View>
+    </Animated.View>
+  );
+};
+
+const SkeletonLoading: React.FC<SkeletonLoadingProps> = ({
+  lines = 3,
+  width = '100%',
+  lineHeight = 16,
+  style,
+  testID,
+}) => {
+  const theme = useTheme();
+  const skeletonColor = theme.colors.backgroundSecondary;
+
+  const skeletonLines = useMemo(
+    () =>
+      Array.from({ length: lines }, (_, index) => (
+        <View
+          key={index}
+          style={[
+            styles.skeletonLine,
+            {
+              width: (typeof width === 'string' ? width : `${width}%`) as DimensionValue,
+              height: lineHeight,
+              backgroundColor: skeletonColor,
+              marginBottom: index < lines - 1 ? 8 : 0,
+            },
+          ]}
+        />
+      )),
+    [lines, width, lineHeight, skeletonColor],
+  );
+
+  return (
+    <View style={[styles.skeletonContainer, style]} testID={testID}>
+      {skeletonLines}
+    </View>
+  );
+};
+
+const InlineLoading: React.FC<InlineLoadingProps> = ({
+  size = 'small',
+  color,
+  text,
+  style,
+  textStyle,
+  spinnerIcon,
+  testID,
+}) => {
+  const theme = useTheme();
+  const sizeConfig = SIZE_CONFIG[size];
+  const spinnerColor = color ?? theme.colors.primary;
+  const textColor = theme.colors.textSecondary;
+
+  return (
+    <View style={[styles.inlineContainer, style]} testID={testID}>
+      {spinnerIcon ?? <ActivityIndicator size="small" color={spinnerColor} />}
+      {text && (
+        <Text
+          style={[
+            { color: textColor, fontSize: sizeConfig.text, marginLeft: 8 },
+            textStyle,
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const LoadingComponent: React.FC<LoadingProps> = (props) => {
+  const variant = props.variant ?? 'spinner';
+
+  switch (variant) {
+    case 'top':
+      return <TopLoading {...(props as TopLoadingProps)} />;
+    case 'skeleton':
+      return <SkeletonLoading {...(props as SkeletonLoadingProps)} />;
+    case 'inline':
+      return <InlineLoading {...(props as InlineLoadingProps)} />;
+    case 'spinner':
+    default:
+      return <SpinnerLoading {...(props as SpinnerLoadingProps)} />;
+  }
+};
+
+export const Loading = memo(LoadingComponent);
+Loading.displayName = 'Loading';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    textAlign: 'center',
+  },
+  topContainer: {
+    width: '100%',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  topLoadingView: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+  },
+  skeletonContainer: {
+    width: '100%',
+  },
+  skeletonLine: {
+    borderRadius: 4,
+  },
+  inlineContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/loading/index.ts

@@ -0,0 +1,10 @@
+export { Loading } from './Loading';
+export type {
+  LoadingProps,
+  LoadingVariant,
+  LoadingSize,
+  SpinnerLoadingProps,
+  TopLoadingProps,
+  SkeletonLoadingProps,
+  InlineLoadingProps,
+} from './types';