@streamplace/components 0.7.35 → 0.8.3

package/src/components/ui/dialog.tsx

@@ -1,11 +1,21 @@
+import BottomSheet, { BottomSheetScrollView } from "@gorhom/bottom-sheet";
+// to get the portal
+import * as Portal from "@rn-primitives/portal";
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react-native";
-import React, { forwardRef } from "react";
-import { Platform, Text } from "react-native";
+import React, { forwardRef, useRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  useWindowDimensions,
+  View,
+} from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useTheme } from "../../lib/theme/theme";
-import * as zero from "../../ui";
 import { createThemedIcon } from "./icons";
 import { ModalPrimitive, ModalPrimitiveProps } from "./primitives/modal";
+import { Text } from "./text";
 
 const ThemedX = createThemedIcon(X);
 
@@ -50,10 +60,138 @@ export interface DialogProps
   onClose?: () => void;
 }
 
+// Bottom Sheet Dialog Component
+const DialogBottomSheet = forwardRef<
+  any,
+  DialogProps & {
+    overlayStyle?: any;
+    portalHost?: string;
+  }
+>(function DialogBottomSheet(
+  {
+    overlayStyle,
+    portalHost,
+    children,
+    title,
+    description,
+    showCloseButton = true,
+    onClose,
+    open = false,
+    onOpenChange,
+    ...props
+  },
+  _ref,
+) {
+  const { theme } = useTheme();
+  const sheetRef = useRef<BottomSheet>(null);
+  const { top } = useSafeAreaInsets();
+  const dims = useWindowDimensions();
+
+  const handleClose = React.useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+    if (onOpenChange) {
+      onOpenChange(false);
+    }
+  }, [onClose, onOpenChange]);
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Portal.Portal name="dialog">
+      <BottomSheet
+        ref={sheetRef}
+        index={open ? 0 : -1}
+        enablePanDownToClose
+        enableDynamicSizing={true}
+        maxDynamicContentSize={dims.height - top}
+        keyboardBehavior="interactive"
+        keyboardBlurBehavior="restore"
+        enableContentPanningGesture={false}
+        backdropComponent={({ style }) => (
+          <Pressable
+            style={[style, StyleSheet.absoluteFill]}
+            onPress={handleClose}
+          />
+        )}
+        onClose={handleClose}
+        style={[overlayStyle]}
+        backgroundStyle={{
+          backgroundColor: theme.colors.card,
+          borderRadius: theme.borderRadius.lg,
+          ...theme.shadows.lg,
+        }}
+        handleIndicatorStyle={{
+          width: 48,
+          height: 4,
+          backgroundColor: theme.colors.textMuted,
+        }}
+      >
+        <BottomSheetScrollView
+          style={{
+            flex: 1,
+            width: "100%",
+          }}
+          contentContainerStyle={{ flexGrow: 1 }}
+        >
+          {/* Header */}
+          {(title || showCloseButton) && (
+            <View
+              style={{
+                paddingHorizontal: theme.spacing[4],
+                paddingVertical: theme.spacing[4],
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+              }}
+            >
+              {title && <DialogTitle>{title}</DialogTitle>}
+              {showCloseButton && (
+                <Pressable
+                  onPress={handleClose}
+                  style={{
+                    width: theme.touchTargets.minimum,
+                    height: theme.touchTargets.minimum,
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: theme.borderRadius.sm,
+                    marginLeft: theme.spacing[2],
+                  }}
+                >
+                  <DialogCloseIcon />
+                </Pressable>
+              )}
+            </View>
+          )}
+
+          {/* Scrollable Content */}
+          <View
+            style={{
+              paddingHorizontal: theme.spacing[4],
+              paddingBottom: theme.spacing[6],
+              flex: 1,
+              width: "100%",
+            }}
+          >
+            {description && (
+              <DialogDescription>{description}</DialogDescription>
+            )}
+            {children}
+          </View>
+        </BottomSheetScrollView>
+      </BottomSheet>
+    </Portal.Portal>
+  );
+});
+
 export const Dialog = forwardRef<any, DialogProps>(
   (
     {
-      variant = "left",
+      variant = "default",
       size = "md",
       position = "center",
       children,
@@ -68,70 +206,10 @@ export const Dialog = forwardRef<any, DialogProps>(
     },
     ref,
   ) => {
-    const { zero: zt, theme } = useTheme();
-
-    // Content styles using theme.zero
-    const contentStyles = React.useMemo(() => {
-      const baseStyle = [
-        zt.bg.card,
-        zero.r.lg,
-        zero.shadows.lg,
-        { maxHeight: "90%", maxWidth: "90%" },
-      ];
-
-      const variantStyle = (() => {
-        switch (variant) {
-          case "sheet":
-            return [
-              { borderRadius: zero.borderRadius.xl },
-              {
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                marginTop: "auto",
-                marginBottom: 0,
-                maxHeight: "80%",
-                width: "100%",
-                maxWidth: "100%",
-              },
-            ];
-          case "fullscreen":
-            return [
-              {
-                width: "100%",
-                height: "100%",
-                maxWidth: "100%",
-                maxHeight: "100%",
-                borderRadius: 0,
-                margin: 0,
-              },
-            ];
-          default:
-            return [];
-        }
-      })();
-
-      const sizeStyle = (() => {
-        switch (size) {
-          case "sm":
-            return { minWidth: 300, minHeight: 200 };
-          case "lg":
-            return { minWidth: 500, minHeight: 400 };
-          case "xl":
-            return { minWidth: 600, minHeight: 500 };
-          case "full":
-            return {
-              width: "95%",
-              height: "95%",
-              maxWidth: "95%",
-              maxHeight: "95%",
-            };
-          default:
-            return { minWidth: 400, minHeight: 300 };
-        }
-      })();
-
-      return [baseStyle, variantStyle, sizeStyle].flat();
-    }, [variant, size, zero]);
+    const { theme } = useTheme();
+
+    // Create dynamic styles based on theme
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
 
     const handleClose = React.useCallback(() => {
       if (onClose) {
@@ -173,38 +251,32 @@ export const Dialog = forwardRef<any, DialogProps>(
         <ModalPrimitive.Overlay
           dismissible={dismissible}
           onDismiss={handleClose}
-          style={zt.bg.overlay}
+          style={styles.overlay}
         >
           <ModalPrimitive.Content
-            position={position || "left"}
+            position={position || "center"}
             size={size || "md"}
-            style={contentStyles}
+            style={[
+              styles.content,
+              variant === "sheet" && styles.sheetContent,
+              variant === "fullscreen" && styles.fullscreenContent,
+              size === "sm" && styles.smContent,
+              size === "md" && styles.mdContent,
+              size === "lg" && styles.lgContent,
+              size === "xl" && styles.xlContent,
+              size === "full" && styles.fullContent,
+            ]}
           >
             {(title || showCloseButton) && (
               <ModalPrimitive.Header
                 withBorder={variant !== "sheet"}
-                style={[
-                  zero.p[4],
-                  {
-                    flexDirection: "row",
-                    alignItems: "center",
-                    justifyContent: "space-between",
-                  },
-                ]}
+                style={styles.header}
               >
                 <DialogTitle>{title}</DialogTitle>
                 {showCloseButton && (
                   <ModalPrimitive.Close
                     onClose={handleClose}
-                    style={[
-                      zero.p[2],
-                      {
-                        width: 44,
-                        height: 44,
-                        alignItems: "center",
-                        justifyContent: "center",
-                      },
-                    ]}
+                    style={styles.closeButton}
                   >
                     <DialogCloseIcon />
                   </ModalPrimitive.Close>
@@ -214,7 +286,7 @@ export const Dialog = forwardRef<any, DialogProps>(
 
             <ModalPrimitive.Body
               scrollable={variant !== "fullscreen"}
-              style={[zero.p[6], { paddingTop: 0, flex: 1 }]}
+              style={styles.body}
             >
               {description && (
                 <DialogDescription>{description}</DialogDescription>
@@ -230,6 +302,43 @@ export const Dialog = forwardRef<any, DialogProps>(
 
 Dialog.displayName = "Dialog";
 
+/// Responsive Dialog Component. On mobile this will render a *bottom sheet*.
+/// Prefer this over the regular Dialog component for better mobile UX.
+export const ResponsiveDialog = forwardRef<any, DialogProps>(
+  ({ children, size, ...props }, ref) => {
+    const { width } = useWindowDimensions();
+
+    // On web, you might want to always use the normal dialog
+    // On mobile (width < 800), use the bottom sheet
+    const isBottomSheet = Platform.OS !== "web" && width < 800;
+
+    if (isBottomSheet) {
+      return (
+        <DialogBottomSheet
+          ref={ref}
+          {...props}
+          size={"full"}
+          showCloseButton={false}
+          variant="fullscreen"
+        >
+          {children}
+        </DialogBottomSheet>
+      );
+    }
+
+    // Use larger default size for regular dialogs to give more room
+    const dialogSize = size || "lg";
+
+    return (
+      <Dialog ref={ref} size={dialogSize} {...props}>
+        {children}
+      </Dialog>
+    );
+  },
+);
+
+ResponsiveDialog.displayName = "ResponsiveDialog";
+
 // Dialog Title component
 export interface DialogTitleProps {
   children?: React.ReactNode;
@@ -238,16 +347,13 @@ export interface DialogTitleProps {
 
 export const DialogTitle = forwardRef<any, DialogTitleProps>(
   ({ children, style, ...props }, ref) => {
-    const { zero: zt } = useTheme();
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
 
     if (!children) return null;
 
     return (
-      <Text
-        ref={ref}
-        style={[zt.text.xl, { fontWeight: "600", flex: 1 }, style]}
-        {...props}
-      >
+      <Text ref={ref} style={[styles.title, style]} {...props}>
         {children}
       </Text>
     );
@@ -264,12 +370,13 @@ export interface DialogDescriptionProps {
 
 export const DialogDescription = forwardRef<any, DialogDescriptionProps>(
   ({ children, style, ...props }, ref) => {
-    const { zero: zt } = useTheme();
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
 
     if (!children) return null;
 
     return (
-      <Text ref={ref} style={[zt.text.muted, zero.mb[4], style]} {...props}>
+      <Text ref={ref} style={[styles.description, style]} {...props}>
         {children}
       </Text>
     );
@@ -304,7 +411,8 @@ export const DialogFooter = forwardRef<any, DialogFooterProps>(
     },
     ref,
   ) => {
-    const { zero: zt } = useTheme();
+    const { theme } = useTheme();
+    const styles = React.useMemo(() => createStyles(theme), [theme]);
 
     if (!children) return null;
 
@@ -314,7 +422,7 @@ export const DialogFooter = forwardRef<any, DialogFooterProps>(
         withBorder={withBorder}
         direction={direction}
         justify={justify}
-        style={[zero.p[6], { gap: 8 }, style]}
+        style={[styles.footer, style]}
         {...props}
       >
         {children}
@@ -330,5 +438,117 @@ const DialogCloseIcon = () => {
   return <ThemedX size="md" variant="default" />;
 };
 
+// Create theme-aware styles
+function createStyles(theme: any) {
+  return StyleSheet.create({
+    overlay: {
+      backgroundColor: "rgba(0, 0, 0, 0.5)",
+    },
+
+    content: {
+      backgroundColor: theme.colors.card,
+      borderRadius: theme.borderRadius.lg,
+      ...theme.shadows.lg,
+      maxHeight: "90%",
+      maxWidth: "90%",
+    },
+
+    // Variant styles
+    sheetContent: {
+      borderTopLeftRadius: theme.borderRadius.xl,
+      borderTopRightRadius: theme.borderRadius.xl,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      marginTop: "auto",
+      marginBottom: 0,
+      maxHeight: "80%",
+      width: "100%",
+      maxWidth: "100%",
+    },
+
+    fullscreenContent: {
+      width: "100%",
+      height: "100%",
+      maxWidth: "100%",
+      maxHeight: "100%",
+      borderRadius: 0,
+      margin: 0,
+    },
+
+    // Size styles
+    smContent: {
+      minWidth: 300,
+      minHeight: 200,
+    },
+
+    mdContent: {
+      minWidth: 400,
+      minHeight: 300,
+    },
+
+    lgContent: {
+      minWidth: 500,
+      minHeight: 400,
+    },
+
+    xlContent: {
+      minWidth: 600,
+      minHeight: 500,
+    },
+
+    fullContent: {
+      width: "95%",
+      height: "95%",
+      maxWidth: "95%",
+      maxHeight: "95%",
+    },
+
+    header: {
+      paddingHorizontal: theme.spacing[6],
+      paddingVertical: theme.spacing[4],
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+    },
+
+    body: {
+      paddingHorizontal: theme.spacing[6],
+      paddingBottom: theme.spacing[6],
+      flex: 1,
+    },
+
+    footer: {
+      paddingHorizontal: theme.spacing[6],
+      paddingVertical: theme.spacing[4],
+      gap: theme.spacing[2],
+      width: "100%",
+    },
+
+    title: {
+      fontSize: 20,
+      fontWeight: "600",
+      color: theme.colors.text,
+      flex: 1,
+      lineHeight: 24,
+    },
+
+    description: {
+      fontSize: 16,
+      color: theme.colors.textMuted,
+      lineHeight: 22,
+      marginVertical: theme.spacing[4],
+    },
+
+    closeButton: {
+      width: theme.touchTargets.minimum,
+      height: theme.touchTargets.minimum,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: theme.borderRadius.sm,
+      marginLeft: theme.spacing[2],
+    },
+  });
+}
+
 // Export dialog variants for external use
 export { dialogVariants };

package/src/components/ui/primitives/input.tsx

@@ -1,3 +1,7 @@
+import {
+  BottomSheetTextInput,
+  useBottomSheetInternal,
+} from "@gorhom/bottom-sheet";
 import React, { forwardRef } from "react";
 import {
   NativeSyntheticEvent,
@@ -24,7 +28,7 @@ export interface InputPrimitiveProps extends Omit<TextInputProps, "onChange"> {
 }
 
 // Input root primitive - the main TextInput component
-export const InputRoot = forwardRef<TextInput, InputPrimitiveProps>(
+export const InputRoot = forwardRef<any, InputPrimitiveProps>(
   (
     {
       value,
@@ -44,6 +48,19 @@ export const InputRoot = forwardRef<TextInput, InputPrimitiveProps>(
   ) => {
     const [isFocused, setIsFocused] = React.useState(false);
 
+    let isInBottomSheet = false;
+    try {
+      useBottomSheetInternal();
+      isInBottomSheet = true;
+    } catch {
+      isInBottomSheet = false;
+    }
+
+    const InputComponent =
+      isInBottomSheet && Platform.OS !== "web"
+        ? BottomSheetTextInput
+        : TextInput;
+
     const handleChangeText = React.useCallback(
       (text: string) => {
         if (onChangeText) {
@@ -77,7 +94,7 @@ export const InputRoot = forwardRef<TextInput, InputPrimitiveProps>(
     );
 
     return (
-      <TextInput
+      <InputComponent
         ref={ref}
         value={value}
         onChangeText={handleChangeText}

package/src/components/ui/primitives/modal.tsx

@@ -32,8 +32,9 @@ export const ModalRoot = forwardRef<View, ModalPrimitiveProps>(
       children,
       onRequestClose,
       animationType = "fade",
-      presentationStyle = Platform.OS === "ios" ? "pageSheet" : "fullScreen",
-      statusBarTranslucent = Platform.OS === "android",
+      presentationStyle = Platform.OS === "ios" ? "pageSheet" : "formSheet",
+      statusBarTranslucent = Platform.OS !== "ios",
+      transparent = true,
       ...props
     },
     ref,
@@ -57,6 +58,7 @@ export const ModalRoot = forwardRef<View, ModalPrimitiveProps>(
         animationType={animationType}
         presentationStyle={presentationStyle}
         statusBarTranslucent={statusBarTranslucent}
+        transparent={transparent}
         {...props}
       >
         <View ref={ref} style={primitiveStyles.container}>