UNPKG

native-base

Version:

Essential cross-platform UI components for React Native

1,755 lines (1,754 loc) 114 kB
import type { ITheme } from '../index'; export declare const stylingProps: { margin: string[]; padding: string[]; border: string[]; layout: string[]; flexbox: string[]; position: string[]; outline: string[]; background: string[]; }; export declare type Dict = Record<string, any>; export declare function omitUndefined(obj: any): Partial<any>; export declare function getRandomString(length: number): string; export declare function orderedExtractInObject(parent: any, values: Array<string>): Partial<any>[]; /** * * @param parent The object from which data needs to extracted * @param values Keys which needs to be extracted * @returns [extractedProps, remainingProps] */ export declare function extractInObject(parent: any, values: Array<string>): Partial<any>[]; export declare function getColorFormColorScheme(props: Record<string, any>): any; export declare function getColorScheme(props: Record<string, any>, customColorScheme?: string): any; export declare const inValidBreakpointProps: string[]; export declare function hasValidBreakpointFormat(breaks: any, themeBreakpoints?: any, property?: string): boolean; export declare function findLastValidBreakpoint(values: any, themeBreakpoints: any, currentBreakpoint: number): any; export declare function getClosestBreakpoint(values: Record<string, any>, point: number): number; export declare const baseFontSize = 16; export declare const convertAbsoluteToRem: (px: number) => string; export declare const convertRemToAbsolute: (rem: number) => number; export declare const convertToDp: (value: number | string) => number; /** * * @param theme * @description - Converts space/sizes/lineHeights/letterSpacings/fontSizes to `rem` on web if the token value specified is an absolute number. - Converts space/sizes/lineHeights/letterSpacings/fontSizes to absolute number on native if the token value specified is in `px` or `rem` */ export declare const platformSpecificSpaceUnits: (theme: ITheme) => { radii: { none: number; xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; '3xl': number; full: number; }; colors: { contrastThreshold: number; white: string; black: string; lightText: string; darkText: string; rose: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; pink: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; fuchsia: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; purple: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; violet: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; indigo: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; blue: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; lightBlue: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; darkBlue: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; cyan: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; teal: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; emerald: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; green: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; lime: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; yellow: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; amber: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; orange: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; red: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; warmGray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; trueGray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; gray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; coolGray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; blueGray: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; dark: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; text: { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; }; danger: import("../base/colors").IColorHues; error: import("../base/colors").IColorHues; success: import("../base/colors").IColorHues; warning: import("../base/colors").IColorHues; muted: import("../base/colors").IColorHues; primary: import("../base/colors").IColorHues; info: import("../base/colors").IColorHues; secondary: import("../base/colors").IColorHues; light: import("../base/colors").IColorHues; tertiary: import("../base/colors").IColorHues; }; letterSpacings: { xs: string; sm: string; md: number; lg: string; xl: string; '2xl': string; }; lineHeights: { '2xs': string; xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; '4xl': string; '5xl': string; }; fonts: { heading: undefined; body: undefined; mono: undefined; }; fontSizes: { '2xs': number; xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; '3xl': number; '4xl': number; '5xl': number; '6xl': number; '7xl': number; '8xl': number; '9xl': number; }; fontWeights: { hairline: number; thin: number; light: number; normal: number; medium: number; semibold: number; bold: number; extrabold: number; black: number; extraBlack: number; }; sizes: { container: { sm: number; md: number; lg: number; xl: number; }; '3xs': number; '2xs': number; xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; px: string; '0': number; '0.5': number; '1': number; '1.5': number; '2': number; '2.5': number; '3': number; '3.5': number; '4': number; '5': number; '6': number; '7': number; '8': number; '9': number; '10': number; '12': number; '16': number; '20': number; '24': number; '32': number; '40': number; '48': number; '56': number; '64': number; '72': number; '80': number; '96': number; '1/2': string; '1/3': string; '2/3': string; '1/4': string; '2/4': string; '3/4': string; '1/5': string; '2/5': string; '3/5': string; '4/5': string; '1/6': string; '2/6': string; '3/6': string; '4/6': string; '5/6': string; full: string; }; space: { px: string; '0': number; '0.5': number; '1': number; '1.5': number; '2': number; '2.5': number; '3': number; '3.5': number; '4': number; '5': number; '6': number; '7': number; '8': number; '9': number; '10': number; '12': number; '16': number; '20': number; '24': number; '32': number; '40': number; '48': number; '56': number; '64': number; '72': number; '80': number; '96': number; '1/2': string; '1/3': string; '2/3': string; '1/4': string; '2/4': string; '3/4': string; '1/5': string; '2/5': string; '3/5': string; '4/5': string; '1/6': string; '2/6': string; '3/6': string; '4/6': string; '5/6': string; full: string; }; shadows: { none: { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '0': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '1': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '2': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '3': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '4': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '5': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '6': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '7': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '8': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; '9': { shadowColor: string; shadowOffset: { width: number; height: number; }; shadowOpacity: number; shadowRadius: number; elevation: number; }; }; components: { Progress: { baseStyle: (props: Record<string, any>) => { overflow: string; _filledTrack: { bg: string; shadow: number; height: string; display: string; alignItems: string; justifyContent: string; rounded: string; _text: { color: string; fontWeight: string; }; }; bg: string; _dark: { bg: string; _filledTrack: { bg: string; }; }; }; defaultProps: { colorScheme: string; size: string; rounded: string; min: number; max: number; value: number; isIndeterminate: boolean; }; sizes: { xs: { height: number; }; sm: { height: number; }; md: { height: number; }; lg: { height: number; }; xl: { height: number; }; '2xl': { height: number; }; }; }; Radio: { baseStyle: (props: Record<string, any>) => { borderWidth: number; borderRadius: string; p: number; bg: string; borderColor: string; _checked: { borderColor: string; _icon: { color: string; }; _hover: { borderColor: string; _icon: { color: string; }; _disabled: { borderColor: string; _icon: { color: string; }; }; }; _pressed: { borderColor: string; _icon: { color: string; }; }; }; _hover: { borderColor: string; _disabled: { borderColor: string; }; _checked: { borderColor: string; }; }; _pressed: { borderColor: string; }; _invalid: { borderColor: string; }; _dark: { bg: string; borderColor: string; _checked: { borderColor: string; _icon: { color: string; }; _hover: { borderColor: string; _icon: { color: string; }; _disabled: { borderColor: string; _icon: { color: string; }; }; }; _pressed: { borderColor: string; _icon: { color: string; }; }; }; _hover: { borderColor: string; _disabled: { borderColor: string; }; _checked: { borderColor: string; }; }; _pressed: { borderColor: string; }; _invalid: { borderColor: string; }; }; _stack: { direction: string; alignItems: string; space: number; _web: { cursor: string; }; }; _disabled: { opacity: string; _icon: { bg: string; }; _stack: { opacity: string; }; }; _focusVisible: { _web: { style: { outlineWidth: string; outlineColor: any; outlineStyle: string; }; }; }; }; sizes: { lg: { _icon: { size: number; }; _text: { fontSize: string; }; }; md: { _icon: { size: number; }; _text: { fontSize: string; }; }; sm: { _icon: { size: number; }; _text: { fontSize: string; }; }; }; defaultProps: { defaultIsChecked: boolean; size: string; colorScheme: string; }; }; RadioGroup: { baseStyle: () => { alignItems: string; }; }; ScaleFade: { baseStyle: { initial: { opacity: number; scale: number; }; animate: { opacity: number; scale: number; transition: number; }; exit: { opacity: number; scale: number; transition: number; }; }; }; Select: { baseStyle: () => { selection: { start: number; }; _customDropdownIconProps: { color: string; mr: string; size: string; p: string; }; _hover: { borderColor: string; }; _focus: { borderColor: string; }; _disabled: { bg: string; placeholderTextColor: string; }; _invalid: { borderColor: string; }; _dark: { _customDropdownIconProps: { color: string; mr: string; }; _hover: { borderColor: string; }; _focus: { borderColor: string; }; _disabled: { bg: string; opacity: string; placeholderTextColor: string; }; _invalid: { borderColor: string; }; }; _webSelect: { style: { appearance: string; WebkitAppearance: string; MozAppearance: string; position: string; width: string; height: string; opacity: number; zIndex: number; }; }; _web: { pointerEvents: string; }; _actionSheetBody: { w: string; }; _actionSheetContent: {}; }; defaultProps: { optimized: boolean; }; }; SelectItem: { baseStyle: { p: string; px: string; borderRadius: string; minH: string; }; }; SimpleGrid: { baseStyle: {}; defaultProps: {}; }; Skeleton: { baseStyle: () => { startColor: string; _dark: { startColor: string; }; endColor: string; overflow: string; fadeDuration: number; speed: number; h: string; w: string; }; }; SkeletonText: { baseStyle: () => { startColor: string; _dark: { startColor: string; }; endColor: string; fadeDuration: number; w: string; speed: number; flexDirection: string; _line: { h: number; rounded: string; }; }; defaultProps: { lines: number; space: number; }; }; SliderFilledTrack: { baseStyle: ({ orientation, isReversed, sliderTrackPosition, size, colorScheme, }: any) => { left: number | undefined; bottom: number | undefined; right: number | undefined; top: number | undefined; style: { height: any; width: any; }; bg: string; _dark: { bg: string; }; }; defaultProps: { colorScheme: string; }; }; SliderThumb: { baseStyle: (props: any) => { borderRadius: string; zIndex: number; alignItems: string; justifyContent: string; scaleOnPressed: number; _interactionBox: { position: string; borderRadius: string; zIndex: number; }; _stack: { direction: string; alignItems: string; justifyContent: string; space: number; }; bg: string; _hover: { _web: { outlineWidth: string; outlineColor: any; outlineStyle: string; }; }; _focus: { _web: { outlineWidth: string; outlineColor: any; outlineStyle: string; }; }; _pressed: { _interactionBox: { borderWidth: string; borderColor: string; }; }; _dark: { bg: string; _hover: { _web: { outlineWidth: string; outlineColor: any; outlineStyle: string; }; }; _focus: { _web: { outlineWidth: string; outlineColor: any; outlineStyle: string; }; }; _pressed: { _interactionBox: { borderWidth: string; borderColor: string; }; }; }; _web: { cursor: string; }; }; defaultProps: { colorScheme: string; }; sizes: { lg: { _interactionBox: string; }; md: { _interactionBox: string; }; sm: { _interactionBox: string; }; }; }; SliderTrack: { baseStyle: ({ isVertical, size }: any) => { bg: string; borderRadius: string; overflow: string; style: { height: any; width: any; }; _pressable: { alignItems: string; justifyContent: string; height: any; width: any; py: string | undefined; px: string | undefined; }; _dark: { bg: string; }; }; }; Slider: { baseStyle: (props: any) => { alignItems: string; justifyContent: string; height: string | undefined; width: string | undefined; _disabled: { opacity: number; _web: { cursor: string; }; }; }; defaultProps: { size: string; }; sizes: { lg: { thumbSize: number; sliderTrackHeight: number; _interactionBox: { p: string; }; }; md: { thumbSize: number; sliderTrackHeight: number; _interactionBox: { p: string; }; }; sm: { thumbSize: number; sliderTrackHeight: number; _interactionBox: { p: string; }; }; }; }; Slide: { baseStyle: { h: string; pointerEvents: string; _overlay: { style: { overflow: string; }; }; }; defaultProps: { duration: number; placement: string; overlay: boolean; _overlay: { isOpen: boolean; }; }; }; SlideFade: { defaultProps: { duration: number; offsetX: number; offsetY: number; }; }; Spinner: { baseStyle: { color: string; }; sizes: { sm: string; lg: string; }; defaultProps: { size: string; }; }; Square: { baseStyle: { alignItems: string; justifyContent: string; }; sizes: { xs: { height: number; width: number; }; sm: { height: number; width: number; }; md: { height: number; width: number; }; lg: { height: number; width: number; }; xl: { height: number; width: number; }; '2xl': { height: number; width: number; }; }; }; Stack: { baseStyle: {}; defaultProps: {}; sizes: { gutter: number; '2xs': number; xs: number; sm: number; md: number; lg: number; xl: number; '2xl': number; }; }; Stat: { defaultProps: { _statLabel: { fontSize: string; }; _statNumber: { fontSize: string; fontWeight: string; my: number; }; _statHelpText: { _text: { color: string; fontSize: string; }; flexDirection: string; alignItems: string; }; _statGroup: { flexWrap: string; space: number; justifyContent: string; }; }; }; Switch: { baseStyle: (props: Record<string, any>) => { _disabled: { opacity: number; }; _invalid: { borderColor: string; borderWidth: number; borderRadius: number; }; onThumbColor: string; offThumbColor: string; offTrackColor: string; onTrackColor: string; _hover: { offTrackColor: string; onTrackColor: string; }; _dark: { offTrackColor: string; onTrackColor: string; _hover: { offTrackColor: string; onTrackColor: string; }; _invalid: { borderColor: string; }; }; }; sizes: { sm: { style: { transform: { scale: number; }[]; }; }; md: {}; lg: { style: { transform: { scale: number; }[]; }; margin: number; }; }; defaultProps: { size: string; colorScheme: string; }; }; Tabs: { baseStyle: (props: Record<string, any>) => { activeTabStyle: { justifyContent: string; alignItems: string; mb: string; flexDirection: string; _text: { fontSize: string; fontWeight: string; }; }; inactiveTabStyle: { justifyContent: string; alignItems: string; mb: string; flexDirection: string; _text: { color: any; fontSize: string; fontWeight: string; }; }; activeIconProps: { color: any; name: string; mx: number; }; inactiveIconProps: { name: string; mx: number; }; }; variants: { outline: (props: Record<string, any>) => { activeTabStyle: { borderColor: any; _text: { color: any; }; _hover: { bg: any; }; borderBottomWidth: number; }; inactiveTabStyle: { borderColor: string; borderBottomWidth: number; _hover: { bg: any; }; }; tabBarStyle: { borderBottomWidth: number; borderColor: any; }; }; filled: (props: Record<string, any>) => { activeTabStyle: { borderColor: any; _text: { color: any; }; _hover: { bg: any; }; borderBottomWidth: number; bg: any; }; inactiveTabStyle: { borderColor: string; borderBottomWidth: number; _hover: { bg: any; }; }; tabBarStyle: { borderBottomWidth: number; borderColor: any; }; }; 'filled-outline': (props: Record<string, any>) => { activeTabStyle: { borderColor: any; _text: { color: any; }; _hover: { bg: any; }; borderBottomWidth: number; }; inactiveTabStyle: { borderColor: string; borderBottomWidth: number; _hover: { bg: any; }; }; tabBarStyle: { borderBottomWidth: number; borderColor: any; bg: any; }; }; }; sizes: { sm: { activeTabStyle: { _text: { fontSize: string; }; py: number; px: number; }; inactiveTabStyle: { _text: { fontSize: string; }; py: number; px: number; }; }; md: { activeTabStyle: { _text: { fontSize: string; }; py: number; px: number; }; inactiveTabStyle: { _text: { fontSize: string; }; py: number; px: number; }; }; lg: { activeTabStyle: { _text: { fontSize: string; }; py: number; px: number; }; inactiveTabStyle: { _text: { fontSize: string; }; py: number; px: number; }; }; }; defaultProps: { size: string; variant: string; colorScheme: string; }; }; Tag: { variants: { solid: any; subtle: any; outline: any; }; baseStyle: { _text: { fontWeight: string; }; alignItems: string; justifyContent: string; flexDirection: string; display: string; }; sizes: { sm: { minH: number; minW: number; _text: { fontSize: string; }; p: number; borderRadius: string; }; md: { minH: number; minW: number; _text: { fontSize: string; }; borderRadius: string; p: number; }; lg: { minH: number; minW: number; _text: { fontSize: string; }; borderRadius: string; p: number; }; }; defaultProps: { size: string; variant: string; colorScheme: string; }; }; Text: { baseStyle: () => { color: string; _dark: { color: string; }; fontWeight: string; fontFamily: string; fontStyle: string; fontSize: string; letterSpacing: string; lineHeight: string; }; defaultProps: {}; }; AppBar: { baseStyle: (props: Record<string, any>) => { bg: any; px: number; }; defaultProps: { colorScheme: string; }; }; TextArea: { baseStyle: { multiline: boolean; p: string; textAlignVertical: string; h: string; }; defaultProps: { size: string; variant: string; }; }; TextField: { baseStyle: (props: Record<string, any>) => { _errorMessageProps: { mt: number; ml: number; fontSize: string; color: string; }; _helperTextProps: { mt: number; ml: number; fontSize: string; color: any; }; }; defaultProps: { component: string; }; }; Toast: { baseStyle: (props: Record<string, any>) => { bg: any; p: string; rounded: string; shadow: number; _stack: { margin: string; position: string; space: number; alignItems: string; justifyContent: string; pointerEvents: string; _web: { position: string; }; }; _overlay: {}; _presenceTransition: { animate: { opacity: number; transition: { easing: import("react-native").EasingFunction; duration: number; }; }; exit: { opacity: number; scale: number; transition: { easing: import("react-native").EasingFunction; duration: number; }; }; }; _title: { color: string; fontWeight: number; }; _description: { color: string; fontWeight: number; }; }; defaultProps: {}; }; TypeAheadSearchItem: { baseStyle: (props: Record<string, any>) => { backgroundColor: any; _focus: { backgroundColor: any; }; _disabled: { backgroundColor: string; }; }; }; View: { baseStyle: {}; defaultProps: {}; }; Wrap: {}; ZStack: { baseStyle: {}; defaultProps: {}; }; Tooltip: { baseStyle: () => { py: number; px: number; shadow: number; rounded: string; _text: { fontSize: string; color: string; }; bg: string; _dark: { bg: string; _text: { color: string; }; }; }; }; Popover: { baseStyle: () => { _overlay: { unmountOnExit: boolean; }; }; }; PopoverCloseButton: { baseStyle: () => { position: string; right: number; top: number; zIndex: number; p: string; bg: string; borderRadius: string; _web: { outlineWidth: number; cursor: string; }; _icon: { size: string; }; _light: { _icon: { color: string; }; _hover: { bg: string; }; _pressed: { bg: string; }; }; _dark: { _icon: { color: string; }; _hover: { bg: string; }; _pressed: { bg: string; }; }; }; }; PopoverBody: { baseStyle: () => { p: string; shadow: string; bg: string; _text: { color: string; }; _dark: { bg: string; _text: { color: string; }; }; }; }; PopoverContent: { baseStyle: () => { borderColor: string; _text: { color: string; }; _dark: { borderColor: string; _text: { color: string; }; }; borderWidth: number; rounded: string; overflow: string; }; }; PopoverHeader: { baseStyle: () => { _web: { accessibilityRole: string; }; p: string; borderBottomWidth: string; _text: { fontSize: string; fontWeight: string; lineHeight: string; color: string; }; bg: string; borderColor: string; _dark: { bg: string; borderColor: string;