@oxyhq/bloom 0.1.0

package/src/button/Button.tsx

@@ -0,0 +1,172 @@
+import React, { useMemo, memo } from 'react';
+import { TouchableOpacity, Text, Platform, type ViewStyle, type TextStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { ButtonProps } from './types';
+
+export type { ButtonProps, ButtonVariant, ButtonSize } from './types';
+
+const SIZE_CONFIG = {
+  small: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    fontSize: 14,
+    minHeight: 32,
+  },
+  medium: {
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+    fontSize: 15,
+    minHeight: 40,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    fontSize: 16,
+    minHeight: 48,
+  },
+} as const;
+
+const ICON_HIT_SLOP = { top: 10, bottom: 10, left: 10, right: 10 } as const;
+
+const ButtonComponent: React.FC<ButtonProps> = ({
+  onPress,
+  children,
+  disabled = false,
+  variant = 'primary',
+  size = 'medium',
+  style,
+  textStyle,
+  icon,
+  iconPosition = 'left',
+  accessibilityLabel,
+  accessibilityHint,
+  hitSlop,
+  activeOpacity,
+  testID,
+}) => {
+  const theme = useTheme();
+
+  const baseStyles = useMemo((): ViewStyle => {
+    const sizeConfig = SIZE_CONFIG[size];
+    const styles: ViewStyle = {
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexDirection: 'row',
+      overflow: 'hidden',
+    };
+
+    if (variant !== 'icon') {
+      styles.paddingVertical = sizeConfig.paddingVertical;
+      styles.paddingHorizontal = sizeConfig.paddingHorizontal;
+      styles.minHeight = sizeConfig.minHeight;
+    }
+
+    switch (variant) {
+      case 'primary':
+        styles.backgroundColor = theme.colors.primary;
+        styles.borderRadius = 20;
+        break;
+      case 'secondary':
+        styles.backgroundColor = 'transparent';
+        styles.borderWidth = 1;
+        styles.borderColor = theme.colors.border;
+        styles.borderRadius = 20;
+        break;
+      case 'icon':
+        styles.backgroundColor = theme.colors.background;
+        styles.borderWidth = 1;
+        styles.borderColor = theme.colors.border;
+        styles.borderRadius = 100;
+        styles.padding = 8;
+        styles.width = sizeConfig.minHeight;
+        styles.height = sizeConfig.minHeight;
+        break;
+      case 'ghost':
+        styles.backgroundColor = 'transparent';
+        styles.borderRadius = 8;
+        break;
+      case 'text':
+        styles.backgroundColor = 'transparent';
+        styles.paddingVertical = 4;
+        styles.paddingHorizontal = 8;
+        break;
+    }
+
+    return styles;
+  }, [variant, size, theme]);
+
+  const computedTextStyle = useMemo((): TextStyle => {
+    const sizeConfig = SIZE_CONFIG[size];
+    const styles: TextStyle = {
+      fontSize: sizeConfig.fontSize,
+      fontWeight: Platform.OS === 'web' ? 'bold' : '600',
+    };
+
+    switch (variant) {
+      case 'primary':
+        styles.color = theme.colors.card;
+        break;
+      case 'secondary':
+        styles.color = theme.colors.text;
+        break;
+      case 'ghost':
+      case 'text':
+        styles.color = theme.colors.primary;
+        break;
+    }
+
+    return styles;
+  }, [variant, size, theme]);
+
+  const defaultHitSlop = variant === 'icon' ? ICON_HIT_SLOP : undefined;
+
+  return (
+    <TouchableOpacity
+      style={[baseStyles, disabled && { opacity: 0.5 }, style]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={activeOpacity ?? (variant === 'icon' ? 0.7 : 0.8)}
+      hitSlop={hitSlop ?? defaultHitSlop}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessibilityRole="button"
+      accessibilityState={{ disabled }}
+      testID={testID}
+    >
+      {iconPosition === 'left' && icon}
+      {children != null && (
+        <Text style={[computedTextStyle, textStyle]}>{children}</Text>
+      )}
+      {iconPosition === 'right' && icon}
+    </TouchableOpacity>
+  );
+};
+
+export const Button = memo(ButtonComponent);
+Button.displayName = 'Button';
+
+export const PrimaryButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="primary" />
+));
+PrimaryButton.displayName = 'PrimaryButton';
+
+export const SecondaryButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="secondary" />
+));
+SecondaryButton.displayName = 'SecondaryButton';
+
+export const IconButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="icon" />
+));
+IconButton.displayName = 'IconButton';
+
+export const GhostButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="ghost" />
+));
+GhostButton.displayName = 'GhostButton';
+
+export const TextButton = memo((props: Omit<ButtonProps, 'variant'>) => (
+  <Button {...props} variant="text" />
+));
+TextButton.displayName = 'TextButton';

package/src/button/index.ts

@@ -0,0 +1,10 @@
+export {
+  Button,
+  PrimaryButton,
+  SecondaryButton,
+  IconButton,
+  GhostButton,
+  TextButton,
+} from './Button';
+
+export type { ButtonProps, ButtonVariant, ButtonSize } from './types';

package/src/button/types.ts

@@ -0,0 +1,25 @@
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'icon' | 'ghost' | 'text';
+
+export type ButtonSize = 'small' | 'medium' | 'large';
+
+export interface ButtonProps {
+  onPress?: () => void;
+  children?: React.ReactNode;
+  disabled?: boolean;
+
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+
+  icon?: React.ReactNode;
+  iconPosition?: 'left' | 'right';
+
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  hitSlop?: { top: number; bottom: number; left: number; right: number };
+  activeOpacity?: number;
+  testID?: string;
+}

package/src/collapsible/Collapsible.tsx

@@ -0,0 +1,62 @@
+import React, { memo, useState } from 'react';
+import { View, Text, TouchableOpacity } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { CollapsibleProps } from './types';
+
+const CollapsibleComponent: React.FC<CollapsibleProps> = ({
+  title,
+  children,
+  defaultOpen = false,
+  chevronIcon,
+  style,
+  titleStyle,
+  testID,
+}) => {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const theme = useTheme();
+
+  return (
+    <View style={style} testID={testID}>
+      <TouchableOpacity
+        onPress={() => setIsOpen((prev) => !prev)}
+        activeOpacity={0.7}
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          paddingVertical: 12,
+          gap: 8,
+        }}
+      >
+        {chevronIcon ?? (
+          <Text
+            style={{
+              fontSize: 16,
+              color: theme.colors.textSecondary,
+              transform: [{ rotate: isOpen ? '90deg' : '0deg' }],
+            }}
+          >
+            ›
+          </Text>
+        )}
+        <Text
+          style={[
+            {
+              fontSize: 16,
+              fontWeight: '600',
+              color: theme.colors.text,
+              flex: 1,
+            },
+            titleStyle,
+          ]}
+        >
+          {title}
+        </Text>
+      </TouchableOpacity>
+      {isOpen && children}
+    </View>
+  );
+};
+
+export const Collapsible = memo(CollapsibleComponent);
+Collapsible.displayName = 'Collapsible';

package/src/collapsible/index.ts

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

package/src/collapsible/types.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
+
+export interface CollapsibleProps {
+  /** Header title text */
+  title: string;
+  /** Content to show/hide */
+  children: ReactNode;
+  /** Whether to start open (defaults to false) */
+  defaultOpen?: boolean;
+  /** Custom chevron icon (defaults to "›" character with rotation) */
+  chevronIcon?: ReactNode;
+  /** Container style */
+  style?: StyleProp<ViewStyle>;
+  /** Title text style */
+  titleStyle?: StyleProp<TextStyle>;
+  testID?: string;
+}

package/src/dialog/Dialog.tsx

@@ -0,0 +1,160 @@
+import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import { BottomSheetModal, BottomSheetView, BottomSheetBackdrop, type BottomSheetBackdropProps } from '@gorhom/bottom-sheet';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { useTheme } from '../theme/use-theme';
+import { Context, useDialogContext } from './context';
+import type { DialogControlProps, DialogInnerProps, DialogOuterProps } from './types';
+
+export { useDialogContext, useDialogControl } from './context';
+export type { DialogControlProps, DialogOuterProps, DialogInnerProps } from './types';
+
+export function Outer({
+  children,
+  control,
+  onClose,
+  testID,
+  preventExpansion,
+}: React.PropsWithChildren<DialogOuterProps>) {
+  const theme = useTheme();
+  const ref = useRef<BottomSheetModal>(null);
+  const closeCallbacks = useRef<(() => void)[]>([]);
+
+  const callQueuedCallbacks = useCallback(() => {
+    for (const cb of closeCallbacks.current) {
+      try {
+        cb();
+      } catch (e) {
+        console.error('Dialog close callback error:', e);
+      }
+    }
+    closeCallbacks.current = [];
+  }, []);
+
+  const open = useCallback(() => {
+    ref.current?.present();
+  }, []);
+
+  const close = useCallback<DialogControlProps['close']>((cb) => {
+    if (typeof cb === 'function') {
+      closeCallbacks.current.push(cb);
+    }
+    ref.current?.dismiss();
+  }, []);
+
+  const handleDismiss = useCallback(() => {
+    callQueuedCallbacks();
+    onClose?.();
+  }, [callQueuedCallbacks, onClose]);
+
+  useImperativeHandle(
+    control.ref,
+    () => ({ open, close }),
+    [open, close],
+  );
+
+  const context = useMemo(
+    () => ({ close, isWithinDialog: true }),
+    [close],
+  );
+
+  const renderBackdrop = useCallback(
+    (props: BottomSheetBackdropProps) => (
+      <BottomSheetBackdrop
+        {...props}
+        appearsOnIndex={0}
+        disappearsOnIndex={-1}
+        pressBehavior="close"
+        opacity={0.4}
+      />
+    ),
+    [],
+  );
+
+  return (
+    <BottomSheetModal
+      ref={ref}
+      enablePanDownToClose
+      enableDismissOnClose
+      enableDynamicSizing={!preventExpansion}
+      snapPoints={preventExpansion ? ['40%'] : undefined}
+      backgroundStyle={{
+        backgroundColor: theme.colors.background,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+      }}
+      handleIndicatorStyle={{
+        backgroundColor: theme.colors.text,
+        width: 35,
+        height: 5,
+        opacity: 0.5,
+      }}
+      backdropComponent={renderBackdrop}
+      onDismiss={handleDismiss}
+      style={{ maxWidth: 500, margin: 'auto' }}
+    >
+      <Context.Provider value={context}>
+        <BottomSheetView
+          testID={testID}
+          style={{ backgroundColor: theme.colors.background }}
+        >
+          {children}
+        </BottomSheetView>
+      </Context.Provider>
+    </BottomSheetModal>
+  );
+}
+
+export function Inner({ children, style, header, contentContainerStyle }: DialogInnerProps) {
+  const insets = useSafeAreaInsets();
+  return (
+    <>
+      {header}
+      <View
+        style={[
+          { paddingTop: 20, paddingHorizontal: 20, paddingBottom: insets.bottom + insets.top },
+          contentContainerStyle,
+          style,
+        ]}
+      >
+        {children}
+      </View>
+    </>
+  );
+}
+
+export function ScrollableInner(props: DialogInnerProps) {
+  return <Inner {...props} />;
+}
+
+const handleStyles = StyleSheet.create({
+  container: { position: 'absolute', width: '100%', alignItems: 'center', zIndex: 10, height: 20 },
+  bar: { top: 8, width: 35, height: 5, borderRadius: 3, alignSelf: 'center', opacity: 0.5 },
+});
+
+export function Handle() {
+  const theme = useTheme();
+  const { close } = useDialogContext();
+
+  return (
+    <View style={handleStyles.container}>
+      <Pressable
+        onPress={() => close()}
+        accessibilityLabel="Dismiss"
+        accessibilityHint="Tap to close the dialog"
+        hitSlop={{ top: 10, bottom: 10, left: 40, right: 40 }}
+      >
+        <View style={[handleStyles.bar, { backgroundColor: theme.colors.text }]} />
+      </Pressable>
+    </View>
+  );
+}
+
+export function Close() {
+  return null;
+}
+
+export function Backdrop() {
+  return null;
+}

package/src/dialog/Dialog.web.tsx

@@ -0,0 +1,238 @@
+import React, { createContext, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { Pressable, Text, View, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { Portal } from '../portal';
+import { Context, useDialogContext } from './context';
+import type { DialogControlProps, DialogInnerProps, DialogOuterProps } from './types';
+
+export { useDialogContext, useDialogControl } from './context';
+export type { DialogControlProps, DialogOuterProps, DialogInnerProps } from './types';
+
+const FADE_OUT_DURATION = 150;
+
+const stopPropagation = (e: { stopPropagation: () => void }) => e.stopPropagation();
+
+const ClosingContext = createContext(false);
+
+export function Outer({
+  children,
+  control,
+  onClose,
+  testID,
+  webOptions,
+}: React.PropsWithChildren<DialogOuterProps>) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const closeCallbacksRef = useRef<(() => void)[]>([]);
+
+  const open = useCallback(() => {
+    setIsClosing(false);
+    setIsOpen(true);
+  }, []);
+
+  const close = useCallback<DialogControlProps['close']>((cb) => {
+    if (typeof cb === 'function') {
+      closeCallbacksRef.current.push(cb);
+    }
+    setIsClosing(true);
+  }, []);
+
+  useEffect(() => {
+    if (!isClosing) return;
+
+    const timer = setTimeout(() => {
+      setIsOpen(false);
+      setIsClosing(false);
+      for (const cb of closeCallbacksRef.current) {
+        try {
+          cb();
+        } catch (e) {
+          console.error('Dialog close callback error:', e);
+        }
+      }
+      closeCallbacksRef.current = [];
+      onClose?.();
+    }, FADE_OUT_DURATION);
+
+    return () => clearTimeout(timer);
+  }, [isClosing, onClose]);
+
+  useImperativeHandle(
+    control.ref,
+    () => ({ open, close }),
+    [open, close],
+  );
+
+  const context = useMemo(
+    () => ({ close, isWithinDialog: true }),
+    [close],
+  );
+
+  if (!isOpen) return null;
+
+  return (
+    <Portal>
+      <Context.Provider value={context}>
+        <ClosingContext.Provider value={isClosing}>
+          <Pressable
+            onPress={() => close()}
+            style={{
+              position: 'fixed' as 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              zIndex: 50,
+              alignItems: 'center',
+              justifyContent: webOptions?.alignCenter ? 'center' : undefined,
+              paddingHorizontal: 20,
+              paddingVertical: '10vh' as unknown as number,
+              overflow: 'scroll',
+            }}
+          >
+            <DialogBackdrop isClosing={isClosing} />
+            <View
+              testID={testID}
+              style={{
+                width: '100%',
+                zIndex: 60,
+                alignItems: 'center',
+                minHeight: webOptions?.alignCenter ? undefined : '60%',
+              }}
+            >
+              {children}
+            </View>
+          </Pressable>
+        </ClosingContext.Provider>
+      </Context.Provider>
+    </Portal>
+  );
+}
+
+export function Inner({
+  children,
+  style,
+  label,
+  header,
+  contentContainerStyle,
+}: DialogInnerProps) {
+  const theme = useTheme();
+  const isClosing = useContext(ClosingContext);
+
+  return (
+    <View
+      role="dialog"
+      aria-label={label}
+      onStartShouldSetResponder={() => true}
+      onResponderRelease={stopPropagation}
+      {...({ onClick: stopPropagation } as Record<string, unknown>)}
+      style={[
+        {
+          position: 'relative',
+          borderRadius: 10,
+          width: '100%',
+          maxWidth: 600,
+          backgroundColor: theme.colors.background,
+          borderWidth: 1,
+          borderColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)',
+          shadowColor: '#000',
+          shadowOpacity: theme.isDark ? 0.4 : 0.1,
+          shadowRadius: 30,
+          shadowOffset: { width: 0, height: 4 },
+          overflow: 'hidden',
+        },
+        isClosing
+          ? { animation: `bloomDialogZoomFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle
+          : { animation: 'bloomDialogZoomFadeIn cubic-bezier(0.16, 1, 0.3, 1) 0.3s' } as ViewStyle,
+        style,
+      ]}
+    >
+      {header}
+      <View style={[{ padding: 20 }, contentContainerStyle]}>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+export function ScrollableInner(props: DialogInnerProps) {
+  return <Inner {...props} />;
+}
+
+export function Handle() {
+  return null;
+}
+
+export function Close() {
+  const { close } = useDialogContext();
+  const theme = useTheme();
+
+  return (
+    <View
+      style={{
+        position: 'absolute',
+        top: 10,
+        right: 10,
+        zIndex: 10,
+      }}
+    >
+      <Pressable
+        onPress={() => close()}
+        accessibilityLabel="Close dialog"
+        style={{
+          width: 34,
+          height: 34,
+          borderRadius: 17,
+          backgroundColor: theme.isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.05)',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <Text style={{ fontSize: 18, color: theme.colors.text, lineHeight: 20 }}>
+          {'\u00D7'}
+        </Text>
+      </Pressable>
+    </View>
+  );
+}
+
+function DialogBackdrop({ isClosing }: { isClosing: boolean }) {
+  const style: ViewStyle[] = [
+    {
+      position: 'fixed' as 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: 'rgba(0,0,0,0.8)',
+    },
+    isClosing
+      ? { animation: `bloomDialogFadeOut ease-in ${FADE_OUT_DURATION}ms forwards` } as ViewStyle
+      : { animation: 'bloomDialogFadeIn ease-out 0.15s' } as ViewStyle,
+  ];
+
+  return <View style={style} />;
+}
+
+export function Backdrop() {
+  return null;
+}
+
+/**
+ * CSS keyframes required for web dialog animations.
+ * Consumers should inject this string into a <style> tag or their global CSS:
+ *
+ * ```css
+ * @keyframes bloomDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }
+ * @keyframes bloomDialogFadeOut { from { opacity: 1; } to { opacity: 0; } }
+ * @keyframes bloomDialogZoomFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+ * @keyframes bloomDialogZoomFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
+ * ```
+ */
+export const BLOOM_DIALOG_CSS = `
+@keyframes bloomDialogFadeIn { from { opacity: 0; } to { opacity: 1; } }
+@keyframes bloomDialogFadeOut { from { opacity: 1; } to { opacity: 0; } }
+@keyframes bloomDialogZoomFadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+@keyframes bloomDialogZoomFadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.95); } }
+`;