@oxyhq/services 5.26.3 → 5.27.0

package/dist/web/types/ui/components/GroupedSection.d.ts

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

package/dist/web/types/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/dist/web/types/ui/components/HelperText.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { LayoutChangeEvent, StyleProp, 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/dist/web/types/ui/components/Icon.d.ts

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { 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/dist/web/types/ui/components/IconButton/IconButton.d.ts

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { GestureResponderEvent, StyleProp, ViewStyle, View, Animated, ColorValue } from 'react-native';
+import type { $RemoveChildren, ThemeProp } from "../types";
+import { 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/dist/web/types/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/dist/web/types/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/dist/web/types/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/dist/web/types/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/dist/web/types/ui/components/OxyProvider.d.ts

@@ -0,0 +1,33 @@
+import { type FC } from 'react';
+import type { OxyProviderProps } from '../types/navigation';
+/**
+ * OxyProvider - Universal provider for Expo apps (native + web)
+ *
+ * Zero-config authentication and session management:
+ * - Native (iOS/Android): Keychain-based identity, bottom sheet auth UI
+ * - Web: FedCM cross-domain SSO, popup fallback
+ *
+ * Usage:
+ * ```tsx
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
+ *
+ * function App() {
+ *   return (
+ *     <OxyProvider baseURL="https://api.oxy.so">
+ *       <YourApp />
+ *     </OxyProvider>
+ *   );
+ * }
+ *
+ * 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;

package/dist/web/types/ui/components/OxySignInButton.d.ts

@@ -0,0 +1,64 @@
+import type React from 'react';
+import { type ViewStyle, type TextStyle, type StyleProp } from 'react-native';
+export interface OxySignInButtonProps {
+    /**
+     * Controls the appearance of the button
+     * @default 'default'
+     */
+    variant?: 'default' | 'outline' | 'contained';
+    /**
+     * Optional function to handle button press
+     * If not provided, the button will use the showBottomSheet method from OxyContext
+     */
+    onPress?: () => void;
+    /**
+     * Additional styles for the button container
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styles for the button text
+     */
+    textStyle?: StyleProp<TextStyle>;
+    /**
+     * Custom button text
+     * @default 'Sign in with Oxy'
+     */
+    text?: string;
+    /**
+     * Whether to disable the button
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show the button even if user is already authenticated
+     * @default false
+     */
+    showWhenAuthenticated?: boolean;
+}
+/**
+ * A pre-styled button component for signing in with Oxy identity
+ *
+ * This component opens the Oxy Auth flow which allows users to authenticate
+ * using their Oxy Accounts identity (via QR code or deep link).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <OxySignInButton />
+ *
+ * // Custom styling
+ * <OxySignInButton
+ *   variant="contained"
+ *   style={{ marginTop: 20 }}
+ *   text="Login with Oxy"
+ * />
+ *
+ * // Custom handler
+ * <OxySignInButton onPress={() => {
+ *   // Custom authentication flow
+ *   console.log('Custom auth flow initiated');
+ * }} />
+ * ```
+ */
+export declare const OxySignInButton: React.FC<OxySignInButtonProps>;
+export default OxySignInButton;

package/dist/web/types/ui/components/ProfileCard.d.ts

@@ -0,0 +1,17 @@
+import type React from 'react';
+interface ProfileCardProps {
+    user: {
+        username: string;
+        email?: string;
+        name?: {
+            full?: string;
+        };
+        avatar?: string;
+    };
+    theme: 'light' | 'dark';
+    onEditPress?: () => void;
+    onClosePress?: () => void;
+    showCloseButton?: boolean;
+}
+declare const ProfileCard: React.FC<ProfileCardProps>;
+export default ProfileCard;

package/dist/web/types/ui/components/QuickActions.d.ts

@@ -0,0 +1,14 @@
+import type React from 'react';
+interface QuickAction {
+    id: string;
+    icon: string;
+    iconColor: string;
+    title: string;
+    onPress: () => void;
+}
+interface QuickActionsProps {
+    actions: QuickAction[];
+    theme: 'light' | 'dark';
+}
+declare const QuickActions: React.FC<QuickActionsProps>;
+export default QuickActions;

package/dist/web/types/ui/components/Section.d.ts

@@ -0,0 +1,11 @@
+import type React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+interface SectionProps {
+    title?: string;
+    theme?: 'light' | 'dark';
+    children: React.ReactNode;
+    isFirst?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+declare const Section: React.FC<SectionProps>;
+export default Section;

package/dist/web/types/ui/components/SectionTitle.d.ts

@@ -0,0 +1,9 @@
+import type React from 'react';
+import { type StyleProp, type TextStyle } from 'react-native';
+interface SectionTitleProps {
+    title: string;
+    theme?: 'light' | 'dark';
+    style?: StyleProp<TextStyle>;
+}
+declare const SectionTitle: React.FC<SectionTitleProps>;
+export default SectionTitle;

package/dist/web/types/ui/components/SettingRow.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+export interface SettingRowProps {
+    title: string;
+    description?: string;
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    disabled?: boolean;
+    textColor?: string;
+    mutedTextColor?: string;
+    borderColor?: string;
+    /** Active color for the switch track (default: #d169e5) */
+    activeColor?: string;
+    /** Inactive color for the switch track (default: #767577) */
+    inactiveColor?: string;
+    /** Accessibility label for the switch */
+    accessibilityLabel?: string;
+}
+declare const _default: React.NamedExoticComponent<SettingRowProps>;
+export default _default;

package/dist/web/types/ui/components/SignInModal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * SignInModal - Full screen sign-in modal with QR code
+ *
+ * A semi-transparent full-screen modal that displays:
+ * - QR code for scanning with Oxy Accounts app
+ * - Button to open Oxy Auth popup
+ *
+ * Animates with fade-in effect.
+ */
+import React from 'react';
+export declare const showSignInModal: () => void;
+export declare const hideSignInModal: () => void;
+export declare const isSignInModalVisible: () => boolean;
+/** Subscribe to modal visibility changes */
+export declare const subscribeToSignInModal: (listener: (visible: boolean) => void) => (() => void);
+declare const SignInModal: React.FC;
+export default SignInModal;

package/dist/web/types/ui/components/StepBasedScreen.d.ts

@@ -0,0 +1,25 @@
+import type React from 'react';
+import type { BaseScreenProps } from '../types/navigation';
+import type { RouteName } from '../types/navigation';
+export interface StepConfig {
+    id: string;
+    component: React.ComponentType<any>;
+    props?: Record<string, any>;
+    canProceed?: (stepData?: any) => boolean;
+    onEnter?: () => void;
+    onExit?: () => void;
+}
+export interface StepBasedScreenProps extends Omit<BaseScreenProps, 'navigate'> {
+    steps: StepConfig[];
+    initialStep?: number;
+    showProgressIndicator?: boolean;
+    enableAnimations?: boolean;
+    onStepChange?: (currentStep: number, totalSteps: number) => void;
+    onComplete?: (stepData: any[]) => void;
+    stepData?: any[];
+    navigate: (screen: RouteName, props?: Record<string, any>) => void;
+    oxyServices: any;
+    getNavigationProps?: () => Record<string, unknown>;
+}
+declare const StepBasedScreen: React.FC<StepBasedScreenProps>;
+export default StepBasedScreen;

package/dist/web/types/ui/components/Surface.d.ts

@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { Animated, StyleProp, View, ViewStyle } from 'react-native';
+import type { ThemeProp } from './types';
+type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
+export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
+    /**
+     * Content of the `Surface`.
+     */
+    children: React.ReactNode;
+    style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Changes shadows and background on iOS and Android.
+     * Used to create UI hierarchy between components.
+     *
+     * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
+     *
+     * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
+     * It's no longer supported with theme version 3 and you should use `elevation` property instead.
+     */
+    elevation?: Elevation;
+    /**
+     * @supported Available in v5.x with theme version 3
+     * Mode of the Surface.
+     * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
+     * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
+     */
+    mode?: 'flat' | 'elevated';
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * TestID used for testing purposes
+     */
+    testID?: string;
+    ref?: React.RefObject<View>;
+    /**
+     * @internal
+     */
+    container?: boolean;
+};
+/**
+ * Surface is a basic container that can give depth to an element with elevation shadow.
+ * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
+ * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
+ * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Surface, Text } from 'react-native-paper';
+ * import { StyleSheet } from 'react-native';
+ *
+ * const MyComponent = () => (
+ *   <Surface style={styles.surface} elevation={4}>
+ *      <Text>Surface</Text>
+ *   </Surface>
+ * );
+ *
+ * export default MyComponent;
+ *
+ * const styles = StyleSheet.create({
+ *   surface: {
+ *     padding: 8,
+ *     height: 80,
+ *     width: 80,
+ *     alignItems: 'center',
+ *     justifyContent: 'center',
+ *   },
+ * });
+ * ```
+ */
+declare const Surface: import("./utils/forwardRef").ForwardRefComponent<View, Props>;
+export default Surface;

package/dist/web/types/ui/components/TextField/Addons/Outline.d.ts

@@ -0,0 +1,15 @@
+import { ColorValue, StyleProp, ViewStyle } from 'react-native';
+import { TextInputLabelProp } from '../types';
+type OutlineProps = {
+    isV3: boolean;
+    activeColor: string;
+    backgroundColor: ColorValue;
+    hasActiveOutline?: boolean;
+    focused?: boolean;
+    outlineColor?: string;
+    roundness?: number;
+    label?: TextInputLabelProp;
+    style?: StyleProp<ViewStyle>;
+};
+export declare const Outline: ({ isV3, label, activeColor, backgroundColor, hasActiveOutline, focused, outlineColor, roundness, style, }: OutlineProps) => import("react/jsx-runtime").JSX.Element;
+export {};