npm install @tamagui/core

import { createStyledContext, styled, YStack, Text } from '@tamagui/core'

// 1. Define variant types
type CardVariants = {
  size?: 'small' | 'medium' | 'large'
  variant?: 'outlined' | 'filled'
}

// 2. Create context with defaults
const CardContext = createStyledContext<CardVariants>({
  size: 'medium',
  variant: 'filled',
})

// 3. Create parent component
export const Card = styled(YStack, {
  context: CardContext,
  variants: {
    size: {
      small: { padding: '$2', gap: '$2' },
      medium: { padding: '$4', gap: '$3' },
      large: { padding: '$6', gap: '$4' },
    },
    variant: {
      outlined: {
        borderWidth: 1,
        borderColor: '$borderColor',
      },
      filled: {
        backgroundColor: '$background',
      },
    },
  },
})

// 4. Create child components that inherit context
export const CardTitle = styled(Text, {
  context: CardContext,
  variants: {
    size: {
      small: { fontSize: '$3', fontWeight: '600' },
      medium: { fontSize: '$5', fontWeight: '600' },
      large: { fontSize: '$7', fontWeight: '700' },
    },
  },
})

export const CardDescription = styled(Text, {
  context: CardContext,
  variants: {
    size: {
      small: { fontSize: '$2', color: '$color11' },
      medium: { fontSize: '$3', color: '$color11' },
      large: { fontSize: '$4', color: '$color11' },
    },
  },
})

// 5. Use the compound component
function Example() {
  return (
    <Card size="large" variant="outlined">
      <CardTitle>Title</CardTitle>
      <CardDescription>Description</CardDescription>
    </Card>
  )
}

function createStyledContext<VariantProps>(
  defaultValues?: VariantProps,
  namespace?: string
): StyledContext<VariantProps>

const Component = styled(BaseComponent, {
  context: MyContext,
  variants: {
    // Variants that match context props
  },
})

const CardContext = createStyledContext<CardVariants>(
  { size: 'medium' },
  'card' // namespace
)

const Card = styled(YStack, {
  context: CardContext,
  // ...
})

// Usage with scoping
<Card scope="outer-card">
  <CardTitle>Outer</CardTitle>
  
  <Card scope="inner-card">
    <CardTitle>Inner</CardTitle> {/* Uses inner-card scope */}
  </Card>
</Card>

const CardContext = createStyledContext<CardVariants>()

function CustomCardElement() {
  const { size, variant } = CardContext.useStyledContext()
  
  return (
    <div>
      Size: {size}, Variant: {variant}
    </div>
  )
}

const CardContext = createStyledContext<CardVariants>()

function CustomCard({ children, size, variant }) {
  return (
    <CardContext.Provider size={size} variant={variant}>
      {children}
    </CardContext.Provider>
  )
}

<CardContext.Provider
  size="large"
  variant="outlined"
  __disableMergeDefaultValues // Skip merging with defaults
>
  {children}
</CardContext.Provider>

type FormVariants = {
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
  required?: boolean
}

const FormContext = createStyledContext<FormVariants>({
  size: 'md',
  disabled: false,
  required: false,
})

export const Form = styled(YStack, {
  context: FormContext,
  tag: 'form',
  gap: '$4',
  variants: {
    disabled: {
      true: { opacity: 0.5, pointerEvents: 'none' },
    },
  },
})

export const FormField = styled(YStack, {
  context: FormContext,
  gap: '$2',
})

export const FormLabel = styled(Text, {
  context: FormContext,
  variants: {
    size: {
      sm: { fontSize: '$2' },
      md: { fontSize: '$3' },
      lg: { fontSize: '$4' },
    },
    required: {
      true: {
        // Add asterisk via pseudo-element
        '$after': {
          content: '*',
          color: '$red10',
        },
      },
    },
  },
})

export const FormInput = styled(Input, {
  context: FormContext,
  variants: {
    size: {
      sm: { height: 32 },
      md: { height: 40 },
      lg: { height: 48 },
    },
    disabled: {
      true: {
        backgroundColor: '$gray3',
        cursor: 'not-allowed',
      },
    },
  },
})

// Usage
<Form size="lg" disabled={isSubmitting}>
  <FormField>
    <FormLabel required>Email</FormLabel>
    <FormInput placeholder="[email protected]" />
  </FormField>
</Form>

type ListVariants = {
  size?: 'compact' | 'comfortable' | 'spacious'
  dividers?: boolean
}

const ListContext = createStyledContext<ListVariants>({
  size: 'comfortable',
  dividers: true,
})

export const List = styled(YStack, {
  context: ListContext,
})

export const ListItem = styled(XStack, {
  context: ListContext,
  alignItems: 'center',
  variants: {
    size: {
      compact: { padding: '$2', gap: '$2' },
      comfortable: { padding: '$3', gap: '$3' },
      spacious: { padding: '$4', gap: '$4' },
    },
    dividers: {
      true: {
        borderBottomWidth: 1,
        borderBottomColor: '$borderColor',
      },
    },
  },
})

export const ListItemText = styled(YStack, {
  context: ListContext,
  flex: 1,
  variants: {
    size: {
      compact: { gap: '$1' },
      comfortable: { gap: '$2' },
      spacious: { gap: '$3' },
    },
  },
})

// Usage
<List size="spacious" dividers={false}>
  <ListItem>
    <ListItemText>
      <Text>Title</Text>
      <Text fontSize="$2" color="$color11">Subtitle</Text>
    </ListItemText>
  </ListItem>
</List>

type NavVariants = {
  orientation?: 'horizontal' | 'vertical'
  size?: 'sm' | 'md' | 'lg'
  variant?: 'default' | 'pills' | 'underline'
}

const NavContext = createStyledContext<NavVariants>({
  orientation: 'horizontal',
  size: 'md',
  variant: 'default',
})

export const Nav = styled(XStack, {
  context: NavContext,
  variants: {
    orientation: {
      horizontal: { flexDirection: 'row' },
      vertical: { flexDirection: 'column' },
    },
  },
})

export const NavItem = styled(Stack, {
  context: NavContext,
  cursor: 'pointer',
  variants: {
    size: {
      sm: { padding: '$2' },
      md: { padding: '$3' },
      lg: { padding: '$4' },
    },
    variant: {
      default: {
        hoverStyle: { backgroundColor: '$backgroundHover' },
      },
      pills: {
        borderRadius: '$4',
        hoverStyle: { backgroundColor: '$backgroundHover' },
      },
      underline: {
        borderBottomWidth: 2,
        borderBottomColor: 'transparent',
        hoverStyle: { borderBottomColor: '$borderColor' },
      },
    },
  },
})

// Usage
<Nav orientation="horizontal" variant="pills" size="lg">
  <NavItem>Home</NavItem>
  <NavItem>About</NavItem>
  <NavItem>Contact</NavItem>
</Nav>

// Lazy initialization prevents SSR issues
const createReactContext = React[
  Math.random() ? 'createContext' : 'createContext'
] as typeof React.createContext

const OGContext = createReactContext<VariantProps | undefined>(defaultValues)
const scopedContexts = new Map<string, Context<VariantProps | undefined>>()

const next = useReactMemo(() => {
  if (__disableMergeDefaultValues) {
    return values
  }
  return mergeProps(defaultValues!, values)
}, [objectIdentityKey(values)])

const useStyledContext = (scopeIn = '') => {
  const lastScopeInNamespace = useReactContext(LastScopeInNamespace)
  const scope = namespace
    ? scopeIn
      ? getNamespacedScope(scopeIn)
      : lastScopeInNamespace
    : scopeIn
  const context = scope ? getOrCreateScopedContext(scope) : OGContext
  const value = useReactContext(context!) as VariantProps
  return value
}

// Only re-renders when size or variant changes
<Card size={size} variant={variant}>
  <CardTitle>Title</CardTitle>
</Card>

// Uses objectIdentityKey for efficient change detection
const next = useReactMemo(() => {
  return mergeProps(defaultValues!, values)
}, [objectIdentityKey(values)])

type CardVariants = {
  size?: 'small' | 'medium' | 'large'
  variant?: 'outlined' | 'filled'
}

const CardContext = createStyledContext<CardVariants>()

// TypeScript knows valid props!
<Card size="small" />    // ✓
<Card size="tiny" />     // ✗ Type error
<Card variant="ghost" /> // ✗ Type error

import { GetProps } from '@tamagui/core'

type CardProps = GetProps<typeof Card>
// Includes size, variant, and all YStack props

function DebugCard({ children, ...props }) {
  const context = CardContext.useStyledContext()
  
  console.log('Card context:', context)
  
  return <Card {...props}>{children}</Card>
}