@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/ActivityIndicator.d.ts

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+import type { ThemeProp } from './types';
+export type Props = React.ComponentPropsWithRef<typeof View> & {
+    /**
+     * Whether to show the indicator or hide it.
+     */
+    animating?: boolean;
+    /**
+     * The color of the spinner.
+     */
+    color?: string;
+    /**
+     * Size of the indicator.
+     */
+    size?: 'small' | 'large' | number;
+    /**
+     * Whether the indicator should hide when not animating.
+     */
+    hidesWhenStopped?: boolean;
+    style?: StyleProp<ViewStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * Activity indicator is used to present progress of some activity in the app.
+ * It can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const ActivityIndicator: ({ animating, color: indicatorColor, hidesWhenStopped, size: indicatorSize, style, theme: themeOverrides, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ActivityIndicator;

package/src/ui/components/ActivityIndicator.js

@@ -0,0 +1,184 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const theming_1 = require("./theming");
+const DURATION = 2400;
+/**
+ * Activity indicator is used to present progress of some activity in the app.
+ * It can be used as a drop-in replacement for the ActivityIndicator shipped with React Native.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { ActivityIndicator, MD2Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <ActivityIndicator animating={true} color={MD2Colors.red800} />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const ActivityIndicator = ({ animating = true, color: indicatorColor, hidesWhenStopped = true, size: indicatorSize = 'small', style, theme: themeOverrides, ...rest }) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const { current: timer } = React.useRef(new react_native_1.Animated.Value(0));
+    const { current: fade } = React.useRef(new react_native_1.Animated.Value(!animating && hidesWhenStopped ? 0 : 1));
+    const rotation = React.useRef(undefined);
+    const { animation: { scale }, } = theme;
+    const startRotation = React.useCallback(() => {
+        // Show indicator
+        react_native_1.Animated.timing(fade, {
+            duration: 200 * scale,
+            toValue: 1,
+            isInteraction: false,
+            useNativeDriver: true,
+        }).start();
+        // Circular animation in loop
+        if (rotation.current) {
+            timer.setValue(0);
+            // $FlowFixMe
+            react_native_1.Animated.loop(rotation.current).start();
+        }
+    }, [scale]);
+    const stopRotation = React.useCallback(() => {
+        if (rotation.current) {
+            rotation.current.stop();
+        }
+    }, []);
+    React.useEffect(() => {
+        if (rotation.current === undefined) {
+            // Circular animation in loop
+            rotation.current = react_native_1.Animated.timing(timer, {
+                duration: DURATION,
+                easing: react_native_1.Easing.linear,
+                // Animated.loop does not work if useNativeDriver is true on web
+                useNativeDriver: react_native_1.Platform.OS !== 'web',
+                toValue: 1,
+                isInteraction: false,
+            });
+        }
+        if (animating) {
+            startRotation();
+        }
+        else if (hidesWhenStopped) {
+            // Hide indicator first and then stop rotation
+            react_native_1.Animated.timing(fade, {
+                duration: 200 * scale,
+                toValue: 0,
+                useNativeDriver: true,
+                isInteraction: false,
+            }).start(stopRotation);
+        }
+        else {
+            stopRotation();
+        }
+    }, [animating, hidesWhenStopped, startRotation, stopRotation, scale]);
+    const color = indicatorColor || theme.colors?.primary;
+    const size = typeof indicatorSize === 'string'
+        ? indicatorSize === 'small'
+            ? 24
+            : 48
+        : indicatorSize
+            ? indicatorSize
+            : 24;
+    const frames = (60 * DURATION) / 1000;
+    const easing = react_native_1.Easing.bezier(0.4, 0.0, 0.7, 1.0);
+    const containerStyle = {
+        width: size,
+        height: size / 2,
+        overflow: 'hidden',
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [styles.container, style], ...rest, accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating }, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [{ width: size, height: size, opacity: fade }], collapsable: false, children: [0, 1].map((index) => {
+                // Thanks to https://github.com/n4kz/react-native-indicators for the great work
+                const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
+                const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+                    let progress = (2 * frameIndex) / (frames - 1);
+                    const rotation = index ? +(360 - 15) : -(180 - 15);
+                    if (progress > 1.0) {
+                        progress = 2.0 - progress;
+                    }
+                    const direction = index ? -1 : +1;
+                    return `${direction * (180 - 30) * easing(progress) + rotation}deg`;
+                });
+                const layerStyle = {
+                    width: size,
+                    height: size,
+                    transform: [
+                        {
+                            rotate: timer.interpolate({
+                                inputRange: [0, 1],
+                                outputRange: [`${0 + 30 + 15}deg`, `${2 * 360 + 30 + 15}deg`],
+                            }),
+                        },
+                    ],
+                };
+                const viewportStyle = {
+                    width: size,
+                    height: size,
+                    transform: [
+                        {
+                            translateY: index ? -size / 2 : 0,
+                        },
+                        {
+                            rotate: timer.interpolate({ inputRange, outputRange }),
+                        },
+                    ],
+                };
+                const offsetStyle = index ? { top: size / 2 } : null;
+                const lineStyle = {
+                    width: size,
+                    height: size,
+                    borderColor: color,
+                    borderWidth: size / 10,
+                    borderRadius: size / 2,
+                };
+                return ((0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [styles.layer], children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: layerStyle, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: [containerStyle, offsetStyle], collapsable: false, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: viewportStyle, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: containerStyle, collapsable: false, children: (0, jsx_runtime_1.jsx)(react_native_1.Animated.View, { style: lineStyle }) }) }) }) }) }, index));
+            }) }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    layer: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+});
+exports.default = ActivityIndicator;

package/src/ui/components/AutoHeightScrollView.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ScrollView, type ScrollViewProps, type ViewStyle } from 'react-native';
+export type AutoHeightScrollViewProps = ScrollViewProps & {
+    /**
+     * Optional style override.
+     * Note: height and flexShrink are managed internally but can be overridden if absolutely necessary.
+     */
+    style?: ViewStyle;
+};
+/**
+ * A ScrollView that automatically adjusts its height to match its content,
+ * but shrinks if constrained by a parent (e.g., a Max Height Bottom Sheet).
+ *
+ * This solves the "collapsed to 0 height" issue when using ScrollView inside an auto-height container.
+ */
+export declare const AutoHeightScrollView: React.ForwardRefExoticComponent<ScrollViewProps & {
+    /**
+     * Optional style override.
+     * Note: height and flexShrink are managed internally but can be overridden if absolutely necessary.
+     */
+    style?: ViewStyle;
+} & React.RefAttributes<ScrollView>>;

package/src/ui/components/AutoHeightScrollView.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AutoHeightScrollView = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+/**
+ * A ScrollView that automatically adjusts its height to match its content,
+ * but shrinks if constrained by a parent (e.g., a Max Height Bottom Sheet).
+ *
+ * This solves the "collapsed to 0 height" issue when using ScrollView inside an auto-height container.
+ */
+exports.AutoHeightScrollView = (0, react_1.forwardRef)((props, ref) => {
+    const [contentHeight, setContentHeight] = (0, react_1.useState)(0);
+    const { style, onContentSizeChange, ...rest } = props;
+    const handleContentSizeChange = (w, h) => {
+        setContentHeight(h);
+        onContentSizeChange?.(w, h);
+    };
+    return ((0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { ref: ref, style: [
+            styles.defaultStyle,
+            style,
+            { height: contentHeight > 0 ? contentHeight : undefined }
+        ], onContentSizeChange: handleContentSizeChange, ...rest }));
+});
+const styles = react_native_1.StyleSheet.create({
+    defaultStyle: {
+        flexShrink: 1,
+        flexGrow: 0, // Ensure we don't force expansion beyond content unless needed
+        minHeight: 0,
+    }
+});
+exports.AutoHeightScrollView.displayName = 'AutoHeightScrollView';

package/src/ui/components/Avatar.d.ts

@@ -0,0 +1,60 @@
+import type React from 'react';
+import { type StyleProp, type ViewStyle, type ImageStyle, type TextStyle } from 'react-native';
+export interface AvatarProps {
+    /**
+     * URL of the avatar image
+     */
+    uri?: string;
+    /**
+     * Text to display when no image is available
+     * Defaults to first letter of name if name is provided
+     */
+    text?: string;
+    /**
+     * Full name to derive the initials from
+     * For single word: takes first letter
+     * For multiple words: takes first letter of first and last word (e.g., "John Doe" -> "JD")
+     * For usernames starting with @: takes first two letters after @
+     */
+    name?: string;
+    /**
+     * Size of the avatar in pixels
+     * @default 40
+     */
+    size?: number;
+    /**
+     * Theme to use for colors
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * Background color for text avatar
+     * Defaults to theme primary color
+     */
+    backgroundColor?: string;
+    /**
+     * Text color for text avatar
+     * @default '#FFFFFF'
+     */
+    textColor?: string;
+    /**
+     * Additional styles for the container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles for the image
+     * Only used when uri is provided
+     */
+    imageStyle?: StyleProp<ImageStyle>;
+    /**
+     * Additional styles for the text
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Is loading state
+     * @default false
+     */
+    isLoading?: boolean;
+}
+declare const _default: React.NamedExoticComponent<AvatarProps>;
+export default _default;

package/src/ui/components/Avatar.js

@@ -0,0 +1,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const styles_1 = require("../styles");
+const fonts_1 = require("../styles/fonts");
+/**
+ * Extracts initials from a name string
+ * - Single word: first letter (e.g., "John" -> "J")
+ * - Multiple words: first letter of first and last word (e.g., "John Doe" -> "JD")
+ * - Username starting with @: first two letters after @ (e.g., "@johndoe" -> "JO")
+ */
+const getInitials = (nameStr) => {
+    if (!nameStr?.trim())
+        return '';
+    const trimmed = nameStr.trim();
+    const parts = trimmed.split(/\s+/).filter(part => part.length > 0);
+    if (parts.length === 0)
+        return '';
+    if (parts.length === 1) {
+        const firstPart = parts[0];
+        // Handle username format (@username)
+        if (firstPart.length >= 2 && firstPart.startsWith('@')) {
+            return firstPart.substring(1, 3).toUpperCase();
+        }
+        return firstPart.charAt(0).toUpperCase();
+    }
+    // Multiple words: first letter of first and last word
+    return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+};
+/**
+ * Generates a consistent color from a string (name)
+ * Uses a simple hash function to create a deterministic color
+ */
+const generateColorFromString = (str) => {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = str.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    // Generate a vibrant color with good contrast
+    const hue = Math.abs(hash) % 360;
+    // Use high saturation and medium lightness for vibrant, readable colors
+    return `hsl(${hue}, 65%, 55%)`;
+};
+/**
+ * Calculates font size based on avatar size for letter avatars
+ * Uses a larger ratio for better visibility
+ */
+const calculateFontSize = (size) => {
+    // Use larger font size for letter avatars (50-55% of size)
+    return size <= 40
+        ? Math.floor(size * 0.5)
+        : Math.floor(size * 0.45);
+};
+/**
+ * Avatar component that displays either an image or text avatar
+ * Falls back to displaying initials (1-2 letters) derived from the name if no image is provided
+ * Supports flexible sizing via the size prop (default: 40px)
+ *
+ * @example
+ * <Avatar name="John Doe" size={100} theme="light" />
+ * <Avatar uri="https://example.com/avatar.jpg" size={50} />
+ */
+const Avatar = ({ uri, text, name, size = 40, theme = 'light', backgroundColor, textColor = '#FFFFFF', style, imageStyle, textStyle, isLoading = false, }) => {
+    const colors = (0, styles_1.useThemeColors)(theme);
+    const [imageError, setImageError] = (0, react_1.useState)(false);
+    // Reset error state when uri changes
+    (0, react_1.useEffect)(() => {
+        if (uri) {
+            setImageError(false);
+        }
+    }, [uri]);
+    const displayText = (0, react_1.useMemo)(() => text || (name ? getInitials(name) : ''), [text, name]);
+    // Generate a color from the name for letter avatars (only when no backgroundColor is provided and no uri)
+    const generatedBgColor = (0, react_1.useMemo)(() => {
+        if (backgroundColor)
+            return backgroundColor;
+        if (uri)
+            return colors.primary; // Use primary for image avatars as fallback
+        // Generate color from name for letter avatars
+        const nameForColor = name || text || 'User';
+        return generateColorFromString(nameForColor);
+    }, [backgroundColor, uri, name, text, colors.primary]);
+    // Memoize computed values to avoid recalculation on every render
+    const bgColor = (0, react_1.useMemo)(() => generatedBgColor, [generatedBgColor]);
+    const fontSize = (0, react_1.useMemo)(() => calculateFontSize(size), [size]);
+    const containerStyle = (0, react_1.useMemo)(() => ({
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+    }), [size]);
+    const textStyleComputed = (0, react_1.useMemo)(() => [
+        styles.text,
+        {
+            fontSize,
+            fontFamily: fonts_1.fontFamilies.interBold,
+            color: textColor,
+            textAlign: 'center',
+            lineHeight: size, // Match line height to size for perfect vertical centering
+            ...(react_native_1.Platform.OS === 'android' && { includeFontPadding: false }), // Remove extra padding for better centering (Android only)
+        },
+        textStyle,
+    ], [fontSize, textColor, textStyle, size]);
+    // Early return for loading state
+    if (isLoading) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                styles.container,
+                containerStyle,
+                { backgroundColor: colors.inputBackground },
+                style
+            ], children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { color: colors.primary, size: size > 50 ? 'large' : 'small' }) }));
+    }
+    // Image avatar (with fallback to initials on error)
+    if (uri && !imageError) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                styles.container,
+                containerStyle,
+                { backgroundColor: bgColor },
+                style
+            ], children: (0, jsx_runtime_1.jsx)(react_native_1.Image, { source: { uri }, style: [styles.image, containerStyle, imageStyle], resizeMode: "cover", onError: () => setImageError(true) }) }));
+    }
+    // Text avatar with initials
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+            styles.container,
+            containerStyle,
+            { backgroundColor: bgColor },
+            style
+        ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: textStyleComputed, children: displayText }) }));
+};
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    image: {
+        width: '100%',
+        height: '100%',
+    },
+    text: {
+        fontWeight: react_native_1.Platform.OS === 'web' ? 'bold' : undefined,
+    },
+});
+// Memoize component to prevent unnecessary re-renders when props haven't changed
+exports.default = (0, react_1.memo)(Avatar);

package/src/ui/components/BottomSheet.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { type ViewStyle, type StyleProp } from 'react-native';
+export interface BottomSheetRef {
+    present: () => void;
+    dismiss: () => void;
+    close: () => void;
+    expand: () => void;
+    collapse: () => void;
+    scrollTo: (y: number, animated?: boolean) => void;
+}
+export interface BottomSheetProps {
+    children: React.ReactNode;
+    onDismiss?: () => void;
+    enablePanDownToClose?: boolean;
+    backgroundComponent?: (props: {
+        style?: StyleProp<ViewStyle>;
+    }) => React.ReactElement | null;
+    backdropComponent?: (props: {
+        style?: StyleProp<ViewStyle>;
+        onPress?: () => void;
+    }) => React.ReactElement | null;
+    style?: StyleProp<ViewStyle>;
+    enableHandlePanningGesture?: boolean;
+    onDismissAttempt?: () => boolean;
+    detached?: boolean;
+}
+declare const BottomSheet: React.ForwardRefExoticComponent<BottomSheetProps & React.RefAttributes<BottomSheetRef>>;
+export default BottomSheet;