@oxyhq/bloom 0.1.35 → 0.1.37

package/src/dialog/Dialog.tsx

@@ -1,15 +1,79 @@
 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 { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 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,
@@ -18,7 +82,7 @@ export function Outer({
   preventExpansion,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const theme = useTheme();
-  const ref = useRef<BottomSheetModal>(null);
+  const ref = useRef<BottomSheetModalRef>(null);
   const closeCallbacks = useRef<(() => void)[]>([]);
 
   const callQueuedCallbacks = useCallback(() => {
@@ -59,21 +123,37 @@ export function Outer({
     [close],
   );
 
+  const bottomSheet = getBottomSheetModule();
+
   const renderBackdrop = useCallback(
-    (props: BottomSheetBackdropProps) => (
-      <BottomSheetBackdrop
-        {...props}
-        appearsOnIndex={0}
-        disappearsOnIndex={-1}
-        pressBehavior="close"
-        opacity={0.4}
-      />
-    ),
-    [],
+    (props: BottomSheetBackdropProps) => {
+      if (!bottomSheet) return null;
+      const { BottomSheetBackdrop } = bottomSheet;
+      return (
+        <BottomSheetBackdrop
+          {...props}
+          appearsOnIndex={0}
+          disappearsOnIndex={-1}
+          pressBehavior="close"
+          opacity={0.4}
+        />
+      );
+    },
+    [bottomSheet],
   );
 
   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
       ref={ref}

package/src/icons/common.tsx

@@ -1,14 +1,27 @@
 import React from 'react';
-import { StyleSheet, type TextProps } from 'react-native';
+import { StyleSheet, type ColorValue, type StyleProp, type ViewStyle } from 'react-native';
 import { type PathProps, type SvgProps } from 'react-native-svg';
 import { Defs, LinearGradient, Stop } from 'react-native-svg';
 
 import { useTheme } from '../theme/use-theme';
 import { gradients } from '../styles/tokens';
 
+/**
+ * Style prop for Bloom icons. Icons render via `<Svg>`, which is a View-like
+ * host, so the style must be View-compatible. A `color` field is allowed as a
+ * convenience for consumers who set fill via the CSS `color` shorthand (the
+ * icon reads this as a fallback fill when no explicit `fill` prop is given).
+ *
+ * Note: we intentionally avoid `TextStyle` here — React Native 0.84 introduced
+ * `cursor: CursorValue` on `ViewStyle` while `expo/types/react-native-web`
+ * augments `TextStyle.cursor` to `string`, and the resulting invariance
+ * breaks assignment of `StyleProp<TextStyle>` to `<Svg>`'s style slot.
+ */
+export type IconStyle = ViewStyle & { color?: ColorValue };
+
 export type Props = {
   fill?: PathProps['fill'];
-  style?: TextProps['style'];
+  style?: StyleProp<IconStyle>;
   size?: keyof typeof sizes;
   gradient?: keyof typeof gradients;
 } & Omit<SvgProps, 'style' | 'size'>;
@@ -28,9 +41,9 @@ export function useCommonSVGProps(props: Props) {
   const { colors } = useTheme();
   const reactId = React.useId();
   const { fill, size, gradient, ...rest } = props;
-  const style = StyleSheet.flatten(rest.style);
+  const style = StyleSheet.flatten<IconStyle>(rest.style);
   const _size = Number(size ? sizes[size] : rest.width || sizes.md);
-  let _fill = fill || (style as Record<string, string>)?.color || colors.primary;
+  let _fill: PathProps['fill'] = fill ?? style?.color ?? colors.primary;
   let gradientDef = null;
 
   if (gradient && gradients[gradient]) {

package/src/icons/index.ts

@@ -150,5 +150,5 @@ export * from './Warning';
 export * from './Window';
 export * from './Wrench';
 export * from './Zap';
-export type { Props } from './common';
+export type { IconStyle, Props } from './common';
 export { sizes, useCommonSVGProps } from './common';

package/src/loading/SpinnerIcon.tsx

@@ -76,8 +76,12 @@ const AnimatedSpinner: React.FC<AnimatedSpinnerProps> = ({
         style,
       ]}
     >
-      {/* @ts-expect-error className is added by NativeWind cssInterop at runtime */}
-      <Svg viewBox="0 0 100 100" width={size} height={size} className={className}>
+      <Svg
+        viewBox="0 0 100 100"
+        width={size}
+        height={size}
+        {...(className ? ({ className } as Record<string, string>) : {})}
+      >
         <Rect fill={color} height="10" opacity="0" rx="5" ry="5" transform="rotate(-90 50 50)" width="28" x="67" y="45" />
         <Rect fill={color} height="10" opacity="0.125" rx="5" ry="5" transform="rotate(-45 50 50)" width="28" x="67" y="45" />
         <Rect fill={color} height="10" opacity="0.25" rx="5" ry="5" transform="rotate(0 50 50)" width="28" x="67" y="45" />

package/src/text-field/index.tsx

@@ -20,6 +20,7 @@ import {
   platform,
   tokens,
   type TextStyleProp,
+  type ViewStyleProp,
 } from '../styles';
 import { type Props as SVGIconProps } from '../icons/common';
 import { Text } from '../typography';
@@ -46,7 +47,7 @@ const Context = createContext<{
 Context.displayName = 'TextFieldContext';
 
 export type RootProps = React.PropsWithChildren<
-  { isInvalid?: boolean } & TextStyleProp
+  { isInvalid?: boolean } & ViewStyleProp
 >;
 
 export function Root({ children, isInvalid = false, style }: RootProps) {

package/src/theme/set-color-scheme-safe.ts

@@ -1,5 +1,4 @@
 import { Appearance, Platform } from 'react-native';
-import type { ColorSchemeName } from 'react-native';
 import type { ThemeMode } from './types';
 
 /**
@@ -7,8 +6,18 @@ import type { ThemeMode } from './types';
  * On Android (RN 0.83+), Appearance.setColorScheme has a Kotlin non-null
  * annotation on `style`. Passing null for 'system' crashes.
  * Workaround: resolve the system preference and pass 'light'/'dark' instead.
+ *
+ * On react-native-web, Appearance.setColorScheme is not implemented at all
+ * (it's `undefined`), which crashes with "setColorScheme is not a function".
+ * Appearance.getColorScheme() still works on web, so reading the system
+ * preference is fine — it's only the setter that's missing. The browser /
+ * electron controls the color scheme anyway, so we just bail out on web.
  */
 export function setColorSchemeSafe(mode: ThemeMode) {
+  if (Platform.OS === 'web') {
+    return;
+  }
+
   const effectiveMode = mode === 'adaptive' ? 'system' : mode;
   if (effectiveMode === 'system') {
     const resolved = Appearance.getColorScheme() ?? 'light';