Component Creation & Styling

/**
 * Creates a styled component with design tokens, variants, and responsive styles
 * @param component - Base component to style (View, Text, or custom component)
 * @param config - Style configuration with base styles and variants
 * @returns New Tamagui component with styling capabilities
 */
function styled<T extends React.ComponentType<any>>(
  component: T,
  config: StyledOptions,
  options?: ComponentOptions
): TamaguiComponent;

interface StyledOptions {
  /** Component name for debugging */
  name?: string;
  /** Variant definitions for dynamic styling */
  variants?: VariantsConfig;
  /** Default variant values */
  defaultVariants?: Record<string, any>;
  /** Base style properties using design tokens */
  [key: string]: any;
}

interface ComponentOptions {
  /** Treat component as text component */
  isText?: boolean;
  /** Accept specific props for validation */
  accept?: Record<string, any>;
  /** Inline props that bypass styling system */
  inlineProps?: Set<string>;
}

interface VariantsConfig {
  [variantName: string]: {
    [variantValue: string]: StyleObject | (() => StyleObject);
  };
}

import { styled, View, Text } from "@tamagui/core";

// Basic styled component
const Card = styled(View, {
  backgroundColor: '$background',
  padding: '$4',
  borderRadius: '$3',
  shadowOpacity: 0.1,
  shadowRadius: 10,
});

// Component with variants
const Button = styled(View, {
  paddingHorizontal: '$4',
  paddingVertical: '$2',
  borderRadius: '$2',
  alignItems: 'center',
  justifyContent: 'center',
  
  variants: {
    size: {
      small: {
        paddingHorizontal: '$2',
        paddingVertical: '$1',
      },
      large: {
        paddingHorizontal: '$6',
        paddingVertical: '$3',
      },
    },
    color: {
      primary: {
        backgroundColor: '$blue',
      },
      secondary: {
        backgroundColor: '$gray',
      },
    },
    disabled: {
      true: {
        opacity: 0.5,
        pointerEvents: 'none',
      },
    },
  },
  
  defaultVariants: {
    size: 'medium',
    color: 'primary',
  },
});

// Text component with typography variants
const Heading = styled(Text, {
  fontWeight: 'bold',
  color: '$text',
  
  variants: {
    level: {
      1: { fontSize: '$8' },
      2: { fontSize: '$6' },
      3: { fontSize: '$5' },
    },
  },
}, {
  isText: true,
});

/**
 * Creates a Tamagui component with full configuration control
 * @param config - Complete component configuration
 * @returns New Tamagui component
 */
function createComponent<Props = {}>(
  config: ComponentConfig<Props>
): TamaguiComponent;

interface ComponentConfig<Props = {}> {
  /** Base component to wrap */
  component?: React.ComponentType<any>;
  /** Component name for debugging */
  componentName?: string;
  /** Default styles */
  defaultStyles?: StyleObject;
  /** Variant configuration */
  variants?: VariantsConfig;
  /** Default variant values */
  defaultVariants?: Record<string, any>;
  /** Style prop acceptance rules */
  accept?: Record<string, any>;
  /** Text component flag */
  isText?: boolean;
}

/**
 * Check if a component is a Tamagui component
 * @param component - Component to check
 * @returns True if component is a Tamagui component
 */
function isTamaguiComponent(component: any): component is TamaguiComponent;

/**
 * Check if an element is a Tamagui element
 * @param element - Element to check
 * @returns True if element is a Tamagui element
 */
function isTamaguiElement(element: any): element is TamaguiElement;

// Using media queries in styled components
const ResponsiveView = styled(View, {
  padding: '$2',
  
  $sm: {
    padding: '$4',
  },
  
  $lg: {
    padding: '$6',
    flexDirection: 'row',
  },
});

// Using media queries in variants
const ResponsiveButton = styled(View, {
  variants: {
    size: {
      responsive: {
        padding: '$2',
        $sm: { padding: '$3' },
        $lg: { padding: '$4' },
      },
    },
  },
});

const InteractiveButton = styled(View, {
  backgroundColor: '$blue',
  
  hoverStyle: {
    backgroundColor: '$blueHover',
  },
  
  pressStyle: {
    backgroundColor: '$bluePress',
    transform: [{ scale: 0.98 }],
  },
  
  focusStyle: {
    borderColor: '$blueFocus',
    borderWidth: 2,
  },
});

const ThemedCard = styled(View, {
  backgroundColor: '$cardBackground',
  borderColor: '$borderColor',
  borderWidth: 1,
  
  variants: {
    emphasis: {
      high: {
        backgroundColor: '$accentBackground',
        borderColor: '$accentBorder',
      },
    },
  },
});

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

interface AnimationDriver {
  type: 'spring' | 'timing' | 'decay';
  [key: string]: any;
}

const AnimatedView = styled(View, {
  backgroundColor: '$background',
  
  animation: 'quick',
  
  enterStyle: {
    opacity: 0,
    scale: 0.9,
  },
  
  exitStyle: {
    opacity: 0,
    scale: 0.9,
  },
});

interface StyleObject {
  [key: string]: any;
}

interface TamaguiComponent<A = any, B = any, C = any, D = any, E = any> 
  extends React.ForwardRefExoticComponent<C & D & ComponentProps> {
  staticConfig: StaticConfig;
}

interface StaticConfig {
  componentName?: string;
  variants?: VariantsConfig;
  defaultVariants?: Record<string, any>;
  accept?: Record<string, any>;
  isText?: boolean;
  isZStack?: boolean;
  validStyles?: Record<string, boolean>;
}

interface ComponentProps {
  /** Animation configuration */
  animation?: string | AnimationConfig;
  /** Enter animation styles */
  enterStyle?: StyleObject;
  /** Exit animation styles */
  exitStyle?: StyleObject;
  /** Hover state styles */
  hoverStyle?: StyleObject;
  /** Press state styles */
  pressStyle?: StyleObject;
  /** Focus state styles */
  focusStyle?: StyleObject;
  /** Theme to use for this component */
  theme?: string;
  /** Debug information */
  debug?: boolean | 'verbose';
}