@oxyhq/bloom 0.1.0

package/src/loading/types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import type { ViewStyle, TextStyle } from 'react-native';
+
+export type LoadingVariant = 'spinner' | 'top' | 'skeleton' | 'inline';
+export type LoadingSize = 'small' | 'medium' | 'large';
+
+interface BaseLoadingProps {
+  /** Variant type */
+  variant?: LoadingVariant;
+  /** Size of the loading indicator */
+  size?: LoadingSize;
+  /** Custom color (defaults to theme primary) */
+  color?: string;
+  /** Custom container style */
+  style?: ViewStyle;
+  /** Whether loading is active (for animated variants) */
+  showLoading?: boolean;
+  testID?: string;
+}
+
+export interface SpinnerLoadingProps extends BaseLoadingProps {
+  variant?: 'spinner';
+  /** Optional text to display below spinner */
+  text?: string;
+  /** Custom style for the text */
+  textStyle?: TextStyle;
+  /** Whether to show text */
+  showText?: boolean;
+  /** Custom icon size (overrides size prop) */
+  iconSize?: number;
+  /** Custom spinner icon (defaults to ActivityIndicator) */
+  spinnerIcon?: ReactNode;
+}
+
+export interface TopLoadingProps extends BaseLoadingProps {
+  variant: 'top';
+  /** Custom icon size */
+  iconSize?: number;
+  /** Custom container height offset */
+  heightOffset?: number;
+  /** Custom spinner icon (defaults to ActivityIndicator) */
+  spinnerIcon?: ReactNode;
+}
+
+export interface SkeletonLoadingProps extends BaseLoadingProps {
+  variant: 'skeleton';
+  /** Number of skeleton lines */
+  lines?: number;
+  /** Width of skeleton (percentage or pixels) */
+  width?: number | string;
+  /** Height of skeleton lines */
+  lineHeight?: number;
+}
+
+export interface InlineLoadingProps extends BaseLoadingProps {
+  variant: 'inline';
+  /** Text to show next to spinner */
+  text?: string;
+  /** Custom style for the text */
+  textStyle?: TextStyle;
+  /** Custom spinner icon (defaults to ActivityIndicator) */
+  spinnerIcon?: ReactNode;
+}
+
+export type LoadingProps =
+  | SpinnerLoadingProps
+  | TopLoadingProps
+  | SkeletonLoadingProps
+  | InlineLoadingProps;

package/src/portal/index.tsx

@@ -0,0 +1,100 @@
+import React, {
+  createContext,
+  Fragment,
+  memo,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View, StyleSheet, Platform } from 'react-native';
+
+type Component = React.ReactElement;
+
+type ContextType = {
+  outlet: Component | null;
+  append(id: string, component: Component): void;
+  remove(id: string): void;
+};
+
+type ComponentMap = {
+  [id: string]: Component | null;
+};
+
+function createPortalGroup() {
+  const Context = createContext<ContextType>({
+    outlet: null,
+    append: () => {},
+    remove: () => {},
+  });
+  Context.displayName = 'BloomPortalContext';
+
+  function Provider(props: React.PropsWithChildren<object>) {
+    const map = useRef<ComponentMap>({});
+    const [outlet, setOutlet] = useState<ContextType['outlet']>(null);
+
+    const append = useCallback<ContextType['append']>((id, component) => {
+      map.current[id] = <Fragment key={id}>{component}</Fragment>;
+      setOutlet(<>{Object.values(map.current)}</>);
+    }, []);
+
+    const remove = useCallback<ContextType['remove']>((id) => {
+      delete map.current[id];
+      setOutlet(<>{Object.values(map.current)}</>);
+    }, []);
+
+    const contextValue = useMemo(
+      () => ({ outlet, append, remove }),
+      [outlet, append, remove],
+    );
+
+    return (
+      <Context.Provider value={contextValue}>
+        {props.children}
+      </Context.Provider>
+    );
+  }
+
+  function Outlet() {
+    const ctx = useContext(Context);
+    if (Platform.OS === 'web') {
+      return <View style={styles.portalOutlet}>{ctx.outlet}</View>;
+    }
+    return ctx.outlet;
+  }
+
+  function Portal({ children }: React.PropsWithChildren<object>) {
+    const { append, remove } = useContext(Context);
+    const id = useId();
+
+    useEffect(() => {
+      append(id, children as Component);
+      return () => remove(id);
+    }, [id, children, append, remove]);
+
+    return null;
+  }
+
+  return { Provider, Outlet, Portal };
+}
+
+const DefaultPortal = createPortalGroup();
+
+export const Provider = DefaultPortal.Provider;
+export const Outlet = memo(DefaultPortal.Outlet);
+export const Portal = DefaultPortal.Portal;
+
+const styles = StyleSheet.create({
+  portalOutlet: {
+    position: 'fixed' as 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    pointerEvents: 'box-none',
+    zIndex: 999999,
+  },
+});

package/src/prompt/Prompt.tsx

@@ -0,0 +1,248 @@
+import React, { createContext, useCallback, useContext, useId, useMemo } from 'react';
+import { View, Text, TouchableOpacity, Platform, type GestureResponderEvent } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import type { ThemeColors } from '../theme/types';
+import * as Dialog from '../dialog';
+
+export {
+  type DialogControlProps as PromptControlProps,
+  useDialogControl as usePromptControl,
+} from '../dialog';
+
+const PromptContext = createContext<{
+  titleId: string;
+  descriptionId: string;
+}>({
+  titleId: '',
+  descriptionId: '',
+});
+PromptContext.displayName = 'BloomPromptContext';
+
+export function Outer({
+  children,
+  control,
+  testID,
+  onClose,
+}: React.PropsWithChildren<{
+  control: Dialog.DialogControlProps;
+  testID?: string;
+  onClose?: () => void;
+}>) {
+  const titleId = useId();
+  const descriptionId = useId();
+
+  const context = useMemo(
+    () => ({ titleId, descriptionId }),
+    [titleId, descriptionId],
+  );
+
+  return (
+    <Dialog.Outer
+      control={control}
+      testID={testID}
+      onClose={onClose}
+      webOptions={{ alignCenter: true }}
+      preventExpansion
+    >
+      <Dialog.Handle />
+      <PromptContext.Provider value={context}>
+        <Dialog.ScrollableInner
+          label=""
+          style={Platform.select({
+            web: { maxWidth: 320, borderRadius: 36 },
+            default: undefined,
+          })}
+        >
+          {children}
+        </Dialog.ScrollableInner>
+      </PromptContext.Provider>
+    </Dialog.Outer>
+  );
+}
+
+export function TitleText({ children }: React.PropsWithChildren) {
+  const { titleId } = useContext(PromptContext);
+  const theme = useTheme();
+
+  return (
+    <Text
+      nativeID={titleId}
+      style={{
+        fontSize: 22,
+        fontWeight: '600',
+        color: theme.colors.text,
+        paddingBottom: 4,
+        lineHeight: 30,
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function DescriptionText({
+  children,
+  selectable,
+}: React.PropsWithChildren<{ selectable?: boolean }>) {
+  const { descriptionId } = useContext(PromptContext);
+  const theme = useTheme();
+
+  return (
+    <Text
+      nativeID={descriptionId}
+      selectable={selectable}
+      style={{
+        fontSize: 16,
+        color: theme.colors.textSecondary,
+        paddingBottom: 16,
+        lineHeight: 22,
+      }}
+    >
+      {children}
+    </Text>
+  );
+}
+
+export function Actions({ children }: { children: React.ReactNode }) {
+  return <View style={{ width: '100%', gap: 8, justifyContent: 'flex-end' }}>{children}</View>;
+}
+
+export function Content({ children }: { children: React.ReactNode }) {
+  return <View style={{ paddingBottom: 8 }}>{children}</View>;
+}
+
+export type ActionColor = 'primary' | 'primary_subtle' | 'secondary' | 'negative' | 'negative_subtle';
+
+function getActionColors(color: ActionColor, colors: ThemeColors) {
+  switch (color) {
+    case 'negative':
+      return { background: colors.negative, foreground: colors.negativeForeground };
+    case 'negative_subtle':
+      return { background: colors.negativeSubtle, foreground: colors.negativeSubtleForeground };
+    case 'primary_subtle':
+      return { background: colors.primarySubtle, foreground: colors.primarySubtleForeground };
+    case 'secondary':
+      return { background: colors.contrast50, foreground: colors.text };
+    case 'primary':
+    default:
+      return { background: colors.primary, foreground: '#FFFFFF' };
+  }
+}
+
+export function Cancel({ cta }: { cta?: string }) {
+  const { close } = Dialog.useDialogContext();
+  const theme = useTheme();
+  const { background } = getActionColors('secondary', theme.colors);
+
+  return (
+    <TouchableOpacity
+      style={{
+        borderRadius: 9999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: background,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+      }}
+      onPress={() => close()}
+      activeOpacity={0.7}
+    >
+      <Text style={{ fontSize: 16, fontWeight: '500', color: theme.colors.text }}>
+        {cta ?? 'Cancel'}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+export function Action({
+  onPress,
+  color = 'primary',
+  cta,
+  disabled = false,
+  shouldCloseOnPress = true,
+  testID,
+}: {
+  onPress: (e: GestureResponderEvent) => void;
+  color?: ActionColor;
+  cta?: string;
+  disabled?: boolean;
+  shouldCloseOnPress?: boolean;
+  testID?: string;
+}) {
+  const { close } = Dialog.useDialogContext();
+  const theme = useTheme();
+
+  const handleOnPress = useCallback(
+    (e: GestureResponderEvent) => {
+      if (shouldCloseOnPress) {
+        close(() => onPress(e));
+      } else {
+        onPress(e);
+      }
+    },
+    [close, onPress, shouldCloseOnPress],
+  );
+
+  const { background, foreground } = getActionColors(color, theme.colors);
+
+  return (
+    <TouchableOpacity
+      style={{
+        borderRadius: 9999,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: background,
+        opacity: disabled ? 0.5 : 1,
+        paddingVertical: 12,
+        paddingHorizontal: 24,
+      }}
+      onPress={handleOnPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+      testID={testID}
+    >
+      <Text style={{ fontSize: 16, fontWeight: '500', color: foreground }}>
+        {cta ?? 'Confirm'}
+      </Text>
+    </TouchableOpacity>
+  );
+}
+
+export function Basic({
+  control,
+  title,
+  description,
+  cancelButtonCta,
+  confirmButtonCta,
+  onConfirm,
+  confirmButtonColor,
+  showCancel = true,
+}: {
+  control: Dialog.DialogOuterProps['control'];
+  title: string;
+  description?: string;
+  cancelButtonCta?: string;
+  confirmButtonCta?: string;
+  onConfirm: (e: GestureResponderEvent) => void;
+  confirmButtonColor?: ActionColor;
+  showCancel?: boolean;
+}) {
+  return (
+    <Outer control={control} testID="confirmModal">
+      <Content>
+        <TitleText>{title}</TitleText>
+        {description && <DescriptionText>{description}</DescriptionText>}
+      </Content>
+      <Actions>
+        <Action
+          cta={confirmButtonCta}
+          onPress={onConfirm}
+          color={confirmButtonColor}
+          testID="confirmBtn"
+        />
+        {showCancel && <Cancel cta={cancelButtonCta} />}
+      </Actions>
+    </Outer>
+  );
+}

package/src/prompt/index.ts

@@ -0,0 +1,13 @@
+export {
+  Outer,
+  TitleText,
+  DescriptionText,
+  Actions,
+  Content,
+  Cancel,
+  Action,
+  Basic,
+  usePromptControl,
+} from './Prompt';
+
+export type { PromptControlProps, ActionColor } from './Prompt';

package/src/prompt-input/Actions.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import { useTheme } from '../theme/use-theme';
+import { usePromptInput } from './context';
+import type { PromptInputActionsProps } from './types';
+
+export function PromptInputActions({
+  children,
+  style,
+  testID,
+}: PromptInputActionsProps) {
+  const { isFullscreen } = usePromptInput();
+  const theme = useTheme();
+
+  return (
+    <View
+      style={[
+        {
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 8,
+        },
+        isFullscreen && {
+          position: 'absolute',
+          bottom: 16,
+          left: 16,
+          right: 16,
+          maxWidth: 672,
+          alignSelf: 'center',
+          borderRadius: 9999,
+          borderWidth: 1,
+          borderColor: theme.colors.border,
+          backgroundColor: theme.colors.background,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+        },
+        style,
+      ]}
+      testID={testID}
+    >
+      {children}
+    </View>
+  );
+}