@hoddy-ui/core/next/dist/index.d.mts

Core rich react native components written in typescript

import React, { ReactNode, FC } from 'react';
import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps } from 'react-native';

type ThemeTypes = "dark" | "light";
type ThemeModes = "dark" | "light" | "default";
type colorTypes = "primary" | "secondary" | "light" | "dark" | "info" | "warning" | "error" | "success" | "blue" | "textSecondary";
type extraColorTypes = {
    dark?: {
        [key: string]: {
            main?: string;
            light?: string;
            dark?: string;
            text?: string;
            [key: number]: string;
        };
    };
    light?: {
        [key: string]: {
            main?: string;
            light?: string;
            dark?: string;
            text?: string;
            [key: number]: string;
        };
    };
};
interface ThemeState {
    value: ThemeTypes;
    mode: ThemeModes;
}
interface ThemeContext {
    themeState: ThemeState;
    themeDispatch?: any;
}
interface ThemeProviderProps {
    children: ReactNode;
}
interface AlertXProps {
    type: "info" | "warning" | "success" | "error";
    variant?: "contained" | "outlined";
    title?: string;
    gutterBottom?: number;
    body: string;
    style?: ViewStyle;
}
interface AvatarProps {
    color?: colorTypes;
    label?: string;
    variant?: "outlined" | "contained";
    source?: any;
    size?: number;
    style?: ViewStyle;
}
interface ButtonProps {
    color?: colorTypes;
    variant?: "text" | "outlined" | "contained";
    gutterBottom?: number;
    elevation?: number;
    onPress?: () => void;
    disabled?: boolean;
    title?: string;
    loading?: boolean;
    size?: "large" | "normal" | "small";
    rounded?: boolean;
    style?: ViewStyle;
    fullWidth?: boolean;
    translucent?: "dark" | undefined;
    start?: ReactNode;
    end?: ReactNode;
}
interface CheckboxProps {
    color?: colorTypes;
    label?: ReactNode;
    size?: number;
    checked?: boolean;
    style?: ViewStyle;
    onChange?: () => void;
}
interface FlashMessageProps {
    message: string;
    title?: string;
    actions?: Array<{
        title: string;
        onPress?: () => void;
    }>;
    duration?: number;
    type?: "success" | "warning" | "error";
}
interface LinkButtonProps {
    title: string;
    style?: TextStyle & ViewStyle;
    color?: colorTypes;
    fontSize?: number;
    fontWeight?: string;
    disabled?: boolean;
    onPress?: () => void;
}
interface IconButtonProps {
    style?: TextStyle;
    color?: colorTypes;
    fontSize?: number;
    disabled?: boolean;
    onPress?: () => void;
    icon: any;
    elevation?: number;
    bg?: boolean;
    size?: number;
    containerStyles?: ViewStyle;
    iconType?: "material" | "ion";
}
type locatorLocation = {
    description: string;
    longitude: number;
    latitude: number;
};
type LocatorInputProps = {
    onBlur?: () => void;
    onFocus?: () => void;
    clear?: () => void;
    locateMe?: () => void;
    value?: string;
    onChangeText: (text: string) => void;
};
interface LocatorProps {
    variant?: "contained" | "outlined";
    onLocationSelected: (location: locatorLocation | null, formatted_address?: string) => void;
    label?: string;
    error?: string;
    float?: boolean;
    location?: locatorLocation | null;
    gutterBottom?: number;
    helperText?: string;
    renderInput?: (props: LocatorInputProps) => ReactNode;
    country?: string;
}
interface FormWrapperProps {
    children: ReactNode;
    behavior?: "position" | "height" | "padding";
    contentContainerStyle?: ViewStyle;
    mode?: "scroll" | "static";
    keyboardVerticalOffset?: number;
    style?: ViewStyle;
    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
}
interface GridItemProps {
    children: ReactNode;
    col?: number;
    alignItems?: "center" | "flex-start" | "flex-end";
    spacing?: number;
    style?: ViewStyle;
}
interface GridProps {
    children: ReactNode;
    spacing?: number;
    style?: ViewStyle;
}
interface PopupProps {
    title?: string;
    keyboardVerticalOffset?: number;
    sheet?: number | boolean;
    bare?: boolean;
    children: ReactNode;
    open: boolean;
    onClose?: () => void;
    style?: ViewStyle;
}
interface SpinnerProps {
    label?: string;
    size?: "large" | "small";
    color?: colorTypes;
    fullscreen?: boolean;
    style?: ViewStyle;
}
interface TextFieldProps extends TextInputProps {
    label?: string;
    variant?: "outlined" | "text" | "contained";
    color?: colorTypes;
    size?: "small" | "normal" | "large";
    type?: "email" | "tel" | "password" | "text" | "number" | "search";
    helperText?: string;
    value: any;
    start?: ReactNode;
    rounded?: boolean;
    error?: string | string[];
    disabled?: boolean;
    style?: ViewStyle;
    inputStyles?: any;
    gutterBottom?: number;
    end?: ReactNode;
    options?: {
        start?: ReactNode;
        secondary?: string;
        value: string | number;
        label: string;
    }[];
    onFocus?: () => void;
    onBlur?: () => void;
}
interface TypographyProps extends TextProps {
    children: ReactNode;
    color?: colorTypes | (string & {});
    style?: TextStyle | ViewStyle;
    textCase?: "capitalize" | "uppercase" | "lowercase" | undefined;
    variant?: "caption" | "body1" | "body2" | "h6" | "h5" | "h4" | "h3" | "h2" | "h1";
    align?: "center" | "left" | "right";
    gutterBottom?: number;
    numberOfLines?: number;
    adjustsFontSizeToFit?: boolean;
    fontFamily?: string;
    fontWeight?: 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
}
interface SafeAreaViewProps {
    children: ReactNode;
    style?: ViewStyle;
}
interface SelectMenuProps {
    open: boolean;
    onClose: () => void;
    value: any;
    options: {
        secondary?: string;
        value: any;
        label: string;
    }[];
    onChange: (value: string) => void;
    disableAutoClose?: boolean;
    label?: string;
    secondary?: string;
    helperText?: string;
}
interface OTPInputProps {
    length?: number;
    onChange: (value: string) => void;
    value: string;
    variant?: "outlined" | "text" | "contained";
    spacing?: number;
    size?: number;
}
interface RatingStarsProps {
    rating: number;
    size: number;
}
interface RatingInputProps {
    rating?: number;
    noReview?: boolean;
    size?: number;
    onSubmit?: (data: {
        rating: number;
        review: string;
    }) => Promise<void>;
}
interface DividerProps {
    color?: colorTypes;
    gutterBottom?: number;
    style?: ViewStyle;
    height?: number;
}

type configProps = {
    googleMapApiKey?: string;
    colors?: extraColorTypes;
    fontFamily?: string;
};
declare function initialize(config: configProps): void;

declare const AdaptiveStatusBar: ({ translucent }: {
    translucent?: boolean | undefined;
}) => React.JSX.Element;

declare const AlertX: React.FC<AlertXProps>;

declare const Avatar: React.FC<AvatarProps>;

declare const LinkButton: React.FC<LinkButtonProps>;
declare const IconButton: React.FC<IconButtonProps>;
declare const Button: React.FC<ButtonProps>;

declare const CheckBox: FC<CheckboxProps>;

declare let showFlashMessage: (msg: FlashMessageProps) => void;

declare const FormWrapper: React.FC<FormWrapperProps>;

declare const RatingStars: FC<RatingStarsProps>;
declare const RatingInput: FC<RatingInputProps>;

declare const GridItem: React.FC<GridItemProps>;
declare const Grid: React.FC<GridProps>;

declare const getPredictionsFromCoords: (coords: any) => Promise<{
    description: any;
    id: any;
    latLng: {
        lst: any;
        lng: any;
    };
}[]>;
declare const Locator: React.FC<LocatorProps>;

declare const Popup: React.FC<PopupProps>;

declare const SafeAreaView: React.FC<SafeAreaViewProps>;

declare const Divider: FC<DividerProps>;

declare const SelectMenu: React.FC<SelectMenuProps>;

declare const Spinner: React.FC<SpinnerProps>;

declare const TextField: React.FC<TextFieldProps>;
declare const TextField2: React.FC<TextFieldProps>;

declare const Typography: React.FC<TypographyProps>;

declare const OTPInput: FC<OTPInputProps>;

declare const useColors: () => {
    white: {
        main?: string | undefined;
        light?: string | undefined;
        dark?: string | undefined;
        text?: string | undefined;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
    black: {
        main?: string | undefined;
        light?: string | undefined;
        dark?: string | undefined;
        text?: string | undefined;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
    primary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    secondary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    light: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    dark: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    textSecondary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    blue: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    info: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    success: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    warning: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    error: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
} | {
    white: {
        main?: string | undefined;
        light?: string | undefined;
        dark?: string | undefined;
        text?: string | undefined;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
    black: {
        main?: string | undefined;
        light?: string | undefined;
        dark?: string | undefined;
        text?: string | undefined;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
    primary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    secondary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    light: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    dark: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    textSecondary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    blue: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    info: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    success: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    warning: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    error: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
} | {
    white: {
        main?: string | undefined;
        light?: string | undefined;
        dark?: string | undefined;
        text?: string | undefined;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
    black: {
        main?: string | undefined;
        light?: string | undefined;
        dark?: string | undefined;
        text?: string | undefined;
        1: string;
        2: string;
        3: string;
        4: string;
        5: string;
    };
    primary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    secondary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    light: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    dark: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    textSecondary: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    blue: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    info: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    success: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    warning: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
    error: {
        main: string;
        light: string;
        dark: string;
        text: string;
    };
};
declare const useTheme: () => ThemeTypes;
declare const useNavScreenOptions: (type: "stack" | "tab" | "drawer") => any;

declare const UIThemeContext: React.Context<ThemeContext>;
declare const UIThemeProvider: ({ children }: ThemeProviderProps) => React.JSX.Element;

declare const HoddyUI: {
    initialize: typeof initialize;
};

export { AdaptiveStatusBar, AlertX, Avatar, Button, CheckBox, Divider, FormWrapper, Grid, GridItem, IconButton, LinkButton, Locator, OTPInput, Popup, RatingInput, RatingStars, SafeAreaView, SelectMenu, Spinner, TextField, TextField2, Typography, UIThemeContext, UIThemeProvider, HoddyUI as default, getPredictionsFromCoords, showFlashMessage, useColors, useNavScreenOptions, useTheme };