Theme System

/**
 * Main provider component that wraps the app with NativeBase theme context
 * @param props - NativeBase configuration props
 * @returns JSX element providing theme context to children
 */
function NativeBaseProvider(props: INativebaseConfig): JSX.Element;

interface INativebaseConfig {
  theme?: ICustomTheme;
  initialColorMode?: ColorMode;
  colorModeManager?: StorageManager;
  config?: {
    dependencies?: {
      'linear-gradient'?: any;
    };
    suppressColorAccessibilityWarning?: boolean;
  };
  children?: React.ReactNode;
}

import React from 'react';
import { NativeBaseProvider, extendTheme } from 'native-base';

const theme = extendTheme({
  colors: {
    primary: {
      50: '#e3f2f9',
      500: '#0ea5e9',
      900: '#0c4a6e',
    },
  },
});

function App() {
  return (
    <NativeBaseProvider theme={theme}>
      {/* Your app components */}
    </NativeBaseProvider>
  );
}

/**
 * Extends the default theme with custom configuration
 * @param theme - Partial theme object with custom values
 * @returns Complete theme object with custom overrides
 */
function extendTheme(theme: Partial<ITheme>): ITheme;

interface ITheme {
  colors: Colors;
  space: Space;
  sizes: Sizes;
  fonts: Fonts;
  fontSizes: FontSizes;
  fontWeights: FontWeights;
  lineHeights: LineHeights;
  letterSpacings: LetterSpacings;
  radii: Radii;
  shadows: Shadows;
  borders: Borders;
  breakpoints: Breakpoints;
  components: ComponentThemes;
  config: ThemeConfig;
}

interface ICustomTheme extends Partial<ITheme> {}

type Colors = {
  [key: string]: string | { [key: string]: string };
};

type Space = string[] | { [key: string]: string };
type Sizes = { [key: string]: string };
type Fonts = { [key: string]: string };
type FontSizes = { [key: string]: string };
type FontWeights = { [key: string]: string | number };
type LineHeights = { [key: string]: string | number };
type LetterSpacings = { [key: string]: string };
type Radii = { [key: string]: string };
type Shadows = { [key: string]: string };
type Borders = { [key: string]: string };
type Breakpoints = { [key: string]: string };

interface ComponentThemes {
  [componentName: string]: ComponentTheme;
}

interface ComponentTheme {
  baseStyle?: StyleObject;
  sizes?: { [size: string]: StyleObject };
  variants?: { [variant: string]: StyleObject };
  defaultProps?: { [prop: string]: any };
}

/**
 * Hook for managing color mode state
 * @returns Color mode utilities and current mode
 */
function useColorMode(): ColorModeReturn;

/**
 * Hook for selecting values based on current color mode
 * @param light - Value to use in light mode
 * @param dark - Value to use in dark mode
 * @returns Value based on current color mode
 */
function useColorModeValue<T>(light: T, dark: T): T;

/**
 * Hook for accessible color handling
 * @returns Accessible color utilities
 */
function useAccessibleColors(): AccessibleColorsReturn;

interface ColorModeReturn {
  colorMode: ColorMode;
  toggleColorMode: () => void;
  setColorMode: (mode: ColorMode) => void;
}

type ColorMode = "light" | "dark";

interface AccessibleColorsReturn {
  accessibleColors: Colors;
  contrastColors: Colors;
}

interface StorageManager {
  get: (key: string) => Promise<string | null>;
  set: (key: string, value: string) => Promise<void>;
}

import { useColorMode, useColorModeValue, Button } from 'native-base';

function ThemeToggle() {
  const { colorMode, toggleColorMode } = useColorMode();
  
  return (
    <Button onPress={toggleColorMode}>
      Switch to {colorMode === 'light' ? 'dark' : 'light'} mode
    </Button>
  );
}

function ThemedComponent() {
  const bg = useColorModeValue('white', 'gray.800');
  const text = useColorModeValue('gray.800', 'white');
  
  return (
    <Box bg={bg}>
      <Text color={text}>This text adapts to the theme</Text>
    </Box>
  );
}

/**
 * Hook for accessing the complete theme object
 * @returns Complete theme configuration object
 */
function useTheme(): ITheme;

/**
 * Hook for accessing specific theme tokens
 * @param token - Theme token path (e.g., "colors.primary.500")
 * @param fallback - Fallback value if token not found
 * @returns Token value or fallback
 */
function useToken(token: string, fallback?: any): any;

/**
 * Hook for resolving theme props with component theme integration
 * @param props - Component props to resolve
 * @param componentTheme - Component-specific theme configuration
 * @returns Resolved props with theme values
 */
function useThemeProps(props: any, componentTheme?: ComponentTheme): any;

/**
 * Hook for resolving props with component theme integration
 * @param component - Component name for theme lookup
 * @param props - Component props to resolve
 * @returns Props enhanced with component theme
 */
function usePropsWithComponentTheme(component: string, props: any): any;

import { useTheme, useToken } from 'native-base';

function CustomComponent() {
  const theme = useTheme();
  const primaryColor = useToken('colors.primary.500', '#0ea5e9');
  
  return (
    <Box bg={primaryColor}>
      <Text>Using theme token: {primaryColor}</Text>
    </Box>
  );
}

/**
 * Hook for selecting values based on current breakpoint
 * @param values - Responsive value object or array
 * @returns Value for current breakpoint
 */
function useBreakpointValue<T>(values: ResponsiveValue<T>): T;

/**
 * Hook for resolving responsive props based on breakpoints
 * @param props - Props object with potentially responsive values
 * @returns Props resolved for current breakpoint
 */
function useBreakpointResolvedProps(props: any): any;

/**
 * Hook for media query matching
 * @param query - Media query string or breakpoint
 * @returns Array of boolean values for query matches
 */
function useMediaQuery(query: string | string[]): boolean[];

type ResponsiveValue<T> = 
  | T 
  | T[] 
  | { 
      base?: T; 
      sm?: T; 
      md?: T; 
      lg?: T; 
      xl?: T; 
      '2xl'?: T; 
    };

import { useBreakpointValue, useMediaQuery, Box } from 'native-base';

function ResponsiveComponent() {
  const fontSize = useBreakpointValue({
    base: 'sm',
    sm: 'md', 
    md: 'lg',
    lg: 'xl'
  });
  
  const [isLargeScreen] = useMediaQuery('(min-width: 768px)');
  
  return (
    <Box>
      <Text fontSize={fontSize}>Responsive text</Text>
      {isLargeScreen && <Text>Only shown on large screens</Text>}
    </Box>
  );
}

/**
 * Hook for applying platform-specific props
 * @param props - Props object with platform overrides
 * @returns Props resolved for current platform
 */
function usePlatformProps(props: any): any;

interface StyledProps {
  // Color props
  bg?: ResponsiveValue<string>;
  backgroundColor?: ResponsiveValue<string>;
  color?: ResponsiveValue<string>;
  opacity?: ResponsiveValue<number>;
  
  // Spacing props
  m?: ResponsiveValue<string | number>;
  margin?: ResponsiveValue<string | number>;
  mt?: ResponsiveValue<string | number>;
  mr?: ResponsiveValue<string | number>;
  mb?: ResponsiveValue<string | number>;
  ml?: ResponsiveValue<string | number>;
  mx?: ResponsiveValue<string | number>;
  my?: ResponsiveValue<string | number>;
  p?: ResponsiveValue<string | number>;
  padding?: ResponsiveValue<string | number>;
  pt?: ResponsiveValue<string | number>;
  pr?: ResponsiveValue<string | number>;
  pb?: ResponsiveValue<string | number>;
  pl?: ResponsiveValue<string | number>;
  px?: ResponsiveValue<string | number>;
  py?: ResponsiveValue<string | number>;
  
  // Layout props
  w?: ResponsiveValue<string | number>;
  width?: ResponsiveValue<string | number>;
  h?: ResponsiveValue<string | number>;
  height?: ResponsiveValue<string | number>;
  minW?: ResponsiveValue<string | number>;
  minWidth?: ResponsiveValue<string | number>;
  maxW?: ResponsiveValue<string | number>;
  maxWidth?: ResponsiveValue<string | number>;
  minH?: ResponsiveValue<string | number>;
  minHeight?: ResponsiveValue<string | number>;
  maxH?: ResponsiveValue<string | number>;
  maxHeight?: ResponsiveValue<string | number>;
  d?: ResponsiveValue<string>;
  display?: ResponsiveValue<string>;
  
  // Position props
  position?: ResponsiveValue<"absolute" | "relative" | "static">;
  top?: ResponsiveValue<string | number>;
  right?: ResponsiveValue<string | number>;
  bottom?: ResponsiveValue<string | number>;
  left?: ResponsiveValue<string | number>;
  zIndex?: ResponsiveValue<number>;
  
  // Flexbox props
  alignItems?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "stretch" | "baseline">;
  alignContent?: ResponsiveValue<string>;
  justifyContent?: ResponsiveValue<"flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly">;
  flexWrap?: ResponsiveValue<"wrap" | "nowrap" | "wrap-reverse">;
  flexDirection?: ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
  flex?: ResponsiveValue<number>;
  flexGrow?: ResponsiveValue<number>;
  flexShrink?: ResponsiveValue<number>;
  flexBasis?: ResponsiveValue<string | number>;
  alignSelf?: ResponsiveValue<string>;
  
  // Border props
  border?: ResponsiveValue<string>;
  borderWidth?: ResponsiveValue<string | number>;
  borderStyle?: ResponsiveValue<string>;
  borderColor?: ResponsiveValue<string>;
  borderRadius?: ResponsiveValue<string | number>;
  borderTop?: ResponsiveValue<string>;
  borderRight?: ResponsiveValue<string>;
  borderBottom?: ResponsiveValue<string>;
  borderLeft?: ResponsiveValue<string>;
  borderTopWidth?: ResponsiveValue<string | number>;
  borderRightWidth?: ResponsiveValue<string | number>;
  borderBottomWidth?: ResponsiveValue<string | number>;
  borderLeftWidth?: ResponsiveValue<string | number>;
  borderTopColor?: ResponsiveValue<string>;
  borderRightColor?: ResponsiveValue<string>;
  borderBottomColor?: ResponsiveValue<string>;
  borderLeftColor?: ResponsiveValue<string>;
  borderTopRadius?: ResponsiveValue<string | number>;
  borderRightRadius?: ResponsiveValue<string | number>;
  borderBottomRadius?: ResponsiveValue<string | number>;
  borderLeftRadius?: ResponsiveValue<string | number>;
  
  // Shadow props
  shadow?: ResponsiveValue<string | number>;
  shadowColor?: ResponsiveValue<string>;
  shadowOffset?: ResponsiveValue<{ width: number; height: number }>;
  shadowOpacity?: ResponsiveValue<number>;
  shadowRadius?: ResponsiveValue<number>;
  elevation?: ResponsiveValue<number>;
  
  // Typography props (for components that support text)
  fontFamily?: ResponsiveValue<string>;
  fontSize?: ResponsiveValue<string | number>;
  fontWeight?: ResponsiveValue<string | number>;
  lineHeight?: ResponsiveValue<string | number>;
  letterSpacing?: ResponsiveValue<string | number>;
  textAlign?: ResponsiveValue<"left" | "right" | "center" | "justify">;
  textTransform?: ResponsiveValue<"none" | "capitalize" | "uppercase" | "lowercase">;
  textDecoration?: ResponsiveValue<string>;
}

/**
 * Utility tools for theme manipulation
 */
const themeTools: {
  getColor: (theme: ITheme, color: string, fallback?: string) => string;
  mode: (light: any, dark: any) => (props: any) => any;
  transparentize: (color: string, opacity: number) => string;
  rgba: (color: string, alpha: number) => string;
};

/**
 * Extract color value from theme
 * @param theme - Theme object
 * @param color - Color token path
 * @param fallback - Fallback color value
 * @returns Resolved color value
 */
function getColor(theme: ITheme, color: string, fallback?: string): string;

/**
 * V3.3.x compatible theme object
 */
const v33xTheme: V33xTheme;

/**
 * V3 compatible theme configuration
 */
const v3CompatibleTheme: ITheme;

interface V33xTheme {
  colors: Colors;
  fontConfig: FontConfig;
  fonts: Fonts;
  fontSizes: FontSizes;
  fontWeights: FontWeights;
  letterSpacings: LetterSpacings;
  lineHeights: LineHeights;
  radii: Radii;
  space: Space;
  sizes: Sizes;
  components: ComponentThemes;
}

interface IV33xTheme extends V33xTheme {}