Configuration & Setup

/**
 * Creates Tamagui configuration with automatic React Native media driver integration
 * @param config - Tamagui configuration object
 * @returns Internal configuration for TamaguiProvider
 */
function createTamagui(config: TamaguiConfig): TamaguiInternalConfig;

interface TamaguiConfig {
  /** Design tokens for consistent spacing, colors, typography */
  tokens?: Tokens;
  /** Theme definitions using tokens */
  themes?: Record<string, Theme>;
  /** Media query definitions for responsive design */
  media?: MediaConfig;
  /** Font configurations */
  fonts?: FontConfig;
  /** Animation configurations */
  animations?: AnimationConfig;
  /** CSS shorthand property mappings */
  shorthands?: ShorthandConfig;
  /** Framework settings and optimizations */
  settings?: Settings;
}

interface Tokens {
  /** Color tokens */
  color?: Record<string, string>;
  /** Spacing tokens */
  space?: Record<string, number>;
  /** Size tokens */
  size?: Record<string, number>;
  /** Radius tokens */
  radius?: Record<string, number>;
  /** Z-index tokens */
  zIndex?: Record<string, number>;
}

interface Theme {
  [key: string]: string | Variable;
}

interface MediaConfig {
  [key: string]: {
    maxWidth?: number;
    minWidth?: number;
    maxHeight?: number;
    minHeight?: number;
  };
}

import { createTamagui } from "@tamagui/core";

const config = createTamagui({
  tokens: {
    color: {
      white: '#ffffff',
      black: '#000000',
      blue: '#0066ff',
      gray: '#888888',
    },
    space: {
      1: 4,
      2: 8,
      3: 12,
      4: 16,
      5: 20,
      6: 24,
    },
    size: {
      sm: 24,
      md: 32,
      lg: 48,
      xl: 64,
    },
    radius: {
      1: 3,
      2: 6,
      3: 9,
      4: 12,
      round: 1000,
    },
  },
  
  themes: {
    light: {
      background: '$white',
      color: '$black',
      primary: '$blue',
      secondary: '$gray',
    },
    dark: {
      background: '$black',
      color: '$white',
      primary: '$blue',
      secondary: '$gray',
    },
  },
  
  media: {
    sm: { maxWidth: 860 },
    md: { maxWidth: 1020 },
    lg: { minWidth: 1020 },
    xl: { minWidth: 1280 },
  },
  
  fonts: {
    body: {
      family: 'Inter',
      size: {
        1: 12,
        2: 14,
        3: 16,
        4: 18,
        5: 20,
      },
      lineHeight: {
        1: 16,
        2: 20,
        3: 24,
        4: 26,
        5: 28,
      },
      weight: {
        normal: '400',
        bold: '700',
      },
    },
  },
  
  animations: {
    quick: {
      type: 'spring',
      damping: 20,
      mass: 1.2,
      stiffness: 250,
    },
  },
});

/**
 * Root provider component that enables Tamagui styling and automatic layout measurement
 * @param props - Provider configuration
 * @returns Provider component wrapping children
 */
declare const TamaguiProvider: React.FC<TamaguiProviderProps>;

interface TamaguiProviderProps {
  /** Tamagui configuration from createTamagui() */
  config: TamaguiInternalConfig;
  /** Theme name to use as default */
  defaultTheme?: string;
  /** Disable automatic CSS injection (web only) */
  disableInjectCSS?: boolean;
  /** Disable root theme class (web only) */
  disableRootThemeClass?: boolean;
  /** Children components */
  children?: React.ReactNode;
}

import { TamaguiProvider, createTamagui } from "@tamagui/core";

const config = createTamagui({
  // configuration...
});

function App() {
  return (
    <TamaguiProvider config={config} defaultTheme="light">
      <YourAppContent />
    </TamaguiProvider>
  );
}

// Multiple themes
function AppWithThemes() {
  const [theme, setTheme] = useState('light');
  
  return (
    <TamaguiProvider config={config} defaultTheme={theme}>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Toggle Theme
      </button>
      <YourAppContent />
    </TamaguiProvider>
  );
}

/**
 * Set the global Tamagui configuration
 * @param config - Configuration to set
 */
function setConfig(config: TamaguiInternalConfig): void;

/**
 * Get the current global Tamagui configuration
 * @returns Current configuration
 */
function getConfig(): TamaguiInternalConfig;

/**
 * Safely get the current configuration (returns undefined if not set)
 * @returns Current configuration or undefined
 */
function getConfigMaybe(): TamaguiInternalConfig | undefined;

/**
 * Update existing configuration with new values
 * @param configUpdate - Partial configuration to merge
 */
function updateConfig(configUpdate: Partial<TamaguiConfig>): void;

/**
 * Get a specific setting value
 * @param key - Setting key to retrieve
 * @returns Setting value
 */
function getSetting(key: string): any;

/**
 * Create design tokens with type safety
 * @param tokens - Token definitions
 * @returns Processed tokens
 */
function createTokens<T extends Tokens>(tokens: T): TokensParsed;

/**
 * Create a single design token variable
 * @param value - Token value
 * @param options - Variable options
 * @returns Variable instance
 */
function createVariable<T>(value: T, options?: VariableOptions): Variable<T>;

/**
 * Create multiple design token variables
 * @param tokens - Token definitions
 * @returns Variable instances
 */
function createVariables<T extends Record<string, any>>(tokens: T): VariablesParsed<T>;

/**
 * Create a font configuration
 * @param font - Font definition
 * @returns Font configuration
 */
function createFont<T extends FontConfig>(font: T): T;

interface VariableOptions {
  key?: string;
  name?: string;
}

interface Variable<T = any> {
  key: string;
  name: string;
  val: T;
  variable: string;
}

/**
 * Setup development mode with debugging and hot reload support
 * @param options - Development options
 */
function setupDev(options?: DevOptions): void;

interface DevOptions {
  /** Enable debug logging */
  debug?: boolean;
  /** Enable style inspection */
  visualizer?: boolean;
  /** Development server port */
  port?: number;
}

interface FontConfig {
  /** Font family name or stack */
  family: string;
  /** Font size tokens */
  size?: Record<string | number, number>;
  /** Line height tokens */
  lineHeight?: Record<string | number, number>;
  /** Font weight tokens */
  weight?: Record<string, string>;
  /** Letter spacing tokens */
  letterSpacing?: Record<string | number, number>;
  /** Font face definitions (web) */
  face?: FontFaceConfig[];
}

interface FontFaceConfig {
  /** Font family name */
  fontFamily: string;
  /** Font weight */
  fontWeight?: string;
  /** Font style */
  fontStyle?: string;
  /** Font source URL or local name */
  src: string;
}

const fonts = {
  heading: {
    family: 'Inter, -apple-system, system-ui, sans-serif',
    size: {
      1: 12,
      2: 14,
      3: 16,
      4: 18,
      5: 20,
      6: 24,
      7: 28,
      8: 32,
      9: 36,
      10: 48,
    },
    lineHeight: {
      1: 17,
      2: 22,
      3: 25,
      4: 26,
      5: 28,
      6: 30,
      7: 35,
      8: 40,
      9: 44,
      10: 55,
    },
    weight: {
      normal: '400',
      bold: '700',
    },
    letterSpacing: {
      1: 0,
      2: -0.5,
    },
  },
};

interface AnimationConfig {
  [key: string]: AnimationDriver;
}

interface AnimationDriver {
  /** Animation type */
  type: 'spring' | 'timing' | 'decay';
  /** Spring configuration */
  damping?: number;
  mass?: number;
  stiffness?: number;
  /** Timing configuration */
  duration?: number;
  easing?: string;
  /** Decay configuration */
  deceleration?: number;
  velocity?: number;
}

interface Settings {
  /** Allow font scaling on native */
  allowFontScaling?: boolean;
  /** Animation driver to use */
  animationDriver?: string;
  /** Disable SSR warnings */
  disableSSR?: boolean;
  /** Default font */
  defaultFont?: string;
  /** Should attach debug data */
  shouldAddPrefersColorThemes?: boolean;
  /** Theme class names */
  themeClassNameOnRoot?: boolean;
  /** Maximum inline props */
  maxDarkLightNesting?: number;
}

interface TamaguiInternalConfig {
  animations: AnimationConfig;
  fonts: Record<string, FontConfig>;
  media: MediaConfig;
  shorthands: ShorthandConfig;
  themes: Record<string, Theme>;
  tokens: TokensParsed;
  settings: Settings;
}

interface TokensParsed {
  color: Record<string, Variable>;
  space: Record<string, Variable>;
  size: Record<string, Variable>;
  radius: Record<string, Variable>;
  zIndex: Record<string, Variable>;
}

interface ShorthandConfig {
  [key: string]: string | string[];
}