@oxyhq/services 6.9.13 → 6.9.15

package/lib/typescript/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/lib/typescript/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/lib/typescript/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;

package/lib/typescript/ui/components/BottomSheetRouter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { RouteName } from '../navigation/routes';
+export interface BottomSheetRouterProps {
+    onScreenChange?: (screen: RouteName | null) => void;
+    onDismiss?: () => void;
+}
+declare const _default: React.NamedExoticComponent<BottomSheetRouterProps>;
+export default _default;

package/lib/typescript/ui/components/CrossFadeIcon.d.ts

@@ -0,0 +1,26 @@
+import { type IconSource } from './Icon';
+import type { ThemeProp } from './types';
+type Props = {
+    /**
+     * Icon to display for the `CrossFadeIcon`.
+     */
+    source: IconSource;
+    /**
+     * Color of the icon.
+     */
+    color: string;
+    /**
+     * Size of the icon.
+     */
+    size: number;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+declare const CrossFadeIcon: ({ color, size, source, theme: themeOverrides, testID, }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CrossFadeIcon;

package/lib/typescript/ui/components/EmptyState.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export interface EmptyStateProps {
+    message: string;
+    textColor?: string;
+}
+declare const _default: React.NamedExoticComponent<EmptyStateProps>;
+export default _default;

package/lib/typescript/ui/components/FollowButton.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+export interface FollowButtonProps {
+    userId: string;
+    initiallyFollowing?: boolean;
+    size?: 'small' | 'medium' | 'large';
+    onFollowChange?: (isFollowing: boolean) => void;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    showLoadingState?: boolean;
+    preventParentActions?: boolean;
+    theme?: 'light' | 'dark';
+}
+/**
+ * Outer wrapper that handles the "should we render?" check.
+ *
+ * This is the ONLY place useOxy() is called — to check authentication and
+ * get the current user ID for the self-follow guard. The oxyServices instance
+ * is passed down as a prop to the inner component, which avoids subscribing
+ * to the full OxyContext.
+ *
+ * The early return happens BEFORE the inner component mounts, so the inner
+ * component's hooks are never called conditionally (no Rules of Hooks violation).
+ */
+declare const FollowButton: React.FC<FollowButtonProps>;
+export { FollowButton };
+export default FollowButton;

package/lib/typescript/ui/components/FontLoader.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+/**
+ * FontLoader component that loads custom fonts in the background while rendering children immediately
+ * This works in both the package development and when consumed as an npm package
+ * Children render immediately with system fonts as fallback until custom fonts are loaded
+ */
+export declare const FontLoader: ({ children, }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Setup fonts for applications consuming this package
+ * This should be called by applications using your package
+ */
+export declare const setupFonts: () => Promise<boolean>;

package/lib/typescript/ui/components/GroupedItem.d.ts

@@ -0,0 +1,23 @@
+import type React from 'react';
+interface GroupedItemProps {
+    icon?: string;
+    iconColor?: string;
+    title: string;
+    subtitle?: string;
+    onPress?: () => void;
+    isFirst?: boolean;
+    isLast?: boolean;
+    showChevron?: boolean;
+    disabled?: boolean;
+    customContent?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    /** Accessibility label (defaults to title) */
+    accessibilityLabel?: string;
+    /** Accessibility hint for what happens on press */
+    accessibilityHint?: string;
+}
+export declare const GroupedItem: React.MemoExoticComponent<{
+    ({ icon, iconColor, title, subtitle, onPress, isFirst, isLast, showChevron, disabled, customContent, customIcon, accessibilityLabel, accessibilityHint, }: GroupedItemProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default GroupedItem;

package/lib/typescript/ui/components/GroupedSection.d.ts

@@ -0,0 +1,29 @@
+import type React from 'react';
+interface GroupedSectionItem {
+    id: string;
+    icon?: string;
+    iconColor?: string;
+    title: string;
+    subtitle?: string;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    showChevron?: boolean;
+    disabled?: boolean;
+    selected?: boolean;
+    customContent?: React.ReactNode;
+    customIcon?: React.ReactNode;
+    multiRow?: boolean;
+    dense?: boolean;
+    customContentBelow?: React.ReactNode;
+    theme?: string;
+    /** Allow additional properties for extensibility */
+    [key: string]: unknown;
+}
+interface GroupedSectionProps {
+    items: GroupedSectionItem[];
+}
+export declare const GroupedSection: React.MemoExoticComponent<{
+    ({ items }: GroupedSectionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}>;
+export default GroupedSection;

package/lib/typescript/ui/components/Header.d.ts

@@ -0,0 +1,37 @@
+import type React from 'react';
+import { type SharedValue } from 'react-native-reanimated';
+export declare const getHeaderHeight: (variant?: HeaderProps["variant"], safeAreaTop?: number) => number;
+export interface HeaderProps {
+    title: string;
+    subtitle?: string;
+    onBack?: () => void;
+    onClose?: () => void;
+    rightAction?: {
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+        key?: string;
+    };
+    rightActions?: Array<{
+        icon?: string;
+        onPress: () => void;
+        loading?: boolean;
+        disabled?: boolean;
+        text?: string;
+        key?: string;
+    }>;
+    theme?: 'light' | 'dark';
+    showBackButton?: boolean;
+    showCloseButton?: boolean;
+    showThemeToggle?: boolean;
+    onThemeToggle?: () => void;
+    variant?: 'default' | 'large' | 'minimal' | 'gradient';
+    elevation?: 'none' | 'subtle' | 'prominent';
+    subtitleVariant?: 'default' | 'small' | 'large' | 'muted';
+    titleAlignment?: 'left' | 'center' | 'right';
+    scrollY?: SharedValue<number>;
+}
+declare const Header: React.FC<HeaderProps>;
+export default Header;

package/lib/typescript/ui/components/HelperText.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { type LayoutChangeEvent, type StyleProp, type TextStyle } from 'react-native';
+export type HelperTextProps = {
+    /**
+     * Type of the helper text.
+     */
+    type?: 'error' | 'info';
+    /**
+     * Text content of the HelperText.
+     */
+    children: React.ReactNode;
+    /**
+     * Whether to display the helper text.
+     */
+    visible?: boolean;
+    /**
+     * Whether to apply padding to the helper text.
+     */
+    padding?: 'none' | 'normal';
+    /**
+     * Whether the text input tied with helper text is disabled.
+     */
+    disabled?: boolean;
+    style?: StyleProp<TextStyle>;
+    /**
+     * Theme to use ('light' | 'dark')
+     */
+    theme?: 'light' | 'dark';
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * Callback when layout changes
+     */
+    onLayout?: (event: LayoutChangeEvent) => void;
+    /**
+     * Maximum font size multiplier
+     */
+    maxFontSizeMultiplier?: number;
+};
+/**
+ * Helper text is used in conjunction with input elements to provide additional hints for the user.
+ */
+declare const HelperText: ({ style, type, visible, theme: themeProp, onLayout, padding, disabled, maxFontSizeMultiplier, ...rest }: HelperTextProps) => import("react/jsx-runtime").JSX.Element;
+export default HelperText;

package/lib/typescript/ui/components/Icon.d.ts

@@ -0,0 +1,59 @@
+import type * as React from 'react';
+import { type ImageSourcePropType } from 'react-native';
+import type { ThemeProp } from './types';
+type IconSourceBase = string | ImageSourcePropType;
+export type IconSource = IconSourceBase | Readonly<{
+    source: IconSourceBase;
+    direction: 'rtl' | 'ltr' | 'auto';
+}> | ((props: IconProps & {
+    color: string;
+}) => React.ReactNode);
+type IconProps = {
+    /**
+     * Size of icon.
+     */
+    size: number;
+    allowFontScaling?: boolean;
+    style?: any;
+};
+export declare const isValidIcon: (source: any) => boolean;
+export declare const isEqualIcon: (a: any, b: any) => boolean;
+export type Props = IconProps & {
+    /**
+     * Icon to display.
+     */
+    source: any;
+    /**
+     * Color of the icon.
+     */
+    color?: string;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * An icon component which renders icon from vector library.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Icon, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Icon
+ *     source="camera"
+ *     color={MD3Colors.error50}
+ *     size={20}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+declare const Icon: ({ source, color, size, theme: themeOverrides, testID, ...rest }: Props) => any;
+export default Icon;

package/lib/typescript/ui/components/IconButton/IconButton.d.ts

@@ -0,0 +1,98 @@
+import type * as React from 'react';
+import { type GestureResponderEvent, type StyleProp, type ViewStyle, type View, type Animated, type ColorValue } from 'react-native';
+import type { $RemoveChildren, ThemeProp } from "../types";
+import { type IconSource } from '../Icon';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
+    /**
+     * Icon to display.
+     */
+    icon: IconSource;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
+     */
+    mode?: IconButtonMode;
+    /**
+     * @renamed Renamed from 'color' to 'iconColor' in v5.x
+     * Color of the icon.
+     */
+    iconColor?: string;
+    /**
+     * Background color of the icon container.
+     */
+    containerColor?: string;
+    /**
+     * Color of the ripple effect.
+     */
+    rippleColor?: ColorValue;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
+     */
+    selected?: boolean;
+    /**
+     * Size of the icon.
+     */
+    size?: number;
+    /**
+     * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+     */
+    disabled?: boolean;
+    /**
+     * Whether an icon change is animated.
+     */
+    animated?: boolean;
+    /**
+     * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+     */
+    accessibilityLabel?: string;
+    /**
+     * Style of button's inner content.
+     * Use this prop to apply custom height and width or to set a custom padding`.
+     */
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Function to execute on press.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    ref?: React.RefObject<View>;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * Whether to show a loading indicator.
+     */
+    loading?: boolean;
+};
+/**
+ * An icon button is a button which displays only an icon without a label.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { IconButton, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <IconButton
+ *     icon="camera"
+ *     iconColor={MD3Colors.error50}
+ *     size={20}
+ *     onPress={() => console.log('Pressed')}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
+ */
+declare const IconButton: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+export default IconButton;

package/lib/typescript/ui/components/IconButton/utils.d.ts

@@ -0,0 +1,18 @@
+import type { ColorValue } from 'react-native';
+import type { InternalTheme } from "../types";
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+export declare const getIconButtonColor: ({ theme, disabled, mode, selected, customIconColor, customContainerColor, customRippleColor, }: {
+    theme: InternalTheme;
+    disabled?: boolean;
+    selected?: boolean;
+    mode?: IconButtonMode;
+    customIconColor?: string;
+    customContainerColor?: string;
+    customRippleColor?: ColorValue;
+}) => {
+    iconColor: string;
+    backgroundColor: string | undefined;
+    rippleColor: ColorValue;
+    borderColor: string | undefined;
+};
+export {};

package/lib/typescript/ui/components/LoadingState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface LoadingStateProps {
+    message?: string;
+    color?: string;
+    size?: 'small' | 'large';
+}
+declare const _default: React.NamedExoticComponent<LoadingStateProps>;
+export default _default;

package/lib/typescript/ui/components/OxyLogo.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import type { ViewStyle } from 'react-native';
+interface OxyLogoProps {
+    width?: number;
+    height?: number;
+    style?: ViewStyle;
+    /**
+     * Primary fill color for the logo
+     * If not provided, the theme's primary color will be used
+     */
+    fillColor?: string;
+    /**
+     * Secondary fill color for the inner glow effect
+     * If not provided, a lighter shade of the fillColor will be used
+     */
+    secondaryFillColor?: string;
+    /**
+     * Theme to use for the logo colors
+     * @default 'light'
+     */
+    theme?: 'light' | 'dark';
+}
+/**
+ * SVG logo component for Oxy
+ * This component renders the Oxy logo as an SVG and uses theme colors by default
+ */
+export declare const OxyLogo: React.FC<OxyLogoProps>;
+export default OxyLogo;

package/lib/typescript/ui/components/OxyPayButton.d.ts

@@ -0,0 +1,28 @@
+import type React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
+export interface OxyPayButtonProps {
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    text?: string;
+    disabled?: boolean;
+    amount: number | string;
+    currency?: string;
+    paymentItems?: PaymentItem[];
+    description?: string;
+    onPaymentResult?: (result: PaymentGatewayResult) => void;
+    /**
+     * Button background color. If not provided, uses variant ('white' or 'black').
+     */
+    color?: string;
+    /**
+     * Button color variant: 'white' (default) or 'black'. Ignored if color is set.
+     */
+    variant?: 'white' | 'black';
+}
+/**
+ * A pre-styled button for OxyPay payments that opens the Payment Gateway
+ * - Only black or white by default, but can be customized with the color prop.
+ */
+declare const OxyPayButton: React.FC<OxyPayButtonProps>;
+export default OxyPayButton;

package/lib/typescript/ui/components/OxyProvider.d.ts

@@ -0,0 +1,37 @@
+import { type FC } from 'react';
+import type { OxyProviderProps } from '../types/navigation';
+/**
+ * OxyProvider - Universal provider for Expo apps (native + web)
+ *
+ * Provides authentication, session management, query client, and UI overlays.
+ * Does NOT wrap in SafeAreaProvider or GestureHandlerRootView — those are the
+ * consuming app's responsibility.
+ *
+ * Usage:
+ * ```tsx
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
+ *
+ * function App() {
+ *   return (
+ *     <SafeAreaProvider>
+ *       <GestureHandlerRootView style={{ flex: 1 }}>
+ *         <OxyProvider baseURL="https://api.oxy.so">
+ *           <YourApp />
+ *         </OxyProvider>
+ *       </GestureHandlerRootView>
+ *     </SafeAreaProvider>
+ *   );
+ * }
+ *
+ * function MyComponent() {
+ *   const { isAuthenticated, user, signIn, signOut } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <OxySignInButton />;
+ *   }
+ *   return <Text>Welcome, {user?.username}!</Text>;
+ * }
+ * ```
+ */
+declare const OxyProvider: FC<OxyProviderProps>;
+export default OxyProvider;