@oxyhq/bloom 0.3.6 → 0.3.8

package/src/dialog/Dialog.tsx

@@ -1,79 +1,15 @@
 import React, { useCallback, useImperativeHandle, useMemo, useRef } from 'react';
-import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Pressable, StyleSheet, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
+import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useTheme } from '../theme/use-theme';
-import { lazyRequire } from '../utils/lazy-require';
 import { Context, useDialogContext } from './context';
 import type { DialogControlProps, DialogInnerProps, DialogOuterProps } from './types';
 
 export { useDialogContext, useDialogControl } from './context';
 export type { DialogControlProps, DialogOuterProps, DialogInnerProps } from './types';
 
-// ---------------------------------------------------------------------------
-// Local types for @gorhom/bottom-sheet — declared here instead of imported so
-// that Bloom type-checks cleanly in downstream projects that do not install
-// this optional peer dependency. The module is still consumed at runtime via
-// `lazyRequire`, which returns `null` if the package is missing. In that case
-// Dialog.Outer renders nothing with a console warning, so consumers on native
-// MUST install @gorhom/bottom-sheet to use Bloom's Dialog on native.
-// ---------------------------------------------------------------------------
-type BottomSheetBackdropProps = {
-  animatedIndex: unknown;
-  animatedPosition: unknown;
-  style?: StyleProp<ViewStyle>;
-};
-
-type BottomSheetModalRef = {
-  present: () => void;
-  dismiss: () => void;
-};
-
-type BottomSheetModalProps = {
-  ref?: React.Ref<BottomSheetModalRef>;
-  enablePanDownToClose?: boolean;
-  enableDismissOnClose?: boolean;
-  enableDynamicSizing?: boolean;
-  snapPoints?: (string | number)[];
-  backgroundStyle?: StyleProp<ViewStyle>;
-  handleComponent?: React.ComponentType | (() => React.ReactNode) | null;
-  backdropComponent?: React.ComponentType<BottomSheetBackdropProps>;
-  onDismiss?: () => void;
-  style?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
-};
-
-type BottomSheetViewProps = {
-  testID?: string;
-  style?: StyleProp<ViewStyle>;
-  children?: React.ReactNode;
-};
-
-type BottomSheetBackdropComponentProps = BottomSheetBackdropProps & {
-  appearsOnIndex?: number;
-  disappearsOnIndex?: number;
-  pressBehavior?: 'none' | 'close' | 'collapse' | number;
-  opacity?: number;
-};
-
-type BottomSheetModule = {
-  BottomSheetModal: React.ComponentType<BottomSheetModalProps>;
-  BottomSheetView: React.ComponentType<BottomSheetViewProps>;
-  BottomSheetBackdrop: React.ComponentType<BottomSheetBackdropComponentProps>;
-};
-
-const getBottomSheetModule = lazyRequire<BottomSheetModule>('@gorhom/bottom-sheet');
-
-let warnedAboutMissingBottomSheet = false;
-function warnMissingBottomSheet(): void {
-  if (warnedAboutMissingBottomSheet) return;
-  warnedAboutMissingBottomSheet = true;
-  console.warn(
-    "[bloom] @gorhom/bottom-sheet is not installed. Bloom's native Dialog will not render. " +
-      'Install it as a peer dependency to enable Dialog on native, or rely on the web Dialog implementation on web.',
-  );
-}
-
 export function Outer({
   children,
   control,
@@ -82,7 +18,7 @@ export function Outer({
   preventExpansion,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const theme = useTheme();
-  const ref = useRef<BottomSheetModalRef>(null);
+  const ref = useRef<BottomSheetRef>(null);
   const closeCallbacks = useRef<(() => void)[]>([]);
 
   const callQueuedCallbacks = useCallback(() => {
@@ -107,6 +43,10 @@ export function Outer({
     ref.current?.dismiss();
   }, []);
 
+  // onDismiss fires after the BottomSheet's close animation finishes — this is
+  // the integration point for the closeCallbacks queue. Consumers (e.g.
+  // Prompt.Action) rely on the queued callback running AFTER the sheet has
+  // visually closed so the screen transition feels natural.
   const handleDismiss = useCallback(() => {
     callQueuedCallbacks();
     onClose?.();
@@ -123,63 +63,39 @@ export function Outer({
     [close],
   );
 
-  const bottomSheet = getBottomSheetModule();
-
-  const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => {
-      if (!bottomSheet) return null;
-      const { BottomSheetBackdrop } = bottomSheet;
-      return (
-        <BottomSheetBackdrop
-          {...props}
-          appearsOnIndex={0}
-          disappearsOnIndex={-1}
-          pressBehavior="close"
-          opacity={0.4}
-        />
-      );
-    },
-    [bottomSheet],
+  const sheetStyle = useMemo(
+    () => [
+      {
+        maxWidth: 500,
+        backgroundColor: theme.colors.background,
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+      },
+      // When the dialog should not be expandable to fill the screen, clamp the
+      // sheet to a comfortable fixed height. Mirrors the historical gorhom
+      // behaviour where `preventExpansion` locked the sheet to a 40% snap point.
+      preventExpansion ? { height: '40%' as const } : null,
+    ],
+    [theme.colors.background, preventExpansion],
   );
 
-  const renderHandle = useCallback(() => null, []);
-
-  if (!bottomSheet) {
-    // Optional peer `@gorhom/bottom-sheet` is not installed.
-    // Dialog.Outer is a no-op in this environment; consumers on native must
-    // install the peer to use Bloom's native Dialog implementation.
-    warnMissingBottomSheet();
-    return null;
-  }
-
-  const { BottomSheetModal, BottomSheetView } = bottomSheet;
-
   return (
-    <BottomSheetModal
+    <BottomSheet
       ref={ref}
-      enablePanDownToClose
-      enableDismissOnClose
-      enableDynamicSizing={!preventExpansion}
-      snapPoints={preventExpansion ? ['40%'] : undefined}
-      backgroundStyle={{
-        backgroundColor: theme.colors.background,
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-      }}
-      handleComponent={renderHandle}
-      backdropComponent={renderBackdrop}
       onDismiss={handleDismiss}
-      style={{ maxWidth: 500, margin: 'auto' }}
+      enablePanDownToClose
+      showHandle={false}
+      style={sheetStyle}
     >
       <Context.Provider value={context}>
-        <BottomSheetView
+        <View
           testID={testID}
           style={{ backgroundColor: theme.colors.background }}
         >
           {children}
-        </BottomSheetView>
+        </View>
       </Context.Provider>
-    </BottomSheetModal>
+    </BottomSheet>
   );
 }
 

package/src/dialog/index.web.ts

@@ -1,10 +1,9 @@
 // Web variant of the `./dialog` barrel.
 //
 // The default barrel (`./index.ts`) re-exports from `./Dialog`, which on
-// native uses `react-native-safe-area-context` and pulls in
-// `@gorhom/bottom-sheet` via `lazyRequire`. The web fork (`./Dialog.web`)
-// is a pure-DOM modal overlay that depends only on `react-remove-scroll-bar`
-// and the in-package `Portal`.
+// native uses `react-native-safe-area-context` and Bloom's own `BottomSheet`
+// primitive. The web fork (`./Dialog.web`) is a pure-DOM modal overlay that
+// depends only on `react-remove-scroll-bar` and the in-package `Portal`.
 //
 // Web bundlers select this file via the `"browser"` condition in
 // `package.json`'s `exports['./dialog']`; native bundlers fall through to

package/src/fonts/FontLoader.native.tsx

@@ -27,9 +27,9 @@ type TextWithDefaults = typeof Text & {
 
 /**
  * Mutates `Text.defaultProps.style` so every native `<Text>` in the consuming
- * app inherits Bloom's sans font (Inter). The Bloom family name is prepended
- * to any existing default style so caller-provided `style` (which React
- * applies AFTER `defaultProps.style`) still wins for overrides.
+ * app inherits Bloom's default font (BlomusModernus). The Bloom family name
+ * is prepended to any existing default style so caller-provided `style`
+ * (which React applies AFTER `defaultProps.style`) still wins for overrides.
  *
  * Idempotent: re-invoking it after the first apply is a no-op because the
  * first style entry will already be the Bloom default we added.
@@ -37,7 +37,7 @@ type TextWithDefaults = typeof Text & {
 function applyDefaultTextFont(): void {
   const TextWithDefaults = Text as TextWithDefaults;
   const existing = TextWithDefaults.defaultProps?.style;
-  const bloomDefault: TextStyle = { fontFamily: 'Inter' };
+  const bloomDefault: TextStyle = { fontFamily: 'BlomusModernus' };
 
   // Detect whether we've already prepended ourselves. `existing` may be an
   // array (multiple style fragments), a single object, a registered style
@@ -79,8 +79,8 @@ function applyDefaultTextFont(): void {
  * provider tree ever flips `fonts` back on.
  *
  * Once the bundled fonts report `loaded === true`, this component also
- * mutates `Text.defaultProps.style` to prepend `{ fontFamily: 'Inter' }`
- * so every native `<Text>` in the consuming app inherits Bloom's sans
+ * mutates `Text.defaultProps.style` to prepend `{ fontFamily: 'BlomusModernus' }`
+ * so every native `<Text>` in the consuming app inherits Bloom's default
  * family without callers needing to import `<Text>` from `@oxyhq/bloom`.
  * The mutation is gated by a `useRef` so it runs at most once per
  * FontLoader instance, and the underlying apply is idempotent — the

package/src/fonts/tokens.ts

@@ -10,7 +10,7 @@
 
 export const fontFamilies = {
   display: 'BlomusModernus, Georgia, "Times New Roman", serif',
-  sans: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  sans: 'BlomusModernus, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
   mono: '"Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace',
 } as const;
 

package/src/typography/index.tsx

@@ -24,9 +24,13 @@ function fontFamilyStyle(
   if (Platform.OS === 'web') {
     return { fontFamily: `var(--bloom-font-${kind})` };
   }
-  if (kind === 'display') return { fontFamily: 'BlomusModernus' };
   if (kind === 'mono') return { fontFamily: 'Geist Mono' };
-  return { fontFamily: 'Inter' };
+  // `display` and `sans` both resolve to BlomusModernus on native — Bloom's
+  // default body font. The CSS stack in `tokens.ts` differs (display vs sans
+  // have different fallback chains for web), but on RN the literal family
+  // name is the only thing that matters; the .ttf is registered via
+  // `useFonts(FONT_ASSETS)` in `FontLoader.native.tsx`.
+  return { fontFamily: 'BlomusModernus' };
 }
 
 const SANS_FONT_FAMILY = fontFamilyStyle('sans');