@oxyhq/services 5.26.3 → 5.27.0

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

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { StyleProp, TextInput as NativeTextInput, TextStyle, ViewStyle } from 'react-native';
+import { Props as TextFieldAffixProps } from './TextField/Adornment/TextFieldAffix';
+import { Props as TextFieldIconProps } from './TextField/Adornment/TextFieldIcon';
+import type { RenderProps, TextFieldLabelProp } from './TextField/types';
+import type { ThemeProp } from "./types";
+export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    /**
+     * Mode of the TextInput.
+     * - `flat` - flat input with an underline.
+     * - `outlined` - input with an outline.
+     *
+     * In `outlined` mode, the background color of the label is derived from `colors?.background` in theme or the `backgroundColor` style.
+     * This component render TextInputOutlined or TextInputFlat based on that props
+     */
+    mode?: 'flat' | 'outlined';
+    /**
+     * The adornment placed on the left side of the input. It can be either `TextField.Icon` or `TextField.Affix`.
+     */
+    left?: React.ReactNode;
+    /**
+     * The adornment placed on the right side of the input. It can be either `TextField.Icon` or `TextField.Affix`.
+     */
+    right?: React.ReactNode;
+    /**
+     * If true, user won't be able to interact with the component.
+     */
+    disabled?: boolean;
+    /**
+     * The text or component to use for the floating label.
+     */
+    label?: TextFieldLabelProp;
+    /**
+     * Placeholder for the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to style the TextInput with error style.
+     */
+    error?: boolean;
+    /**
+     * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
+     */
+    onChangeText?: Function;
+    /**
+     * Selection color of the input. On iOS, it sets both the selection color and cursor color.
+     * On Android, it sets only the selection color.
+     */
+    selectionColor?: string;
+    /**
+     * @platform Android only
+     * Cursor (or "caret") color of the input on Android.
+     * This property has no effect on iOS.
+     */
+    cursorColor?: string;
+    /**
+     * Inactive underline color of the input.
+     */
+    underlineColor?: string;
+    /**
+     * Active underline color of the input.
+     */
+    activeUnderlineColor?: string;
+    /**
+     * Inactive outline color of the input.
+     */
+    outlineColor?: string;
+    /**
+     * Active outline color of the input.
+     */
+    activeOutlineColor?: string;
+    /**
+     * Color of the text in the input.
+     */
+    textColor?: string;
+    /**
+     * Sets min height with densed layout. For `TextField` in `flat` mode
+     * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
+     * For `TextField` in `outlined` mode
+     * height is `56dp` or in dense layout - `40dp` regardless of label.
+     * When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextField`
+     */
+    dense?: boolean;
+    /**
+     * Whether the input can have multiple lines.
+     */
+    multiline?: boolean;
+    /**
+     * @platform Android only
+     * The number of lines to show in the input (Android only).
+     */
+    numberOfLines?: number;
+    /**
+     * Callback that is called when the text input is focused.
+     */
+    onFocus?: (args: any) => void;
+    /**
+     * Callback that is called when the text input is blurred.
+     */
+    onBlur?: (args: any) => void;
+    /**
+     *
+     * Callback to render a custom input component such as `react-native-text-input-mask`
+     * instead of the default `TextInput` component from `react-native`.
+     *
+     * Example:
+     * ```js
+     * <TextField
+     *   label="Phone number"
+     *   render={props =>
+     *     <TextInputMask
+     *       {...props}
+     *       mask="+[00] [000] [000] [000]"
+     *     />
+     *   }
+     * />
+     * ```
+     */
+    render?: (props: RenderProps) => React.ReactNode;
+    /**
+     * Value of the text input.
+     */
+    value?: string;
+    /**
+     * Pass `fontSize` prop to modify the font size inside `TextField`.
+     * Pass `height` prop to set `TextField` height. When `height` is passed,
+     * `dense` prop will affect only input's `paddingVertical`.
+     * Pass `paddingHorizontal` to modify horizontal padding.
+     * This can be used to get MD Guidelines v1 TextInput look.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+    /**
+     * Pass custom style directly to the input itself.
+     * Overrides input style
+     * Example: `paddingLeft`, `backgroundColor`
+     */
+    contentStyle?: StyleProp<TextStyle>;
+    /**
+     * Pass style to override the default style of outlined wrapper.
+     * Overrides style when mode is set to `outlined`
+     * Example: `borderRadius`, `borderColor`
+     */
+    outlineStyle?: StyleProp<ViewStyle>;
+    /**
+     * Pass style to override the default style of underlined wrapper.
+     * Overrides style when mode is set to `flat`
+     * Example: `borderRadius`, `borderColor`
+     */
+    underlineStyle?: StyleProp<ViewStyle>;
+};
+interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<TextFieldHandles>> {
+    Icon: React.FunctionComponent<TextFieldIconProps>;
+    Affix: React.FunctionComponent<Partial<TextFieldAffixProps>>;
+}
+type TextFieldHandles = Pick<NativeTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'>;
+/**
+ * A component to allow users to input text.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextField } from './TextField';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState("");
+ *
+ *   return (
+ *     <TextField
+ *       label="Email"
+ *       value={text}
+ *       onChangeText={text => setText(text)}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TextInput props https://reactnative.dev/docs/textinput#props
+ */
+declare const TextField: CompoundedComponent;
+export default TextField;
+export type { Props as TextFieldProps };

package/dist/web/types/ui/components/TouchableRipple/Pressable.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { Animated, PressableProps as PressableNativeProps, StyleProp, View, ViewStyle } from 'react-native';
+export type PressableStateCallbackType = {
+    hovered: boolean;
+    pressed: boolean;
+    focused: boolean;
+};
+export type PressableProps = Omit<PressableNativeProps, 'children' | 'style'> & {
+    children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode) | undefined;
+    style?: StyleProp<ViewStyle> | Animated.WithAnimatedValue<StyleProp<ViewStyle>> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle> | Animated.WithAnimatedValue<StyleProp<ViewStyle>>) | undefined;
+};
+export declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>;

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

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { ColorValue, GestureResponderEvent, StyleProp, View, ViewStyle } from 'react-native';
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
+import type { ThemeProp } from '../types';
+export type Props = PressableProps & {
+    /**
+     * Whether to render the ripple outside the view bounds.
+     */
+    borderless?: boolean;
+    /**
+     * Type of background drawabale to display the feedback (Android).
+     * https://reactnative.dev/docs/pressable#rippleconfig
+     */
+    background?: Object;
+    /**
+     * Whether to start the ripple at the center (Web).
+     */
+    centered?: boolean;
+    /**
+     * Whether to prevent interaction with the touchable.
+     */
+    disabled?: boolean;
+    /**
+     * Function to execute on press. If not set, will cause the touchable to be disabled.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
+     */
+    onPressIn?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute when a touch is released.
+     */
+    onPressOut?: (e: GestureResponderEvent) => void;
+    /**
+     * Color of the ripple effect (Android >= 5.0 and Web).
+     */
+    rippleColor?: ColorValue;
+    /**
+     * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
+     */
+    underlayColor?: string;
+    /**
+     * Content of the `TouchableRipple`.
+     */
+    children: ((state: PressableStateCallbackType) => React.ReactNode) | React.ReactNode;
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+declare const Component: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+declare const _default: typeof Component & {
+    supported: boolean;
+};
+export default _default;

package/dist/web/types/ui/components/TouchableRipple/utils.d.ts

@@ -0,0 +1,10 @@
+import type { ColorValue } from 'react-native';
+import type { InternalTheme } from '../types';
+export declare const getTouchableRippleColors: ({ theme, rippleColor, underlayColor, }: {
+    theme: InternalTheme;
+    rippleColor?: ColorValue;
+    underlayColor?: string;
+}) => {
+    calculatedRippleColor: ColorValue;
+    calculatedUnderlayColor: string;
+};

package/dist/web/types/ui/components/Typography/AnimatedText.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { Animated, StyleProp, TextStyle, Text } from 'react-native';
+import type { VariantProp } from './types';
+import type { ThemeProp } from "../types";
+type Props<T> = React.ComponentPropsWithRef<typeof Animated.Text> & {
+    /**
+     * Variant defines appropriate text styles for type role and its size.
+     * Available variants:
+     *
+     *  Display: `displayLarge`, `displayMedium`, `displaySmall`
+     *
+     *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
+     *
+     *  Title: `titleLarge`, `titleMedium`, `titleSmall`
+     *
+     *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
+     *
+     *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
+     */
+    variant?: VariantProp<T>;
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+/**
+ * Animated text component which follows styles from the theme.
+ *
+ * @extends Text props https://reactnative.dev/docs/text#props
+ */
+declare const AnimatedText: import("../utils/forwardRef").ForwardRefComponent<Text & HTMLElement, Props<never>>;
+export declare const customAnimatedText: <T>() => (props: Props<T>) => React.ReactElement;
+export default AnimatedText;

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

@@ -0,0 +1,18 @@
+export declare enum MD3TypescaleKey {
+    displayLarge = "displayLarge",
+    displayMedium = "displayMedium",
+    displaySmall = "displaySmall",
+    headlineLarge = "headlineLarge",
+    headlineMedium = "headlineMedium",
+    headlineSmall = "headlineSmall",
+    titleLarge = "titleLarge",
+    titleMedium = "titleMedium",
+    titleSmall = "titleSmall",
+    labelLarge = "labelLarge",
+    labelMedium = "labelMedium",
+    labelSmall = "labelSmall",
+    bodyLarge = "bodyLarge",
+    bodyMedium = "bodyMedium",
+    bodySmall = "bodySmall"
+}
+export type VariantProp<T> = (T extends string ? (string extends T ? never : T) : never) | keyof typeof MD3TypescaleKey;

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

@@ -0,0 +1,51 @@
+/**
+ * WebOxyProvider - Lightweight provider for pure React/Next.js apps
+ *
+ * Use this provider for web apps that DON'T use Expo/React Native.
+ * For Expo apps (native + web), use `OxyProvider` instead - it works on all platforms.
+ *
+ * Features:
+ * - Automatic cross-domain SSO via FedCM (Chrome 108+, Safari 16.4+, Edge 108+)
+ * - No React Native dependencies
+ * - Session management
+ * - All useOxy/useAuth functionality
+ *
+ * Usage:
+ * ```tsx
+ * // For pure React/Next.js apps (no Expo):
+ * import { WebOxyProvider, useAuth } from '@oxyhq/services';
+ *
+ * function App() {
+ *   return (
+ *     <WebOxyProvider baseURL="https://api.oxy.so">
+ *       <YourApp />
+ *     </WebOxyProvider>
+ *   );
+ * }
+ *
+ * // For Expo apps (native + web), use OxyProvider instead:
+ * import { OxyProvider, useAuth } from '@oxyhq/services';
+ * ```
+ */
+import { type FC, type ReactNode } from 'react';
+import { createQueryClient } from '../hooks/queryClient';
+export interface WebOxyProviderProps {
+    children: ReactNode;
+    baseURL: string;
+    authWebUrl?: string;
+    onAuthStateChange?: (user: any) => void;
+    storageKeyPrefix?: string;
+    queryClient?: ReturnType<typeof createQueryClient>;
+}
+/**
+ * OxyProvider for web applications
+ *
+ * Features:
+ * - Automatic cross-domain SSO via FedCM (browser-native identity API)
+ * - Works across different TLDs (alia.onl, mention.earth, homiio.com, etc.)
+ * - Session persistence in localStorage
+ * - TanStack Query for data fetching
+ * - No React Native dependencies
+ */
+declare const WebOxyProvider: FC<WebOxyProviderProps>;
+export default WebOxyProvider;

package/dist/web/types/ui/components/feedback/FormInput.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { FeedbackColors } from './types';
+interface FormInputProps {
+    icon: string;
+    label: string;
+    value: string;
+    onChangeText: (text: string) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    numberOfLines?: number;
+    testID?: string;
+    colors: FeedbackColors;
+    styles: any;
+    borderColor?: string;
+    accessibilityLabel?: string;
+    accessibilityHint?: string;
+}
+declare const FormInput: React.FC<FormInputProps>;
+export default FormInput;

package/dist/web/types/ui/components/feedback/ProgressIndicator.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { FeedbackColors } from './types';
+interface ProgressIndicatorProps {
+    currentStep: number;
+    totalSteps: number;
+    colors: FeedbackColors;
+    styles: any;
+}
+declare const ProgressIndicator: React.FC<ProgressIndicatorProps>;
+export default ProgressIndicator;

package/dist/web/types/ui/components/feedback/constants.d.ts

@@ -0,0 +1,4 @@
+import type { FeedbackType, PriorityLevel } from './types';
+export declare const FEEDBACK_TYPES: FeedbackType[];
+export declare const PRIORITY_LEVELS: PriorityLevel[];
+export declare const CATEGORIES: Record<string, string[]>;

package/dist/web/types/ui/components/feedback/feedbackStyles.d.ts

@@ -0,0 +1,279 @@
+import type { FeedbackColors } from './types';
+export declare const createFeedbackStyles: (colors: FeedbackColors) => {
+    container: {
+        flex: number;
+    };
+    fullBleed: {
+        width: "100%";
+        alignSelf: "stretch";
+    };
+    scrollContent: {
+        paddingHorizontal: number;
+        paddingVertical: number;
+        paddingTop: number;
+        paddingBottom: number;
+        flexGrow: number;
+    };
+    stepContainer: {
+        flex: number;
+        justifyContent: "flex-start";
+        alignItems: "flex-start";
+    };
+    modernHeader: {
+        alignItems: "flex-start";
+        width: "100%";
+        marginBottom: number;
+    };
+    stepTitle: {
+        fontFamily: string;
+        fontWeight: "bold" | undefined;
+        fontSize: number;
+        lineHeight: number;
+        marginBottom: number;
+        textAlign: "left";
+        letterSpacing: number;
+    };
+    modernSubtitle: {
+        fontSize: number;
+        lineHeight: number;
+        textAlign: "left";
+        opacity: number;
+        marginBottom: number;
+    };
+    inputContainer: {
+        width: "100%";
+        marginBottom: number;
+    };
+    premiumInputWrapper: {
+        flexDirection: "row";
+        alignItems: "center";
+        height: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        borderWidth: number;
+        backgroundColor: string;
+    };
+    textAreaWrapper: {
+        flexDirection: "column";
+        alignItems: "flex-start";
+        minHeight: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+        borderWidth: number;
+        backgroundColor: string;
+    };
+    inputIcon: {
+        marginRight: number;
+    };
+    inputContent: {
+        flex: number;
+    };
+    modernLabel: {
+        fontSize: number;
+        fontWeight: "500";
+        marginBottom: number;
+    };
+    modernInput: {
+        flex: number;
+        fontSize: number;
+        height: "100%";
+    };
+    textArea: {
+        flex: number;
+        fontSize: number;
+        textAlignVertical: "top";
+        minHeight: number;
+    };
+    categoryContainer: {
+        marginBottom: number;
+    };
+    checkboxContainer: {
+        flexDirection: "row";
+        alignItems: "center";
+        marginBottom: number;
+    };
+    checkbox: {
+        width: number;
+        height: number;
+        borderRadius: number;
+        borderWidth: number;
+        marginRight: number;
+        alignItems: "center";
+        justifyContent: "center";
+    };
+    checkboxText: {
+        fontSize: number;
+        flex: number;
+    };
+    button: {
+        boxShadow: string;
+        shadowOffset?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        elevation?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        marginVertical: number;
+        gap: number;
+        width: "100%";
+    } | {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        boxShadow?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        borderRadius: number;
+        marginVertical: number;
+        gap: number;
+        width: "100%";
+    };
+    buttonText: {
+        color: string;
+        fontSize: number;
+        fontWeight: "600";
+        letterSpacing: number;
+    };
+    navigationButtons: {
+        flexDirection: "row";
+        justifyContent: "center";
+        marginTop: number;
+        marginBottom: number;
+        width: "100%";
+        gap: number;
+    };
+    navButton: {
+        boxShadow: string;
+        shadowOffset?: undefined;
+        shadowOpacity?: undefined;
+        shadowRadius?: undefined;
+        elevation?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+        minWidth: number;
+        borderWidth: number;
+    } | {
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+        elevation: number;
+        boxShadow?: undefined;
+        flexDirection: "row";
+        alignItems: "center";
+        paddingVertical: number;
+        paddingHorizontal: number;
+        gap: number;
+        minWidth: number;
+        borderWidth: number;
+    };
+    backButton: {
+        backgroundColor: string;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+    };
+    nextButton: {
+        backgroundColor: string;
+        borderTopRightRadius: number;
+        borderBottomRightRadius: number;
+        borderTopLeftRadius: number;
+        borderBottomLeftRadius: number;
+    };
+    navButtonText: {
+        fontSize: number;
+        fontWeight: "500";
+    };
+    progressContainer: {
+        flexDirection: "row";
+        justifyContent: "center";
+        marginBottom: number;
+        marginTop: number;
+    };
+    progressDot: {
+        boxShadow: string;
+        shadowColor?: undefined;
+        shadowOpacity?: undefined;
+        shadowOffset?: undefined;
+        shadowRadius?: undefined;
+        elevation?: undefined;
+        height: number;
+        width: number;
+        borderRadius: number;
+        marginHorizontal: number;
+        borderWidth: number;
+        borderColor: string;
+    } | {
+        shadowColor: string;
+        shadowOpacity: number;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowRadius: number;
+        elevation: number;
+        boxShadow?: undefined;
+        height: number;
+        width: number;
+        borderRadius: number;
+        marginHorizontal: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    summaryContainer: {
+        padding: number;
+        marginBottom: number;
+        width: "100%";
+    };
+    summaryRow: {
+        flexDirection: "row";
+        marginBottom: number;
+    };
+    summaryLabel: {
+        fontSize: number;
+        width: number;
+    };
+    summaryValue: {
+        fontSize: number;
+        fontWeight: "600";
+        flex: number;
+    };
+    successContainer: {
+        alignItems: "center";
+        justifyContent: "center";
+        padding: number;
+    };
+    successIcon: {
+        marginBottom: number;
+    };
+    successTitle: {
+        fontSize: number;
+        fontWeight: "bold";
+        marginBottom: number;
+        textAlign: "center";
+    };
+    successMessage: {
+        fontSize: number;
+        textAlign: "center";
+        opacity: number;
+        marginBottom: number;
+    };
+};